@extends('admin.layouts.master')

@section('content')
    <style>
        td>input.form-control::placeholder {
            color: #BBB;
        }

        .search-not-include,
        .price-not-include {
            display: none;
        }
    </style>
    <form id="fixture-bargain-price-form" onsubmit="submitFixtureBargainPrices(event)" class="card">
        <input type="hidden" name="game_round_id" value="{{ $gameRound->id }}">
        <div class="card-header d-sm-flex d-block">
            <div class="me-auto mb-sm-0 mb-3">
                <h4 class="card-title mb-2">ตั้งค่าราคา</h4>
                <span>รอบวันที่ {{ $gameRound->date->format('d/m/Y') }}</span>
            </div>
            {{-- <a href="javascript:;" onclick="showFixtureModal()" class="btn btn-info"><i class="fas fa-plus"></i> เพิ่มคู่แข่งขัน</a> --}}
            <span>{{ $gameRound->fixtures_count }}</span>
            @if ($gameRound->status === \App\GameRound::STATUS_AVAILABLE)
                <button type="button" onclick="createFixtureFromApi()" class="btn btn-info ms-2">
                    <i class="fas fa-download"></i>
                    ดึงข้อมูลคู่แข่งขัน
                </button>
                <button type="submit" class="btn btn-success ms-2"><i class="far fa-save"></i> บันทึก</button>
            @endif
        </div>
        <div class="card-body">
            <div class="d-flex gap-2">
                <select id="filter-price-select" class="form-select mb-3 w-auto" onchange="filterTable()">
                    <option value="">แสดงทั้งหมด</option>
                    <option value="1">เฉพาะที่ตั้งราคา</option>
                </select>
                <input id="filter-search-input" type="search" class="form-control mb-3" placeholder="ค้นหา"
                    oninput="filterTable()" />
            </div>
            <p class="text-nowrap align-self-center0">
                แสดง <span id="fixture-count">{{ number_format(count($gameRound->fixtures)) }}</span> จากทั้งหมด
                {{ number_format(count($gameRound->fixtures)) }} รายการ
            </p>
            <div class="table-responsive">
                <table id="main-table" class="table-responsive table-bordered table">
                    <thead>
                        <th class="text-center align-middle">เวลา</th>
                        <th class="text-center align-middle" colspan="2">ลีกส์</th>
                        <th class="text-center align-middle" colspan="2">ทีมเหย้า</th>
                        <th class="text-center align-middle" colspan="3">ตั้งค่าราคา</th>
                        <th class="text-center align-middle" colspan="2">ทีมเยือน</th>
                        <th class="text-center align-middle">ดำเนินการ</th>
                    </thead>
                    <tbody>
                        @foreach ($gameRound->fixtures as $fixture)
                            <tr data-fixture-id="{{ $fixture->id }}" data-fixture-code="{{ $fixture->code }}"
                                class="{{ $fixture->status !== \App\Fixture::STATUS_NOT_STARTED || $gameRound->status !== \App\GameRound::STATUS_AVAILABLE ? 'bg-opacity-25 bg-dark opacity-50' : '' }}"
                                title="{{ $fixture->status_detail['text'] }}">
                                <td class="text-wrap small text-center align-middle">
                                    {{ $fixture->date->format('Y-m-d H:i') }}
                                </td>
                                <td class="text-center align-middle" width="5%">
                                    <img loading="lazy" src="{{ $fixture->league->logo }}" class="img-fluid" alt="">
                                </td>
                                <td class="text-center align-middle">{{ $fixture->league->name }}</td>
                                <td class="text-center align-middle" width="5%">
                                    <img loading="lazy" src="{{ $fixture->homeTeam->logo }}" class="img-fluid" alt="">
                                </td>
                                <td class="text-center align-middle">{{ $fixture->homeTeam->name }}</td>
                                <td class="text-center align-middle" width="10%">
                                    <input name="bet_home[{{ $fixture->id }}]" type="number" placeholder="เจ้าบ้าน"
                                        class="form-control form-control-sm text-center" step="0.01"
                                        value="{{ $fixture->bet_home }}" style="min-width: 85px;"
                                        {{ $fixture->status !== \App\Fixture::STATUS_NOT_STARTED || $gameRound->status !== \App\GameRound::STATUS_AVAILABLE ? 'disabled' : '' }} />
                                </td>
                                <td class="text-center align-middle" width="10%">
                                    <input name="bet_bargain[{{ $fixture->id }}]" type="number" placeholder="ต่อ/รอง"
                                        class="form-control form-control-sm text-center" step="0.25" max="1.75"
                                        min="0.00" value="{{ $fixture->bet_bargain }}" style="min-width: 85px;"
                                        {{ $fixture->status !== \App\Fixture::STATUS_NOT_STARTED || $gameRound->status !== \App\GameRound::STATUS_AVAILABLE ? 'disabled' : '' }} />
                                </td>
                                <td class="text-center align-middle" width="10%">
                                    <input name="bet_away[{{ $fixture->id }}]" type="number" placeholder="ทีมเยือน"
                                        class="form-control form-control-sm text-center" step="0.01"
                                        value="{{ $fixture->bet_away }}" style="min-width: 85px;"
                                        {{ $fixture->status !== \App\Fixture::STATUS_NOT_STARTED || $gameRound->status !== \App\GameRound::STATUS_AVAILABLE ? 'disabled' : '' }} />
                                </td>
                                <td class="text-center align-middle" width="5%">
                                    <img loading="lazy" src="{{ $fixture->awayTeam->logo }}" class="img-fluid" alt="">
                                </td>
                                <td class="text-center align-middle">{{ $fixture->awayTeam->name }}</td>
                                <td class="text-center align-middle">
                                    @if ($fixture->status === \App\Fixture::STATUS_NOT_STARTED && $gameRound->status === \App\GameRound::STATUS_AVAILABLE)
                                        <button type="button" class="btn btn-danger btn-xs sharp ms-1"
                                            onclick="removeFixture({{ $fixture->id }})">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </form>
@endsection

@section('script')
    <script src="{{ asset('nisk/nisk.js?v=0.0.1') }}"></script>
    <script>
        const fixtureTableEl = document.getElementById('main-table');
        const filterSearchInput = document.getElementById('filter-search-input');
        const filterPriceSelectBox = document.getElementById('filter-price-select');
        const gameRoundInput = document.querySelector('[name="game_round_id"]');
        const fixtureCountSpan = document.getElementById('fixture-count');

        const config = {
            footballTable: {
                endpoint: `{{ route('admin.api-demo') }}`,
                target: $('#league-table'),
            },
            fixture: {
                createFixtureFromApiEndpoint: '/admin/game-round/{gameRound}/api-create',
                removeFixtureEndpoint: `/admin/fixture/{fixture}`,
                submitBargainPricesEndpoint: `/admin/fixture/bargain-price`,
            }
        };

        const $fixtureBargainPriceForm = document.getElementById('fixture-bargain-price-form');

        async function submitFixtureBargainPrices(event) {
            event.preventDefault();
            $('#preloader').fadeIn();
            const gameRoundId = gameRoundInput.value;
            const formData = new FormData()
            formData.append('game_round_id', gameRoundId);
            for (const input of document.forms['fixture-bargain-price-form'].elements) {
                if (isNaN(input.valueAsNumber)) continue;
                formData.append(input.name, input.valueAsNumber);
            }

            const res = await axios.post(config.fixture.submitBargainPricesEndpoint, formData)
                .catch(submitFailedResponseHandler);

            return submitResponseHandler(res.data);
        }

        function submitResponseHandler(response) {
            $('#preloader').fadeOut()
            if (!response.success) {
                return swal('ไม่สามารถดำเนินการได้', response.message, 'error', {
                    buttons: false,
                })
            }

            return swal('ดำเนินการเรียบร้อย', ' ', 'success', {
                buttons: false,
                timer: 1500,
            }) // .then(() => location.reload());
        }

        function submitFailedResponseHandler(err) {
            console.error(err);
            $('#preloader').fadeOut()
            return swal(
                'ไม่สามารถดำเนินการได้',
                err.message,
                'error', {
                    buttons: false
                }
            );
        }

        let timeout;

        function filterTable() {

            clearTimeout(timeout);
            timeout = setTimeout(() => {
                let fixtureCount = 0;
                for (const row of fixtureTableEl.tBodies[0].rows) {
                    // Search filter
                    const searchFound = row.textContent
                        .toLowerCase()
                        .includes(filterSearchInput.value.toLowerCase());

                    if (!filterSearchInput.value || searchFound) {
                        row.classList.remove('search-not-include');
                    } else {
                        row.classList.add('search-not-include');
                    }

                    // Price filter
                    const filterPrice = !!filterPriceSelectBox.value;
                    const showRow = !filterPrice || Array.from(row.querySelectorAll('input')).every(input => !!input
                        .value);
                    if (showRow) {
                        row.classList.remove('price-not-include');
                    } else {
                        row.classList.add('price-not-include');
                    }

                    if (
                        !row.classList.contains('price-not-include') &&
                        !row.classList.contains('search-not-include')
                    ) {
                        fixtureCount += 1;
                    }
                }
                fixtureCountSpan.textContent = fixtureCount.toLocaleString('th-TH');
            }, 500);
        }

        function showFixtureModal() {
            $('#add-fixture-modal').modal('show');
        }

        async function createFixtureFromApi() {
            try {
                $('#preloader').fadeIn();
                const gameRoundId = gameRoundInput.value;
                const createFixtureFromApiRoute = config.fixture.createFixtureFromApiEndpoint.replace('{gameRound}',
                    gameRoundId);

                const {
                    data
                } = await axios.post(createFixtureFromApiRoute)
                if (data.success) {
                    window.location.reload();
                }
            } catch (e) {
                console.error(e);
                swal('ขออภัย', 'ไม่สามารถดำเนินการได้', 'error');
            } finally {
                $('#preloader').fadeOut();
            }
        }

        async function removeFixture(fixtureId) {
            try {
                const confirm = await swal('ยืนยันการลบ?', 'หากกรอกราคาแล้ว กรุณาบันทึกก่อนทำการลบคู่แข่งขัน',
                    'warning', {
                        buttons: ['ยกเลิก', 'ยืนยัน'],
                        dangerMode: 1,
                    });

                $('#preloader').fadeIn();

                if (!confirm) return;

                const removeFixtureRoute = config.fixture.removeFixtureEndpoint
                    .replace('{gameRound}', gameRoundId)
                    .replace('{fixture}', fixtureId);

                const execute = await axios.delete(removeFixtureRoute);
                const response = execute.data;
                if (response.success) {
                    window.location.reload()
                }
            } catch (e) {
                console.error(e);
                swal('ขออภัย', 'ไม่สามารถดำเนินการได้', 'error');
            } finally {
                $('#preloader').fadeOut();
            }
        }
    </script>
@endsection

@section('modal')
    <div id="add-fixture-modal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <form class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">เพิ่มคู่แข่งขัน</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table id="league-table" class="table-bordered table">
                        <thead>
                            <tr>
                                <th class="text-center align-middle">เลือก</th>
                                <th class="text-center align-middle">เวลา</th>
                                <th class="text-center align-middle" colspan="2">ลีกส์</th>
                                <th class="text-center align-middle" colspan="2">เหย้า</th>
                                <th class="text-center align-middle" colspan="2">เยือน</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="fas fa-times"></i>
                        ปิด</button>
                    <button type="submit" class="btn btn-success"><i class="far fa-save"></i> บันทึก</button>
                </div>
            </form>
        </div>
    </div>
@endsection