@extends('admin.layouts.master')

@section('content')
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">แก้ไขรอบเกมส์</h4>
        </div>
        <div class="card-body">
            <div class="basic-form">
                <form onsubmit="formSubmitHandler(event, this)">
                    <div class="mb-3">
                        <div class="form-group">
                            <label>ชื่อรอบ</label>
                            <input type="text" value="{{ $game_round->round_name }}" class="form-control input-default"
                                name="round_name" placeholder="กรุณากอกชื่อรอบ" />
                        </div>
                        <div class="form-group">
                            <label>รอบวันที่</label>
                            <input type="date" class="form-control input-detaul" name="date"
                                value="{{ $game_round->date ? $game_round->date->format('Y-m-d') : '' }}" placeholder="" />
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label>วันที่เปิด</label>
                                    <input type="datetime-local" class="form-control input-default" name="start"
                                        value="{{ $game_round->start }}" placeholder="" />
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label>วันที่ปิด</label>
                                    <input type="datetime-local" class="form-control input-default" name="end"
                                        value="{{ $game_round->end }}" placeholder="" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label>จำกัดผู้เข้าร่วม <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="number" min="0" step="1" class="form-control"
                                            name="user_limit" value="{{ $game_round->user_limit }}" placeholder="" required />
                                        <div class="input-group-text">คน</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label>ประเภทแต้มที่ใช้สำหรับการสมัคร</label>
                                    <select class="form-select" name="required_point_type" value="" placeholder=""
                                        onchange="changePointType(event)">
                                        <option value="" disabled selected>โปรดเลือก</option>
                                        @foreach (\App\Enums\PointTypeEnum::toArray() as $value => $label)
                                            <option value="{{ $value }}" {{ $game_round->required_point_type->value === $value ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label>จำนวน</label>
                                    <div class="input-group">
                                        <input type="number" min="0" step="1" class="form-control"
                                            name="required_points" value="{{ $game_round->required_points }}" placeholder="" />
                                        <div class="input-group-text" id="point-type-unit">
                                            {{ $game_round->required_point_type->label }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary w-100 mt-3">แก้ไขรอบเกมส์</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        const $pointTypeUnit = document.getElementById('point-type-unit');
        const config = {
            endpoint: `{{ route('admin.game-round.index') }}`,
            itemId: `{{ $game_round->id }}`,
            itemData: null,
        }

        async function formSubmitHandler(event, element) {
            event.preventDefault();
            const self = $(element);
            const formData = self.serialize();
            const execute = await axios.put(`${config.endpoint}/${config.itemId}`, formData);
            const response = execute.data;

            if (response.success) {
                window.location.href = `${config.endpoint}`;
            }
        }

        function changePointType(event) {
            $pointTypeUnit.textContent = event.target.selectedOptions[0].textContent;
        }
    </script>
@endsection