@extends('layouts.master')

@section('title')
    LT-168 :: รายงานหวยฮานอย
@endsection

@section('sub_title')
    รายงานหวยฮานอย
@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-2">
                            <h3 class="mb-0">รายงานหวยฮานอย</h3>
                        </div>
                        <div class="col">
                            <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                                <ol class="breadcrumb breadcrumb-links breadcrumb-dark link_line">
                                    <li class="breadcrumb-item">
                                        <a href="javascript:void(0);" class="text-default" onclick="location.reload()">ประเภทหวย</a>
                                    </li>

                                </ol>
                            </nav>
                        </div>
                        <div class="col text-right d-flex">
                            <div class="col text-right pr-0">
                                <input type="date" id="date_filter_from_date" name="from_date" class="form-control" onchange="filterDate(this)" value="{{ $filter['from_date'] }}" />
                            </div>
                            <div class="col d-flex justify-content-center">
                                <label class="small mr-3 text-nowrap my-auto">ถึงวันที่</label>
                                <input type="date" id="date_filter_to_date" name="to_date" class="form-control" onchange="filterDate(this)" value="{{ $filter['to_date'] }}" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body table-responsive py-3">
                    <table id="main-table" class="table 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>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($export as $key => $item)
                            <tr>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="javascript:void(0);" onclick="viewAgent(this, '{{ $key }}')">{{ lotteryName($key) }}รวม</a>
                                </td>
                                <td class="align-middle text-center font-weight-bold">{{ nf($item['amount'], true) }}</td>
                                <td class="align-middle text-center font-weight-bold text-success">{{ nf(-$item['discount'], true) }}</td>
                                <td class="align-middle text-center font-weight-bold text-primary">{{ nf($item['payment'], true) }}</td>
                                <td class="align-middle text-center font-weight-bold text-info">{{ nf($item['win'], true) }}</td>
                                <td class="align-middle text-center font-weight-bold text-dark">{{ nf($item['payment']-$item['win'], true) }}</td>
                                <td class="align-middle text-center font-weight-bold text-danger">{{ nf($item['cancel'], true) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js" integrity="sha512-LUKzDoJKOLqnxGWWIBM4lzRBlxcva2ZTztO8bTcWPmDSpkErWx0bSP4pdsjNH8kiHAUPaT06UXcb+vOEZH+HpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(function(){
            //
        });

        const filterDate = function(element)
        {
            const fromDate = $('input[name="from_date"]');
            const toDate = $('input[name="to_date"]');
            if(fromDate.val().length > 0 && toDate.val().length > 0){
                window.location = `{{ url()->current() }}?filter=1&from_date=${fromDate.val()}&to_date=${toDate.val()}`;
            }
        }

        const viewPosition = function (element, lottery) {

        }

        const viewAgent = function(element, lottery)
        {
            const self = $(element);
            const html = self.closest('table').html();
            sessionStorage.setItem('home', html);
            let dataSet = {
                filterType: 'agent',
                lottery: lottery,
                from_date: $('input[name="from_date"]').val(),
                to_date: $('input[name="to_date"]').val(),
            };

            let sum = {
                amount: 0,
                discount: 0,
                payment: 0,
                win: 0,
                paymentSum: 0,
                cancel: 0,
            };

            $.post(`{{ route('report.hanoi.filter') }}`, dataSet, function(res){
                let tr = ``;
                for(const k in res){
                    let data = res[k];
                    let paymentSum = (+data.payment)-(+data.win);
                    sum.amount += data.amount;
                    sum.discount += data.discount;
                    sum.payment += data.payment;
                    sum.win += data.win;
                    sum.paymentSum += paymentSum;
                    sum.cancel += data.cancel;
                    tr += `<tr>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="javascript:void(0);" onclick="viewGateway(this, '${lottery}', '${k}')">
                                    ${k}</a>
                                </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.win, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-dark">${$.number(paymentSum, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-danger">${$.number(data.cancel, 2)} THB</td>
                            </tr>`;
                }
                let sumTr = `<tr class="table-success">
                                <td class="align-middle text-center font-weight-bold">รวม: </td>
                                <td class="align-middle text-center font-weight-bold">${$.number(sum.amount, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-success">${$.number(sum.discount, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-primary">${$.number(sum.payment, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-info">${$.number(sum.win, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-dark">${$.number(sum.paymentSum, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-danger">${$.number(sum.cancel, 2)} THB</td>
                            </tr>`+tr;
                self.closest('tbody').html(sumTr);
            }, 'json');
        }

        const viewStore = function(element, lottery, agentUsername)
        {
            const self = $(element);
            const html = self.closest('table').html();
            sessionStorage.setItem('agent', html);
            let dataSet = {
                filterType: 'store',
                lottery: lottery,
                agentUsername: agentUsername,
                from_date: $('input[name="from_date"]').val(),
                to_date: $('input[name="to_date"]').val(),
            };
            $.post(`{{ route('report.hanoi.filter') }}`, dataSet, function(res){
                let tr = ``;
                for(const k in res){
                    let data = res[k];
                    let paymentSum = (+data.payment)-(+data.win);
                    tr += `<tr>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="javascript:void(0);" onclick="viewLottery(this, '${lottery}', ${data.store_id})">
                                    ${k}</a>
                                </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.win, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-dark">${$.number(paymentSum, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-danger">${$.number(data.cancel, 2)} THB</td>
                            </tr>`;
                }
                self.closest('tbody').html(tr);
            }, 'json');
            setNav('agent', self.text());
        }

        async function viewGateway(element, lottery, agentUsername)
        {
            const self = $(element);
            const html = self.closest('table').html();
            const table = self.closest('tbody');
            sessionStorage.setItem('gateway', html);
            table.html('');

            let dataSet = {
                filterType: 'gateway',
                lottery: lottery,
                agentUsername: agentUsername,
                from_date: $('input[name="from_date"]').val(),
                to_date: $('input[name="to_date"]').val(),
            };

            let sum = generateSumObject();

            const execute = await axios.post(`{{ route('report.hanoi.filter') }}`, dataSet);
            const response = execute.data;

            for (const k in response) {
                let data = response[k];
                let thaikey = k === 'store' ? 'หน้าร้าน' : 'หน้าเว็บ';
                let handler = k === 'store' ? `viewStore(this, 'HN', '${agentUsername}')` : `viewMemberLottery(this, 'HN', '${agentUsername}')`;
                let tr = $('<tr>');
                tr.append(
                    generateNormalTd().append(
                            $('<a>').attr('href', 'javascript:;').attr('onclick', handler).text(thaikey),
                        ),
                    generateNormalTd().text($.number(data.amount, 2) + ' THB'),
                    generateNormalTd('align-middle text-center font-weight-bold text-success').text($.number(data.discount, 2) + ' THB'),
                    generateNormalTd('align-middle text-center font-weight-bold text-primary').text($.number(data.payment, 2) + ' THB'),
                    generateNormalTd('align-middle text-center font-weight-bold text-info').text($.number(data.won, 2) + ' THB'),
                    generateNormalTd('align-middle text-center font-weight-bold text-dark').text($.number(data.payment-data.won, 2) + ' THB'),
                    generateNormalTd('align-middle text-center font-weight-bold text-danger').text($.number(data.cancel, 2) + ' THB'),
                );
                table.append(tr);

                summaryObj(sum, data);
            }
            table.prepend(generateSumTopTr(sum));
            setNav('gateway', self.text());
        }

        async function viewMember(element, lottery, agentUsername)
        {
            const self = $(element);
            const html = self.closest('table').html();
            const table = self.closest('tbody');
            sessionStorage.setItem('viewMember', html);
            table.html('');

            let dataSet = {
                filterType: 'member',
                lottery: lottery,
                agentUsername: agentUsername,
                from_date: $('input[name="from_date"]').val(),
                to_date: $('input[name="to_date"]').val(),
            };

            let  sum = generateSumObject();

            const execute = await axios.post(`{{ route('report.hanoi.filter') }}`, dataSet);
            const response = execute.data;

            for (const k in response) {
                let data = response[k];
                let tr = $('<tr>');
                tr.append(
                    generateNormalTd().append(
                        $('<a>').attr('href', 'javascript:;').attr('onclick', `viewBills(this, '${lottery}', ${data.userId})`).text(k),
                    ),
                    generateNormalTd().text($.number(data.amount, 2) + ' THB'),
                    generateNormalTd('align-middle text-center font-weight-bold text-success').text($.number(data.discount, 2) + ' THB'),
                    generateNormalTd('align-middle text-center font-weight-bold text-primary').text($.number(data.payment, 2) + ' THB'),
                    generateNormalTd('align-middle text-center font-weight-bold text-info').text($.number(data.won, 2) + ' THB'),
                    generateNormalTd('align-middle text-center font-weight-bold text-dark').text($.number(data.payment-data.won, 2) + ' THB'),
                    generateNormalTd('align-middle text-center font-weight-bold text-danger').text($.number(data.cancel, 2) + ' THB'),
                );
                table.append(tr);

                summaryObj(sum, data);
            }
            table.prepend(generateSumTopTr(sum));

            setNav('viewMember', self.text());
        }

        function generateNormalTd(className = 'align-middle text-center font-weight-bold')
        {
            return $('<td>', {
                class: className,
            })
        }

        function generateSumTopTr(sum)
        {
            return $('<tr>', {
                class: 'table-success',
            }).append(
                generateNormalTd().text('รวม: '),
                generateNormalTd().text($.number(sum.amount, 2) + ' THB'),
                generateNormalTd('align-middle text-center font-weight-bold text-success').text($.number(sum.discount, 2) + ' THB'),
                generateNormalTd('align-middle text-center font-weight-bold text-primary').text($.number(sum.payment, 2) + ' THB'),
                generateNormalTd('align-middle text-center font-weight-bold text-info').text($.number(sum.won, 2) + ' THB'),
                generateNormalTd('align-middle text-center font-weight-bold text-dark').text($.number(sum.payment-sum.won, 2) + ' THB'),
                generateNormalTd('align-middle text-center font-weight-bold text-danger').text($.number(sum.cancel, 2) + ' THB'),
            );
        }

        const viewLottery = function(element, lottery, storeId, isStore = true)
        {
            const self = $(element);
            const html = self.closest('table').html(); // ----- เก็บค่าตารางเดิม
            sessionStorage.setItem('store', html);
            let dataSet = {
                filterType: 'lottery',
                lottery: lottery,
                storeId: storeId,
                isStore: isStore,
                from_date: $('input[name="from_date"]').val(),
                to_date: $('input[name="to_date"]').val(),
            };

            $.post(`{{ route('report.hanoi.filter') }}`, dataSet, function(res){
                let tr = ``;
                for(const k in res){
                    let data = res[k];
                    let paymentSum = (+data.payment)-(+data.win);
                    let flag = isStore ? `viewStaff(this, '${data.country}', ${storeId})` : `viewBills(this, '${data.country}', ${storeId})`;
                    tr += `<tr>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="javascript:void(0);" onclick="${flag}">
                                    ${k}</a>
                                </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.win, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-dark">${$.number(paymentSum, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-danger">${$.number(data.cancel, 2)} THB</td>
                            </tr>`;
                }
                self.closest('tbody').html(tr);
            }, 'json');
            setNav('store', self.text());
        }

        const viewMemberLottery = function(element, lottery, agentUsername)
        {
            const self = $(element);
            const html = self.closest('table').html(); // ----- เก็บค่าตารางเดิม
            const table = self.closest('tbody');
            sessionStorage.setItem('store', html);
            let dataSet = {
                filterType: 'memberLottery',
                lottery: lottery,
                agent_username: agentUsername,
                // isStore: isStore,
                from_date: $('input[name="from_date"]').val(),
                to_date: $('input[name="to_date"]').val(),
            };
            let sum = generateSumObject();

            $.post(`{{ route('report.hanoi.filter') }}`, dataSet, function(res){
                let tr = ``;
                for(const k in res){
                    let data = res[k];
                    let paymentSum = (+data.payment)-(+data.win);
                    let flag = `viewMember(this, '${data.country}', '${agentUsername}')`;
                    tr += `<tr>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="javascript:void(0);" onclick="${flag}">
                                    ${k}</a>
                                </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.win, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-dark">${$.number(paymentSum, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-danger">${$.number(data.cancel, 2)} THB</td>
                            </tr>`;
                summaryObj(sum, data);
                }
                table.html(tr);
                table.prepend(generateSumTopTr(sum));
            }, 'json');
            setNav('store', self.text());
        }

        const viewStaff = function(element, lottery, storeId)
        {
            const self = $(element);
            const html = self.closest('table').html(); sessionStorage.setItem('lottery', html);
            let dataSet = {
                filterType: 'staff',
                lottery: lottery,
                storeId: storeId,
                from_date: $('input[name="from_date"]').val(),
                to_date: $('input[name="to_date"]').val(),
            };
            $.post(`{{ route('report.hanoi.filter') }}`, dataSet, function(res){
                let tr = ``;
                for(const k in res){
                    let data = res[k];
                    let paymentSum = (+data.payment)-(+data.win);
                    tr += `<tr>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="javascript:void(0);" onclick="viewBills(this, '${lottery}', ${data.user_id})">
                                    ${k}</a>
                                </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.win, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-dark">${$.number(paymentSum, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-danger">${$.number(data.cancel, 2)} THB</td>
                            </tr>`;
                }
                self.closest('tbody').html(tr);
            }, 'json');
            setNav('lottery', self.text());
        }

        const viewBills = function(element, lottery, userId)
        {
            const self = $(element);
            const html = self.closest('table').html(); sessionStorage.setItem('staff', html);
            let dataSet = {
                filterType: 'bills',
                lottery: lottery,
                userId: userId,
                from_date: $('input[name="from_date"]').val(),
                to_date: $('input[name="to_date"]').val(),
            };
            let th = `<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>`;
            self.closest('table').find('thead').html(th);
            $.post(`{{ route('report.hanoi.filter') }}`, dataSet, function(res){
                let tr = ``;
                for(const k in res){
                    let data = res[k];
                    let paymentSum = (+data.payment)-(+data.win);
                    tr += `<tr>
                                <td class="align-middle text-center font-weight-bold">
                                    <small>งวดวันที่: ${data.round}</small><br/>
                                    <small>วันที่ทำรายการ: ${data.date}</small>
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="javascript:void(0);" onclick="viewBillDetail(this, '${lottery}', ${data.user_id})">
                                    ${k}</a>
                                </td>
                                <td class="align-middle text-center font-weight-bold text-${data.status.color}">${data.status.text}</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.win, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-dark">${$.number(paymentSum, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-danger">${$.number(data.cancel, 2)} THB</td>
                            </tr>`;
                }
                self.closest('tbody').html(tr);
            }, 'json');
            setNav('staff', self.text());
        }

        const viewBillDetail = function(element, lottery, billId)
        {

        }

        const setNav = function(key, text)
        {
            const nav = $('.link_line');
            let html = `<li class="breadcrumb-item">
                                        <a href="javascript:void(0);" class="text-default" onclick="loadLocalStorage(this, '${key}')">${text}</a>
                                    </li>`;
            nav.append(html);
        }
        const loadLocalStorage = function(el, key)
        {
            const table = $('#main-table');
            const self = $(el);
            table.html(sessionStorage.getItem(key));
            self.closest('li').nextAll('li').remove();
            self.closest('li').remove();
        }

        function generateSumObject()
        {
            return {
                amount: 0,
                discount: 0,
                payment: 0,
                won: 0,
                cancel: 0,
            };
        }

        function summaryObj(sum, data)
        {
            sum.amount += data.amount;
            sum.discount += data.discount;
            sum.payment += data.payment;
            sum.won += data.won;
            sum.cancel += data.cancel;

            return sum;
        }

    </script>
@endsection