@extends('admin.layouts.master')

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

        .search-not-include,
        .price-not-include {
            display: none;
        }
    </style>
    <div 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> --}}
            <button type="button" onclick="checkFixtureResult()" class="btn btn-primary 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> --}}
        </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>
                        <tr class="border">
                            <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>
                            <th class="text-center align-middle">ผลการแข่ง</th>
                            {{-- <th class="text-center align-middle">ดำเนินการ</th> --}}
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($gameRound->fixtures as $fixture)
                            <tr data-fixture-id="{{ $fixture->id }}" data-fixture-code="{{ $fixture->code }}">
                                <td class="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" data-price width="5%">{{ $fixture->bet_home }}
                                </td>
                                <td class="text-center align-middle" data-price width="5%">{{ $fixture->bet_bargain }}
                                </td>
                                <td class="text-center align-middle" data-price width="5%">{{ $fixture->bet_away }}
                                </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">
                                    <span
                                        class="badge {{ $fixture->status_detail['color']['bg'] }} {{ $fixture->status_detail['color']['text'] }}"
                                        data-toggle="tooltip"
                                        title="{{ $fixture->note }}">{{ $fixture->status_detail['text'] }}</span>
                                </td>
                                <td class="text-nowrap text-center align-middle">{{ $fixture->home_goals }} -
                                    {{ $fixture->away_goals }}</td>
                                {{-- <td class="text-center align-middle">
                                    <button class="btn btn-danger btn-xs sharp ms-1"
                                        onclick="removeFixture({{ $fixture->id }})">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td> --}}
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@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: {
                checkFixtureResult: '/admin/game-round/{gameRound}/api-result',
            }
        };

        $(() => {
            $('[data-toggle="tooltip"]').tooltip();
        });

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

        async function checkFixtureResult() {
            try {
                $('#preloader').fadeIn();
                const gameRoundId = document.querySelector('[name="game_round_id"]').value;
                const checkFixtureResultRoute = config.fixture.checkFixtureResult.replace('{gameRound}', gameRoundId);
                const {
                    data
                } = await axios.post(checkFixtureResultRoute)
                if (data.success) {
                    window.location.reload();
                }
            } catch (e) {
                console.error(e);
                swal('ขออภัย', 'ไม่สามารถดำเนินการได้', 'error');
            } finally {
                $('#preloader').fadeOut()
            }
        }

        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('[data-price]')).every(td => !!
                        td.textContent.trim());
                    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);
        }
    </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