@extends('admin.layouts.master')

@section('content')
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">Teams</h4>
            <div class="d-flex justify-content-between">
            <input type="text" onkeyup="textFilter(this)" class="form-control" placeholder="ค้นหา...">
            <input type="date" onchange="fetch()" value="{{ date('Y-m-d') }}" class="form-control" style="margin-left: 1.5rem;" id="date-filter">
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered verticle-middle table-responsive-sm">
                    <thead>
                    <tr>
                        <th scope="col">Match Time</th>
                        <th scope="col" colspan="2">League</th>
                        <th scope="col" colspan="2">Home</th>
                        <th scope="col" colspan="2">Away</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        const config = {
            endpoint: `{{ route('admin.api-demo') }}`
        };

        async function fetch()
        {
            const date = $('#date-filter').val();
            const execute = await axios.get(config.endpoint+'?date='+date);
            const datas = execute.data;

            const response = datas.response;

            let tr = ``;

            for (const k in response) {
                const data = response[k];
                tr += `<tr>
                            <td><a href="javascript:void(0)">${dateParse(data.fixture.date)}</a></td>
                            <td width="5%">
                            <img src="${data.league.logo}" class="rounded" style="max-width: 100%;" alt="...">
                            </td>
                            <td>
                            ${data.league.name}
                            </td>
                            <td width="5%">
                            <img src="${data.teams.home.logo}" class="rounded" style="max-width: 100%;" alt="...">
                            </td>
                            <td>${data.teams.home.name}</td>
                            <td width="5%">
                            <img src="${data.teams.away.logo}" class="rounded" style="max-width: 100%;" alt="...">
                            </td>
                            <td>${data.teams.away.name}</td>
                        </tr>`;
            }

            return fillTbody(tr);
        }

        function fillTbody(tr)
        {
            $('tbody').html(tr);
        }

        function dateParse(dateUtc)
        {
            return new Date(dateUtc).toLocaleString();
        }

        function textFilter(el)
        {
            const self = $(el);
            const value = self.val().toLowerCase();
            $('table  tr').filter(function () {
                console.log($(this).text().toLowerCase());
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        }

        $(() => {
            fetch();
        });
    </script>
@endsection