@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">
                            <h3 class="mb-0">รายการ</h3>
                        </div>
                        {{-- <div class="col text-right">
                            <a href="#AddSalesCycle" data-toggle="modal" class="btn btn-sm btn-warning"><i class="fas fa-plus text-white-50 mr-1"></i> ตาราง</a>
                        </div> --}}
                    </div>
                </div>
                <div class="card-body table-responsive py-3">
                    <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>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($resultCount as $index => $item)
                            <tr>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="#" onclick="viewuserlist(event, this)" data-userlist="{{ (isset($billUser[$index]) ? json_encode($billUser[$index]):'') }}">{{ $index }}</a>
                                </td>
                                <td class="align-middle text-center font-weight-bold">{{ $item['count'] }}</td>
                                <td class="align-middle text-center font-weight-bold">{{ nf($item['wonAmount'], true) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="userlistModal" tabindex="-1" role="dialog" aria-labelledby="userlistModalLabel" 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="userlistModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <table class="modal-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>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const md = $('#userlistModal');
        const tb = md.find('tbody');
        localStorage.clear();

        function viewuserlist(e, el)
        {
            e.preventDefault();
            const element = $(el);
            const datas = element.data('userlist');
            let tr = ``;

            const thead = localStorage.getItem('oldThead');
            if(thead !== null){
                md.find('thead').html(thead);
                localStorage.removeItem('oldThead');
            }

            for(const k in datas){
                let data = datas[k];
                let billJson = JSON.stringify(data.bills);
                tr += `<tr>
                        <td class="align-middle text-center font-weight-bold">${k}</td>
                        <td class="align-middle text-center font-weight-bold">
                            <a href="#" onclick="viewBills(event, this)" data-bills='${billJson}'>${data.count} รายการ</a>
                        </td>
                        <td class="align-middle text-center font-weight-bold">${data.wonAmount} THB</td>
                    </tr>`;
            }
            md.find('#userlistModalLabel').text(element.text());
            tb.html(tr);
            md.modal('show');
        }

        function viewBills(e, el)
        {
            e.preventDefault();
            const elm = $(el);
            const bills = elm.data('bills');
            let tr = ``;
            // store old thead
            localStorage.setItem('oldThead', md.find('thead').html());

            let newThead = `<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>
                            </tr>`;
            md.find('thead').html(newThead);
            
            for(const k in bills){
                let data = bills[k];
                tr += `<tr>
                        <td class="align-middle text-center font-weight-bold">${data.billId}</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>`;
            }
            md.find('#userlistModalLabel').text(`พนักงาน: `+elm.closest('tr').find('td:eq(0)').text());
            tb.html(tr);
        }
    </script>
@endsection