@extends('parts.container')

@section('styles')
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="{{ asset('vendor/src/assets/css/dark/dashboard/dash_1.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('vendor/src/assets/css/light/dashboard/dash_1.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('vendor/src/plugins/src/flatpickr/flatpickr.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('vendor/src/assets/css/light/scrollspyNav.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('vendor/src/assets/css/dark/scrollspyNav.css') }}" type="text/css" />
    <link href="{{ asset('vendor/src/plugins/css/dark/flatpickr/custom-flatpickr.css') }}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/src/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('vendor/src/plugins/css/light/table/datatable/dt-global_style.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('vendor/src/plugins/css/dark/table/datatable/dt-global_style.css') }}">

    <!-- END PAGE LEVEL STYLES -->
@endsection

@section('content')
<div class="row layout-top-spacing">
    <div class="col-md-6 layout-spacing">
        <div class="widget widget-card-four d-flex ">
            <div>
                <div class="widget-content d-flex align-self-center">
                    <input id="rangeCalendarFlatpickr" class="form-control flatpickr flatpickr-input active m-2"
                        type="text" placeholder="Select Date..">
                    <button class="btn btn-primary m-2" onclick="onDateSelected()">Submit</button>
                </div>
            </div>

        

        </div>

    </div>
    <div class="col-md-3 layout-spacing">
        <div class="widget widget-card-four">
            <div class="widget-content">
          
                    <div class="col-md-12">
                        <div class="w-detail">
                            <p class="w-title">Total Volume(KES)</p>
                            <p class="w-stats" style="color: #f8538d;"><span id="mpesa-volume">Loading..</span></p>
                        </div>
                    </div>
                   


            </div>
        </div>
    </div>

    <div class="col-md-3 layout-spacing">
        <div class="widget widget-card-four">
            <div class="widget-content">
          
                    <div class="col-md-12">
                        <div class="w-detail">
                            <p class="w-title">Total Count</p>
                            <p class="w-stats" style="color: #f8538d;"><span id="mpesa-count">Loading...</span></p>
                        </div>
                    </div>
                   


            </div>
        </div>
    </div>



</div>

    <div class="row layout-spacing">
        <div class="col-lg-12">
            <div class="statbox widget box box-shadow">
                <div class="widget-content widget-content-area">
                    <div class="table-responsive backoffice-table-scroll">
                        <table id="voucherTable" class="table style-3 dt-table-hover">
                            <thead>
                                <tr>
                                    <th>User</th>
                                    <th>Amount</th>
                                    <th>Topped Up By</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('vendor/src/plugins/src/table/datatable/datatables.js') }}"></script>
    <script src="{{ asset('vendor/src/plugins/src/flatpickr/flatpickr.js') }}"></script>

    <script>
        const datePicker = flatpickr("#rangeCalendarFlatpickr", {
            mode: "range",
            dateFormat: "Y-m-d",
        });

        let selectedDateRange = null;

        function onDateSelected() {
            selectedDateRange = datePicker.input.value || null;
            voucherTable.ajax.reload();
        }

        const voucherTable = $('#voucherTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "voucher/list",
                data: function(d) {
                    d.date_range = selectedDateRange;
                },
                dataSrc: function(json) {
                    document.getElementById('mpesa-count').innerText = json.recordsTotal;
                    document.getElementById('mpesa-volume').innerText = json.total_volume;
                    return json.data;   
                }
            },
            columns: [{
                    data: 'user'
                },
                {
                    data: 'amount'
                },
                {
                    data: 'topped_up_by'
                },
                {
                    data: 'created_at'
                },
            ],
            dom: "<'dt--top-section'<'row'<'col-12 col-sm-6'l><'col-12 col-sm-6'f>>>tr<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'i'p>",
            oLanguage: {
                oPaginate: {
                    sPrevious: '←',
                    sNext: '→'
                },
                sInfo: "Showing page _PAGE_ of _PAGES_",
                sSearch: "Search...",
                sLengthMenu: "Results: _MENU_",
            },
            lengthMenu: [5, 10, 20, 50],
            pageLength: 50
        });
    </script>
@endsection