@extends('parts.container')

@section('styles')
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="{{ asset('vendor/src/plugins/src/apex/apexcharts.css') }}" rel="stylesheet" type="text/css" />
    <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">
    <!-- END PAGE LEVEL STYLES -->
@endsection

@section('content')
    <div class="row layout-top-spacing">
        <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-four ">
                <label for="rangeCalendarFlatpickr" class="d-flex align-self-center">Select Date Range</label>
                <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="row layout-top-spacing">

        <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-four">
                <div class="widget-content">
                    <div class="w-header">
                        <div class="w-info">
                            <h6 class="value">Mobile money transactions</h6>
                        </div>
                    </div>

                    <div class="w-content">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="w-detail">
                                    <p class="w-title">Total Transactions</p>
                                    <p class="w-stats" style="color: #f8538d;">
                                        <span id="mobile-count">Loading...</span>
                                    </p>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="w-detail">
                                    <p class="w-title">Total Amount</p>
                                    <p class="w-stats" style="color: #f8538d;">
                                        <span id="mobile-amount">Loading...</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>

        </div>

        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-four">
                <div class="widget-content">
                    <div class="w-header">
                        <div class="w-info">
                            <h6 class="value">Bank transactions (Flick)</h6>
                        </div>
                    </div>

                    <div class="w-content">

                        <div class="col-md-6">
                            <div class="w-detail">
                                <p class="w-title">Total Transactions</p>
                                <p class="w-stats" style="color: #f8538d;"><span id="flick-count">Loading...</span></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="w-detail">
                                <p class="w-title">Total Amount</p>
                                <p class="w-stats" style="color: #f8538d;"><span id="flick-amount">Loading...</span></p>
                            </div>
                        </div>

                    </div>

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



    <div class="row layout-top-spacing">
        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-four">
                <div class="widget-content">
                    <div class="w-header">
                        <div class="w-info">
                            <h6 class="value">Card transactions (DPO)</h6>
                        </div>
                    </div>

                    <div class="w-content">

                        <div class="col-md-6">
                            <div class="w-detail">
                                <p class="w-title">Total Transactions</p>
                                <p class="w-stats" style="color: #f8538d;"><span id="dpo-count">Loading...</span></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="w-detail">
                                <p class="w-title">Total Amount</p>
                                <p class="w-stats" style="color: #f8538d;"><span id="dpo-amount">Loading...</span></p>
                            </div>
                        </div>

                    </div>

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

        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-four">
                <div class="widget-content">
                    <div class="w-header">
                        <div class="w-info">
                            <h6 class="value">Voucher transactions</h6>
                        </div>
                    </div>

                    <div class="w-content">

                        <div class="col-md-12">
                            <div class="w-detail">
                                <p class="w-title">Total Transactions</p>
                                <p class="w-stats" style="color: #f8538d;"><span id="voucher-count">Loading...</span></p>
                            </div>
                        </div>

                    </div>

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

        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-four">
                <div class="widget-content">
                    <div class="w-header">
                        <div class="w-info">
                            <h6 class="value">Users</h6>
                        </div>
                    </div>

                    <div class="w-content">
                        <div class="col-md-6">
                            <div class="w-detail">
                                <p class="w-title">Signups</p>
                                <p class="w-stats" style="color: #f8538d;"><span id="total_users">Loading...</span></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="w-detail">
                                <p class="w-title">Users transacted</p>
                                <p class="w-stats" style="color: #f8538d;"><span id="users_transacted">Loading...</span>
                                </p>
                            </div>
                        </div>
                    </div>

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

        <div class="row layout-top-spacing">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-four">
                <div class="widget-content">
                    <div class="w-header">
                        <div class="w-info">
                            <h6 class="value">Mobile money volume by provider</h6>
                        </div>
                    </div>
                    <div class="w-content">
                        <div class="w-detail">
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>Provider</th>
                                            <th>Transactions</th>
                                            <th>Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody id="mobile-providers-body">
                                        <tr id="mobile-provider-empty">
                                            <td colspan="3" class="text-muted">Loading providers...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="widget widget-chart-three">
        <div class="widget-heading">
            <div class="">
                <h5 class="">Transactions</h5>
            </div>
        </div>
        <div class="widget-content">
            <div id="transactionsList"></div>
        </div>
    </div>
    <br>
    <div class="widget widget-chart-three">
        <div class="widget-heading">
            <div class="">
                <h5 class="">Total Users</h5>
            </div>
        </div>
        <div class="widget-content">
            <div id="usersList"></div>
        </div>
    </div>


    </div>
@endsection


@section('scripts')
    <script src="{{ asset('vendor/src/plugins/src/apex/apexcharts.min.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>
        var f3 = flatpickr(document.getElementById('rangeCalendarFlatpickr'), {
            mode: "range",
        });
        let transactionsChart;
        let usersChart;


        function onDateSelected() {
            const selectedDates = f3.selectedDates;

            if (selectedDates.length < 2) {
                alert('Please select a start and end date');
                return;
            }

            const startDate = selectedDates[0].toISOString();
            const endDate = selectedDates[1].toISOString();

            fetchSummary(startDate, endDate);
            fetchTransactionSummary(startDate, endDate);
            fetchUserSummary(startDate, endDate);
        }

        // Function to fetch transaction summary data
        function fetchSummary(startDate, endDate) {
            const formatAmount = (amount, currency) => {
                if (amount === null || amount === undefined) return '-';
                const numeric = Number(amount);
                const safeValue = Number.isFinite(numeric) ? numeric.toLocaleString() : amount;
                return currency ? `${currency} ${safeValue}` : safeValue;
            };

            // Fetch Mobile Money Transactions Summary
            let mobileSummaryURL = `{{ route('transactions.mobileMoneySummary') }}`;
            if (startDate && endDate) {
                mobileSummaryURL += `?start_date=${startDate}&end_date=${endDate}`;
            }
            fetch(mobileSummaryURL, {
                    method: 'GET'
                })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('mobile-count').innerText = data.transaction_count;
                    document.getElementById('mobile-amount').innerText = formatAmount(data.total_amount, data
                        .currency_code);

                    const body = document.getElementById('mobile-providers-body');
                    if (body) {
                        body.innerHTML = '';
                        if (Array.isArray(data.providers) && data.providers.length) {
                            data.providers.forEach((provider) => {
                                const row = document.createElement('tr');
                                row.innerHTML = `
                                    <td>${provider.label ?? provider.operator ?? '-'}</td>
                                    <td>${provider.transaction_count ?? 0}</td>
                                    <td>${formatAmount(provider.total_amount, data.currency_code)}</td>
                                `;
                                body.appendChild(row);
                            });
                        } else {
                            const emptyRow = document.createElement('tr');
                            emptyRow.innerHTML = '<td colspan="3" class="text-muted">No providers configured.</td>';
                            body.appendChild(emptyRow);
                        }
                    }
                })
                .catch(() => {
                    document.getElementById('mobile-count').innerText = 'Error';
                    document.getElementById('mobile-amount').innerText = 'Error';
                });

            // Fetch Flick Transactions Summary
            let flickSummaryURL = `{{ route('transactions.flickSummary') }}`;
            if (startDate && endDate) {
                flickSummaryURL += `?start_date=${startDate}&end_date=${endDate}`;
            }
            fetch(flickSummaryURL, {
                    method: 'GET'
                })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('flick-count').innerText = data.transaction_count;
                    document.getElementById('flick-amount').innerText = formatAmount(data.total_amount, data
                        .currency_code);
                })
                .catch(() => {
                    document.getElementById('flick-count').innerText = 'Error';
                    document.getElementById('flick-amount').innerText = 'Error';
                });

            // Fetch DPO Transactions Summary
            let dpoTransactionSummaryURL = `{{ route('transactions.dpoSummary') }}`;
            if (startDate && endDate) {
                dpoTransactionSummaryURL += `?start_date=${startDate}&end_date=${endDate}`;
            }
            fetch(dpoTransactionSummaryURL, {
                    method: 'GET'
                })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('dpo-count').innerText = data.transaction_count;
                    document.getElementById('dpo-amount').innerText = formatAmount(data.total_amount, data
                        .currency_code);
                })
                .catch(() => {
                    document.getElementById('dpo-count').innerText = 'Error';
                    document.getElementById('dpo-amount').innerText = 'Error';
                });

            // Fetch Voucher Transactions Summary (count)
            let voucherTransactionSummaryURL = `{{ route('transactions.voucherSummary') }}`;
            if (startDate && endDate) {
                voucherTransactionSummaryURL += `?start_date=${startDate}&end_date=${endDate}`;
            }
            fetch(voucherTransactionSummaryURL, {
                    method: 'GET'
                })
                .then(response => response.json())
                .then(data => {
                    const el = document.getElementById('voucher-count');
                    if (el) el.innerText = data.transaction_count;
                })
                .catch(() => {
                    const el = document.getElementById('voucher-count');
                    if (el) el.innerText = 'Error';
                });

            let signUpURL = `{{ route('users.signupSummary') }}`;
            if (startDate && endDate) {
                signUpURL += `?start_date=${startDate}&end_date=${endDate}`;
            }
            fetch(signUpURL, {
                    method: 'GET'
                })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('total_users').innerText = data.signup_count;
                    document.getElementById('users_transacted').innerText = data.users_transacted;
                })
                .catch(() => {
                    document.getElementById('total_users').innerText = 'Error';
                    document.getElementById('users_transacted').innerText = 'Error';
                });
        }

        function fetchTransactionSummary(startDate, endDate) {

            let transactionSummary = `{{ route('transactions.summary') }}`;
            if (startDate && endDate) {
                transactionSummary += `?start_date=${startDate}&end_date=${endDate}`;
            }

            fetch(transactionSummary, {
                    method: 'GET',
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        // Extract series data
                        const mobileCounts = data.mobile.map(entry => entry.count);
                        const cardCounts = data.card.map(entry => entry.count);
                        const bankCounts = data.bank.map(entry => entry.count);
                        const axis = data.mobile.map(entry => entry.axis);


                        // Update chart with the appropriate x-axis labels and data
                        transactionsChart.updateOptions({
                            xaxis: {
                                categories: axis
                            },
                            series: [{
                                    name: 'Mobile Money',
                                    data: mobileCounts
                                },
                                {
                                    name: 'Card',
                                    data: cardCounts
                                },
                                {
                                    name: 'Bank',
                                    data: bankCounts
                                }
                            ]
                        });
                    }
                })
                .catch(error => {
                    console.error('Error fetching transaction data:', error);
                });
        }

        function fetchUserSummary(startDate, endDate) {
            let userSummary = `{{ route('users.userSummary') }}`;
            if (startDate && endDate) {
                userSummary += `?start_date=${startDate}&end_date=${endDate}`;
            }
            fetch(userSummary, {
                    method: 'GET',
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        const signupCounts = data.users.map(entry => entry.count);
                        const axis = data.users.map(entry => entry.axis);




                        usersChart.updateOptions({
                            xaxis: {
                                categories: axis
                            },
                            series: [{
                                name: 'Users',
                                data: signupCounts
                            }]
                        });
                    }
                })
                .catch(error => {
                    console.error('Error fetching user signup data:', error);
                });
        }


        document.addEventListener('DOMContentLoaded', () => {


            // Initialize the ApexCharts chart
            transactionsChart = new ApexCharts(
                document.querySelector("#transactionsList"),
                d_1options1
            );
            transactionsChart.render();

            usersChart = new ApexCharts(
                document.querySelector("#usersList"),
                d_1options2
            );
            usersChart.render();

            // Fetch initial data for today
            fetchSummary();
            fetchTransactionSummary();
            fetchUserSummary();




        });



        var d_1options1 = {
            chart: {
                height: 350,
                type: 'bar',
                toolbar: {
                    show: false,
                }
            },
            colors: ['#008000', '#ffbb44', '#1b55e2'],
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    endingShape: 'rounded',
                    borderRadius: 10,

                },
            },
            dataLabels: {
                enabled: false
            },
            legend: {
                position: 'bottom',
                horizontalAlign: 'center',
                fontSize: '14px',
                markers: {
                    width: 10,
                    height: 10,
                    offsetX: -5,
                    offsetY: 0
                },
                itemMargin: {
                    horizontal: 10,
                    vertical: 8
                }
            },
            grid: {
                borderColor: '#e0e6ed',
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },
            series: [{
                    name: 'Mobile Money',
                    data: []
                },
                {
                    name: 'Card',
                    data: []
                },
                {
                    name: 'Bank',
                    data: []
                }
            ],
            xaxis: {
                categories: [],
            },
            fill: {
                type: 'gradient',
                gradient: {
                    type: 'vertical',
                    shadeIntensity: 0.3,
                    inverseColors: false,
                    opacityFrom: 1,
                    opacityTo: 0.8,
                    stops: [0, 100]
                }
            },
            responsive: [{
                breakpoint: 767,
                options: {
                    plotOptions: {
                        bar: {
                            borderRadius: 0,
                            columnWidth: "50%"
                        }
                    }
                }
            }, ]

        }

        var d_1options2 = {
            chart: {
                height: 350,
                type: 'bar',
                toolbar: {
                    show: false,
                }
            },
            colors: ['#ffbb44'],
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    endingShape: 'rounded',
                    borderRadius: 10,

                },
            },
            dataLabels: {
                enabled: false
            },
            legend: {
                position: 'bottom',
                horizontalAlign: 'center',
                fontSize: '14px',
                markers: {
                    width: 10,
                    height: 10,
                    offsetX: -5,
                    offsetY: 0
                },
                itemMargin: {
                    horizontal: 10,
                    vertical: 8
                }
            },
            grid: {
                borderColor: '#e0e6ed',
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },
            series: [{
                name: 'Users',
                data: []
            }, ],
            xaxis: {
                categories: [],
            },
            fill: {
                type: 'gradient',
                gradient: {
                    type: 'vertical',
                    shadeIntensity: 0.3,
                    inverseColors: false,
                    opacityFrom: 1,
                    opacityTo: 0.8,
                    stops: [0, 100]
                }
            },
            responsive: [{
                breakpoint: 767,
                options: {
                    plotOptions: {
                        bar: {
                            borderRadius: 0,
                            columnWidth: "50%"
                        }
                    }
                }
            }, ]

        }
    </script>
@endsection