@extends('admin.layouts.master')

@section('content')
    <div class="card">
        <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>Lorem Ipsum sit amet</span> --}}
            </div>
            {{-- <a href="javascript:void(0);" class="btn btn-info light me-3"><i
                class="las la-download scale3 me-2"></i>Download Csv</a> --}}
            <a href="{{ route('admin.game-round.create') }}" class="btn btn-info">เพิ่มรอบเกมส์</a>
        </div>
        <data-card class="card-body px-0">
            <tmd-paginator class="px-3" id="paginator">
                <div class="table-responsive">
                    <table id="main-table" class="table-bordered table-responsive-sm table-hover table">
                        <thead>
                            <th class="text-nowrap ps-3 align-middle">#</th>
                            <th class="text-nowrap align-middle">เกมส์</th>
                            <th class="text-nowrap align-middle">ชื่อรอบ</th>
                            <th class="text-nowrap align-middle">รอบวันที่</th>
                            <th class="text-nowrap align-middle">เปิด/ปิดรับแทง</th>
                            <th class="text-nowrap align-middle">จำนวนแมทช์<br />ทายได้ / ทั้งหมด</th>
                            <th class="text-nowrap align-middle">จำกัด</th>
                            <th class="text-nowrap align-middle">ใช้แต้ม</th>
                            <th class="text-nowrap align-middle">สถานะ</th>
                            <th class="text-nowrap align-middle"><i class="fas fa-cogs"></i></th>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </tmd-paginator>
        </data-card>
    </div>
@endsection

@section('script')
    <script src="{{ asset('js/paginatorElement.js?v=0.0.1') }}"></script>
    <script>
        const paginator = document.getElementById('paginator');
        const tableEl = document.getElementById('main-table');
        const config = {
            index: `{{ route('admin.game-round.index') }}`,
        };

        const pagination = {
            per_page: 10,
            page: 1,
        };

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

        async function fetchGameRounds() {
            const query = new URLSearchParams(pagination).toString() + '&order_by[0][0]=id&order_by[0][1]=desc';
            const response = await axios.get('/admin/game-round?' + query).then(res => res.data);
            paginator.count = response.data.data.length;
            paginator.perPage = response.data.per_page;
            paginator.currentPage = response.data.current_page;
            paginator.total = response.data.total;
            return renderTr(response.data);
        }

        function renderTr(datas) {
            let tr = ``;
            for (const item of datas.data) {
                tr += (
                    `<tr>
                        <td class="text-nowrap ps-3">${item.id}</td>
                        <td class="text-nowrap">${item.game.name}</td>
                        <td class="text-nowrap">${item.round_name}</td>
                        <td class="text-nowrap">${new Date(item.date).toLocaleDateString('th-TH', {dateStyle: 'short'})}</td>
                        <td class="text-nowrap">
                          <div class="d-flex gap-1 font-w500">
                            <span class="text-info">${new Date(item.start).toLocaleString('th-TH', {timeStyle: 'short'})}</span>
                            <span>-</span>
                            <span class="text-danger">${new Date(item.end).toLocaleString('th-TH', {timeStyle: 'short'})}</span>
                          </div>
                        </td>
                        <td class="text-nowrap">
                          ${item.ready_to_bet_fixtures_count.toLocaleString('th-TH') ?? '-'} / ${item.fixtures_count.toLocaleString('th-TH') ?? '-'}
                        </td>
                        <td class="text-nowrap">${item.user_limit?.toLocaleString?.('th-TH') ?? '-'}</td>
                        <td class="text-nowrap">
                          ${item.required_points
                            ? `${item.required_points.toLocaleString?.('th-TH')} ${item.required_point_type_detail.name}`
                            : '-'
                          }
                        </td>
                        <td class="text-nowrap">
                          <span class="badge badge-sm ${item.status_detail.color.bg} ${item.status_detail.color.text}">
                            ${item.status_detail.text}
                          </span>
                        </td>
                        <td>
                            <a data-toggle="tooltip" title="ตั้งค่าราคา" href="/admin/game-round/${item.id}/edit-fixture" class="btn btn-info px-2 py-1"><i class="fa-solid fa-fw fa-dollar-sign"></i></a>
                            <a data-toggle="tooltip" title="ผลการแข่ง" href="/admin/game-round/${item.id}/fixture-result" class="btn btn-primary px-2 py-1"><i class="fa-solid fa-fw fa-square-poll-vertical"></i></a>
                            <a data-toggle="tooltip" title="แก้ไข" href="${config.index}/${item.id}/edit" class="btn btn-warning px-2 py-1"><i class="fa-solid fa-fw fa-pen-to-square"></i></a>
                            <button onclick="removeItem(this)" data-toggle="tooltip" title="ลบ" data-item-id="${item.id}" class="btn btn-danger px-2 py-1"><i class="fa-solid fa-fw fa-trash"></i></button>
                        </td>
                    </tr>`
                );
            }
            fillTbody(tr);
            $('[data-toggle="tooltip"]').tooltip();
        }

        function fillTbody(tr) {
            tableEl.querySelector('tbody').innerHTML = tr;
        }

        paginator.addEventListener('tmd-paginate.perPage.changed', e => {
            console.log(e);
            // Ignore initial
            if (e.detail.changedCount === 1) return;

            pagination.per_page = e.detail.perPage;
            pagination.page = 1;
            return fetchGameRounds();
        })

        paginator.addEventListener('tmd-paginate.currentPage.changed', e => {
            console.log(e);
            // Ignore initial
            if (e.detail.changedCount === 1) return;

            pagination.page = e.detail.currentPage;
            return fetchGameRounds();
        })

        /**
         * Remove Game Round.
         */
        function removeItem(element) {
            const self = $(element);
            const itemId = self.data('item-id');

            return swal('ยืนยันการลบ?', ' ', 'info', {
                buttons: ['ยกเลิก', 'ยืนยัน'],
            }).then(async (sure) => {
                if (!sure) return false;

                const execute = await axios.delete(`${config.index}/${itemId}`);
                const response = execute.data;

                if (response.success) {
                    return swal('สำเร็จ', 'ลบรายการเรียบร้อย', 'success').then(() => {
                        fetchGameRounds();
                    });
                } else {
                    return swal('Error!', 'ลบรายการไม่สำเร็จ', 'error');
                }
            });
        }
    </script>
@endsection