@extends('layouts.master')

@section('title')
    LT-99 :: จัดการเมมเบอร์
@endsection

@section('sub_title')
    รายงานเมมเบอร์
@endsection

@section('customStyle')
    <style>
        #modal-table_wrapper {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
        #bill-detail-table_wrapper {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0 place-arrow">รายงานเมมเบอร์</h3>
                        </div>
                        <div class="col-6 text-right">
                            <select class="form-control" id="lottery_round" name="lottery_rond" onchange="initializeTable()">
                                <option value>ทุกงวด</option>
                                @php
                                    $i = 0;
                                @endphp
                                @foreach ($lotteryRound as $item)
                                    <option value="{{ $item->id }}" {{ ++$i == 1 ? 'selected':'' }}>{{ THdatetime($item->display_date) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="table-responsive pb-2">
                    <table id="main-table" class="table table-hover table-bordered table-sm py-3">
                        <thead class="thead-light">
                            <tr>
                                <th class="align-middle text-center font-weight-bold">#</th>
                                <th class="align-middle text-center font-weight-bold">ชื่อผู้ใช้</th>
                                <th class="align-middle text-center font-weight-bold">ชื่อสกุล</th>
                                <th class="align-middle text-center font-weight-bold">จำนวนเมมเบอร์</th>
                                <th class="align-middle text-center font-weight-bold">เครดิตรวม</th>
                                <th class="align-middle text-center font-weight-bold">ยอดแทง</th>
                                <th class="align-middle text-center font-weight-bold">ส่วนลด</th>
                                <th class="align-middle text-center font-weight-bold">สุทธิ</th>
                                <th class="align-middle text-center font-weight-bold">ยอดยกเลิก</th>
                                <th class="align-middle text-center font-weight-bold">ยอดถูก</th>
                                <th class="align-middle text-center font-weight-bold">รวมสุทธิ</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $i=0; @endphp
                            @foreach ($agents as $agent)
                            @php
                            $memberCount = $agent->members->count();
                            if($memberCount == 0) continue;                         
                            @endphp
                            <tr>
                                <td class="align-middle text-center font-weight-bold">{{ ++$i }}</td>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="javascript:void(0);" onclick="loadTable('member', {{ $agent->id }})">
                                        <span class="badge badge-primary text-xs">{{ $agent->username }}</span>
                                    </a>
                                </td>
                                <td class="align-middle text-center font-weight-bold">{{ $agent->name }}</td>
                                <td class="align-middle text-center font-weight-bold">{{ $memberCount }}</td>
                                <td class="align-middle text-center font-weight-bold text-success">
                                    {{ nf($agent->sumMember['credit'], 2) }}</td>
                                <td class="align-middle text-center font-weight-bold">{{ nf($agent->sumMember['amount'], true) }}</td>
                                <td class="align-middle text-center font-weight-bold text-success">-{{ nf($agent->sumMember['discount'], true) }}</td>
                                <td class="align-middle text-center font-weight-bold text-dark">{{ nf($agent->sumMember['payment'], 2) }}</td>
                                <td class="align-middle text-center font-weight-bold text-warning">{{ nf($agent->sumMember['cancel'], true) }}</td>
                                <td class="align-middle text-center font-weight-bold text-primary">{{ nf($agent->sumMember['won'], true) }}</td>
                                <td class="align-middle text-center font-weight-bold text-dark">{{ nf(($agent->sumMember['payment']-$agent->sumMember['won']), true) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="changePasswordModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <form id="changePasswordForm" class="modal-content bg-secondary">
                <div class="modal-header">
                    <h3 class="modal-title">แก้ไขรหัสผ่าน</h3>
                    <button class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>เอเยนต์</label>
                        <input type="text" class="form-control" name="agentUsername" readonly="true" value="" />
                    </div>
    
                    <div class="form-group">
                        <label>รหัสผ่านใหม่</label>
                        <input type="text" class="form-control" name="agentNewPassword" placeholder="กรุณากรอกรหัสผ่านใหม่" />
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button class="btn btn-default" type="submit"><i class="fas fa-save mr-1"></i> แก้ไขรหัสผ่าน</button>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="creditManageModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <form id="creditManageForm" class="modal-content bg-secondary" onsubmit="creditManageSubmit(event, this)">
                <div class="modal-header">
                    <h3 class="modal-title">จัดการเครดิต</h3>
                    <button class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>เมมเบอร์</label>
                        <input type="text" class="form-control" name="memberUsername" readonly="true" value="" />
                        <input type="hidden" class="form-control" name="memberId" value="" />
                    </div>

                    <div class="row">
                        <div class="col justify-content-center form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="creditType" value="1" />
                            <label class="form-check-label" for="inlineRadio1">เพิ่มเครดิต</label>
                        </div>
                        <div class="col justify-content-center form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="creditType" value="0" />
                            <label class="form-check-label" for="inlineRadio2">ลดเครดิต</label>
                        </div>                 
                    </div><br/>
    
                    <div class="form-group">
                        <label>ยอดปรับ</label>
                        <input type="text" class="form-control" name="amount" placeholder="กรุณากรอกยอดปรับ" />
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button class="btn btn-default" type="submit"><i class="fas fa-save mr-1"></i> ปรับเครดิต</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="anythingModal" tabindex="-1" role="dialog" aria-labelledby="anythingModalLebel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="anythingModalLebel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <table id="modal-table" class="modal-body table table-hover table-sm py-3" style="padding: 0px; padding-top: 1rem; padding-bottom: 1rem;" data-order='[[0, "desc"]]'>
                    <thead class="thead-light">
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="billDetailModal" tabindex="-1" role="dialog" aria-labelledby="billDetailModalLebel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content bg-secondary">
                <div class="modal-header">
                    <h5 class="modal-title" id="billDetailModalLebel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <table id="bill-detail-table" class="modal-body table table-hover table-bordered table-sm py-3" style="padding: 0px; padding-top: 1rem; padding-bottom: 1rem;">
                    <thead class="thead-light">
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let dataTable;
        let dataTableTarget = $('#main-table');
        const initDT = function()
        {
            dataTable = dataTableTarget.DataTable();
        }
        const createTableHead = function(datas)
        {
            let th = '<tr>';
            for(const i in datas){
                let data = datas[i];
                th += `<th class="align-middle text-center font-weight-bold">${data}</th>`;
            }
            th += `</tr>`;
            return th;
        }

        let currentTableName = 'main-table';

        const tb = $('#main-table');
        const tbHead = tb.find('thead');
        const tbBody = tb.find('tbody');

        const mdTb = $('#anythingModal');
        const mdHead = mdTb.find('.modal-title');
        const mdTbHead = mdTb.find('thead');
        const mdTbBody = mdTb.find('tbody');
        const placeArrow = $('.place-arrow');
        let modalTableDatatable;
        let modalTableInstance = mdTb.find('table');

        const mbBill = $('#billDetailModal');
        const mdBillHead = mbBill.find('.modal-title');
        const mdBillTbHead = mbBill.find('thead');
        const mdBillTbBody = mbBill.find('tbody');
        let modalBillDetailDatatable;
        let modalBillDetailInstance = mbBill.find('table');

        const backToPreviousTable = function(element)
        {
            const self = $(element);
            const target = self.data('target');
            dataTable.destroy();
            tbHead.html(sessionStorage.getItem(target+'_thead'));
            tbBody.html(sessionStorage.getItem(target+'_tbody'));
            placeArrow.text('รายงานเมมเบอร์');
            initDT();
        }

        const loadTable = async function(type, param, element = null)
        {
            const url = `{{ route('report.member.fullreport') }}`;
            let fromData = new FormData();
            fromData.append('type', type);
            fromData.append('param', param);
            currentTableName = type;
            switch(type)
            {
                case 'member' : {
                    dataTable.destroy();
                    placeArrow.html('<a id="previousArrow" href="javascript:void(0);" data-target="mainTable" onclick="backToPreviousTable(this)" ><i class="fas fa-arrow-circle-left"></i></a> '+placeArrow.text());
                    storeTable('mainTable');
                    dataTableTarget.find('tbody').html('');
                    const fetched = await fetchApi(url, 'POST', fromData);
                    const result = await fetched.json();
                    const th = createTableHead(['#','ชื่อผู้ใช้', 'Reference', 'ชื่อสกุล', 'เบอร์โทร', 'เครดิต', 'ยอดแทง', 'ส่วนลด', 'สุทธิ', 'ยอดถูก', 'รวมสุทธิ', 'รายการ', 'ดำเนินการ']);
                    tbHead.html(th);
                    let tr = ``;
                    for (const i in result) {
                        let member = result[i];
                        tr += `<tr>
                                <td class="align-middle text-center font-weight-bold">${+i +1}</td>
                                <td class="align-middle text-center font-weight-bold">
                                    <span class="badge badge-primary text-xs">${member.username}</span>
                                </td>
                                <td class="align-middle text-center font-weight-bold">${member.reference_id}</td>
                                <td class="align-middle text-center font-weight-bold">${member.name}</td>
                                <td class="align-middle text-center font-weight-bold">${member.phone ?? '-'}</td>
                                <td class="align-middle text-center font-weight-bold text-primary">${member.credit}</td>
                                <td class="align-middle text-center font-weight-bold text-warning">${member.betAmount}</td>
                                <td class="align-middle text-center font-weight-bold text-success">${member.betDiscount}</td>
                                <td class="align-middle text-center font-weight-bold text-dark">${member.betPayment}</td>
                                <td class="align-middle text-center font-weight-bold text-primary">${member.won}</td>
                                <td class="align-middle text-center font-weight-bold text-dark">${member.summary}</td>
                                <td class="align-middle text-center font-weight-bold">
                                    <button class="btn btn-sm btn-primary" onclick="loadTable('transaction', ${member.id})">
                                        <i class="fas fa-search"></i> รายการฝาก / ถอน
                                    </button>&nbsp;
                                    <button class="btn btn-sm btn-warning" onclick="loadTable('bet', ${member.id})">
                                        <i class="fas fa-search"></i> รายการเล่น
                                    </button>
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    <button data-toggle="dropdown" class="btn btn-outline-dark btn-sm btn-icon-only rounded-circle"><i class="fas fa-ellipsis-v"></i></button>
                                    <div class="dropdown-menu" on>
                                        <a class="dropdown-item" href="javascript:void(0)" data-user-id="" onclick="blockUser(true, this)" title="ระงับ">
                                            <i class="fas fa-fw fa-lock text-danger"></i> ระงับบัญชี
                                        </a>
                                        <a class="dropdown-item" href="javascript:void(0)" data-user-id="" onclick="blockUser(false, this)" title="ปลดล็อก">
                                            <i class="fas fa-fw fa-unlock text-success"></i> ปลดล็อกบัญชี
                                        </a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="javascript:void(0)">
                                            <i class="fas fa-fw fa-trash text-danger"></i> ลบ
                                        </a>
                                    </div>
                                </td>
                            </tr>`;
                    }
                    tbBody.html(tr);
                    initDT();
                    break;
                }
                case 'transaction' : {
                    if($.fn.DataTable.isDataTable(modalTableDatatable)) modalTableDatatable.destroy();
                    mdHead.text('รายการฝาก / ถอน');
                    const fetched = await fetchApi(url, 'POST', fromData);
                    const result = await fetched.json();
                    const th = createTableHead(['#','จำนวนเงิน', 'รายละเอียด', 'ผู้ดำเนินการ', 'เวลาที่ดำเนินการ']);
                    mdTbHead.html(th);

                    let tr = ``;
                    for(const i in result){
                        let datas = result[i];
                        console.log(datas);
                        tr += `<tr>
                                <td class="align-middle text-center font-weight-bold">${+i +1}</td>
                                <td class="align-middle text-center font-weight-bold">
                                    <span class="badge ${(+datas.amount < 0 ? 'badge-danger':'badge-primary')} text-xs">${$.number(datas.amount, 2)} THB</span>
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    ${datas.detail}
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    ${datas.action_username}
                                </td>
                                <td class="align-middle text-center font-weight-bold">${datas.updated_at_fm}</td>
                            </tr>`;
                    }
                    mdTbBody.html(tr);
                    modalTableDatatable = modalTableInstance.DataTable();
                    mdTb.modal('show');
                    break;
                }
                case 'bet' : {
                    if($.fn.DataTable.isDataTable(modalTableDatatable)) modalTableDatatable.destroy();
                    mdHead.text('รายการเล่น');
                    const fetched = await fetchApi(url, 'POST', fromData);
                    const result = await fetched.json();
                    const th = createTableHead(['วันที่','หมายเลขบิล', 'ประเภท', 'สถานะ', 'ไลน์ส่วนลด', 'ยอดแทง', 'ส่วนลด', 'สุทธิ', 'ยอดถูก']);
                    mdTbHead.html(th);
                    let tr = ``;
                    for(const i in result){
                        let datas = result[i];
                        let customAttr = ``;
                        if(datas.v_status) customAttr = `data-v-status="${datas.v_status}"`;
                        tr += `<tr>
                                <td class="align-middle text-center font-weight-bold" data-sort="${datas.id}">${datas.date}</td>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="javascript:void(0);" data-bet='${datas.betJson}' data-commission-line="${datas.commission_line}" data-date="${datas.date}" onclick="loadTable('bill', ${datas.id}, this)" ${customAttr}>
                                        <span class="badge badge-primary text-xs">${datas.bill_id}</span>
                                    </a>
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                        ${datas.billCountry}
                                </td>
                                <td class="align-middle text-center font-weight-bold text-${datas.statusText.color}">
                                        ${datas.statusText.text}
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                        ${datas.commission_line ?? 'A'}
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    ${$.number(datas.amount, 2)} THB
                                </td>
                                <td class="align-middle text-center font-weight-bold text-success">
                                    ${$.number(datas.discount, 2)} THB
                                </td>
                                <td class="align-middle text-center font-weight-bold text-primary">
                                    ${$.number(datas.payment, 2)} THB
                                </td>
                                <td class="align-middle text-center font-weight-bold text-info">
                                    ${$.number(datas.wonAmont, 2)} THB
                                </td>
                            </tr>`;
                    }
                    mdTbBody.html(tr);
                    modalTableDatatable = modalTableInstance.DataTable();
                    mdTb.modal('show');
                    break;
                }
                case 'bill' : {
                    if($.fn.DataTable.isDataTable(modalBillDetailDatatable)) modalBillDetailDatatable.destroy();
                    const self = $(element);
                    const bet = self.data('bet');
                    const billDate = self.data('date');
                    const billCommission = self.data('commission-line');
                    const billId = self.text();
                    mdBillHead.text(billId);
                    const th = createTableHead(['เวลา', 'หมายเลข', 'ประเภท', 'ไลน์ส่วนลด', 'อัตราจ่าย', 'ยอดแทง', 'ส่วนลด', 'สุทธิ', 'ยอดถูก']);
                    mdBillTbHead.html(th);
                    if (self.data('v-status')) storeC(billId);
                    let tr = ``;
                    for(const i in bet){
                        let datas = bet[i];
                        let thisBillWon = 0;
                        let trClass = '';
                        if(datas.won) {
                            trClass = 'table-success';
                            thisBillWon += +datas.won;
                        }
                        tr += `<tr class="${trClass}">
                                <td class="align-middle text-center font-weight-bold">${billDate}</td>
                                <td class="align-middle text-center font-weight-bold">${datas.number}</td>
                                <td class="align-middle text-center font-weight-bold">${datas.type}</td>
                                <td class="align-middle text-center font-weight-bold">${billCommission}</td>
                                <td class="align-middle text-center font-weight-bold">
                                    ${$.number(datas.paymentRate, 2)} THB
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    ${$.number(datas.amount, 2)} THB
                                </td>
                                <td class="align-middle text-center font-weight-bold text-success">
                                    ${$.number(datas.discount, 2)} THB
                                </td>
                                <td class="align-middle text-center font-weight-bold text-primary">
                                    ${$.number(datas.payment, 2)} THB
                                </td>
                                <td class="align-middle text-center font-weight-bold text-info">
                                    ${$.number(thisBillWon, 2)} THB
                                </td>
                            </tr>`;
                    }
                    mdBillTbBody.html(tr); modalBillDetailDatatable = modalBillDetailInstance.DataTable();
                    mbBill.modal('show');
                    break;
                }
            }
        }

        const storeTable = function(name)
        {
            let theadName = name+'_thead';
            let tbodyName = name+'_tbody';
            sessionStorage.setItem(theadName, tbHead.html());
            sessionStorage.setItem(tbodyName, tbBody.html());
        }
        
        function blockUser(block, btn) {
            return tryCatchSwal(async () => {
                const userId = btn.dataset.userId;
                const blockText = `${block ? 'ระงับ' : 'ปลดล็อก'}บัญชี`;
                const status = block ? 0 : 1;
                const confirm = await swal({
                    title: blockText,
                    text: `โปรดยืนยันเพื่อดำเนินการ${blockText}เมมเบอร์นี้`,
                    icon: block ? 'warning' : 'info',
                    dangerMode: block,
                    buttons: {
                        cancel: 'ยกเลิก',
                        confirm: {
                            text: 'ยืนยัน',
                            closeModal: false,
                        }
                    }
                });
                if (!confirm) return;

                const formData = new FormData();
                formData.append('user_id', userId);
                formData.append('status', status);
                formData.append('_method', 'PUT');
                const result = await fetchJson(`{{ route('member.block-unblock') }}`, 'POST', formData);
                if (!result) return false;

                const tr = btn.closest('tr');
                const statusBadge = tr.querySelector('span.status');
                statusBadge.className = `status badge badge-${block ? 'danger' : 'success'} text-sm`;
                statusBadge.textContent = block ? 'ระงับ' : 'ปกติ';

                btn.onclick = () => blockUser(!block, btn);
                btn.title = block ? 'ปลดล็อกบัญชี' : 'ระงับบัญชี';
                btn.innerHTML = block ? '<i class="fas fa-fw fa-unlock text-success"></i> ปลดล็อกบัญชี' : '<i class="fas fa-fw fa-lock text-danger"></i> ระงับบัญชี';
                return swal('สำเร็จ', `ดำเนินการ${blockText}เมมเบอร์เรียบร้อย`, 'success');
            });
        }

        function showMemberSummary(userId) {
            let url = `{{ route('report.member.index') }}/${userId}/summary`;
            window.open(url,'popup','width=750,height=600');
            return;
        }

        function creditManage(params, el) {
            const modal = $('#creditManageModal');
            const username = $(el).closest('tr').find('td:eq(1)').text().trim();
            $('input[name="memberUsername"]').val(username);
            $('input[name="memberId"]').val(params);
            modal.modal('show');
        }
        function creditManageSubmit(event, element) {
            event.preventDefault();
            const self = $(element);
            const formData = self.serialize();
            const url = `{{ route('report.member.creditManage') }}`;
            $.post(url, formData, (res) => {
                if(res.success){
                    swal('ปรับเครดิตเรียบร้อย', ' ', 'success').then(() => {
                        location.reload();
                    });
                }
            }, 'json');
        }

        $('.dropdown').on('show.bs.dropdown hide.bs.dropdown', e => {
            $(e.target).closest('.col-sm-12').toggleClass('table-responsive');
            e.target.scrollIntoViewIfNeeded();
        });

        $(function(){
            @if(!$isNoDT)
                initDT();
            @endif
            $(document).on('click', '[resetPassword]', function(){
                const username = $(this).closest('tr').find('td:eq(1)').text().trim();
                const modal = $('#changePasswordModal');

                modal.find('input[name="agentUsername"]').val(username);
                modal.modal('show');
            });

            const changePasswordForm = $('#changePasswordForm');
            changePasswordForm.on('submit', function(e){
                e.preventDefault();
                const formData = $(this).serialize();
                $.post(`{{ route('member.resetPassword') }}`, formData, function(data){
                    if(data.success){
                        swalSuccess('แก้ไขรหัสผ่านเรียบร้อย');
                    }else{
                        swalError(data.text);
                    }
                });
            });

            mbBill.on('show.bs.modal', function(e){
                mdTb.modal('hide');
            });

            mbBill.on('hidden.bs.modal', function(e){
                mdTb.modal('show');
            });

        });

        const storeC = function (billId)
        {
            const formData = {
                billId: billId,
            };
            $.post(`{{ route('report.member.storeC') }}`, formData, function (res) { });
        }

        const initializeTable = async function ()
        {
            if($.fn.DataTable.isDataTable(dataTable)) dataTable.destroy();
            if(currentTableName !== 'main-table') {
                tbHead.html(sessionStorage.getItem('mainTable_thead'));
                tbBody.html(sessionStorage.getItem('mainTable_tbody'));
                placeArrow.text('รายงานเมมเบอร์');
            }
            const lotteryRound = $('select[name="lottery_rond"]').val();
            const url = `{{ url()->current() }}?nodatatable=true&lottery_round=${lotteryRound}`;
            await $.get(url, {}, async function(res){
                let table = await $(res).find('#main-table').find('tbody').html();
                $('#main-table').find('tbody').html(table);
                dataTable = $('#main-table').DataTable();
            });
            return;
        }
    </script>
@endsection