@extends('patient.layout.master')
@section('page-title', 'Patient')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
    <li class="breadcrumb-item f-w-500 active">Patient</li>
@endsection
@section('title','Patient')

@push('css')
    <style>
        .reminders-container {
            max-height: 400px;
            overflow-y: auto;
        }

        .reminder-item {
            padding: 12px 15px;
            border-radius: 8px;
            background-color: #f8f9fa;
            border-left: 3px solid transparent;
        }

        .reminder-item.high-priority {
            border-left-color: #dc3545;
            background-color: #fff5f5;
        }

        .reminder-item.medium-priority {
            border-left-color: #ffc107;
            background-color: #fffbf0;
        }

        .reminder-item.low-priority {
            border-left-color: #0dcaf0;
            background-color: #f0fafc;
        }

        .priority-badge {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
            display: inline-block;
        }

        .reminder-date {
            font-size: 11px;
            color: #6c757d;
        }

        .reminder-desc {
            font-size: 12px;
            color: #495057;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid">

        <livewire:patient.visits.history/>
    </div>
@endsection
@push('js')
    <!-- ApexCharts Library -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Patient Analytics Polar Area Chart
            var options = {
                series: [44, 55, 13, 33],
                chart: {
                    width: '100%',
                    height: 300,
                    type: 'polarArea',
                },
                labels: ['New Patients', 'Returning Patients', 'Referred Patients', 'Walk-ins'],
                colors: ['#4099ff', '#0e9e4a', '#f1b44c', '#ff5370'],
                stroke: {
                    width: 1
                },
                fill: {
                    opacity: 0.8
                },
                legend: {
                    position: 'bottom'
                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 300
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

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

            // Monthly Revenue Line Chart
            var optionsLine = {
                series: [{
                    name: "Revenue",
                    data: [300, 400, 450, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300]
                }],
                chart: {
                    height: 300,
                    type: 'line',
                    zoom: {
                        enabled: false
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 2
                },
                xaxis: {
                    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    title: {
                        text: 'Months'
                    }
                },
                yaxis: {
                    title: {
                        text: 'Revenue ($)'
                    }
                },
                tooltip: {
                    shared: true,
                    intersect: false
                }
            };

            var chartLine = new ApexCharts(document.querySelector("#lineChart"), optionsLine);
            chartLine.render();
        });
    </script>
@endpush