@extends('layouts.popup')

@section('title')
    LT-168 :: รายงานเมมเบอร์
@endsection

@section('sub_title')
    
@endsection

@section('customStyle')
    <style>
        .table-responsive {
            overflow-y: visible !important;
        }
        @media (max-width: 767px) {
            .table-responsive .dropdown-menu {
                position: static !important;
            }
        }
        @media (min-width: 768px) {
            .table-responsive {
                overflow: inherit;
            }
        }
    </style>
@endsection

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

            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col text-right">
                            <input type="date" id="date_filter_from_date" name="from_date" class="form-control" onchange="dateFilter(this)" />                                                  
                        </div>
                        <div class="col-1 text-center">
                            <label class="small text-nowrap my-auto">ถึงวันที่</label> 
                        </div>
                        <div class="col d-flex"> 
                            <input type="date" id="date_filter_to_date" name="to_date" class="form-control"  onchange="" />                                                  
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div id="item-header" class="card-header border-0 pb-0 d-none">
                    <div class="row align-items-center">
                        <div class="col">
                            <a href="javascript:void(0);" onclick="loadLatestTable()"><i class="fas fa-arrow-left"></i></a>
                        </div>
                    </div>
                </div>
                <div class="card-body table-responsive py-3">
                    <table id="main-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>
                                <th class="align-middle text-center font-weight-bold">สุทธิ</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($countries as $country)
                            <tr>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="javascript:void(0);" onclick="showDetail('countryBills' ,{country: '{{ $country->country }}', userId: {{ $userId->id }}})">
                                        {{ lotteryName($country->country) }}
                                    </a>
                                </td>
                                <td class="align-middle text-center font-weight-bold">{{ nf($country->sumAmount, true) }}</td>
                                <td class="align-middle text-center font-weight-bold text-success">{{ nf(-$country->sumDiscount, true) }}</td>
                                <td class="align-middle text-center font-weight-bold text-primary">{{ nf($country->sumPayment, true) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function dateFilter(el)
        {
            const self = $(el);
            const fromInput = $('#date_filter_from_date');
            const toInput = $('#date_filter_to_date');
            if(fromInput.val() && toInput.val()){
                alert('can not use filter.')
            }
        }

        async function showDetail(type, param) {
            const table = $('#main-table');
            saveTable(table);

            let url;
            let method;
            let data = {};
            
            switch(type){
                case 'countryBills' : {
                    let tr = '';
                    url = `{{ route('report.member.index') }}/filter`;
                    method = 'post';
                    data = {
                        type:'countryBills',
                        country: param.country,
                        userId: param.userId,
                    };
                    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>
                            </tr>`;
                    await table.find('thead').html(th);

                    let datas = await doAjax(url, method, data);
                    for(const k in datas){
                        let result = datas[k];
                        console.log(result);
                        tr += `<tr>
                                <td class="align-middle text-center font-weight-bold">
                                    ${result.dateThai}
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="javascript:void(0);" onclick="showDetail('bill', ${result.id})">${result.bill_id}</a>
                                </td>
                                <td class="align-middle text-center font-weight-bold">${$.number(result.amount, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-success">
                                ${$.number(-result.discount, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-primary">${$.number(result.payment, 2)} THB</td>
                            </tr>`;
                    }
                    await table.find('tbody').html(tr);
                    
                    break;
                }

                case 'bill' : {
                    let tr = '';

                    url = `{{ route('report.member.index') }}/filter`;
                    method = 'post';
                    data = {
                        type:'billDetail',
                        billId: param,
                    };

                    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>
                            </tr>`;
                    await table.find('thead').html(th);

                    let datas = await doAjax(url, method, data);
                    for(const k in datas.bet){
                        let result = datas.bet[k];
                        tr += `<tr>
                                <td class="align-middle text-center font-weight-bold">
                                    ${result.type}
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    ${result.number}
                                </td>
                                <td class="align-middle text-center font-weight-bold">${$.number(result.amount, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-success">
                                ${$.number(-result.discount, 2)} THB</td>
                                <td class="align-middle text-center font-weight-bold text-primary">${$.number(result.payment, 2)} THB</td>
                            </tr>`;
                    }
                    await table.find('tbody').html(tr);
                    break;
                }
            }

            
        }

        async function doAjax(url, method, data) {
            let returnData;
            await $.ajax({
                url: url,
                method: method,
                dataType: 'json',
                data: data,
                success: function(res){
                    returnData = res;
                }
            });
            return returnData;
        }

        function saveTable(params) {
            sessionStorage.setItem('table', params.html());
            $('#item-header').toggleClass('d-none');
        }

        function loadLatestTable() {
            let table = sessionStorage.getItem('table');
            $('#main-table').html(table);
            $('#item-header').toggleClass('d-none');
        }

        // $('.table-responsive').on('show.bs.dropdown', function () {
        //     $('.table-responsive').css( "overflow", "inherit" );
        // });

        // $('.table-responsive').on('hide.bs.dropdown', function () {
        //     $('.table-responsive').css( "overflow", "auto" );
        // });
    </script>
@endsection