@extends('admin.layout.index')
@section('title', 'Admin | Dashboard')
@section('custom-style')
    <style>
    </style>
@endsection
@section('content')

    <div class="page-content">
        <div class="container-fluid">

            <div class="row">
                <div class="col">
                    <div class="h-100">
                        <div class="row mb-3 pb-1">
                            <div class="col-12">
                                <div class="d-flex align-items-lg-center flex-lg-row flex-column">
                                    <div class="flex-grow-1">
                                        <h4 class="fs-16 mb-1">{{ __('translations.Good Morning') }}</h4>
                                        <p class="text-muted mb-0">{{ __('translations.Here what happening with your portal today.') }}</p>
                                    </div>
                                    <div class="mt-3 mt-lg-0">
                                        <div class="row g-3 mb-0 align-items-center">
                                            <div class="col-sm-auto">
                                                <form action="{{ route('admin-dashboard') }}" method="GET"
                                                    id="filterForm">
                                                    <div class="input-group">
                                                        <select
                                                            class="form-control border-0 minimal-border dash-filter-picker shadow"
                                                            name="duration" id="duration" onchange="submitFilterForm()">
                                                            <option value="">--Select Filter--</option>
                                                            <option value="week"
                                                                {{ request('duration') == 'week' ? 'selected' : '' }}>
                                                                Week</option>
                                                            <option value="1-month"
                                                                {{ request('duration') == '1-month' ? 'selected' : '' }}>
                                                                One Month</option>
                                                            <option value="3-month"
                                                                {{ request('duration') == '3-month' ? 'selected' : '' }}>
                                                                Three Months</option>
                                                            <option value="6-month"
                                                                {{ request('duration') == '6-month' ? 'selected' : '' }}>
                                                                Six Months</option>
                                                            <option value="year"
                                                                {{ request('duration') == 'year' ? 'selected' : '' }}>
                                                                Yearly</option>
                                                        </select>
                                                        <div class="input-group-text bg-primary border-primary text-white">
                                                            <i class="ri-filter-2-fill"></i>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                            {{--                                            <div class="col-auto"> --}}
                                            {{--                                                <button type="submit" --}}
                                            {{--                                                    class="btn btn-soft-info btn-icon waves-effect material-shadow-none waves-light layout-rightside-btn"><i --}}
                                            {{--                                                        class="ri-pulse-line"></i></button> --}}
                                            {{--                                            </div> --}}
                                            <!--end col-->
                                        </div>
                                        <!--end row-->
                                    </div>
                                </div><!-- end card header -->
                            </div>
                            <!--end col-->
                        </div>
                        <!--end row-->

                        <div class="row">
                            <div class="col-xl-3 col-md-6">
                                <!-- card -->
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    {{ __('translations.Total Users') }}</p>
                                            </div>
                                            {{-- <div class="flex-shrink-0">
                                                <h5 class="text-success fs-14 mb-0">
                                                    <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +0.0 %
                                                </h5>
                                            </div> --}}
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value"
                                                        data-target="{{ $totalUsers }}">0</span> </h4>
                                                <a href="{{ url('admin/users') }}" class="text-decoration-underline">
                                                    {{ __('translations.View all users') }}</a>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-success-subtle rounded fs-3">
                                                    <i class="bx bx-dollar-circle text-success"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </div><!-- end col -->

                            <div class="col-xl-3 col-md-6">
                                <!-- card -->
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    {{ __('translations.Total Clinics') }}</p>
                                            </div>
                                            {{-- <div class="flex-shrink-0">
                                                <h5 class="text-danger fs-14 mb-0">
                                                    <i class="ri-arrow-right-down-line fs-13 align-middle"></i> -0.01 %
                                                </h5>
                                            </div> --}}
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value"
                                                        data-target="{{ $totalClinic }}">0</span></h4>
                                                <a href="{{url('admin/clinics')}}" class="text-decoration-underline">{{ __('translations.View all clinics') }}</a>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-info-subtle rounded fs-3">
                                                    <i class="bx bx-shopping-bag text-info"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </div><!-- end col -->

                            <div class="col-xl-3 col-md-6">
                                <!-- card -->
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    {{ __('translations.Total Bookings') }}</p>
                                            </div>
                                            {{-- <div class="flex-shrink-0">
                                                <h5 class="text-success fs-14 mb-0">
                                                    <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +0.0 %
                                                </h5>
                                            </div> --}}
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-4">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value"
                                                        data-target="{{ $totalBookings }}">0</span> </h4>
                                                <a href="#" class="text-decoration-underline">{{ __('translations.See details') }}</a>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-warning-subtle rounded fs-3">
                                                    <i class="bx bx-user-circle text-warning"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </div><!-- end col -->

                            <div class="col-xl-3 col-md-6">
                                <!-- card -->
                                <div class="card card-animate">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-grow-1 overflow-hidden">
                                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">
                                                    {{ __('translations.Financial Data') }}</p>
                                            </div>
                                            {{-- <div class="flex-shrink-0">
                                                <h5 class="text-muted fs-14 mb-0">
                                                    +0.00 %
                                                </h5>
                                            </div> --}}
                                        </div>
                                        <div class="d-flex align-items-end justify-content-between mt-2">
                                            <div>
                                                <h4 class="fs-22 fw-semibold ff-secondary mb-1">$<span class="counter-value"
                                                        data-target="{{ $totalFinance }}">0</span>
                                                </h4>
                                                <p class="mb-2">{{ __('translations.Insurance Amount') }} ${{ number_format($insuranceAmount) }}
                                                </p>
                                                <p class="mb-2">{{ __('translations.Non Insurance Amount') }}
                                                    ${{ number_format($nonInsuranceAmount) }}</p>
                                            </div>
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-primary-subtle rounded fs-3">
                                                    <i class="bx bx-wallet text-primary"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </div><!-- end col -->
                        </div> <!-- end row-->

                        <div class="row">
                            <div class="col-xxl-6">
                                <div class="card card-height-100">
                                    <div class="card-header align-items-center d-flex">
                                        <h4 class="card-title mb-0 flex-grow-1">{{ __('translations.Financial Report') }}</h4>
                                    </div>

                                    <div class="card-body px-0">
                                        <ul class="list-inline main-chart text-center mb-0">
                                            <li class="list-inline-item chart-border-left me-0 border-0">
                                                <h4>${{ number_format($insuranceAmount) }} <span
                                                        class="text-muted d-inline-block fs-13 align-middle ms-2">
                                                        {{ __('translations.Insurance Booking Amount') }}</span>
                                                </h4>
                                            </li>
                                            <li class="list-inline-item chart-border-left me-0">
                                                <h4>${{ number_format($nonInsuranceAmount) }}<span
                                                        class="text-muted d-inline-block fs-13 align-middle ms-2">
                                                        {{ __('translations.Non Insurance Booking Amount') }}</span>
                                                </h4>
                                            </li>
                                            {{-- <li class="list-inline-item chart-border-left me-0">
                                                <h4><span data-plugin="counterup">3.6</span>%<span
                                                        class="text-muted d-inline-block fs-13 align-middle ms-2">Profit
                                                        Ratio</span></h4>
                                            </li> --}}
                                        </ul>

                                        <div id="revenue-expenses-charts" data-colors='["--vz-success", "--vz-danger"]'
                                            data-colors-minimal='["--vz-primary", "--vz-info"]'
                                            data-colors-interactive='["--vz-info", "--vz-primary"]'
                                            data-colors-galaxy='["--vz-primary", "--vz-secondary"]'
                                            data-colors-classic='["--vz-primary", "--vz-secondary"]' class="apex-charts"
                                            dir="ltr"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title mb-0">{{ __('translations.Bookings') }}</h4>
                                    </div><!-- end card header -->

                                    <div class="card-body">
                                        <div id="column_chart"
                                            data-colors='["--vz-danger", "--vz-success", "--vz-warning"]'
                                            class="apex-charts" dir="ltr"></div>
                                    </div><!-- end card-body -->
                                </div><!-- end card -->
                            </div>
                            <!-- end col -->
                            <div class="col-xl-12">
                                <div class="card">
                                    <div class="card-header border-0 align-items-center d-flex">
                                        <h4 class="card-title mb-0 flex-grow-1">{{ __('translations.User Statistics') }}</h4>
                                        {{-- <div>
                                            <button type="button"
                                                class="btn btn-soft-secondary material-shadow-none btn-sm">
                                                ALL
                                            </button>
                                            <button type="button"
                                                class="btn btn-soft-secondary material-shadow-none btn-sm">
                                                1M
                                            </button>
                                            <button type="button"
                                                class="btn btn-soft-secondary material-shadow-none btn-sm">
                                                6M
                                            </button>
                                            <button type="button"
                                                class="btn btn-soft-primary material-shadow-none btn-sm">
                                                1Y
                                            </button>
                                        </div> --}}
                                    </div><!-- end card header -->

                                    <div class="card-header p-0 border-0 bg-light-subtle">
                                        <div class="row g-0 text-center">
                                            <div class="col-md-6 col-sm-6">
                                                <div class="p-3 border border-dashed border-start-0">
                                                    <h5 class="mb-1"><span class="counter-value"
                                                            data-target="{{ $totalUsers }}">0</span></h5>
                                                    <p class="text-muted mb-0">{{ __('translations.Users') }}</p>
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-md-6 col-sm-6">
                                                <div class="p-3 border border-dashed border-start-0">
                                                    <h5 class="mb-1">$<span class="counter-value"
                                                            data-target="{{ $totalFinance }}">0</span></h5>
                                                    <p class="text-muted mb-0">{{ __('translations.Earnings') }}</p>
                                                </div>
                                            </div>
                                            {{-- <!--end col-->
                                            <div class="col-6 col-sm-3">
                                                <div class="p-3 border border-dashed border-start-0">
                                                    <h5 class="mb-1"><span class="counter-value"
                                                            data-target="367">0</span></h5>
                                                    <p class="text-muted mb-0">Refunds</p>
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-6 col-sm-3">
                                                <div class="p-3 border border-dashed border-start-0 border-end-0">
                                                    <h5 class="mb-1 text-success"><span class="counter-value"
                                                            data-target="18.92">0</span>%</h5>
                                                    <p class="text-muted mb-0">Conversation Ratio</p>
                                                </div>
                                            </div> --}}
                                            <!--end col-->
                                        </div>
                                    </div><!-- end card header -->

                                    <div class="card-body p-0 pb-2">
                                        <div class="w-100">
                                            <div id="customer_impression_charts"
                                                data-colors='["--vz-primary", "--vz-success", "--vz-danger"]'
                                                data-colors-minimal='["--vz-light", "--vz-primary", "--vz-info"]'
                                                data-colors-saas='["--vz-success", "--vz-info", "--vz-danger"]'
                                                data-colors-modern='["--vz-warning", "--vz-primary", "--vz-success"]'
                                                data-colors-interactive='["--vz-info", "--vz-primary", "--vz-danger"]'
                                                data-colors-creative='["--vz-warning", "--vz-primary", "--vz-danger"]'
                                                data-colors-corporate='["--vz-light", "--vz-primary", "--vz-secondary"]'
                                                data-colors-galaxy='["--vz-secondary", "--vz-primary", "--vz-primary-rgb, 0.50"]'
                                                data-colors-classic='["--vz-light", "--vz-primary", "--vz-secondary"]'
                                                data-colors-vintage='["--vz-success", "--vz-primary", "--vz-secondary"]'
                                                class="apex-charts" dir="ltr"></div>
                                        </div>
                                    </div>
                                    <!-- end card body -->
                                </div><!-- end card -->
                            </div>
                            <!-- end col -->
                        </div>

                    </div> <!-- end .h-100-->

                </div> <!-- end col -->
            </div>

        </div>
        <!-- container-fluid -->
    </div>
    <!-- End Page-content -->
    @include('admin.includes.footer')

@endsection
@section('custom-script')

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            function submitFilterForm() {
                const form = document.getElementById('filterForm');
                if (form) {
                    form.submit();
                } else {
                    console.error('Form with ID "filterForm" not found.');
                }
            }

            // Attach the function to the onchange event
            const durationDropdown = document.getElementById('duration');
            if (durationDropdown) {
                durationDropdown.addEventListener('change', submitFilterForm);
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chartContainer = document.querySelector("#customer_impression_charts");

            let customerImpressionChart;

            if (chartContainer) {
                const duration = document.getElementById('duration').value;
                let url = '/admin/get-users-chart-data';
                if (duration) {
                    url += `?duration=${encodeURIComponent(duration)}`;
                }

                // Make the fetch request
                fetch(url)
                    // fetch('/admin/get-users-chart-data')
                    .then(response => response.json())
                    .then(data => {
                        console.log('Userss', data);

                        if (!data.success) {
                            chartContainer.innerHTML = `
                        <div style="text-align: center; padding: 20px; font-size: 16px; color: #999;">
                            ${data.message || "No data available"}
                        </div>
                    `;
                            return;
                        }

                        const chartColors = getChartColorsArray("customer_impression_charts");

                        const chartOptions = {
                            series: [{
                                name: "Total Users",
                                type: "line",
                                data: data.data,
                            }],
                            chart: {
                                height: 370,
                                type: "line",
                                toolbar: {
                                    show: false,
                                },
                            },
                            stroke: {
                                curve: "smooth",
                                width: [3],
                            },
                            fill: {
                                opacity: [1],
                            },
                            xaxis: {
                                categories: data.labels, // Corrected to use labels
                                axisTicks: {
                                    show: false,
                                },
                                axisBorder: {
                                    show: false,
                                },
                            },
                            colors: chartColors,
                            grid: {
                                show: true,
                                xaxis: {
                                    lines: {
                                        show: true,
                                    },
                                },
                                padding: {
                                    top: 0,
                                    right: -2,
                                    bottom: 15,
                                    left: 10,
                                },
                            },
                            legend: {
                                show: true,
                                horizontalAlign: "center",
                                offsetX: 0,
                                offsetY: -5,
                            },
                            tooltip: {
                                shared: true,
                                y: {
                                    formatter: function(value) {
                                        return value !== undefined ? value.toFixed(0) + " Users" :
                                            value;
                                    },
                                },
                            },
                        };

                        if (customerImpressionChart) {
                            customerImpressionChart.destroy();
                        }

                        customerImpressionChart = new ApexCharts(chartContainer, chartOptions);
                        customerImpressionChart.render();
                    })
                    .catch(error => {
                        chartContainer.innerHTML = `
                    <div style="text-align: center; padding: 20px; font-size: 16px; color: #999;">
                        Error loading chart data. Please try again later.
                    </div>
                `;
                        console.error('Error fetching chart data:', error);
                    });
            }
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // fetch('{{ url('admin/api/bookings-chart-data') }}')

            const duration = document.getElementById('duration').value;
            let bookingUrl = '/admin/bookings-chart-data';
            if (duration) {
                bookingUrl += `?duration=${encodeURIComponent(duration)}`;
            }

            // Make the fetch request
            // fetch(bookingUrl)
            fetch('{{ url('admin/bookings-chart-data') }}?duration={{ request('duration') }}')
                .then(response => response.json())
                // .then((response) => response.json())
                .then((data) => {

                    console.log("API Response:", data); // Log the entire data object for inspection
                    if (!data || !data.danger || !data.complete || !data.pending) {
                        console.error('Missing expected data properties');
                        return;
                    }

                    var chartColumnColors = getChartColorsArray("column_chart");

                    var options = {
                        chart: {
                            height: 350,
                            type: "bar",
                            toolbar: {
                                show: false
                            }
                        },
                        plotOptions: {
                            bar: {
                                horizontal: false,
                                columnWidth: duration === "1-month" ? "100%" : "45%",
                                endingShape: "rounded",
                            },
                        },
                        dataLabels: {
                            enabled: false
                        },
                        stroke: {
                            show: true,
                            width: 2,
                            colors: ["transparent"]
                        },
                        series: [{
                                name: "Cancel & Absent",
                                data: data.danger
                            },
                            {
                                name: "Complete",
                                data: data.complete
                            },
                            {
                                name: "Pending & In Progress",
                                data: data.pending
                            },
                        ],
                        colors: chartColumnColors,
                        xaxis: {
                            categories: data.months
                        },
                        yaxis: {
                            title: {
                                text: "Bookings"
                            }
                        },
                        grid: {
                            borderColor: "#f1f1f1"
                        },
                        fill: {
                            opacity: 1
                        },
                        tooltip: {
                            y: {
                                formatter: function(e) {
                                    return e + " bookings";
                                },
                            },
                        },
                    };

                    var chart = new ApexCharts(
                        document.querySelector("#column_chart"),
                        options
                    );
                    chart.render();
                })
                .catch((error) => console.error("Error fetching chart data:", error));
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initial chart data loading
            function fetchFinancialData() {

                const duration = document.getElementById('duration').value;
                let financialUrl = 'admin/financial-report-data';
                if (duration) {
                    financialUrl += `?duration=${encodeURIComponent(duration)}`;
                }

                // Make the fetch request
                // fetch(financialUrl)
                fetch('{{ url('admin/financial-report-data') }}?duration={{ request('duration') }}')
                    // fetch(
                    //         '{{ url('admin/api/financial-report-data') }}'
                    //     ) // We assume filter is handled server-side now
                    .then(response => {
                        if (!response.ok) {
                            if (response.status === 404) {
                                throw new Error('No records found.');
                            }
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return response.json(); // Parse the response body as JSON
                    })
                    .then(data => {
                        console.log('Fetched data:', data); // Log the actual JSON data

                        // Convert data for the chart (e.g., converting totals to "k")
                        const insuranceData = data.insuranceData.map(value => parseFloat((value / 1000).toFixed(
                            2)));
                        const nonInsuranceData = data.nonInsuranceData.map(value => parseFloat((value / 1000)
                            .toFixed(2)));

                        // Update chart data
                        const chartData = {
                            series: [{
                                    name: "Insurance",
                                    data: insuranceData,
                                },
                                {
                                    name: "Non-Insurance",
                                    data: nonInsuranceData,
                                },
                            ],
                            chart: {
                                height: 290,
                                type: "area",
                                toolbar: {
                                    show: false
                                },
                            },
                            xaxis: {
                                categories: data.categories || [], // Categories passed from controller
                            },
                            yaxis: {
                                labels: {
                                    formatter: value =>
                                        `$${value.toFixed(2)}k`, // Ensure labels also show up to 2 decimal points
                                },
                            },
                        };

                        // Update or render the chart
                        if (window.revenueExpensesCharts) {
                            revenueExpensesCharts.updateOptions(chartData);
                        } else {
                            window.revenueExpensesCharts = new ApexCharts(
                                document.querySelector("#revenue-expenses-charts"),
                                chartData
                            );
                            revenueExpensesCharts.render();
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error.message);

                        // Handle "no records found" gracefully in UI
                        document.querySelector("#revenue-expenses-charts").innerHTML =
                            '<h3 class="text-center mt-5 text-muted">No records found.</h3>';
                    });
            }

            // Initial data load
            fetchFinancialData();
        });
    </script>


    {{-- <script>

    // Custom Counter Animation

    var e, t;

     (t = getChartColorsArray("revenue-expenses-charts")) &&
        ((e = {
            series: [
                {
                    name: "Revenue",
                    data: [20, 25, 30, 35, 40, 55, 70, 110, 150, 180, 210, 250],
                },
                {
                    name: "Expenses",
                    data: [12, 17, 45, 42, 24, 35, 42, 75, 102, 108, 156, 199],
                },
            ],
            chart: { height: 290, type: "area", toolbar: "false" },
            dataLabels: { enabled: !1 },
            stroke: { curve: "smooth", width: 2 },
            xaxis: {
                categories: [
                    "Jan",
                    "Feb",
                    "Mar",
                    "Apr",
                    "May",
                    "Jun",
                    "Jul",
                    "Aug",
                    "Sep",
                    "Oct",
                    "Nov",
                    "Dec",
                ],
            },
            yaxis: {
                labels: {
                    formatter: function (e) {
                        return "$" + e + "k";
                    },
                },
                tickAmount: 5,
                min: 0,
                max: 260,
            },
            colors: t,
            fill: { opacity: 0.06, colors: t, type: "solid" },
        }),
        "" != revenueExpensesCharts && revenueExpensesCharts.destroy(),
        (revenueExpensesCharts = new ApexCharts(
            document.querySelector("#revenue-expenses-charts"),
            e
        )).render());



</script> --}}

@endsection