@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-lg-12">

            <div class="accordion" id="accordionExample">
                <div class="card">
                    <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="flase" aria-controls="collapseOne">
                        <h3 class="mb-0">ยกเลิกรายการในบิล</h3>
                    </div>
                </div>
                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                    <div class="card">
                        <form id="fetchCanceledBillForm" class="card-body border-0 no-arrow" onsubmit="cancelListInBillSubmitHandler(event, this)">
                            <input type="hidden" name="processType" value="betList">
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <select class="form-control" name="lottery" required>
                                        <option selected disabled>กรุณาระบุชนิดหวย</option>
                                        <option value="TH">หวยไทย</option>
                                        {{-- @foreach ($lottery as $lotto)
                                        @endforeach --}}
                                    </select>
                                </div>                       
                                <div class="col-md-4 form-group">
                                    <select class="form-control" name="lottery_type" required>
                                        <option selected disabled value="">กรุณาระบุประเภทหวย</option>
                                        @foreach ($lotteryTypes as $lotteryType)
                                            <option>{{ $lotteryType->type }}</option>
                                        @endforeach
                                    </select>
                                </div>    
                                <div class="col-md-4 form-group">
                                    <input type="text" class="form-control" name="lottery_number" placeholder="กรุณาระบุหมายเลข" />
                                </div>                                           
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-2">
                                    <button type="button" class="btn btn-light w-100" onclick="location.reload()"><i class="fas fa-times"></i> รีเซ็ท</button>
                                </div>
                                <div class="col-md-10">
                                    <button type="submit" class="btn btn-danger w-100"><i class="fas fa-search"></i> ค้นหารายการแทง</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div id="cancelBillSection" style="display:none;">
                        <div class="w-100 mb-3">
                            <div class="row">
                                <div class="col-6">
                                    <button class="btn btn-default w-100" onclick="processBetListCancel('some')"><i class="fas fa-times"></i> ยกเลิกรายการที่เลือก</button></div>
                                <div class="col-6">
                                    <button class="btn btn-dark w-100" onclick="processBetListCancel('all')"><i class="fas fa-times"></i> ยกเลิกรายการทั้งหมด</button></div>
                            </div>
                        </div>
                        <form id="cancelSomeBill" class="card">
                            <table class="card-body table 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>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </form>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <h3 class="mb-0">ค้นหาบิล</h3>
                    </div>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                    <div class="card">
                        <form class="card-header border-0" onsubmit="formSubmitHandler(event, this)">
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <select class="form-control" name="lottery" required>
                                        <option selected disabled>กรุณาระบุชนิดหวย</option>
                                        @foreach ($lottery as $lotto)
                                        <option value="{{ $lotto->country }}">{{ $lotto->name }}</option>
                                        @endforeach
                                    </select>
                                </div>                       
                                <div class="col-md-4 form-group">
                                    <select class="form-control" name="lottery_type" required>
                                        <option selected disabled value="">กรุณาระบุประเภทหวย</option>
                                        @foreach ($lotteryTypes as $lotteryType)
                                            <option>{{ $lotteryType->type }}</option>
                                        @endforeach
                                    </select>
                                </div>    
                                <div class="col-md-4 form-group">
                                    <input type="text" class="form-control" name="lottery_number" placeholder="กรุณาระบุหมายเลข" />
                                </div>                                           
                            </div>
                            <div class="row align-items-center">
                                <div class="col text-right">
                                    <input type="date" id="date_filter_from_date" name="from_date" class="form-control" />                                                  
                                </div>
                                <div class="col-1 text-center">
                                    <label class="small text-nowrap my-auto">ถึงวันที่</label> 
                                </div>
                                <div class="col d-flex"> 
                                    <input type="date" id="date_filter_to_date" name="to_date" class="form-control" />                                                  
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-2">
                                    <button type="button" class="btn btn-light w-100" onclick="location.reload()"><i class="fas fa-times"></i> รีเซ็ท</button>
                                </div>
                                <div class="col-md-10">
                                    <button id="submitBtn" type="submit" class="btn btn-primary w-100"><i class="fas fa-search"></i> ค้นหา</button>
                                </div>
                            </div>
                        </form>
                    </div>
        
                    <div class="card">
                        <div id="item-header" class="card-header border-0 pb-0 d-none">
                            <div class="row align-items-center">
                                <div class="col">
                                    <a href="javascript:void(0);" onclick="loadLatestTable()"><i class="fas fa-arrow-left"></i></a>
                                </div>
                            </div>
                        </div>
                        <div id="content-section" class="card-body table-responsive" style="display:none;">
                            <div class="w-100 text-right pb-1">
                                <label id="result-label"></label>
                            </div>
                            <table id="main-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>
                                    <tr>
                                        <td class="align-middle text-center font-weight-bold">-</td>
                                        <td class="align-middle text-center font-weight-bold">-</td>
                                        <td class="align-middle text-center font-weight-bold">-</td>
                                        <td class="align-middle text-center font-weight-bold">-</td>
                                        <td class="align-middle text-center font-weight-bold">-</td>
                                        <td class="align-middle text-center font-weight-bold">-</td>
                                        <td class="align-middle text-center font-weight-bold">-</td>
                                        <td class="align-middle text-center font-weight-bold">-</td>
                                    </tr>
                                </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-lg" 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>
                        </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 btn = $('#submitBtn');
            const submitBtnState = btn.html();
            const url = `{{ route('report.bills.submit') }}`;

            btn.html('<i class="fas fa-spinner fa-pulse"></i> กำลังโหลดข้อมูล');
            btn.prop('disabled', true);

            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();
                btn.html(submitBtnState);
                btn.prop('disabled', false);
            });
        }

        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.')
            }
        }

        async function showDetail(type, param) {
            const modal = $('#bill-detail-modal');
            let url;
            let method;
            let data = {};
            
            switch(type){

                case 'bill' : {
                    let tr = '';

                    url = `{{ route('report.bills.index') }}/getbill/${param}`;
                    method = 'post';
                    data = {};
                    let datas = await doAjax(url, method, data);
                    for(const k in datas.bet){
                        let result = datas.bet[k];
                        tr += `<tr>
                                <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">${$.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>
                            </tr>`;
                    }
                    await modal.find('tbody').html(tr);
                    modal.find('h5').text(`รายละเอียดบิล`);
                    modal.modal('show');
                    break;
                }
            }
        }

        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');
        }
    </script>
@endsection