@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/plugins/src/noUiSlider/nouislider.min.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/plugins/css/light/flatpickr/custom-flatpickr.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 href="{{ asset('vendor/src/plugins/css/light/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>

            <hr>

            <div class="form-check form-switch pt-3">
                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                <label class="form-check-label" for="flexSwitchCheckDefault">All transactions</label>
            </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="style-3" class="table style-3 dt-table-hover">
                            <thead>
                                <thead>
                                    <tr>
                                        <th>User</th>
                                        <th>Status</th>
                                        <th>Currency</th>
                                        <th>Amount</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script src="{{ asset('vendor/src/plugins/src/table/datatable/datatables.js') }}"></script>
    <script src="{{ asset('vendor/src/assets/js/dashboard/dash_1.js') }}"></script>
    <script src="{{ asset('vendor/src/assets/js/scrollspyNav.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 showFailedTransactions = false;
        let selectedDateRange = null;

        $('#flexSwitchCheckDefault').on('change', function() {
            showFailedTransactions = this.checked;
            c3.ajax.reload();
        });

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

        const userId = "{{ $data['user_id'] }}" !== "null" ? {{ $data['user_id'] }} : null;

        c3 = $('#style-3').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "/admin/transactions/dpo/list",
                data: function(d) {
                    d.user_id = userId;
                    d.date_range = selectedDateRange;
                    d.show_failed = showFailedTransactions;
                }
                ,
                dataSrc: function(json) {
                    document.getElementById('mpesa-count').innerText = json.recordsTotal;
                    document.getElementById('mpesa-volume').innerText = json.total_volume;
                    return json.data;   
                }
            },
            columns: [{
                    data: 'user',
                    searchable: false,
                    orderable: false
                },
                {
                    data: 'status',
                    name: 'Transaction Status',
                    render: function(data) {
                        const statusMap = {
                            new: 'badge-secondary',
                            accepted: 'badge-primary',
                            succeeded: 'badge-success',
                            failed: 'badge-danger'
                        };
                        const label = statusMap[data] || 'badge-light';
                        return `<span class="badge ${label}">${data.charAt(0).toUpperCase() + data.slice(1)}</span>`;
                    }
                },
                {
                    data: 'currency_code'
                },
                {
                    data: 'amount'
                },
                {
                    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_",
            },
            stripeClasses: [],
            lengthMenu: [5, 10, 20, 50],
            pageLength: 50
        });

        $(document).ready(() => {
            c3.ajax.reload();
        });
    </script>


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