@extends('layouts.appUi')

@section('title')
    แทงหวย
@endsection

@section('header')
    <div class="appHeader">
        <div class="left">
            <a href="javascript:;" onclick="goBack()" class="headerButton goBack">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">
            สรุปรายการแทง
        </div>
    </div>
@endsection

@section('content')
    <div class="section mt-2 mb-2">
        <div class="card">
            <div class="card-body">
                <form id="filter-date-form">
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group boxed">
                                <div class="input-wrapper">
                                    <div class="form-group">
                                        <label class="label" for="select-lottery-round">งวดวันที่</label>
                                        <select class="form-control" id="select-lottery-round" name="lottery_round">
                                            <option selected value="">กรุณาเลือกงวด</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group boxed">
                                <div class="input-wrapper">
                                    <div class="form-group">
                                        <label class="label" for="select-lottery-round-demo">ประเภทหวย</label>
                                        <select class="form-control" id="select-lottery-round-demo" name="lottery_round-demo">
                                            <option selected value="">กรุณาเลือกประเภทหวย</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group boxed">
                                <div class="input-wrapper">
                                    <label class="label" for="text4b">ตั้งแต่วันที่</label>
                                    <input type="date" class="form-control" id="text4b" name="from"
                                           placeholder="Text Input"/>
                                    <i class="clear-input">
                                        <ion-icon name="close-circle" role="img" class="md hydrated"
                                                  aria-label="close circle"></ion-icon>
                                    </i>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group boxed">
                                <div class="input-wrapper">
                                    <label class="label" for="text4b">ถึง</label>
                                    <input type="date" class="form-control" id="text4b" name="to"
                                           placeholder="Text Input"/>
                                    <i class="clear-input">
                                        <ion-icon name="close-circle" role="img" class="md hydrated"
                                                  aria-label="close circle"></ion-icon>
                                    </i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-10">
                            <button type="button" onclick="tableInit();" class="btn btn-primary rounded w-100">ค้นหา
                            </button>
                        </div>
                        <div class="col-2">
                            <button type="button" onclick="window.print();" class="btn btn-success rounded w-100">
                                ปริ้นท์
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="section mt-2">
        <div id="main-content-section" class="card">
            <div id="main-el" class="table-responsive">
                <table id="lottery-table" class="table">
                    <thead>
                    <tr>
                        <th class="text-center" scope="col">ประเภทหวย</th>
                        <th class="text-center" scope="col">จำนวนบิล</th>
                        <th class="text-center" scope="col">ยอดแทง</th>
                        <th class="text-center" scope="col">ส่วนลด</th>
                        <th class="text-center" scope="col">สุทธิ</th>
                        <th class="text-center" scope="col">ยอดถูก</th>
                        <th class="text-center" scope="col">ยอดถูกสุธิ</th>
                        <th class="text-center" scope="col">รายงานบิล</th>
                    </tr>
                    </thead>
                    <tbody>

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

@section('modal')
    <div class="modal fade action-sheet" id="bill-detail-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable" role="document" style="max-height: 85vh; height: auto;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                </div>
                <div class="modal-body">
                    <div class="action-sheet-content p-0">
                        <div class="table-responsive rounded-0">
                            <table class="table">
                                <thead class="table-active">
                                <tr>
                                    <th class="border-top-0 text-center align-middle">ประเภท</th>
                                    <th class="border-top-0 text-center align-middle">หมายเลข</th>
                                    <th class="border-top-0 text-center align-middle">สถานะ</th>
                                    <th class="border-top-0 text-center align-middle">ไลน์ส่วนลด</th>
                                    <th class="border-top-0 text-center align-middle">บาทละ</th>
                                    <th class="border-top-0 text-center align-middle">ยอดแทง</th>
                                    <th class="border-top-0 text-center align-middle">ส่วนลด</th>
                                    <th class="border-top-0 text-center align-middle">สุทธิ</th>
                                    <th class="border-top-0 text-center align-middle">ยอดถูก</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div id="modalBottom" class="row">
                        <div class="col-6">
                            <a target="_blank" id="pdfBtn" class="btn btn-info btn-lg btn-block">
                                <ion-icon name="document-text-outline"></ion-icon>
                                ใบเสร็จ PDF
                            </a>
                        </div>
                        <div class="col-6">
                            <button id="cancelBtn" class="btn btn-danger btn-lg btn-block" onclick="cancelBill(this)">
                                <ion-icon name="close-outline"></ion-icon>
                                ยกเลิกบิล
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade dialogbox" id="dialog" data-bs-backdrop="static" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-icon text-warning">
                    <ion-icon name="hourglass-outline"></ion-icon>
                </div>
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <div class="btn-inline">
                        <a href="#" class="btn" data-bs-dismiss="modal">ปิด</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade dialogbox" id="FilterDialog" data-bs-backdrop="static" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">วันที่</h5>
                </div>
                <form onsubmit="FilterHandler(event, this)">
                    <div class="modal-body text-start mb-2">

                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label" for="text1">กรุณาระบุวันที่</label>
                                <input type="date" class="form-control px-0" id="text1" name="filter_date">
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <div class="btn-inline">
                            <button type="button" class="btn btn-text-secondary"
                                    data-bs-dismiss="modal">ปิด
                            </button>
                            <button type="submit" class="btn btn-text-primary">ค้นหา</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade dialogbox" id="removeBankAccountDialog" data-bs-backdrop="static" tabindex="-1"
         role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-icon text-danger">
                    <ion-icon name="alert"></ion-icon>
                </div>
                <div class="modal-header pt-2">
                    <h5 class="modal-title">ยืนยันการยกเลิกบิล?</h5>
                </div>
                <div class="modal-body">
                    กรุณาตรวจสอบความถูกต้องอีกครั้ง ก่อนยืนยันรายการ
                </div>
                <div class="modal-footer">
                    <div class="btn-inline">
                        <a href="#" class="btn btn-text-secondary" data-bs-dismiss="modal" data-confirm="0">ยกเลิก</a>
                        <a href="javascript:;" class="btn btn-text-danger processRemoveBank" data-bs-dismiss="modal"
                           data-confirm="1">ยืนยัน</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer')

@endsection

@section('script')
    <script>
        const config = {
            endpoint: `{{ url()->current() }}`,
        };

        /** Init **/
        $(function () {
            tableInit();
        });

        function tableInit() {
            let param = $('#filter-date-form').serialize();
            param += `&json=true`;
            $.getJSON(config.endpoint, param, (res) => {
                if (res.success) {
                    let tr = ``;
                    for (const k in res.data) {
                        let datas = res.data[k];
                        if (!datas) continue;
                        tr += `<tr class="text-black">
                        <td class="text-center text-primary fw-bold">${datas.name}</td>
                        <td class="text-center">${$.number(datas.summary.bills)} บิล</td>
                        <td class="text-center">${$.number(datas.summary.amount, 2)} THB</td>
                        <td class="text-center text-success">${$.number(-datas.summary.discount, 2)} THB</td>
                        <td class="text-center text-primary">${$.number(datas.summary.payment, 2)} THB</td>
                        <td class="text-center text-dark">${$.number(datas.summary.won, 2)} THB</td>
                        <td class="text-center text-primary">${$.number((datas.summary.payment - datas.summary.won), 2)} THB</td>
                        <td class="text-center">
                          <a href="javascript:;" onclick="showLotteryReport(this)" data-country="${datas.country}"><ion-icon name="bar-chart-outline"></ion-icon></a>
                        </td>
                    </tr>`;
                    }
                    const target = $('#lottery-table');
                    target.find('tbody').html(tr);

                    $('.table-data').remove();

                    const targetSelect = $('#select-lottery-round');
                    for (const k in res.lottery_round) {
                        targetSelect.append(
                            $('<option>', {
                                'value': res.lottery_round[k].id
                            }).text(res.lottery_round[k].th_datetime)
                        );
                    }
                }
            });
        }

        function showLotteryReport(el) {
            const self = $(el);
            const targetElement = $('#main-content-section');
            let param = {
                'keyCase': 'lottery-report',
                'json': true,
                'country': self.data('country'),
            };
            param = $('#filter-date-form').serialize() + '&' + $.param(param);
            let content = ``;
            $.getJSON(config.endpoint, param, (res) => {
                if (res.success) {
                    for (const k in res.data) {
                        let data = res.data[k];

                        let bets = data.bet;
                        let tr = ``;
                        let summary = {
                            amount: 0, discount: 0, payment: 0, won: 0, wonSummary: 0,
                        };
                        for (const betKey in bets) {
                            let bet = bets[betKey];
                            tr += `<tr class="text-black">
                        <td class="text-center">${bet.type}</td>
                        <td class="text-center">${bet.number}</td>
                        <td class="text-center">${$.number(bet.amount, 2)}</td>
                        <td class="text-center text-success">${$.number(-bet.discount, 2)}</td>
                        <td class="text-center text-primary">${$.number(bet.payment, 2)}</td>
                        <td class="text-center text-primary">${bet.won ? $.number(bet.won, 2) : $.number(0, 2)}</td>
                        <td class="text-center text-primary">${bet.won ? $.number((bet.payment - bet.won), 2) : $.number(0, 2)}</td>
                    </tr>`;
                            summary.amount += bet.amount;
                            summary.discount += bet.discount;
                            summary.payment += bet.payment;
                            summary.won += bet.won ?? 0;
                            summary.wonSummary += bet.won ? (bet.payment - bet.won) : 0;
                        }
                        tr = `<tr class="text-black table-success">
                        <td class="text-center" colspan="2">รวม: </td>
                        <td class="text-center">${$.number(summary.amount, 2)}</td>
                        <td class="text-center text-success">${$.number(-summary.discount, 2)}</td>
                        <td class="text-center text-primary">${$.number(summary.payment, 2)}</td>
                        <td class="text-center text-primary">${$.number(summary.won, 2)}</td>
                        <td class="text-center text-primary">${$.number(summary.wonSummary, 2)}</td>
                    </tr>` + tr;

                        content += `<div class="table-data card mt-3">
                          <div class="card-body">
                            <h5 class="card-title text-primary">${data.bill_id}</h5>
                            <h6 class="card-subtitle mb-1">${data.th_datetime}</h6>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th class="text-center" scope="col">ประเภท</th>
                                            <th class="text-center" scope="col">หายเลข</th>
                                            <th class="text-center" scope="col">ยอดแทง</th>
                                            <th class="text-center" scope="col">ส่วนลด</th>
                                            <th class="text-center" scope="col">สุทธิ</th>
                                            <th class="text-center" scope="col">ยอดถูก</th>
                                            <th class="text-center" scope="col">ยอดถูกสุทธิ</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        ${tr}
                                    </tbody>
                                </table>
                            </div>
                          </div>
                      </div>`;
                    }
                    targetElement.after(content);
                }
            });
        }

    </script>
@endsection

{{-- @section('bottomNav')

@endsection --}}