@extends('layouts.master')

@section('title')
    LT-168 :: สรุปผลการแทง
@endsection

@section('customStyle')
<style>
    #mainTable th {
        font-size: 0.8rem!important;
    }
    .table td {
        font-size: 0.8rem!important;
    }
    .table-grey, .table-grey>td, .table-grey>th {
        background-color: #f0f0f0;
    }

    .table-danger-more {
        background-color: #f06e86;
    }
</style>
@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">
                        @php
                            if($currentRoundStatus){
                                $badgeText = 'เปิดงวด';
                                $badgeClass = 'success';
                            }else{
                                $badgeText = 'ปิดงวด';
                                $badgeClass = 'danger';
                            }
                        @endphp
                        <div class="col">
                            <h3 class="mb-0">รายงานสรุปผลการแทง
                                &nbsp;&nbsp;<span class="badge badge-{{ $badgeClass }}">{{ $badgeText }}</span>
                            </h3>
                        </div>
                        <div class="col text-right">
                            <select class="form-control" name="round">
                                <option value="" disabled>งวดวันที่</option>
                                @foreach ($lotteryRound as $item)
                                    <option value="{{ $item['id'] }}">
                                        {{ THdatetime($item['display_date']) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body table-responsive py-3 topBarSocket">
                    <table class="table table-sm table-hover table-bordered">
                        <thead>
                            <tr>
                                <th class="align-middle text-center font-weight-bold table-dark" data-sumamount="">
                                    ยอดแทง: {{ $sumAmountFormat['amount'] }}</th>
                                <th class="align-middle text-center font-weight-bold table-success" data-sumdiscount="">
                                    ส่วนลด: {{ $sumAmountFormat['discount'] }}</th>
                                <th class="align-middle text-center font-weight-bold table-info" data-netamount="">
                                    ยอดสุทธิ: {{ $sumAmountFormat['payment'] }}</th>
                                <th class="align-middle text-center font-weight-bold table-warning winnerDetail" data-winamount="">
                                    ยอดถูก: {{ $sumAmountFormat['won'] }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>                
                <div class="card-body table-responsive py-3 placeSocket">
                    @if (!$pageStatus || Auth::user()->id != 1)
                    <table class="table table-hover table-bordered d-inline" id="mainTable">
                        <thead>
                            <tr>
                                @foreach ($lotteryType as $typeVal)
                                    @php
                                        $topTrClasss = 'table-success';
                                        if(strpos($typeVal->type, '2 ตัว')  !== false){
                                            $topTrClasss = 'table-warning';
                                        }else if(strpos($typeVal->type, '4 ตัว')  !== false){
                                            $topTrClasss = 'table-grey';
                                        }
                                    @endphp
                                    <th class="align-middle text-center {{ $topTrClasss }} px-1">{{ $typeVal->type }}</th>
                                    <th class="align-middle text-center {{ $topTrClasss }} px-1">ยอดแทง</th>
                                @endforeach
                            </tr>
                            <tr>
                            @foreach ($lotteryType as $typeVal)
                                <td class="align-middle text-center font-weight-bold table-dark py-2 px-1">
                                    ยอดรวม
                                </td>
                                <td class="align-middle text-center font-weight-bold table-dark py-2 px-1" data-placetype="{{ $typeVal->type }}">
                                    @if (isset($sumByType[$typeVal->type]))
                                        {{ number_format($sumByType[$typeVal->type], 2) }}
                                    @else
                                        0.00
                                    @endif
                                </td>
                            @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @for ($i = 0; $i < $maxCount; $i++)
                                <tr>
                                    @foreach ($lotteryType as $typeVal)
                                        @php
                                            $topTrClasss = 'table-success';
                                            if(strpos($typeVal->type, '2 ตัว')  !== false){
                                                $topTrClasss = 'table-warning';
                                            }else if(strpos($typeVal->type, '4 ตัว')  !== false){
                                                $topTrClasss = 'table-grey';
                                            }
                                        @endphp
                                        @if (isset($render[$typeVal->type][$i]))
                                            @php
                                                if($render[$typeVal->type][$i]['red'])
                                                {
                                                    $topTrClasss = 'table-danger-more text-dark';
                                                }

                                                $toadClass = '';
                                                $toadAttr = '';
                                                if(isset($render[$typeVal->type][$i]['toad']))
                                                {
                                                    $toadClass = 'toadDetail';
                                                    $toadAttr = 'data-toad='.$render[$typeVal->type][$i]['toad'];
                                                    // dd($toadAttr);
                                                }
                                            @endphp
                                            <td class="align-middle text-center font-weight-bold py-2 px-1 {{ $topTrClasss }}">
                                                {{ $render[$typeVal->type][$i]['number'] }}
                                            </td>
                                            <td class="align-middle text-center font-weight-bold py-2 px-1 {{ $toadClass }}" {{ $toadAttr }}>
                                                {{ number_format($render[$typeVal->type][$i]['amount'], 2) }}
                                            </td>
                                        @else
                                            <td class="align-middle text-center font-weight-bold py-2 px-1 {{ $topTrClasss }}">
                                                -
                                            </td>
                                            <td class="align-middle text-center font-weight-bold py-2 px-1">
                                                -
                                            </td>
                                        @endif
                                    @endforeach         
                                </tr>
                            @endfor
                        </tbody>
                    </table>
                    @else
                    <div class="d-flex justify-content-center align-item-middle text-center">

                        <h1 class="text-default">
                            <i class="fas fa-spinner fa-pulse fa-7x"></i><br/><br/>
                            ระบบกำลังดึงผลรางวัลอัตโนมัติ...
                        </h1>
                    </div>
                    @endif
                    
                </div>
            </div>

        </div>

    </div>

    <div class="modal fade" id="toad_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <table class="table table-sm 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>
                        </tr>
                    </thead>
                    <tbody id="toad_display">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>

    <div class="modal fade" id="winner_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <table class="table table-hover table-bordered table-danger">
                        <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 id="winner_display">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        </div>
@endsection

@section('scripts')
    <script>
    const placeSocket = document.getElementsByClassName('placeSocket');
    $(document).ready(function(){

        var pusher = new Pusher('40f8857ae79f8ffda546', {
            cluster: 'ap1'
        });

        // var mainTable = setDtTable($('#mainTable'));
        // console.log(mainTable);

        $(document).on('click', '.toadDetail', function(){
            let toadData = $(this).data('toad');
            let tr = ``;
            $.each(toadData.toad, function(i, n){
                tr += `<tr>
                                <td class="align-middle text-center font-weight-bold table-success">${n.number}</td>
                                <td class="align-middle text-center font-weight-bold">${$.number(n.amount, 2)} THB</td>
                            </tr>`;
            });
            tr += `<tr>
                                <td class="align-middle text-center font-weight-bold table-dark">ยอดรวม</td>
                                <td class="align-middle text-center font-weight-bold table-dark">${$.number(toadData.sum, 2)} THB</td>
                            </tr>`;
            $('#toad_display').html(tr);
            $('#toad_modal').modal('show');
        });

        // Puhser Socket
        //var subscribeName = `reportMinitor.`+{{ Auth::user()->id }};
        var subscribeName = `reportMinitor`;
        var channel = pusher.subscribe(subscribeName);
        channel.bind('FormSubmit',async function(data) {
            await $.get(`{{ url('agent/report/monitor') }}`, {}, (res) => {
                // console.log(res);
                const element = $(res).find('.placeSocket').html();
                const topbar = $(res).find('.topBarSocket').html();
                // $('.placeSocket').html(element);
                placeSocket.innerHTML = element;
                $('.topBarSocket').html(topbar);
            });
        });

        $(document).on('change', 'select[name="round"]',async function(){ // Filter Round
            let lotteryRound = $(this).val();
            let dataSet = {lotteryRound:lotteryRound};
            const targetToGet = `{{ url()->current() }}?lottery_round_id=${lotteryRound}`;
            await $.get(targetToGet, {}, (res) => {
                const element = $(res).find('.placeSocket').html();
                const topbar = $(res).find('.topBarSocket').html();
                $('.placeSocket').html(element);
                $('.topBarSocket').html(topbar);
            });
        });

        $(document).on('click', '.winnerDetail', function(){
            $.getJSON(`{{ route('report.winner') }}`, {},async function(res){
                var tr = ``;
                var sum = 0;
                for(const [k, v] of Object.entries(res)){
                    for(const [ik, iv] of Object.entries(v)){
                        sum += +iv.won;
                        tr += `<tr>
                                <td class="align-middle text-center font-weight-bold">
                                    ${k}
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    ${ik}
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    ${$.number(iv.bet, 2)} THB
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    ${$.number(iv.won, 2)} THB
                                </td>
                                </tr>`;
                    }
                }
                tr += `<tr>
                                <td class="align-middle text-center table-dark font-weight-bold" colspan="3">รวม:</td>
                                <td class="align-middle text-center table-dark font-weight-bold">${$.number(sum, 2)} THB</td>
                            </tr>`;
                await $('#winner_display').html(tr);
                $('#winner_modal').modal('show');
            });
        });

    });
    const setDtTable = function(element)
    {
        let mainTb = element.DataTable({
            paging: false,
            info: false,
            searching: false,
            sorting: false,
            columns: [
                { name: "place_number_1", className: "align-middle text-center font-weight-bold py-2 table-success" },
                { name: "place_amount_1", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_2", className: "align-middle text-center font-weight-bold py-2 table-success" },
                { name: "place_amount_2", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_3", className: "align-middle text-center font-weight-bold py-2 table-success" },
                { name: "place_amount_3", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_4", className: "align-middle text-center font-weight-bold py-2 table-success" },
                { name: "place_amount_4", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_5", className: "align-middle text-center font-weight-bold py-2 table-success" },
                { name: "place_amount_5", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_6", className: "align-middle text-center font-weight-bold py-2 table-success" },
                { name: "place_amount_6", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_7", className: "align-middle text-center font-weight-bold py-2 table-success" },
                { name: "place_amount_7", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_8", className: "align-middle text-center font-weight-bold py-2 table-success" },
                { name: "place_amount_8", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_9", className: "align-middle text-center font-weight-bold py-2 table-warning" },
                { name: "place_amount_9", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_10", className: "align-middle text-center font-weight-bold py-2 table-warning" },
                { name: "place_amount_10", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_11", className: "align-middle text-center font-weight-bold py-2 table-success" },
                { name: "place_amount_11", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_12", className: "align-middle text-center font-weight-bold py-2 table-success" },
                { name: "place_amount_12", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_13", className: "align-middle text-center font-weight-bold py-2 table-success" },
                { name: "place_amount_13", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_14", className: "align-middle text-center font-weight-bold py-2" },
                { name: "place_amount_14", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_15", className: "align-middle text-center font-weight-bold py-2" },
                { name: "place_amount_15", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_16", className: "align-middle text-center font-weight-bold py-2" },
                { name: "place_amount_16", className: "align-middle text-center font-weight-bold py-2 table-white" },
                { name: "place_number_17", className: "align-middle text-center font-weight-bold py-2" },
                { name: "place_amount_17", className: "align-middle text-center font-weight-bold py-2 table-white" },
            ],
        });
        $('.dataTable').closest('div.col-sm-12').addClass('table-responsive');
        return mainTb;
    }
    </script>
@endsection