@extends('layouts.popup')

@section('title')
    LT-99 :: ตรวจสอบโพย
@endsection

@section('subtitle')
    ระบบค้นหาเลข
@endsection

@section('customStyle')
    <style>
        .badge-store {
            color: #7f5539;
            background-color: #ede0d4;
        }
        .accordion .card-header:not(.no-arrow):after {
            font: normal normal normal 14px/1 NucleoIcons;
            line-height: 0;
            position: absolute;
            top: 50%;
            right: 1.5rem;
            content: '\ea0f';
            transition: all .15s cubic-bezier(.68,-.55,.265,1.55);
            transform: translateY(-50%);
        }
        .swal-text {
        text-align: center
        }
    </style>
@endsection

@section('content')
    <div class="row mt-5">
        <div class="col-md-12">
            <div class="nav-wrapper">
                <ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-icons-text" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-icons-text-1-tab" data-toggle="tab" href="#bet-data" role="tab" aria-controls="tabs-icons-text-1" aria-selected="true">
                            <i class="fas fa-university mr-2"></i>การเงิน
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-2-tab" data-toggle="tab" href="#wallet-data" role="tab" aria-controls="tabs-icons-text-2" aria-selected="false">
                            <i class="fas fa-file-invoice-dollar mr-2"></i>รายการแทง</a>
                    </li>
                </ul>
            </div>
            <div class="card shadow">
                <div class="card-body table-responsive">
                    <div class="tab-content" id="myTabContent">

                        <div class="tab-pane fade show active" id="bet-data" role="tabpanel" aria-labelledby="tabs-icons-text-1-tab">
                            <table class="table table-sm table-hover table-bordered">
                                <thead>
                                    <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>
                                    </tr>
                                </thead>
                                <thead>
                                    <tr>
                                        <th class="align-middle text-right font-weight-bold">รวม: </th>
                                        <th class="align-middle text-left font-weight-bold text-sm">
                                            {{ nf($walletSumAmount, true) }}
                                        </th>
                                        <th class="align-middle text-right font-weight-bold"></th>
                                        <th class="align-middle text-right font-weight-bold"></th>
                                        <th class="align-middle text-right font-weight-bold"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($wallets as $wallet)
                                    <tr class="{{ ($wallet->status === 0 ? 'table-danger':'') }}">
                                        <td data-order="{{ $wallet->id }}" class="align-middle text-center font-weight-bold">{{ $wallet->dateThai }}</td>
                                        <td class="align-middle text-center font-weight-bold">{{ nf($wallet->amount, true) }}</td>
                                        <td class="align-middle text-center font-weight-bold text-{{ $wallet->walletStatus['color'] }}">{{ $wallet->walletStatus['text'] }}</td>
                                        <td class="align-middle text-center font-weight-bold">{{ $wallet->action_username ?? '-' }}</td>
                                        <td class="align-middle text-center font-weight-bold">{!! $wallet->detail !!}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="tab-pane fade" id="wallet-data" role="tabpanel" aria-labelledby="tabs-icons-text-2-tab">
                            <table class="table table-sm table-hover table-bordered">
                                <thead>
                                    <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>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($bets as $bet)
                                    <tr>
                                        <td data-order="{{ $bet->id }}" class="align-middle text-center font-weight-bold">{{ $bet->dateThai }}</td>
                                        <td class="align-middle text-center font-weight-bold">
                                            <a href="javascript:;" onclick="showDetail(this)" data-bet='{!! json_encode($bet->bet) !!}' data-commission-line="{{ $bet->commission_line }}">
                                            {{ $bet->bill_id }}
                                        </td>
                                        <td class="align-middle text-center font-weight-bold text-{{ $bet->billStatus['color'] }}">{{ $bet->billStatus['text'] }}</td>
                                        <td class="align-middle text-center font-weight-bold">{{ lotteryName($bet->country) }}</td>
                                        <td class="align-middle text-center font-weight-bold">{{ $bet->commission_line }}</td>
                                        <td class="align-middle text-center font-weight-bold">{{ nf($bet->amount, true) }}</td>
                                        <td class="align-middle text-center font-weight-bold text-success">{{ nf(-$bet->discount, true) }}</td>
                                        <td class="align-middle text-center font-weight-bold text-primary">{{ nf($bet->payment, true) }}</td>
                                        <td class="align-middle text-center font-weight-bold text-info">{{ nf($bet->won, true) }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>            
        </div>
    </div>
@endsection

@section('modal')
<div class="modal fade" id="bill-detail-modal" tabindex="-1" role="dialog" aria-labelledby="billDetailModalLabel" 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="billDetailModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body table-responsive">
                <table class="table table-sm table-bordered table-hover">
                    <thead>
                        <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>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <script>
        let dataTableInstance;
        const cancelListInBillSubmitHandler = async function (e, el)
        {
            e.preventDefault();
            if($.fn.DataTable.isDataTable(dataTableInstance)) dataTableInstance.destroy();
            const self = $(el);
            const formData = self.serialize();
            const target = $('#cancelBillSection');
            const url = `{{ route('report.bills.cencelBetList') }}`;
            const result = await doAjax(url, 'post', formData);
            if(!result) return;
            let tr = ``;
            for(const i in result){
                let datas = result[i];
                let storeName = '<span class="text-info">หน้าเว็บ</span>';
                let storePort = 'เมมเบอร์';
                if(datas.store){
                    storeName = `<span class="text-warning">${datas.store.store_name}</span>`;
                    storePort = 'พนักงาน';
                }
                tr += `<tr>
                        <td class="align-middle text-center font-weight-bold">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="selectedBill[]" value="${datas.id}" data-bet='${JSON.stringify(datas.bet)}' />
                            </div>
                        </td>
                        <td class="align-middle text-left font-weight-bold">
                            <small class="text-muted">วันที่: </small>${datas.th_datetime}<br/>
                            <small class="text-muted">สาขา: </small>${storeName}<br/>
                            <small class="text-muted">${storePort}: </small>${datas.user.username}<br/>
                        </td>
                        <td class="align-middle text-center font-weight-bold">
                            <a href="javascript:void(0);" onclick="showDetail('bill', ${datas.id})">${datas.bill_id}</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>
                    </tr>`;
            }
            target.find('tbody').html(tr);
            dataTableInstance = target.find('table').DataTable();
            $('#DataTables_Table_0_wrapper').addClass('my-3');
            target.fadeIn();
        }

        const processBetListCancel = function (typeOfBtn)
        {
            const targetForm = $('#cancelSomeBill');
            const formData = new FormData($('#cancelSomeBill')[0]);
            const lotteryType = $('select[name="lottery_type"]').val();
            const lotteryNumber = $('input[name="lottery_number"]').val();

            const sumAmount = getBetSumAmount({
                lotteryType: lotteryType,
                lotteryNumber: lotteryNumber,
                targetType: typeOfBtn,
                targetElementName: 'selectedBill[]',
            });
            const swalText = `จำนวน: ${$.number(sumAmount.listAmount)} รายการ\nประเภท: ${lotteryType}\nหมายเลข: ${lotteryNumber}\nยอดแทงรวม: ${$.number(sumAmount.sumAmount, 2)} THB`;

            formData.append('processType', 'process');
            formData.append('processSubType', typeOfBtn);
            formData.append('lottery', $('select[name="lottery"]').val());
            formData.append('lottery_type', lotteryType);
            formData.append('lottery_number', lotteryNumber);
            const url = `{{ route('report.bills.cencelBetList') }}`;
            swal('ยืนยันการยกเลิก', swalText, 'warning', {
                buttons: ['ยกเลิก', 'ยืนยัน'],
                dangerMode: true,
            }).then((sure) => {
                if(sure){
                    $.ajax({
                        url: url,
                        method: 'post',
                        dataType: 'json',
                        data: formData,
                        success: function(res){
                            $('#fetchCanceledBillForm').trigger('submit');
                            swalSuccess();
                        },
                        contentType: false, processData: false, cache: false,
                    });
                }
            });
        }

        const getBetSumAmount = function (config)
        {
            let sumAmount = 0;
            let selectorName = `input[name="${config.targetElementName}"]`;
            if(config.targetType == 'some') selectorName += `:checked`;
            $(selectorName).each(function(i, n){
                let bet = $(n).data('bet');
                for(const i in bet){
                    let betData = bet[i];
                    if(betData.type == config.lotteryType && betData.number == config.lotteryNumber){
                        sumAmount += +betData.amount;
                    }
                }
            });
            return {
                sumAmount: sumAmount,
                listAmount: $(selectorName).length,
            };
        }

        function formSubmitHandler(e, element)
        {
            e.preventDefault();
            const self = $(element);
            const table = $('#main-table');
            const formData = self.serialize();
            const url = `{{ route('report.bills.submit') }}`;

            let tr = ``;
            $.post(url, formData, (res) => {
                $('#result-label').text(`ผลการค้นหา: ${res.length} รายการ`);
                for(const key in res){
                    let bill = res[key];
                    tr += `<tr>
                                <td class="align-middle text-center font-weight-bold">${bill.date}</td>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="javascript:void(0);" onclick="showDetail('bill', ${bill.id})">${bill.bill_id}</a>
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    <span class="badge badge-primary text-xs">${bill.staff}</span>
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    <span class="badge badge-store text-xs">${bill.store}</span>
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    <span class="badge badge-${bill.status.color} text-xs">${bill.status.text}</span>
                                </td>
                                <td class="align-middle text-center font-weight-bold">${bill.amount}</td>
                                <td class="align-middle text-center font-weight-bold text-success">${bill.discount}</td>
                                <td class="align-middle text-center font-weight-bold text-primary">${bill.payment}</td>
                            </tr>`;
                }
                table.find('tbody').html(tr);
                table.closest('div').show();
            });
        }

        function dateFilter(el)
        {
            const self = $(el);
            const fromInput = $('#date_filter_from_date');
            const toInput = $('#date_filter_to_date');
            if(fromInput.val() && toInput.val()){
                alert('can not use filter.')
            }
        }

        function showDetail(el) {
            const self = $(el);
            const modal = $('#bill-detail-modal');
            const bet = self.data('bet');
            const commissionLine = self.data('commission-line');
            let tr = '';
            for(const k in bet){
                let result = bet[k];
                let paymentClass = result.isLimitPayment ? 'text-danger':'';
                let trClass = result.won ? 'table-success':'';
                tr += `<tr class="${trClass}">
                        <td class="align-middle text-center font-weight-bold">${result.type}</td>
                        <td class="align-middle text-center font-weight-bold">${result.number}</td>
                        <td class="align-middle text-center font-weight-bold">${commissionLine}</td>
                        <td class="align-middle text-center font-weight-bold ${paymentClass}">${$.number(result.paymentRate, 2)} THB</td>
                        <td class="align-middle text-center font-weight-bold">${$.number(result.amount, 2)} THB</td>
                        <td class="align-middle text-center font-weight-bold text-success">
                        ${$.number(-result.discount, 2)} THB</td>
                        <td class="align-middle text-center font-weight-bold text-primary">${$.number(result.payment, 2)} THB</td>
                        <td class="align-middle text-center font-weight-bold text-info">${$.number(result.won, 2)} THB</td>
                    </tr>`;
            }
            modal.find('tbody').html(tr);
            modal.find('h5').text(`รายละเอียดบิล`);
            modal.modal('show');
        }

        async function doAjax(url, method, data) {
            let returnData;
            await $.ajax({
                url: url,
                method: method,
                dataType: 'json',
                data: data,
                success: function(res){
                    returnData = res;
                }
            });
            return returnData;
        }

        function saveTable(params) {
            sessionStorage.setItem('table', params.html());
            $('#item-header').toggleClass('d-none');
        }

        function loadLatestTable() {
            let table = sessionStorage.getItem('table');
            $('#main-table').html(table);
            $('#item-header').toggleClass('d-none');
        }

        $('table').DataTable( {
        "order": [[ 0, "desc" ]]
        } );
    </script>
@endsection