@extends('layouts.master')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/apexcharts/dist/apexcharts.css') }}">
@endsection

@section('main_content')
    <div class="container-fluid">
        <div class="row page-title">
            <div class="col-sm-6">
                <h3>Insurance Admin Dashboard</h3>
            </div>
            <div class="col-sm-6">
                <nav>
                    <ol class="breadcrumb justify-content-sm-end align-items-center">
                        <li class="breadcrumb-item"> <a href="{{ route('admin.dashboard') }}">
                                <svg class="svg-color">
                                    <use href="{{ asset('assets/svg/iconly-sprite.svg#Home') }}"></use>
                                </svg></a></li>
                        <li class="breadcrumb-item">Dashboard</li>
                        <li class="breadcrumb-item active">Insurance Overview</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    
    <div class="container-fluid">
        <div class="row">
            <!-- Welcome Card -->
            <div class="col-sm-12 col-xl-4">
                <div class="card profile-greeting card-hover">
                    <div class="card-body">
                        <div class="img-overlay">
                            <h1>Welcome to Insurance Admin</h1>
                            <p>Manage your insurance providers, plans, and system overview from this centralized dashboard.</p>
                            <a class="btn btn-primary" href="{{ route('admin.client.list') }}">Manage Clients</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Insurance Overview Stats -->
            <div class="col-sm-6 col-xl-2">
                <div class="card stat-card card-hover">
                    <div class="card-body text-center">
                        <div class="stat-icon bg-primary">
                            <svg class="svg-w-30 fill-white">
                                <use href="{{ asset('assets/svg/iconly-sprite.svg#User') }}"></use>
                            </svg>
                        </div>
                        <h3 class="font-primary mt-3">{{ number_format($stats['providers'] ?? 0) }}</h3>
                        <h5 class="f-w-600">Insurance Providers</h5>
                                </div>
                            </div>
                                        </div>

            <div class="col-sm-6 col-xl-2">
                <div class="card stat-card card-hover">
                    <div class="card-body text-center">
                        <div class="stat-icon bg-secondary">
                            <svg class="svg-w-30 fill-white">
                                <use href="{{ asset('assets/svg/iconly-sprite.svg#Document') }}"></use>
                            </svg>
                            </div>
                        <h3 class="font-secondary mt-3">{{ number_format($stats['plans'] ?? 0) }}</h3>
                        <h5 class="f-w-600">Insurance Plans</h5>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-xl-2">
                <div class="card stat-card card-hover">
                    <div class="card-body text-center">
                        <div class="stat-icon bg-success">
                            <svg class="svg-w-30 fill-white">
                                <use href="{{ asset('assets/svg/iconly-sprite.svg#Chart') }}"></use>
                            </svg>
                                    </div>
                        <h3 class="font-success mt-3">{{ number_format($stats['rates'] ?? 0) }}</h3>
                        <h5 class="f-w-600">Rate Plans</h5>
                                    </div>
                                </div>
                            </div>

            <div class="col-sm-6 col-xl-2">
                <div class="card stat-card card-hover">
                    <div class="card-body text-center">
                        <div class="stat-icon bg-info">
                            <svg class="svg-w-30 fill-white">
                                <use href="{{ asset('assets/svg/iconly-sprite.svg#Category') }}"></use>
                            </svg>
                        </div>
                        <h3 class="font-info mt-3">{{ number_format($stats['clients'] ?? 0) }}</h3>
                        <h5 class="f-w-600">Clients</h5>
                                    </div>
                                </div>
                            </div>
                        </div>

        <div class="row">
            <!-- Provider Distribution Chart -->
            <div class="col-md-6 col-xl-6">
                <div class="card">
                    <div class="card-header pb-0">
                        <h4>Insurance Provider Distribution</h4>
                        <div class="dropdown icon-dropdown">
                            <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                <i class="icon-more-alt"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="#" onclick="updateChart('weekly')">Weekly</a>
                                <a class="dropdown-item" href="#" onclick="updateChart('monthly')">Monthly</a>
                                <a class="dropdown-item" href="#" onclick="updateChart('yearly')">Yearly</a>
                    </div>
                </div>
            </div>
                    <div class="card-body">
                        <div id="providerChart"></div>
                    </div>
                </div>
            </div>

            <!-- Plan Types Chart -->
            <div class="col-md-6 col-xl-6">
                <div class="card">
                    <div class="card-header pb-0">
                        <h4>Insurance Plan Types</h4>
                        <div class="dropdown icon-dropdown">
                            <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                <i class="icon-more-alt"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="#" onclick="updatePlanChart('weekly')">Weekly</a>
                                <a class="dropdown-item" href="#" onclick="updatePlanChart('monthly')">Monthly</a>
                                <a class="dropdown-item" href="#" onclick="updatePlanChart('yearly')">Yearly</a>
                        </div>
                    </div>
                                                </div>
                    <div class="card-body">
                        <div id="planChart"></div>
                        </div>
                    </div>
                </div>
            </div>

        <div class="row">
            <!-- Monthly Revenue Trend -->
            <div class="col-md-8 col-xl-8">
                <div class="card">
                    <div class="card-header pb-0">
                        <h4>Monthly Revenue Trend</h4>
                        <div class="dropdown icon-dropdown">
                            <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                <i class="icon-more-alt"></i>
                                    </button>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="#" onclick="updateRevenueChart('weekly')">Weekly</a>
                                <a class="dropdown-item" href="#" onclick="updateRevenueChart('monthly')">Monthly</a>
                                <a class="dropdown-item" href="#" onclick="updateRevenueChart('yearly')">Yearly</a>
                    </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="revenueChart"></div>
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="col-md-4 col-xl-4">
                <div class="card">
                    <div class="card-header">
                        <h4>Recent Activity</h4>
                    </div>
                    <div class="card-body">
                        <div class="activity-timeline">
                            @forelse(($recentProviders ?? []) as $prov)
                                <div class="activity-item">
                                    <div class="activity-dot bg-primary"></div>
                                    <div class="activity-content">
                                        <h6>New Provider Added</h6>
                                        <p>{{ $prov->display_name ?? $prov->name }}</p>
                                        <small class="text-muted">{{ optional($prov->created_at)->diffForHumans() }}</small>
                                    </div>
                                </div>
                            @empty
                                <div class="text-muted">No recent provider activity.</div>
                            @endforelse
                            @forelse(($recentClients ?? []) as $cli)
                                <div class="activity-item">
                                    <div class="activity-dot bg-success"></div>
                                    <div class="activity-content">
                                        <h6>New Client Added</h6>
                                        <p>{{ $cli->client_name }} <small class="text-muted">({{ $cli->domain }})</small></p>
                                        <small class="text-muted">{{ optional($cli->created_at)->diffForHumans() }}</small>
                                    </div>
                                </div>
                            @empty
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/js/vendors/apexcharts/dist/apexcharts.min.js') }}"></script>
    <script>
        // Initialize charts when page loads
        document.addEventListener('DOMContentLoaded', function() {
            initializeCharts();
        });

        // Initialize all charts
        function initializeCharts() {
            createProviderChart();
            createPlanChart();
            createRevenueChart();
        }

        // Provider Distribution Chart
        function createProviderChart() {
            const options = {
                series: @json($providerSeries ?? [0]),
                chart: {
                    width: 380,
                    type: 'pie',
                },
                labels: @json($providerLabels ?? ['No Data']),
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 200
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

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

        // Plan Types Chart
        function createPlanChart() {
            const options = {
                series: [{
                    name: 'Basic Plans',
                    data: [31, 40, 28, 51, 42, 109, 100]
                }, {
                    name: 'Premium Plans',
                    data: [11, 32, 45, 32, 34, 52, 41]
                }, {
                    name: 'Family Plans',
                    data: [15, 11, 32, 18, 9, 24, 35]
                }],
                chart: {
                    height: 350,
                    type: 'area',
                    toolbar: {
                        show: false
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth'
                },
                xaxis: {
                    type: 'datetime',
                    categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
                },
                tooltip: {
                    x: {
                        format: 'dd/MM/yy HH:mm'
                    },
                },
            };

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

        // Revenue Chart
        function createRevenueChart() {
            const options = {
                series: [{
                    name: 'Revenue',
                    data: [30, 40, 35, 50, 49, 60, 70, 91, 125, 150, 180, 200]
                }],
                chart: {
                    height: 350,
                    type: 'line',
                    zoom: {
                        enabled: false
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'straight'
                },
                title: {
                    text: 'Monthly Revenue',
                    align: 'left'
                },
                grid: {
                    row: {
                        colors: ['#f3f3f3', 'transparent'],
                        opacity: 0.5
                    },
                },
                xaxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                }
            };

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

        // Stats are rendered server-side

        // Chart update functions
        function updateChart(period) {
            console.log('Updating provider chart for:', period);
            // Add chart update logic here
        }

        function updatePlanChart(period) {
            console.log('Updating plan chart for:', period);
            // Add chart update logic here
        }

        function updateRevenueChart(period) {
            console.log('Updating revenue chart for:', period);
            // Add chart update logic here
        }
    </script>

    <style>
        .stat-card {
            transition: transform 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }
        
        .activity-timeline {
            position: relative;
        }
        
        .activity-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
            position: relative;
        }
        
        .activity-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 15px;
            margin-top: 5px;
            flex-shrink: 0;
        }
        
        .activity-content h6 {
            margin: 0 0 5px 0;
            font-weight: 600;
        }
        
        .activity-content p {
            margin: 0 0 5px 0;
            color: #666;
        }
        
        .activity-content small {
            font-size: 12px;
        }
    </style>
@endsection