@extends('doctorpanel.layout.app')
@section('title', 'Waiting Room | Dashboard')
@section('custom-css')
    <style>
        .content-body {
            min-height: 50px !important;
        }

        .h-full {
            height: auto !important;
            /* Change from 0% to auto */
        }

        .card {
            margin-bottom: 20px;
            /* Add some margin for better spacing */
        }

        .chartjs {
            height: 200px;
            /* width: 100%;  */
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
        }

        @media only screen and (max-width: 767px) {
            .grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-md-9"></div>
        <div class="col-md-3">
            <form action="{{ route('doctorpanel.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>
            </form>
        </div>
        <div class="col-xl-12 mt-2">
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row shapreter-row">
                                <div class="grid">
                                    <div class="custom-card-box">
                                        <div class="static-icon">
                                            <span>
                                                <i class="fas fa-user-doctor"></i>
                                            </span>
                                            <h3 class="count mb-0">{{ $doctorTotalBookings }}</h3>
                                            <span class="fs-14">{{ __('translations.Total Appointments') }}</span>
                                        </div>
                                    </div>
                                    <div class="custom-card-box">
                                        <div class="static-icon">
                                            <span>
                                                <i class="far fa-note-sticky"></i>
                                            </span>
                                            <h3 class="count mb-0">{{ $doctorTodayBookings }}</h3>
                                            <span class="fs-14">{{ __('translations.Today Appointments') }}</span>
                                        </div>
                                    </div>
                                    <div class="custom-card-box">
                                        <div class="static-icon">
                                            <span>
                                                <i class="fas fa-book"></i>
                                            </span>
                                            <h3 class="count mb-0">{{ $doctorCompletedBookings }}</h3>
                                            <span class="fs-14">{{ __('translations.Completed Appointments') }}</span>
                                        </div>
                                    </div>

                                    <div class="custom-card-box">
                                        <div class="static-icon">
                                            <span>
                                                <i class="fas fa-calendar"></i>
                                            </span>
                                            <h3 class="count mb-0">{{ $doctorCancelledBookings }}</h3>
                                            <span class="fs-14">{{ __('translations.Cancelled Appointments') }}</span>
                                        </div>
                                    </div>
                                    <div class="custom-card-box">
                                        <div class="static-icon">
                                            <span>
                                                <i class="fas fa-dollar"></i>
                                            </span>
                                            <h3 class="count mb-0">${{ $totalAmount }}</h3>
                                            <span class="fs-14">{{ __('translations.Total Earning') }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card" style="height: 98.6%;">
                                <div class="card-header">
                                    <h4 class="card-title">{{ __('translations.Doctor Revenue') }}</h4>
                                    <p class="mb-0">
                                        <i class="bi bi-info-circle-fill"></i>
                                        {{ __('translations.Revenue Insights of') }} {{ auth()->guard('doctor')->user()->name }}
                                        {{ __('translations.Doctors (by Earnings)') }}
                                    </p>
                                </div>
                                <div class="card-body">
                                    <!-- <div id="flotLine1" class="flot-chart"></div> -->
                                    <div style="width: 42%; margin: auto;" id="canvasGraph">
                                        <h3 id="noDataMessage" class="mt-5 text-muted"></h3>
                                        <canvas id="topDoctorsRevenueChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card" id="user-activity1">
                                <div class="card-header border-0">
                                    <h4 class="fs-20 mb-0">{{ __('translations.Appointments') }}</h4>
                                    {{-- <div class="card-action coin-tabs"> --}}
                                    {{-- <ul class="nav nav-tabs" role="tablist"> --}}
                                    {{-- <li class="nav-item"> --}}
                                    {{-- <a class="nav-link" data-bs-toggle="tab" href="#Daily1"
                                                role="tab">Daily</a> --}}
                                    {{-- </li> --}}
                                    {{-- <li class="nav-item"> --}}
                                    {{-- <a class="nav-link" data-bs-toggle="tab" href="#Daily1" --}} {{--
                                                role="tab">Weekly</a> --}}
                                    {{-- </li> --}}
                                    {{-- <li class="nav-item"> --}}
                                    {{-- <a class="nav-link active" data-bs-toggle="tab" href="#Daily1" --}}
                                    {{-- role="tab">Monthly</a> --}}
                                    {{-- </li> --}}
                                    {{-- </ul> --}}
                                    {{-- </div> --}}
                                </div>
                                <div class="card-body">
                                    <span class="ms-0 font-w500">
                                        <svg class="me-1" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                            viewBox="0 0 13 13">
                                            <rect width="13" height="13" fill="#12C7E7" />
                                        </svg>
                                        {{ __('translations.Completed') }}
                                    </span>
                                    <span class="fs-16 font-w600">{{ $chartData['completedData'][0] }}</span>
                                    <span class="ms-sm-5 ms-0 font-w500">
                                        <svg class="me-1" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                            viewBox="0 0 13 13">
                                            <rect width="13" height="13" fill="#6e6e6e" />
                                        </svg>
                                        {{ __('translations.Ongoing') }}
                                    </span>
                                    <span class="fs-16 font-w600">{{ $chartData['inProgressData'][0] }}</span>
                                    <div class="tab-content mt-5" id="myTabContent">
                                        <div class="tab-pane fade show active" id="monthly1">
                                            <canvas id="activity1" class="chartjs"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                    <div class="card " id="user-activity">
                        <div class="card-header border-0 pb-0 flex-wrap">
                            <h4 class="card-title mb-0">{{ __('translations.Bookings Overview') }}</h4>
                            {{-- <div class="mt-3 mt-sm-0">
                                <ul class="nav nav-tabs vacany-tabs style-1" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link " data-bs-toggle="tab" data-series="Daily" href="#Daily"
                                            role="tab">Daily</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link " data-bs-toggle="tab" data-series="Weekly" href="#Weekly"
                                            role="tab">Weekly</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="tab" data-series="Monthly"
                                            href="#Monthly" role="tab">Monthly</a>
                                    </li>
                                </ul>
                            </div> --}}
                        </div>
                        <div class="card-body pt-3 px-sm-3 px-0 pb-1">
                            <div class="pb-sm-4 mb-3 d-flex flex-wrap px-3">

                                <div class="d-flex align-items-center">
                                    <svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                        viewBox="0 0 13 13">
                                        <rect width="13" height="13" rx="6.5" fill="#35c556" />
                                    </svg>
                                    <span class="text-dark fs-13 font-w500">{{ __('translations.Total Bookings') }}</span>
                                </div>
                                <div class="application d-flex align-items-center">
                                    <svg class="me-1" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                        viewBox="0 0 13 13">
                                        <rect width="13" height="13" rx="6.5" fill="#3f4cfe" />
                                    </svg>
                                    <span class="text-dark fs-13 font-w500">Completed</span>
                                </div>
                                <div class="application d-flex align-items-center">
                                    <svg class="me-1" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                        viewBox="0 0 13 13">
                                        <rect width="13" height="13" rx="6.5" fill="#f34040" />
                                    </svg>
                                    <span class="text-dark fs-13 font-w500">{{ __('translations.Cancelled') }}</span>
                                </div>
                            </div>
                            <div class="">
                                <div id="vacancyChart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom-script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Dashboard 1 -->
    <script src="{{ asset('assets/js/dashboard/dashboard-1.js') }}"></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>
        // Data from backend
        const chartData = @json($pieChartData);
        console.log(chartData);

        if (chartData.length === 0) {
            // Show message when no data
            document.getElementById('noDataMessage').innerHTML = "No records found";
        } else {

            // Extract labels (doctor IDs) and revenue
            const labels = chartData.map(item => `Doctor ${item.doctor_name}`);
            const revenues = chartData.map(item => item.revenue);

            // Render Pie Chart
            const ctx = document.getElementById('topDoctorsRevenueChart').getContext('2d');
            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Revenue',
                        data: revenues,
                        backgroundColor: [
                            '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'
                        ],
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const doctorName = context.label;
                                    const revenue = context.raw;

                                    // return `${context.label}: $${context.raw}`;
                                    return `${doctorName}: $${revenue.toLocaleString()}`;
                                }
                            }
                        }
                    }
                }
            });
        }
    </script>
    <script>
        var myBarChart; // Declare a variable to hold the chart instance

        var activityBar1 = function() {
            var activity1 = document.getElementById("activity1");
            if (activity1 !== null) {
                // Ensure the data is correctly passed and is not undefined
                var completedData = {!! json_encode($chartData['completedData']) !!};
                var inProgressData = {!! json_encode($chartData['inProgressData']) !!};
                var absentData = {!! json_encode($chartData['absentData']) !!};
                var bookedData = {!! json_encode($chartData['bookedData']) !!};

                // Check if the data arrays have values
                if (completedData.length > 0 && inProgressData.length > 0 && absentData.length > 0 && bookedData
                    .length > 0) {
                    var chartData = {
                        completed: completedData[0],
                        in_progress: inProgressData[0],
                        absent: absentData[0],
                        booked: bookedData[0]
                    };

                    // Destroy the existing chart if it exists
                    if (myBarChart) {
                        myBarChart.destroy();
                    }

                    var config = {
                        type: "bar",
                        data: {
                            labels: ["Completed", "In Progress", "Absent", "Booked"],
                            datasets: [{
                                label: "Completed",
                                data: [chartData.completed, chartData.in_progress, chartData.absent,
                                    chartData.booked
                                ],
                                backgroundColor: ['#12C7E7', '#6e6e6e', '#ff6384', '#36a2eb'],
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    display: true
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true
                                }
                            }
                        }
                    };

                    var ctx = activity1.getContext("2d");
                    myBarChart = new Chart(ctx, config); // Create a new chart instance
                } else {
                    console.error("Chart data is not available.");
                }
            }
        }

        var activityChart = function() {
            var options = {
                series: [{
                    name: 'Total Bookings',
                    data: {!! json_encode($monthlyData['totalBookings']) !!} // Dynamic data for Total Bookings
                }, {
                    name: 'Completed',
                    data: {!! json_encode($monthlyData['completed']) !!} // Dynamic data for Completed
                }, {
                    name: 'Cancelled',
                    data: {!! json_encode($monthlyData['cancelled']) !!} // Dynamic data for Cancelled
                }],
                chart: {
                    height: 300,
                    type: 'area',
                    toolbar: {
                        show: false
                    },
                },
                colors: ["#35c556", "#3f4cfe", "#f34040"],
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 5,
                },
                legend: {
                    show: false
                },
                grid: {
                    show: true,
                    strokeDashArray: 6,
                    borderColor: 'var(--border)',
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: 'var(--text)',
                            fontSize: '13px',
                            fontFamily: 'Poppins',
                            fontWeight: 400
                        },
                        formatter: function(value) {
                            return value;
                        }
                    },
                },
                xaxis: {
                    categories: {!! json_encode($monthlyData['months']) !!}, // Use dynamic month names
                    labels: {
                        style: {
                            colors: 'var(--text)',
                            fontSize: '13px',
                            fontFamily: 'Poppins',
                            fontWeight: 400
                        },
                    },
                    axisTicks: {
                        show: false
                    },
                    axisBorder: {
                        show: false
                    },
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        colorStops: [
                            [{
                                offset: 0,
                                color: '#35c556',
                                opacity: .2
                            }, {
                                offset: 50,
                                color: '#35c556',
                                opacity: 0
                            }, {
                                offset: 100,
                                color: '#35c556',
                                opacity: 0
                            }],
                            [{
                                offset: 0,
                                color: '#3f4cfe',
                                opacity: .2
                            }, {
                                offset: 50,
                                color: '#3f4cfe',
                                opacity: 0
                            }, {
                                offset: 100,
                                color: '#3f4cfe',
                                opacity: 0
                            }],
                            [{
                                offset: 0,
                                color: '#f34040',
                                opacity: .2
                            }, {
                                offset: 50,
                                color: '#f34040',
                                opacity: 0
                            }, {
                                offset: 100,
                                color: '#f34040',
                                opacity: 0
                            }]
                        ]
                    },
                },
                tooltip: {
                    x: {
                        format: 'dd/MM/yy HH:mm'
                    },
                },
                responsive: [{
                    breakpoint: 575,
                    options: {
                        chart: {
                            height: 200,
                        },
                        stroke: {
                            width: 3,
                        },
                        yaxis: {
                            labels: {
                                style: {
                                    fontSize: '11px',
                                },
                            },
                        },
                        xaxis: {
                            labels: {
                                style: {
                                    fontSize: '11px',
                                },
                            },
                        },
                    },
                }]
            };

            var chart = new ApexCharts(document.querySelector("#vacancyChart"), options);
            chart.render();
        }

        // var activityChart = function() {
        //     var options = {
        //         series: [{
        //             name: 'Total Bookings',
        //             data: [40, 60, 50, 65, 40, 65, 45, 56, 45, 60]
        //         }, {
        //             name: 'Completed',
        //             data: [30, 27, 38, 35, 30, 35, 20, 35, 30, 40]
        //         }, {
        //             name: 'Cancelled',
        //             data: [20, 25, 28, 20, 25, 28, 35, 25, 20, 30]
        //         }],
        //         chart: {
        //             height: 300,
        //             type: 'area',
        //             toolbar: {
        //                 show: false
        //             },
        //         },
        //         colors: ["#35c556", "#3f4cfe", "#f34040"],
        //         dataLabels: {
        //             enabled: false
        //         },
        //         stroke: {
        //             curve: 'smooth',
        //             width: 5,
        //         },
        //         legend: {
        //             show: false
        //         },
        //         grid: {
        //             show: true,
        //             strokeDashArray: 6,
        //             borderColor: 'var(--border)',
        //         },
        //         yaxis: {
        //             labels: {
        //                 style: {
        //                     colors: 'var(--text)',
        //                     fontSize: '13px',
        //                     fontFamily: 'Poppins',
        //                     fontWeight: 400

        //                 },
        //                 formatter: function(value) {
        //                     return value;
        //                 }
        //             },
        //         },
        //         xaxis: {
        //             categories: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        //             labels: {
        //                 style: {
        //                     colors: 'var(--text)',
        //                     fontSize: '13px',
        //                     fontFamily: 'Poppins',
        //                     fontWeight: 400

        //                 },
        //             },
        //             axisTicks: {
        //                 show: false
        //             },
        //             axisBorder: {
        //                 show: false
        //             },
        //         },
        //         fill: {
        //             type: 'gradient',
        //             gradient: {
        //                 colorStops: [
        //                     [{
        //                             offset: 0,
        //                             color: '#35c556',
        //                             opacity: .2
        //                         },
        //                         {
        //                             offset: 50,
        //                             color: '#35c556',
        //                             opacity: 0
        //                         },
        //                         {
        //                             offset: 100,
        //                             color: '#35c556',
        //                             opacity: 0
        //                         }
        //                     ],
        //                     [{
        //                             offset: 0,
        //                             color: '#3f4cfe',
        //                             opacity: .2
        //                         },
        //                         {
        //                             offset: 50,
        //                             color: '#3f4cfe',
        //                             opacity: 0
        //                         },
        //                         {
        //                             offset: 100,
        //                             color: '#3f4cfe',
        //                             opacity: 0
        //                         }
        //                     ],
        //                     [{
        //                             offset: 0,
        //                             color: '#f34040',
        //                             opacity: .2
        //                         },
        //                         {
        //                             offset: 50,
        //                             color: '#f34040',
        //                             opacity: 0
        //                         },
        //                         {
        //                             offset: 100,
        //                             color: '#f34040',
        //                             opacity: 0
        //                         }
        //                     ]
        //                 ]
        //             },
        //         },
        //         tooltip: {
        //             x: {
        //                 format: 'dd/MM/yy HH:mm'
        //             },
        //         },
        //         responsive: [{
        //             breakpoint: 575,
        //             options: {
        //                 chart: {
        //                     height: 200,
        //                 },
        //                 stroke: {
        //                     width: 3,
        //                 },
        //                 yaxis: {
        //                     labels: {
        //                         style: {
        //                             fontSize: '11px',
        //                         },
        //                     },
        //                 },
        //                 xaxis: {
        //                     labels: {
        //                         style: {
        //                             fontSize: '11px',
        //                         },
        //                     },
        //                 },
        //             },
        //         }]
        //     };

        //     var chart = new ApexCharts(document.querySelector("#vacancyChart"), options);
        //     chart.render();

        //     $(".vacany-tabs .nav-link").on('click', function() {
        //         var seriesType = $(this).attr('data-series');
        //         var data1 = [];
        //         var data2 = [];
        //         var data3 = [];
        //         switch (seriesType) {
        //             case "Daily":
        //                 data1 = [60, 40, 50, 45, 60, 45, 35, 56, 45, 60];
        //                 data2 = [20, 35, 25, 35, 30, 20, 20, 35, 25, 40];
        //                 data3 = [10, 25, 30, 20, 25, 15, 35, 20, 20, 30];
        //                 break;
        //             case "Weekly":
        //                 data1 = [55, 35, 45, 35, 55, 45, 35, 60, 40, 55];
        //                 data2 = [35, 30, 40, 25, 44, 50, 20, 35, 30, 40];
        //                 data3 = [20, 20, 15, 10, 25, 28, 20, 25, 20, 30];
        //                 break;
        //             case "Monthly":
        //                 data1 = [40, 60, 50, 65, 40, 65, 45, 56, 45, 60];
        //                 data2 = [30, 27, 38, 35, 30, 35, 20, 35, 30, 40];
        //                 data3 = [20, 25, 28, 20, 25, 28, 35, 25, 20, 30];
        //                 break;
        //             default:
        //                 data1 = [40, 60, 50, 65, 40, 65, 45, 56, 45, 60];
        //                 data2 = [30, 27, 38, 35, 30, 35, 20, 35, 30, 40];
        //                 data3 = [20, 25, 28, 20, 25, 28, 35, 25, 20, 30];
        //         }
        //         chart.updateSeries([{
        //             name: "Total Bookings",
        //             data: data1
        //         }, {
        //             name: 'Completed',
        //             data: data2
        //         }, {
        //             name: 'Cancelled',
        //             data: data3
        //         }]);
        //     })


        // }
        // Call the function to render the chart
        document.addEventListener('DOMContentLoaded', function() {
            activityBar1();
            activityChart();
        });
    </script>


@endsection