@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">
                            <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>ทุกสาขา</option>
                                    @if (Auth::user()->isAdmin())
                                        <option value>ทุกสาขา</option>
                                    @endif
                                    @foreach ($myStore as $storeItem)
                                        @foreach ($storeItem as $store)
                                            <option value="{{ $store->id }}">{{ $store->owner->username.': '.$store->store_name }}</option>
                                        @endforeach
                                    @endforeach
                                </select>
                            </div>
                            <div class="col text-right">
                                <select class="form-control" id="roundSelect">
                                    <option disabled selected value>งวดวันที่</option>
                                    @foreach ($rounds as $round)
                                        <option value="{{$round['id']}}">{{THdatetime($round['display_date'])}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col text-right">
                                <select class="form-control" id="statSelect">
                                    <option disabled selected value>สถานะ</option>
                                    <option value>ทั้งหมด</option>
                                    <option value="0">รอยืนยัน / ยังไม่ชำระเงิน</option>
                                    <option value="1">ยืนยันแล้ว / รอออกรางวัล</option>
                                    <option value="2">ยกเลิกรายการ</option>
                                    <option value="3">ไม่ถูกรางวัล</option>
                                    <option value="4">ถูกรางวัล</option>
                                </select>
                            </div>
                            <div class="col">
                                <select id="staffSelect" class="form-control" name="staff">
                                    <option value disabled selected>กรุณาระบุพนักงาน</option>
                                </select>
                            </div>
                            {{-- <div class="col">
                                <button class="btn btn-default w-100" type="submit">
                                    <i class="fas fa-search"></i> ค้นหา</button>
                            </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>
                    </div>
                    <div class="card-body py-3">
                        <div class="table-responsive">
                            <table class="table table-sm table-hover table-bordered">
                                <thead>
                                    <tr>
                                        <th class="align-middle text-center font-weight-bold table-dark text-white" data-sumamount>
                                            ยอดแทง: 0.00 THB
                                        </th>
                                        <th class="align-middle text-center font-weight-bold table-success" data-sumdiscount>
                                            ส่วนลด: 0.00 THB
                                        </th>
                                        <th class="align-middle text-center font-weight-bold table-danger" data-cancel_amount>
                                            ยอดยกเลิก: 0.00 THB
                                        </th>
                                        <th class="align-middle text-center font-weight-bold table-info" data-net_amount>
                                            สุทธิ: 0.00 THB
                                        </th>
                                        <th class="align-middle text-center font-weight-bold table-warning" data-win_amount>
                                            ยอดถูก: 0.00 THB
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <div class="card-body py-3">
                        <div class="table-responsive">
                            <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>
                                        <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 $username => $item)
                                        <tr>
                                            <td class="align-middle text-center font-weight-bold">{{ $username }}</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>
@endsection

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

            const storeSelect = document.getElementById('storeSelect');
            const staffSelect = document.getElementById('staffSelect');
            const roundSelect = document.getElementById('roundSelect');
            const statSelect = document.getElementById('statSelect');

            const getLatestRound = async () => {
                roundSelect.value = roundSelect.options[roundSelect.options.length - 1].value;
                await roundSelect.onchange();
            }

            const table = document.getElementById('place-table');

            storeSelect.onchange = async e => await tryCatchSwal(async () => {
                staffSelect.value = '';
                roundSelect.value = '';
                statSelect.value = '';
                
                return showResultFrom(`{{ url('agent/report/summary/staff/filter') }}/store`, result => {
                    let roundOption = `<option value selected disabled>งวดวันที่</option><option value>ทุกงวด</option>`;
                    for (const key in result.rounds){
                        const item = result.rounds[key];
                        roundOption += `<option value="${item.id}">${formattedDatetime(item.display_date, false)}</option>`;
                    }
                    roundSelect.innerHTML = roundOption;

                    let staffOption = `<option value disabled selected>กรุณาระบุพนักงาน</option><option value>พนักงานทุกคน</option>`;
                    for (const key in result.staff){
                        const item = result.staff[key];
                        staffOption += `<option value="${item.id}">${item.username}</option>`;
                    }
                    staffSelect.innerHTML = staffOption;
                });
            });

            roundSelect.onchange = async e => await tryCatchSwal(async () => {
                return showResultFrom(`{{ url('agent/report/summary/staff/filter') }}/round`, result => {
                    let staffOption = `<option value disabled selected>กรุณาระบุพนักงาน</option><option value>พนักงานทุกคน</option>`;
                    for (const key in result.staff){
                        const item = result.staff[key];
                        staffOption += `<option value="${item.id}">${item.username}</option>`;
                    }
                    staffSelect.innerHTML = staffOption;
                });

            });

            statSelect.onchange = async e => await tryCatchSwal(async () => {
                return showResultFrom(`{{ url('agent/report/summary/staff/filter') }}/stat`);
            });

            staffSelect.onchange = async e => await tryCatchSwal(async () => {
                return showResultFrom(`{{ url('agent/report/summary/staff/filter') }}/staff`);
            });

            // getLatestRound();

            async function showResultFrom(target, afterCreateRows = () => {}) {
                $("#loader-wrapper").fadeIn();
                try {
                    const formData = new FormData();
                    formData.append('storeId', storeSelect.value || '');
                    formData.append('staffId', staffSelect.value || '');
                    formData.append('roundId', roundSelect.value || '');
                    formData.append('statId', statSelect.value || '');

                    const result = await fetchJson(`{{ url('agent/report/summary/staff/filter') }}/store`, 'POST', formData);
                    if (!result) return false;

                    let trs = ``;
                    for (const username in result.result) {
                        const sum = result.result[username];
                        trs += 
                            `<tr>
                                <td class="align-middle text-center font-weight-bold">${username}</td>
                                <td class="align-middle text-center font-weight-bold table-dark text-white">${$.number(sum.amount, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold table-success">${$.number(sum.discount, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold table-danger">${$.number(sum.cancel, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold table-info">${$.number(sum.payment, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold table-warning">${$.number(sum.winner, 2)} THB</td>
                            </tr>`;
                    }
                    table.innerHTML = trs;
                    calculateSummary();
                    return await afterCreateRows(result);
                } catch (e) {
                    console.error(e)
                } finally {
                    $("#loader-wrapper").fadeOut()
                }
            }
        });

        function calculateSummary() {
            const trs = document.querySelectorAll('#place-table tr');

            let betTotal = 0;
            let discountTotal = 0;
            let cancelTotal = 0;
            let summary = 0;
            let prized = 0;

            for (const $tr of trs) {
                betTotal += +$tr.querySelector('td:nth-child(2)').textContent.replace(/\.\d{2} THB/, '').replaceAll(',', '')
                discountTotal += +$tr.querySelector('td:nth-child(3)').textContent.replace(/\.\d{2} THB/, '').replaceAll(',', '')
                cancelTotal += +$tr.querySelector('td:nth-child(4)').textContent.replace(/\.\d{2} THB/, '').replaceAll(',', '')
                summary += +$tr.querySelector('td:nth-child(5)').textContent.replace(/\.\d{2} THB/, '').replaceAll(',', '')
                prized += +$tr.querySelector('td:nth-child(6)').textContent.replace(/\.\d{2} THB/, '').replaceAll(',', '')
            }

            $('[data-sumamount]').text(`ยอดแทง: ${$.number(betTotal, 2)} THB`);
            $('[data-sumdiscount]').text(`ส่วนลด: ${$.number(discountTotal, 2)} THB`);
            $('[data-cancel_amount]').text(`ยอดยกเลิก: ${$.number(cancelTotal, 2)} THB`);
            $('[data-net_amount]').text(`สุทธิ: ${$.number(summary, 2)} THB`);
            $('[data-win_amount]').text(`ยอดถูก: ${$.number(prized, 2)} THB`);
        }

    </script>
@endsection