@section("page_style")
    <link rel="stylesheet" type="text/css" href="{{ url('dist/assets/plugins/custom/datatables/datatables.bundle.css') }}">
    <link href="{{ url('css/select2.min.css') }}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="{{ url('css/mdb/mdb.css') }}">

    <style type="text/css">
        .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
            background-color: #00FFFF;
        }

        .select2-container .select2-selection--single {
            height: calc(1.5em + 1.3rem + 2px);
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 20px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px;
        }
        
    </style>
@endsection

@php
    $currency = auth()->guard('agentportal')->user()->agentLocation->agentCountry->currency ?? '';
@endphp

<div class="card card-custom card-stretch gutter-b">
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body p-0 position-relative">
        <!--begin::Stats-->
        <div class="container">
            <!--begin::Row-->
            <div class="row m-0">
                <div class="col px-6 py-8 rounded-xl">
                    <span class="font-size-h1"><b>{{__('message_lang.LBL_BALANCE')}}: </b>&nbsp;&nbsp;&nbsp; <span>{{number_format(auth()->guard('agentportal')->user()->agentLocation->balance, 2)}} {{$currency}}</span></span>
                </div>
            </div>
            <!--end::Row-->
        </div>
        <!--end::Stats-->
    </div>
    <!--end::Body-->
</div>

<div class="row">
    <div class="col-lg-12 col-xxl-12 order-1 order-xxl-12">
        <div class="loaderParent" style="display: none;">
            <div class="loaderDashboard"></div>
        </div>
        <div class="row justify-content-end">
            <div class="form-group mr-4">
                <select class="form-control" name="txn-date-filter" id="txn-date-filter">
                    <option value="0">Today</option>
                    <option value="1">This Week</option>
                    <option value="2" selected>This Month</option>
                    <option value="3">Last Week</option>
                    <option value="4">Last Month</option>
                    <option value="5">Custom Date</option>
                </select>
            </div>
            <div class="form-group col-md-3 custom_date">
                <input type="text" class="form-control" name="start_date" id="txn-start-date-filter" placeholder="Start Date">
            </div>
            <div class="form-group col-md-3 custom_date">
                <input type="text" class="form-control" name="end_date" id="txn-end-date-filter" placeholder="End Date">
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <!--begin::Mixed Widget 1-->
        <div class="card card-custom card-stretch gutter-b">
            <!--begin::Body-->
            <div class="card-body p-0 position-relative overflow-hidden">
                <!--begin::Stats-->
                <div class="card-spacer">
                    <!--begin::Row-->
                    <div class="row m-0">
                        <div class="col bg-light-info px-6 py-8 rounded-xl mb-7">
                            <span style="align-self: center" class="font-weight-bold font-size-h1">{{__('message_lang.LBL_COMMISSIONS')}}</span>
                            <div class="row mt-4">
                                <span class="col-md-4 font-size-h4"><b>{{__('message_lang.LBL_PAID')}}: </b>&nbsp;&nbsp;&nbsp; <span id="commissionsPaid"></span> {{$currency}}</span><br>
                                <span class="col-md-4 font-size-h4"><b>{{__('message_lang.LBL_SENT')}}: </b>&nbsp;&nbsp;&nbsp; <span id="commissionsSent"></span> {{$currency}}</span><br>
                                <span class="col-md-4 font-size-h4"><b>{{__('message_lang.LBL_TOTAL')}}: </b>&nbsp;&nbsp;&nbsp; <span id="totalCommissions"></span> {{$currency}}</span>
                            </div>
                        </div>
                    </div>
                    <!--end::Row-->
                    <!--begin::Row-->
                    <div class="row m-0">
                        <div class="col bg-light-danger px-6 py-8 rounded-xl mr-7">
                            <span class="font-weight-bold font-size-h1">{{__('message_lang.LBL_TOTAL_PAID')}}</span>
                            <div class="mt-4">
                                <span class="font-size-h4"><b>{{__('message_lang.LBL_AMOUNT')}}: </b>&nbsp;&nbsp;&nbsp; <span id="totalPaid"></span> {{$currency}}<br>
                                <span class="font-size-h4"><b>Transaction: </b>&nbsp;&nbsp;&nbsp; <span id="nbrPaid"></span>
                            </div>
                        </div>
                        <div class="col bg-light-success px-6 py-8 rounded-xl">
                            <span style="align-self: center" class="font-weight-bold font-size-h1">{{__('message_lang.LBL_TOTAL_SENT')}}</span>
                            <div class="mt-4">
                                <span class="font-size-h4"><b>{{__('message_lang.LBL_AMOUNT')}}: </b>&nbsp;&nbsp;&nbsp; <span id="totalSent"></span> {{$currency}}</span><br>
                                <span class="font-size-h4"><b>Transaction: </b>&nbsp;&nbsp;&nbsp; <span id="nbrSent"></span></span>
                            </div>
                        </div>
                    </div>
                    <!--end::Row-->
                </div>
                <!--end::Stats-->
            </div>
            <!--end::Body-->
        </div>
        <!--end::Mixed Widget 1-->
    </div>
</div>


<script>
    const number_format = (num, decimals) => parseFloat(num).toLocaleString('en', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    });
    
    $(document).ready(function(){
        $(document).on('change', "#txn-date-filter", function() {
        if($("#txn-date-filter").val() == 5) {
            $(".custom_date").show();
            $('#txn-start-date-filter, #txn-end-date-filter').datepicker({
                "format": "{{ app()->getLocale() == "fr" ? 'dd-mm-yyyy' : 'yyyy-mm-dd' }}",
                "keyboardNavigation": false,
                "autoclose": true,
                "endDate": new Date(),
                "orientation": 'bottom'
            });

            $('#txn-start-date-filter').datepicker().on('changeDate', function (selected) {
                fetchStatement();
                $('#txn-end-date-filter').datepicker('setStartDate', new Date(selected.date.valueOf()));
            });

            $('#txn-end-date-filter').datepicker().on('changeDate', function (selected) {
                fetchStatement();
            });
        } else {
            fetchStatement();
        }
        });
        fetchStatement();
    });

    function fetchStatement()
    {
        $(".loaderParent").show();
        var token = $('meta[name="_token"]').attr('content');
        if($("#txn-date-filter").val() == 5) {
            $(".custom_date").show();
            $('#txn-start-date-filter, #txn-end-date-filter').datepicker({
                "format": "{{ app()->getLocale() == "fr" ? 'dd-mm-yyyy' : 'yyyy-mm-dd' }}",
                "keyboardNavigation": false,
                "autoclose": true,
                "endDate": new Date(),
                "orientation": 'bottom'
            });

            $('#txn-start-date-filter').datepicker().on('changeDate', function (selected) {
                $('#txn-end-date-filter').datepicker('setStartDate', new Date(selected.date.valueOf()));
            });

            $('#txn-end-date-filter').datepicker().on('changeDate', function (selected) {
            });

            var data = {
                "date": $("#txn-date-filter").val(),
                "start_date": $("#txn-start-date-filter").val(),
                "end_date": $("#txn-end-date-filter").val(),
                "_token" : token
            }
        } else {
            $(".custom_date").hide();
            var data = {
                "date": $("#txn-date-filter").val(),
                "_token" : token
            }
        }
        $.ajax({
            url: "{!! route('agentportal.agentportal-dashboard-locadmin-txn')  !!}",
            type: "POST",
            data: data,
            success: function (response) {
                $(".loaderParent").hide();
                fill(response)
            },
            error: function() {
                $(".loaderParent").hide();
                fill()
            }
        });
    }

    function fill(response = null) {
        if (response == null){
            $("#commissionsPaid").html('');
            $("#commissionsSent").html('');
            $("#totalCommissions").html('');
            $("#totalPaid").html('');
            $("#nbrPaid").html('');
            $("#totalSent").html('');
            $("#nbrSent").html('');
        } else {
            var totalPaid = 0; var totalSent = 0;
            if (response.commissionsPaid != undefined && response.commissionsPaid.length != 0){
                var pTotalCredit = response.commissionsPaid[0].totalCredit ?? 0
                totalPaid = pTotalCredit;
                $("#commissionsPaid").html(number_format(totalPaid));
            }
            if (response.commissionsSent != undefined && response.commissionsSent.length != 0){
                var sTotalCredit = response.commissionsSent[0].totalCredit ?? 0
                totalSent = sTotalCredit;
                $("#commissionsSent").html(number_format(totalSent));
            }
            $("#totalCommissions").html(number_format(totalSent + totalPaid));
            $("#totalPaid").html(number_format(response.totalPaid ?? 0));
            $("#nbrPaid").html(response.nbrPaid ?? 0);
            $("#totalSent").html(number_format(response.totalSent ?? 0));
            $("#nbrSent").html(response.nbrSent ?? 0);
        }
    }
</script>