@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">Game Listing</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="javascript:;" onclick="notifyMe()" class="btn btn-info">คลิ๊กผมหน่อยครับ</a> --}}
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="main-table" class="table table-bordered table-responsive-sm">
                    <thead>
                    <th>#</th>
                    <th>NAME</th>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(() => {
            initilize();
        });
        async function initilize()
        {
            const datas = await axios.get('/admin/games/all');
            const response = datas.data;
            return renderTr(response.data);
        }

        function renderTr(datas)
        {
            let tr = ``;
            for (const k in datas) {
                const item = datas[k];
                console.log(item);
                tr += `<tr>
                            <th>${item.id}</th>
                            <th>${item.name}</th>
                            <th><button class="btn btn-warning">แก้ไข</button>
                            </th>
                        </tr>`;
            }
            return fillTbody(tr);
        }

        function fillTbody(tr)
        {
            const target = $('#main-table');
            target.find('tbody').html(tr);
        }
    </script>
@endsection