@extends('layouts.master')

@section('title')
    LT-99 :: รายงานการขึ้นเงิน
@endsection

@section('sub_title')
    รายงานการขึ้นเงิน
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">

            <div class="col-lg-12">
                <div class="card">
                    {{-- @dump($rounds) --}}
                    <form id="filter-form" class="card-header border-0">
                        @csrf
                        <div class="form-row align-items-center mb-3">
                            <div class="col">
                                <h3 class="mb-0">ฟิลเตอร์ข้อมูล</h3>
                            </div>
                            <div class="col">
                                {{-- <select class="form-control" id="storeSelect" name="store">
                                    <option disabled selected value>กรุณาระบุสาขา</option>
                                    <option value="all">ทุกสาขา</option>
                                    @foreach ($myStore as $storeItem)
                                            <option value="{{ $storeItem->id }}">{{ $storeItem->owner->username.': '.$storeItem->store_name }}</option>
                                    @endforeach
                                </select> --}}
                            </div>
                            <div class="col text-right">
                                <select class="form-control" id="lotteryType">
                                    <option value selected>ทั้งหมด</option>
                                    @foreach ($lotteries as $lotterie)
                                        <option value="{{ $lotterie->country }}">{{ $lotterie->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col text-right">
                                <select class="form-control" id="lotteryRound">
                                    <option disabled selected value>งวดวันที่</option>
                                </select>
                            </div>
                            <div class="col text-right">
                                <select class="form-control" id="statSelect">
                                    <option disabled selected value>สถานะ</option>
                                    <option value>ทั้งหมด</option>
                                    <option value="1">ขึ้นเงินแล้ว</option>
                                    <option value="0">ยังไม่ขึ้นเงิน</option>
                                </select>
                            </div>
                            <div class="col text-right">
                                <input type="date" id="date_filter_from_date" name="from_date" class="form-control" />                                                  
                            </div>
                            <div class="col d-flex justify-content-center">
                                <label class="small mr-2 text-nowrap my-auto">ถึงวันที่</label>  
                                <input type="date" id="date_filter_to_date" name="to_date" class="form-control" />                                                  
                            </div>
                        </div>
                    </form>
                </div>
            
                <div class="card">
                    <div class="card-header border-0">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="mb-0">รายการ</h3>
                            </div>
                            <div class="col text-right">
                                <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                                    <ol id="nav-main" class="breadcrumb breadcrumb-links breadcrumb-dark link_line">
                                        <li class="breadcrumb-item">
                                            <a href="javascript:void(0);" class="text-primary" onclick="callNavigator()">ย้อนกลับ</a>
                                        </li>
                                    </ol>
                                </nav>                                
                            </div>
                        </div>
                    </div>
                    <div class="card-body py-3">
                        <div class="table-responsive">
                            <table class="table table-sm table-hover table-bordered">
                                <thead>
                                    <tr>
                                        <th id="top-sum-won" class="align-middle text-center font-weight-bold table-dark text-white">
                                            ยอดถูก: 0.00 THB
                                        </th>
                                        <th id="top-sum-paid" class="align-middle text-center font-weight-bold table-success">
                                            ยอดขึ้นเงิน: 0.00 THB
                                        </th>
                                        <th id="top-sum-unpaid" class="align-middle text-center font-weight-bold table-warning">
                                            ยอดยังไม่ขึ้นเงิน: 0.00 THB
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <div class="card-body py-3">
                        <div class="table-responsive">
                            <table id="main-table" class="table table-bordered table-hover table-sm table-striped">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="align-middle text-center text-body font-weight-bold">ชื่อผู้ใช้</th>
                                        <th class="align-middle text-center text-body font-weight-bold">ยอดแทง</th>
                                        <th class="align-middle text-center text-body font-weight-bold">ส่วนลด</th>
                                        <th class="align-middle text-center text-body font-weight-bold">สุทธิ</th>
                                        <th class="align-middle text-center text-body font-weight-bold">ยอดถูก</th>
                                    </tr>
                                </thead>
                                <tbody id="place-table">
                                    <tr>
                                        <td colspan="6" class="text-center py-3"><h3 class="mb-0 text-muted">โปรดเลือกสาขา</h3></td>
                                    </tr>
                                    {{-- @foreach ($result as $key => $item)
                                        <tr>
                                            <td class="align-middle text-center font-weight-bold">
                                                {{ $key }}
                                            </td>
                                            <td class="align-middle text-center font-weight-bold table-dark text-white">
                                                {{ number_format($item['amount'], 2) }} THB
                                            </td>
                                            <td class="align-middle text-center font-weight-bold table-success">
                                                {{ number_format($item['discount'], 2) }} THB
                                            </td>
                                            <td class="align-middle text-center font-weight-bold table-danger">
                                                {{ number_format($item['cancel'], 2) }} THB
                                            </td>
                                            <td class="align-middle text-center font-weight-bold table-info">
                                                {{ number_format($item['payment'], 2) }} THB
                                            </td>
                                            <td class="align-middle text-center font-weight-bold table-warning">
                                                {{ number_format($item['winner'], 2) }} THB
                                            </td>
                                        </tr>
                                    @endforeach --}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailLabel" 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="detailLabel">รายการแทง: </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-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>
                            </tr>
                        </thead>
                        <tbody id="place-detail">

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

@section('scripts')
    <script>
        $(function(){

            $('#storeSelect, #statSelect, #lotteryType, #lotteryRound, #date_filter_from_date, #date_filter_to_date').on('change', async function(e){

                const attrId = $(this).attr('id');
                const input_1 = $('#date_filter_from_date');
                const input_2 = $('#date_filter_to_date');
                let isFilterDate = false;
                if(attrId === 'date_filter_from_date' || attrId === 'date_filter_to_date'){
                    if(input_1.val().length == 0 || input_2.val().length == 0){
                        return;
                    }else{
                        let startDate = new Date(input_1.val());
                        let endDate = new Date(input_2.val());
                        if(startDate > endDate){
                            swal('ไม่สามารถเลือกวันที่ปลายทาง น้อยกว่าวันที่เริ่มต้นได้', ' ', 'warning');
                            input_2.val('');
                        }
                        isFilterDate = true;
                    }
                }

                if(input_1.val() || input_2.val()) isFilterDate = true;

                // let filterType = 'store';
                let val = $('#storeSelect').val();
                let stat = $('#statSelect').val();
                let lotteryType = $('#lotteryType').val();
                let lotteryRound = $('#lotteryRound').val();
                const lotteryRoundSelect = $('#lotteryRound');
                let changedId = $(this).attr('id');

                if(attrId == 'lotteryType'){
                    let opt = `<option selected value>ทั้งหมด</option>`;
                    $.post(`{{ route('report.staffWon.filter') }}`, {filterType:'getLotteryRoundList', lotteryType:lotteryType}, (res) => {
                        for(const i in res){
                            let dat = res[i];
                            opt += `<option value="${dat.id}">${dat.dateThai}</option>`;
                        }
                        $('#lotteryRound').html(opt);
                    }, 'json');
                }

                if(lotteryRound && input_1.val() && input_2.val()){
                    await swal({
                        title: "การตั้งค่าไม่ถูกต้อง",
                        text: "คุณกำลังทำการเลือกการตั้งค่าวันที่ทับซ้อนกัน กรุณาเลือกรูปแบบวันที่ ที่ท่านต้องการค้นหา",
                        icon: 'warning',
                        buttons: {
                            round: {
                                text: "ใช้งานตามงวด",
                                value: "round",
                            },
                            date: {
                                text: "ใช้งานตามวันที่",
                                value: "date",
                            }
                        },
                    })
                    .then((value) => {
                        switch (value) {
                        case "round": {
                            input_1.val(''); input_2.val('');
                            break;
                        }
                        case "date": {
                            lotteryRoundSelect.val('');
                            break;
                        }
                        default: {
                            input_1.val(''); input_2.val(''); lotteryRoundSelect.val('');
                        }
                    }
                    });
                }
                let dataSet = {storeId:val, stat:stat, country:lotteryType, lotteryRound:lotteryRound};
                if(isFilterDate){
                    dataSet.from_date = input_1.val();
                    dataSet.to_date = input_2.val();
                }
                filterDataSet = dataSet;
                loadAgentTable(currentView, null);
            });

            $(document).on('click', '.view-deatail', function(e) {
                e.preventDefault();
                let filterType = 'bill';
                let billId = $(this).data('bill_id');
                let billText = $(this).text();
                let formData = {
                    filterType: filterType,
                    billId: billId,
                };
                $.post(`{{ route('report.staffWon.filter') }}`, formData, function(res) {
                    let tr = ``;
                    let bet = res.bet;
                    for(const k in bet) {
                        let data = bet[k];
                        
                        let status = {
                            text: 'ไม่ถูกรางวัล',
                            class: 'text-danger',
                            wonAmount: '-',
                        };
                        if(data.won != false) {
                            status.text = 'ถูกรางวัล';
                            status.class = 'text-success';
                            status.wonAmount = $.number(data.won, 2)+` THB`;
                        }

                        tr += `<tr>
                                <td class="align-middle text-center font-weight-bold">${data.type}</td>
                                <td class="align-middle text-center font-weight-bold">${data.number}</td>
                                <td class="align-middle text-center font-weight-bold ${status.class}">${status.text}</td>
                                <td class="align-middle text-center font-weight-bold">${status.wonAmount}</td>
                                <td class="align-middle text-center font-weight-bold">${$.number(data.amount, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold">${$.number(data.discount, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold">${$.number(data.payment, 2)} THB</td>
                            </tr>`;
                    }
                    $('#place-detail').html(tr);
                    $('#detailLabel').text(`รายการแทง: ${billText}`);
                    $('#detailModal').modal('show');
                }, 'json');
            });
            loadAgentTable(currentView);
        });

        const targetTable = $('#main-table');
        const topWon = $('#top-sum-won');
        const topPaid = $('#top-sum-paid');
        const topUnPaid = $('#top-sum-unpaid');

        let currentView = 'agent';
        let currentUserId;
        let filterDataSet = null;

        const preLoadInstance = new preLoad();

        const loadAgentTable = async function(cmd, params = null, receiveFilter = null)
        {
            let notify = makeNotify('กำลังโหลดข้อมูล', 'กรุณารอสักครู่...');
            preLoad('fadeIn');
            const url = `{{ route('report.staffWon.filter') }}`;
            const dataSet = new FormData();
            dataSet.append('filterType', cmd);
            if(filterDataSet !== null){
                for(const i in filterDataSet){
                    dataSet.append(i, filterDataSet[i]);
                }
            }
            storeNavigator(cmd);
            switch(cmd){
                case 'agent' : {
                    currentView = 'agent';
                    const fetched = await fetchApi(url, 'POST', dataSet);
                    const response = await fetched.json();
                    const sum = {
                        won: 0,
                        paid: 0,
                        unpaid: 0,
                    };
                    let tr = ``;
                    for(const i in response){
                        let data = response[i];
                        if(+data.sum.amount == 0) continue;
                        tr += `<tr>
                                        <td class="align-middle text-center font-weight-bold">
                                            <a href="javascript:void(0);" onclick="loadAgentTable('storeAgent', ${data.id})">${data.username}</a>
                                        </td>
                                        <td class="align-middle text-center font-weight-bold">${$.number(data.sum.amount, 2)} THB</td>
                                        <td class="align-middle text-center font-weight-bold text-success">${$.number(-data.sum.discount, 2)} THB</td>
                                        <td class="align-middle text-center font-weight-bold text-primary">${$.number(data.sum.payment, 2)} THB</td>
                                        <td class="align-middle text-center font-weight-bold text-info">${$.number(data.sum.won, 2)} THB</td>
                                    </tr>`;
                        sum.won += +data.sum.won;
                        sum.paid += +data.sum.paid;
                    }
                    targetTable.find('tbody').html(tr);
                    topWon.text(`ยอดถูก: ${$.number(sum.won ,2)} THB`);
                    topPaid.text(`ยอดขึ้นเงิน: ${$.number(sum.paid ,2)} THB`);
                    topUnPaid.text(`ยอดยังไม่ขึ้นเงิน: ${$.number(sum.won-sum.paid ,2)} THB`);
                    break;
                }
                case 'storeAgent' : {
                    currentView = 'storeAgent';
                    if(params != null){
                        dataSet.append('agentId', params);
                        currentUserId = params;
                    }else{
                        dataSet.append('agentId', currentUserId);
                    }
                    const fetched = await fetchApi(url, 'POST', dataSet);
                    const response = await fetched.json();
                    const sum = {
                        won: 0,
                        paid: 0,
                        unpaid: 0,
                    };
                    let tr = ``;
                    for(const i in response){
                        let data = response[i];
                        if(+data.sum.amount == 0) continue;
                        tr += `<tr>
                                        <td class="align-middle text-center font-weight-bold">
                                            <a href="javascript:void(0);" onclick="loadAgentTable('storeStaff', ${data.id})">${data.store_name}</a>
                                        </td>
                                        <td class="align-middle text-center font-weight-bold">${$.number(data.sum.amount, 2)} THB</td>
                                        <td class="align-middle text-center font-weight-bold text-success">${$.number(-data.sum.discount, 2)} THB</td>
                                        <td class="align-middle text-center font-weight-bold text-primary">${$.number(data.sum.payment, 2)} THB</td>
                                        <td class="align-middle text-center font-weight-bold text-info">${$.number(data.sum.won, 2)} THB</td>
                                    </tr>`;
                        sum.won += +data.sum.won;
                        sum.paid += +data.sum.paid;
                    }
                    topWon.text(`ยอดถูก: ${$.number(sum.won ,2)} THB`);
                    topPaid.text(`ยอดขึ้นเงิน: ${$.number(sum.paid ,2)} THB`);
                    topUnPaid.text(`ยอดยังไม่ขึ้นเงิน: ${$.number(sum.won-sum.paid ,2)} THB`);
                    targetTable.find('tbody').html(tr);
                    break;
                }
                case 'storeStaff' : {
                    currentView = 'storeStaff';
                    if(params != null){
                        dataSet.append('storeId', params);
                        currentUserId = params;
                    }else{
                        dataSet.append('storeId', currentUserId);
                    }
                    const fetched = await fetchApi(url, 'POST', dataSet);
                    const response = await fetched.json();
                    const sum = {
                        won: 0,
                        paid: 0,
                        unpaid: 0,
                    };
                    let tr = ``;
                    for(const i in response){
                        let data = response[i];
                        if(+data.sum.amount == 0) continue;
                        tr += `<tr>
                                        <td class="align-middle text-center font-weight-bold">
                                            <a href="javascript:void(0);" onclick="loadAgentTable('staffBills', ${data.id})">${data.username}</a>
                                        </td>
                                        <td class="align-middle text-center font-weight-bold">${$.number(data.sum.amount, 2)} THB</td>
                                        <td class="align-middle text-center font-weight-bold text-success">${$.number(-data.sum.discount, 2)} THB</td>
                                        <td class="align-middle text-center font-weight-bold text-primary">${$.number(data.sum.payment, 2)} THB</td>
                                        <td class="align-middle text-center font-weight-bold text-info">${$.number(data.sum.won, 2)} THB</td>
                                    </tr>`;
                        sum.won += +data.sum.won;
                        sum.paid += +data.sum.paid;
                    }
                    topWon.text(`ยอดถูก: ${$.number(sum.won ,2)} THB`);
                    topPaid.text(`ยอดขึ้นเงิน: ${$.number(sum.paid ,2)} THB`);
                    topUnPaid.text(`ยอดยังไม่ขึ้นเงิน: ${$.number(sum.won-sum.paid ,2)} THB`);
                    targetTable.find('tbody').html(tr);
                    break;
                }
                case 'staffBills' : {
                    currentView = 'staffBills';
                    if(params != null){
                        dataSet.append('staffId', params);
                        currentUserId = params;
                    }else{
                        dataSet.append('staffId', currentUserId);
                    }
                    const fetched = await fetchApi(url, 'POST', dataSet);
                    const response = await fetched.json();
                    const sum = {
                        won: 0,
                        paid: 0,
                        unpaid: 0,
                    };
                    let tr = ``;
                    for(const i in response){
                        let data = response[i];
                        if(+data.amount == 0) continue;
                        tr += `<tr>
                                        <td class="align-middle text-center font-weight-bold">${data.dateThai}</td>
                                        <td class="align-middle text-center font-weight-bold">
                                            <a href="javascript:void(0);" onclick="viewBillDetail(this)" data-bet='${JSON.stringify(data.bet)}'>${data.bill_id}</a>
                                        </td>
                                        <td class="align-middle text-center font-weight-bold">
                                            <span class="badge badge-pill text-xs badge-${data.bill_status.color}">${data.bill_status.text}</span>
                                        </td>
                                        <td class="align-middle text-center font-weight-bold">${$.number(data.amount, 2)} THB</td>
                                        <td class="align-middle text-center font-weight-bold text-success">${$.number(-data.discount, 2)} THB</td>
                                        <td class="align-middle text-center font-weight-bold text-primary">${$.number(data.payment, 2)} THB</td>
                                        <td class="align-middle text-center font-weight-bold text-info">${$.number(data.won, 2)} THB</td>
                                    </tr>`;
                        sum.won += +data.won;
                        if(data.paid !== undefined) sum.paid += +data.paid;
                    }
                    topWon.text(`ยอดถูก: ${$.number(sum.won ,2)} THB`);
                    topPaid.text(`ยอดขึ้นเงิน: ${$.number(sum.paid ,2)} THB`);
                    topUnPaid.text(`ยอดยังไม่ขึ้นเงิน: ${$.number(sum.won-sum.paid ,2)} THB`);
                    targetTable.find('thead th:eq(0)').text('วันที่');
                    targetTable.find('thead th:eq(0)').after('<th class="align-middle text-center text-body font-weight-bold">เลขบิล</th><th class="align-middle text-center text-body font-weight-bold">สถานะ</th>');
                    targetTable.find('thead th:eq(0)').text('เลขบิล');
                    targetTable.find('thead th:eq(0)').after('<th class="align-middle text-center text-body font-weight-bold">สถานะ</th>');
                    targetTable.find('tbody').html(tr);
                    break;
                }
            }
            preLoad('fadeOut');
        }
        const viewBillDetail = function(elm)
        {
            const self = $(elm);
            const bet = self.data('bet');
            const target = $('#place-detail');
            const labelText = $('#detailLabel');
            let tr = ``;
            for(const i in bet){
                let data = bet[i];
                let wonAmount = 0;
                if(data.won){
                    wonAmount += +data.won; 
                }
                tr += `<tr>
                            <td class="align-middle text-center font-weight-bold">${data.type}</td>
                            <td class="align-middle text-center font-weight-bold">${data.number}</td>
                            <td class="align-middle text-center font-weight-bold text-info">${$.number(data.won ? data.won:0, 2)} THB</td>
                            <td class="align-middle text-center font-weight-bold">${$.number(data.amount, 2)} THB</td>
                            <td class="align-middle text-center font-weight-bold text-success">${$.number(-data.discount, 2)} THB</td>
                            <td class="align-middle text-center font-weight-bold text-primary">${$.number(data.payment, 2)} THB</td>
                        </tr>`;
            }
            target.html(tr);
            labelText.html(`รายการแทง: ${self.text()}<br/><small class="text-mute">วันที่: ${self.closest('tr').find('td:eq(0)').text()}</small>`);
            target.closest('.modal').modal('show');
        }

        const navTarget = $('#nav-main');
        let navStack = [];
        const callNavigator = function()
        {
            const max = navStack.length;
            if(max == 1) return;
            for(const i in navStack){
                if(parseInt(i) === max-1){
                    $('#main-table').html(navStack[i]);
                    navStack.splice(i,1);
                }
            }
        }
        const storeNavigator = function(keyName)
        {
            const tb = targetTable.html();
            navStack.push(tb);
            return true;
        }
    </script>
@endsection