@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.members.create') }}" class="btn btn-info">
                <i class="fas fa-user-plus"></i> เพิ่มเมมเบอร์</a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="main-table" class="table table-bordered table-responsive-sm">
                    <thead>
                        <th class="text-center align-middle">#</th>
                        <th class="text-center align-middle">ชื่อผู้ใช้</th>
                        <th class="text-center align-middle">สถานะ</th>
                        <th class="text-center align-middle">พอยต์</th>
                        <th class="text-center align-middle">เครดิต</th>
                        <th class="text-center align-middle">ดำเนินการ</th>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        const config = {
            index: `{{ route('admin.game-round.index') }}`,
        };
        $(() => {
            initilize();
        });
        async function initilize()
        {
            const datas = await axios.get(`{{ route('admin.members.index') }}`);
            const response = datas.data;
            return renderTr(response.data);
        }

        function renderTr(datas)
        {
            const target = $('tbody');
            for (const k in datas) {
                const items = datas[k];

                let tr = $('<tr/>');

                tr.append(
                    $('<td/>').addClass('text-center align-middle').text(items.id),
                    $('<td/>').addClass('text-center align-middle').text(items.username),
                    $('<td/>').addClass('text-center align-middle').append(
                        $('<span/>').addClass('badge badge-primary').text('เมมเบอร์')
                    ),
                    $('<td/>').addClass('text-center align-middle').text(items.pointAmount),
                    $('<td/>').addClass('text-center align-middle').text(items.creditAmount),
                    $('<td/>').addClass('text-center align-middle').append(
                        $('<button/>', {
                            class: 'btn btn-info btn-xs sharp',
                            onclick: `showPointAndCreditModal(${items.id}, '${items.username}')`,
                        }).append($('<i/>', { class: 'fas fa-university' })),
                        $('<button/>', {
                            class: 'btn btn-secondary btn-xs sharp ms-1',
                            onclick: `swal('History API 500 Error', 'ไม่สามารถดึงข้อมูลประวัติเครดิต / พอยต์ ได้', 'error', { buttons: false })`,
                        }).append($('<i/>', { class: 'fas fa-history' })),
                        $('<a/>').addClass('btn btn-warning btn-xs sharp ms-1').attr('href', `${config.index}/${items.id}/edit`).append($('<i/>').addClass('fas fa-pencil-alt')),
                        $('<button/>').addClass('btn btn-danger btn-xs sharp ms-1').attr('data-item-id', items.id).attr('onclick', 'removeItem(this)').append($('<i/>').addClass('fa fa-trash')),
                    ),
                );

                target.append(tr);
            }
        }

        function showPointAndCreditModal(userId, username)
        {
            const modal = $('#point-and-credit-modal');
            modal.find('#input-user-id').val(userId);
            modal.find('#input-username').val(username);
            modal.modal('show');
        }

        function fillTbody(tr)
        {
            const target = $('#main-table');
            target.find('tbody').html(tr);
        }

        /**
         * 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(() => { location.reload() });
                } else {
                    return swal('Error!', 'ลบรายการไม่สำเร็จ', 'error');
                }
            });
        }

        async function pointAndCreditFormSubmitHandler(e, el)
        {
            e.preventDefault();
            const self = $(el);
            const formData = self.serialize();
            const execute = await axios.post();
        }
    </script>
@endsection

@section('modal')
    <div id="point-and-credit-modal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <form onsubmit="pointAndCreditFormSubmitHandler(event, this)" 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">
                    <div class="form-group">
                        <label for="input-username">ชื่อผู้ใช้</label>
                        <input type="hidden" id="input-user-id" name="user_id">
                        <input type="text" class="form-control" id="input-username" readonly />
{{--                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>--}}
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlSelect1">ประเภทการดำเนินการ</label>
                        <select class="form-control" name="action_type" id="exampleFormControlSelect1">
                            <option selected value="">กรุณาเลือกประเภทการดำเนินการ</option>
                            <option value="point">พอยต์</option>
                            <option value="credit">เครดิต</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="input-amount">จำนวน</label>
                        <input type="number" class="form-control" id="input-amount" name="amount" aria-describedby="emailHelp" />
                        <small id="emailHelp" class="form-text text-muted">หมายเหตุ: หากต้องการปรับลดเคดริต ให้ใส่ตัวเลขแบบติดลบ (เช่น -100)</small>
                    </div>
                </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