```php
@extends('layouts.app')

@section('content')

    <style>
        /* ======================================
           الهوية اللونية للوحة التحكم
        ====================================== */

        :root {
            --dash-blue: #24476b;
            --dash-blue-dark: #1b3654;

            --dash-green: #20543b;
            --dash-green-dark: #173e2c;

            --dash-red: #8b353b;
            --dash-red-dark: #70282f;

            --dash-gold: #b58a3c;
            --dash-gold-light: #f2e5c5;

            --dash-bg: #f0f2ef;
            --dash-text: #29382f;
            --dash-muted: #748078;
            --dash-border: #e0e5e0;
        }

        /* خلفية الصفحة */

        .dashboard-page {
            color: var(--dash-text);
        }

        /* العنوان الرئيسي */

        .dashboard-title {
            color: var(--dash-green-dark);
            font-weight: 800;
        }

        /* ======================================
           بطاقات الإحصائيات
        ====================================== */

        .stat-card {
            border: none !important;
            border-radius: 13px;
            overflow: hidden;
            transition: transform .25s ease, box-shadow .25s ease;
            position: relative;
        }

        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 9px 22px rgba(0, 0, 0, .12) !important;
        }

        .stat-blue {
            background: linear-gradient(135deg,
                    #24476b,
                    #193653) !important;
        }

        .stat-green {
            background: linear-gradient(135deg,
                    #20543b,
                    #153d2a) !important;
        }

        .stat-red {
            background: linear-gradient(135deg,
                    #8b353b,
                    #67262d) !important;
        }

        .stat-card .card-title {
            font-size: 16px;
            font-weight: 700;
            color: rgba(255, 255, 255, .9);
        }

        .stat-card h2 {
            font-size: 32px;
            font-weight: 800;
            color: #fff;
        }

        /* ======================================
           بطاقات الرسوم البيانية
        ====================================== */

        .dashboard-card {
            border: 1px solid var(--dash-border) !important;
            border-radius: 12px;
            overflow: hidden;
            background: #fff;
            transition: box-shadow .25s ease;
        }

        .dashboard-card:hover {
            box-shadow: 0 6px 18px rgba(0, 0, 0, .07) !important;
        }

        .dashboard-card .card-header {
            background: #f7f9f7 !important;
            color: var(--dash-green-dark);
            border-bottom: 1px solid var(--dash-border);
            padding: 15px;
            font-weight: 800;
        }

        .dashboard-card .card-body {
            padding: 20px;
        }

        /* ======================================
           تنبيه الرخص
        ====================================== */

        .warning-header {
            background: linear-gradient(110deg,
                    #b58a3c,
                    #94702f) !important;

            color: #fff !important;
            border: none;
            padding: 14px;
            font-weight: 800;
        }

        .warning-card {
            border: 1px solid #dfc895 !important;
            border-radius: 12px;
            overflow: hidden;
        }

        /* ======================================
           تنبيه المخالفات
        ====================================== */

        .danger-header {
            background: linear-gradient(110deg,
                    #8b353b,
                    #70282f) !important;

            color: #fff !important;
            border: none;
            padding: 14px;
            font-weight: 800;
        }

        .danger-card {
            border: 1px solid #d7b2b4 !important;
            border-radius: 12px;
            overflow: hidden;
        }

        /* ======================================
           الجداول
        ====================================== */

        .dashboard-table {
            margin-bottom: 0;
            border-color: var(--dash-border);
        }

        .dashboard-table thead th {
            background: #e9eee9 !important;
            color: #244332;
            font-weight: 800;
            font-size: 14px;
            padding: 13px 10px;
            white-space: nowrap;
        }

        .dashboard-table tbody td {
            padding: 12px 10px;
            color: #39473f;
            font-size: 14px;
            vertical-align: middle;
        }

        .dashboard-table tbody tr {
            transition: background .2s ease;
        }

        .dashboard-table tbody tr:hover {
            background: #f2f6f2;
        }

        /* ======================================
           الشارات
        ====================================== */

        .badge-days {
            background: #87363c !important;
            color: #fff;
            padding: 7px 11px;
            font-size: 12px;
            border-radius: 6px;
        }

        .badge-violations {
            background: #87363c !important;
            color: white;
            padding: 7px 12px;
            border-radius: 6px;
        }

        /* ======================================
           الأزرار
        ====================================== */

        .btn-renew {
            background: #24476b;
            border-color: #24476b;
            color: white;
            font-weight: 700;
        }

        .btn-renew:hover {
            background: #193653;
            border-color: #193653;
            color: white;
        }

        .btn-decision {
            background: #b58a3c;
            border-color: #a47c34;
            color: #fff;
            font-weight: 800;
        }

        .btn-decision:hover {
            background: #94702f;
            border-color: #94702f;
            color: white;
        }

        /* ======================================
           النوافذ المنبثقة
        ====================================== */

        .modal-content {
            border: none;
            border-radius: 12px;
            overflow: hidden;
        }

        .modal-header {
            border-bottom: 1px solid rgba(0, 0, 0, .08);
        }

        .modal-header.bg-warning {
            background: #b58a3c !important;
            color: white !important;
        }

        .modal-title {
            font-weight: 800;
        }

        .modal-body {
            background: #fafbfa;
        }

        .modal-body .form-control,
        .modal-body .form-select {
            border-color: #d9e0da;
            border-radius: 7px;
        }

        .modal-body .form-control:focus,
        .modal-body .form-select:focus {
            border-color: #668c73;
            box-shadow: 0 0 0 .2rem rgba(32, 84, 59, .12);
        }

        /* ======================================
           تجاوب الهاتف
        ====================================== */

        @media (max-width: 767px) {

            .dashboard-card .card-body {
                padding: 13px;
            }

            .stat-card h2 {
                font-size: 27px;
            }

            .stat-card .card-title {
                font-size: 14px;
            }

            .dashboard-table {
                min-width: 650px;
            }

            .table-responsive {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

        }
    </style>


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

        <h3 class="mb-4 dashboard-title">
            📊 لوحة التحكم الرئيسية
        </h3>


        <!-- ======================================
             بطاقات الإحصائيات
        ====================================== -->

        <div class="row mb-4 g-3">

            <div class="col-md-4">

                <div class="card stat-card stat-blue text-white shadow-sm">

                    <div class="card-body text-center">

                        <h5 class="card-title">
                            إجمالي المؤسسات
                        </h5>

                        <h2 class="fw-bold">
                            {{ $totalEstablishments }}
                        </h2>

                    </div>

                </div>

            </div>


            <div class="col-md-4">

                <div class="card stat-card stat-green text-white shadow-sm">

                    <div class="card-body text-center">

                        <h5 class="card-title">
                            الرخص السارية
                        </h5>

                        <h2 class="fw-bold">
                            {{ $activeLicenses }}
                        </h2>

                    </div>

                </div>

            </div>


            <div class="col-md-4">

                <div class="card stat-card stat-red text-white shadow-sm">

                    <div class="card-body text-center">

                        <h5 class="card-title">
                            الرخص المنتهية
                        </h5>

                        <h2 class="fw-bold">
                            {{ $expiredLicenses }}
                        </h2>

                    </div>

                </div>

            </div>

        </div>


        <!-- ======================================
             الرسوم البيانية
        ====================================== -->

        <div class="row mb-4 g-3">

            <!-- الرسم الدائري -->

            <div class="col-md-6">

                <div class="card dashboard-card shadow-sm">

                    <div class="card-header">
                        🍩 توزيع المؤسسات حسب النوع
                    </div>

                    <div class="card-body d-flex justify-content-center">

                        <canvas id="typeChart" style="max-height:250px;"></canvas>

                    </div>

                </div>

            </div>


            <!-- رسم الأعمدة -->

            <div class="col-md-6">

                <div class="card dashboard-card shadow-sm">

                    <div class="card-header">
                        📊 المخالفات المسجلة خلال سنة {{ date('Y') }}
                    </div>

                    <div class="card-body">

                        <canvas id="violationsChart" style="max-height:250px;"></canvas>

                    </div>

                </div>

            </div>

        </div>


        <!-- ======================================
             تنبيهات الرخص
        ====================================== -->

        <div class="card warning-card shadow-sm mb-4">

            <div class="card-header warning-header">

                ⏳ رخص ستنتهي خلال 30 يوماً (تحتاج إلى تجديد)

            </div>

            <div class="card-body">

                @if($expiringLicenses->count() > 0)

                    <div class="table-responsive">

                        <table class="table table-bordered text-center align-middle dashboard-table">

                            <thead>

                                <tr>
                                    <th>رقم الرخصة</th>
                                    <th>المؤسسة</th>
                                    <th>تاريخ الانتهاء</th>
                                    <th>المتبقي</th>
                                    <th>الإجراء</th>
                                </tr>

                            </thead>

                            <tbody>

                                @foreach($expiringLicenses as $lic)

                                    <tr>

                                        <td>
                                            {{ $lic->license_number }}
                                        </td>

                                        <td>
                                            {{ $lic->establishment->name }}
                                        </td>

                                        <td class="text-danger fw-bold">
                                            {{ $lic->expiry_date }}
                                        </td>

                                        <td>

                                            @php
                                                $daysLeft = \Carbon\Carbon::parse($lic->expiry_date)->diffInDays(now());
                                            @endphp

                                            <span class="badge badge-days">
                                                {{ $daysLeft }} يوم
                                            </span>

                                        </td>

                                        <td>

                                            <a href="{{ route('licenses.index') }}" class="btn btn-sm btn-renew">

                                                تجديد

                                            </a>

                                        </td>

                                    </tr>

                                @endforeach

                            </tbody>

                        </table>

                    </div>

                @else

                    <p class="text-center text-muted py-3 mb-0">
                        لا توجد رخص ستنتهي خلال الفترة القادمة. ✅
                    </p>

                @endif

            </div>

        </div>


        <!-- ======================================
             المؤسسات التي تجاوزت حد المخالفات
        ====================================== -->

        <div class="card danger-card shadow-sm mb-4">

            <div class="card-header danger-header">

                ⚠️ مؤسسات تجاوزت حد المخالفات (تحتاج إلى قرار إداري)

            </div>

            <div class="card-body">

                @if($flaggedEstablishments->count() > 0)

                    <div class="table-responsive">

                        <table class="table table-bordered text-center align-middle dashboard-table">

                            <thead>

                                <tr>
                                    <th>اسم المؤسسة</th>
                                    <th>عدد المخالفات (هذا العام)</th>
                                    <th>اتخاذ قرار</th>
                                </tr>

                            </thead>

                            <tbody>

                                @foreach($flaggedEstablishments as $est)

                                    <tr>

                                        <td class="fw-bold">
                                            {{ $est->name }}
                                        </td>

                                        <td>

                                            <span class="badge badge-violations fs-6">
                                                {{ $est->total_violations }} مخالفات
                                            </span>

                                        </td>

                                        <td>

                                            <button type="button" class="btn btn-sm btn-decision" data-bs-toggle="modal"
                                                data-bs-target="#decisionModal{{ $est->id }}">

                                                ⚖️ اتخاذ إجراء

                                            </button>

                                        </td>

                                    </tr>

                                @endforeach

                            </tbody>

                        </table>

                    </div>

                @else

                    <p class="text-center text-muted py-3 mb-0">
                        لا توجد مؤسسات تجاوزت حد المخالفات هذا العام. ✅
                    </p>

                @endif

            </div>

        </div>

    </div>


    <!-- ======================================
         النوافذ المنبثقة لاتخاذ القرار
    ====================================== -->

    @foreach($flaggedEstablishments as $est)

        <div class="modal fade" id="decisionModal{{ $est->id }}" tabindex="-1">

            <div class="modal-dialog modal-dialog-centered">

                <div class="modal-content">

                    <div class="modal-header bg-warning text-dark">

                        <h5 class="modal-title">
                            قرار إداري بحق: {{ $est->name }}
                        </h5>

                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                        </button>

                    </div>


                    <div class="modal-body">

                        <form action="{{ route('decisions.store', $est->id) }}" method="POST">

                            @csrf

                            <div class="mb-3">

                                <label class="form-label fw-bold">
                                    نوع القرار
                                </label>

                                <select name="decision_type" class="form-select" required>

                                    <option value="">
                                        -- اختر القرار --
                                    </option>

                                    <option value="إنذار نهائي">
                                        إنذار نهائي
                                    </option>

                                    <option value="إغلاق مؤقت">
                                        إغلاق مؤقت
                                    </option>

                                    <option value="إغلاق نهائي">
                                        إغلاق نهائي
                                    </option>

                                    <option value="سحب الترخيص">
                                        سحب الترخيص
                                    </option>

                                </select>

                            </div>


                            <div class="mb-3">

                                <label class="form-label fw-bold">
                                    سبب القرار / ملاحظات
                                </label>

                                <textarea name="reason" class="form-control" rows="3">
                                    </textarea>

                            </div>


                            <button type="submit" class="btn btn-renew w-100">

                                تأكيد القرار

                            </button>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    @endforeach


    <!-- ======================================
         Chart.js
    ====================================== -->

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>

        document.addEventListener('DOMContentLoaded', function () {

            'use strict';

            /* ======================================
               ألوان الرسوم البيانية
            ====================================== */

            const chartColors = [
                '#20543b',
                '#24476b',
                '#94702f',
                '#8b353b',
                '#665080',
                '#287c70',
                '#a16b3e',
                '#65756c'
            ];


            /* ======================================
               الرسم الدائري
            ====================================== */

            const typeCanvas = document.getElementById('typeChart');

            if (typeCanvas) {

                new Chart(typeCanvas.getContext('2d'), {

                    type: 'doughnut',

                    data: {

                        labels: {!! json_encode($typeLabels) !!},

                        datasets: [{

                            data: {!! json_encode($typeCounts) !!},

                            backgroundColor: chartColors,

                            borderColor: '#ffffff',

                            borderWidth: 3,

                            hoverOffset: 8,

                            borderRadius: 4

                        }]

                    },

                    options: {

                        responsive: true,

                        maintainAspectRatio: true,

                        cutout: '62%',

                        animation: {
                            duration: 1000,
                            easing: 'easeOutQuart'
                        },

                        plugins: {

                            legend: {

                                position: 'bottom',

                                rtl: true,

                                labels: {

                                    font: {
                                        family: 'Tajawal',
                                        size: 12,
                                        weight: '600'
                                    },

                                    usePointStyle: true,

                                    pointStyle: 'circle',

                                    padding: 16

                                }

                            },

                            tooltip: {

                                rtl: true,

                                titleFont: {
                                    family: 'Tajawal'
                                },

                                bodyFont: {
                                    family: 'Tajawal'
                                }

                            }

                        }

                    }

                });

            }


            /* ======================================
               رسم المخالفات الشهرية
            ====================================== */

            const violationsCanvas = document.getElementById('violationsChart');

            if (violationsCanvas) {

                const ctx = violationsCanvas.getContext('2d');

                const gradient = ctx.createLinearGradient(0, 0, 0, 260);

                gradient.addColorStop(0, '#8b353b');

                gradient.addColorStop(1, '#b56a6e');


                new Chart(ctx, {

                    type: 'bar',

                    data: {

                        labels: {!! json_encode($monthLabels) !!},

                        datasets: [{

                            label: 'عدد المخالفات',

                            data: {!! json_encode($violationsCounts) !!},

                            backgroundColor: gradient,

                            borderColor: '#70282f',

                            borderWidth: 1,

                            borderRadius: 6,

                            borderSkipped: false,

                            maxBarThickness: 38

                        }]

                    },

                    options: {

                        responsive: true,

                        maintainAspectRatio: true,

                        animation: {

                            duration: 1000,

                            easing: 'easeOutQuart'

                        },

                        plugins: {

                            legend: {
                                display: false
                            },

                            tooltip: {

                                rtl: true,

                                titleFont: {
                                    family: 'Tajawal'
                                },

                                bodyFont: {
                                    family: 'Tajawal'
                                }

                            }

                        },

                        scales: {

                            x: {

                                grid: {
                                    display: false
                                },

                                ticks: {

                                    font: {
                                        family: 'Tajawal'
                                    }

                                }

                            },

                            y: {

                                beginAtZero: true,

                                ticks: {

                                    stepSize: 1,

                                    font: {
                                        family: 'Tajawal'
                                    }

                                },

                                grid: {
                                    color: 'rgba(32,84,59,.09)'
                                }

                            }

                        }

                    }

                });

            }

        });

    </script>

@endsection
```