@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 for="exampleFormControlSelect1">เกมส์ <span class="text-danger">*</span></label>
                            <select id="select-game-id" class="form-select" name="game_id" required></select>
                        </div>
                        <div class="form-group">
                            <label>ชื่อรอบ <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="round_name"
                                placeholder="กรุณากรอกชื่อรอบ" required />
                        </div>
                        <div class="form-group">
                            <label>รอบวันที่ <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="date" placeholder="" required />
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label>วันที่เปิด <span class="text-danger">*</span></label>
                                    <input type="datetime-local" class="form-control" name="start"
                                        placeholder="" required/>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label>วันที่ปิด <span class="text-danger">*</span></label>
                                    <input type="datetime-local" class="form-control" name="end"
                                        placeholder="" required/>
                                </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=""
                                            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 }}">{{ $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=""
                                            placeholder="" />
                                        <div class="input-group-text" id="point-type-unit">
                                            แต้ม
                                        </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 src="{{ asset('nisk/nisk.js?v=0.0.1') }}"></script>
    <script>
        const $pointTypeUnit = document.getElementById('point-type-unit');
        const config = {
            footballTable: {
                endpoint: `{{ route('admin.api-demo') }}`,
                target: $('#league-table'),
            },
            endpoint: `{{ route('admin.api-demo') }}`,
            gameRoundEndpoint: `{{ route('admin.game-round.index') }}`,
        };
        $(() => {
            fetchGamesForSelect();
            FootballTable.init();
        });

        async function loadLeagueTale() {
            const execute = await axios.get(config.endpoint);
            const response = execute.data;
        }

        async function fetchGamesForSelect() {
            const execte = await axios.get('/admin/games/all');
            const response = execte.data;
            let option = ``;
            for (const k in response.data) {
                const item = response.data[k];
                option += `<option value="${item.id}">${item.name}</option>`;
            }
            $('#select-game-id').html(option);
        }

        async function formSubmitHandler(event, element) {
            event.preventDefault();
            const self = $(element);
            const formData = self.serializeArray();
            const execute = await axios.post(config.gameRoundEndpoint, $.param(formData));
            const response = execute.data;

            if (response.success) {
                window.location.href = config.gameRoundEndpoint;
            }
        }

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