@extends('admin.layouts.app')

@section('title', 'Dashboard')

@section('page-title', 'Dashboard')

@section('content')

<style>
    /* ============================================
       DASHBOARD - FIXED LAYOUT
    ============================================ */

    .dashboard-content {
        padding: 20px 24px;
        animation: fadeIn 0.5s ease;
    }

    /* ============================================
       BREADCRUMB
    ============================================ */
    .breadcrumb-wrap {
        margin-bottom: 16px;
    }

    .breadcrumb-wrap .breadcrumb {
        background: transparent;
        padding: 0;
        margin: 0;
    }

    .breadcrumb-wrap .breadcrumb-item {
        font-size: 13px;
        color: #6B7280;
    }

    .breadcrumb-wrap .breadcrumb-item a {
        color: #6B7280;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.3s ease;
    }

    .breadcrumb-wrap .breadcrumb-item a:hover {
        color: #C1121F;
    }

    .breadcrumb-wrap .breadcrumb-item a i {
        font-size: 14px;
    }

    .breadcrumb-wrap .breadcrumb-item.active {
        color: #C1121F;
        font-weight: 600;
    }

    .breadcrumb-wrap .breadcrumb-item+.breadcrumb-item::before {
        content: "/";
        color: #D1D5DB;
        padding: 0 6px;
    }

    /* ============================================
       PAGE HEADER
    ============================================ */
    .content-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 24px;
    }

    .content-header h2 {
        font-size: 24px;
        font-weight: 700;
        color: #1A1A2E;
        margin: 0 0 2px;
        letter-spacing: -0.3px;
    }

    .content-header .text-muted {
        color: #6B7280;
        font-size: 14px;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .content-header .text-muted i {
        color: #C1121F;
    }

    .header-actions {
        display: flex;
        gap: 10px;
        flex-shrink: 0;
    }

    .btn-outline-red {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 18px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        background: transparent;
        border: 1px solid #E8E8E8;
        color: #4A5568;
    }

    .btn-outline-red:hover {
        border-color: rgba(193, 18, 31, 0.3);
        color: #C1121F;
        background: rgba(193, 18, 31, 0.05);
        transform: translateY(-2px);
    }

    .btn-gradient-red {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 18px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        background: linear-gradient(135deg, #C1121F, #780000);
        border: none;
        color: #FFFFFF;
        box-shadow: 0 4px 16px rgba(193, 18, 31, 0.25);
        text-decoration: none;
    }

    .btn-gradient-red:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(193, 18, 31, 0.35);
        color: #FFFFFF;
    }

    /* ============================================
       STAT CARDS
    ============================================ */
    .stat-card {
        background: #FFFFFF;
        border-radius: 14px;
        padding: 20px 24px;
        border: 1px solid #E8E8E8;
        transition: all 0.4s ease;
        height: 100%;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
    }

    .stat-card:hover {
        transform: translateY(-4px);
        border-color: rgba(193, 18, 31, 0.15);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    }

    .stat-card .stat-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 12px;
        background: rgba(193, 18, 31, 0.08);
        color: #C1121F;
        transition: all 0.3s ease;
    }

    .stat-card:hover .stat-icon {
        background: linear-gradient(135deg, #C1121F, #780000);
        color: #FFFFFF;
        transform: scale(1.05);
    }

    .stat-card h3 {
        color: #1A1A2E;
        font-size: 26px;
        font-weight: 700;
        margin: 0 0 2px;
        line-height: 1.2;
    }

    .stat-card p {
        color: #6B7280;
        font-size: 13px;
        margin: 0;
    }

    .stat-card .trend {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 500;
        margin-top: 8px;
        padding: 2px 12px;
        border-radius: 20px;
    }

    .stat-card .trend.up {
        color: #22C55E;
        background: rgba(34, 197, 94, 0.08);
    }

    .stat-card .trend.down {
        color: #DC2626;
        background: rgba(220, 38, 38, 0.08);
    }

    /* ============================================
       QUICK ACTIONS
    ============================================ */
    .quick-action {
        display: block;
        background: #FFFFFF;
        border-radius: 14px;
        padding: 20px;
        border: 1px solid #E8E8E8;
        text-align: center;
        transition: all 0.4s ease;
        text-decoration: none;
        height: 100%;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
        cursor: pointer;
    }

    .quick-action:hover {
        transform: translateY(-4px);
        border-color: rgba(193, 18, 31, 0.15);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
        text-decoration: none;
    }

    .quick-action .quick-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 10px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        background: rgba(193, 18, 31, 0.08);
        color: #C1121F;
        transition: all 0.3s ease;
    }

    .quick-action:hover .quick-icon {
        background: linear-gradient(135deg, #C1121F, #780000);
        color: #FFFFFF;
        transform: scale(1.08);
    }

    .quick-action h6 {
        color: #1A1A2E;
        font-weight: 600;
        font-size: 14px;
        margin: 0 0 2px;
    }

    .quick-action p {
        color: #6B7280;
        font-size: 12px;
        margin: 0;
    }

    /* ============================================
       CHART CARDS
    ============================================ */
    .chart-card {
        background: #FFFFFF;
        border-radius: 14px;
        border: 1px solid #E8E8E8;
        padding: 20px 24px;
        transition: all 0.4s ease;
        height: 100%;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
    }

    .chart-card:hover {
        border-color: rgba(193, 18, 31, 0.08);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    }

    .chart-card .card-header-custom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .chart-card .card-header-custom h6 {
        color: #1A1A2E;
        font-weight: 600;
        font-size: 14px;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .chart-card .card-header-custom h6 i {
        color: #C1121F;
    }

    .chart-placeholder {
        text-align: center;
        padding: 10px 0;
        position: relative;
    }

    .chart-placeholder canvas {
        max-height: 220px;
        max-width: 100%;
    }

    .chart-placeholder .badge-container {
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 8px;
    }

    .chart-placeholder .badge-container .badge {
        font-size: 11px;
        padding: 4px 12px;
        font-weight: 500;
    }

    /* ============================================
       TABLE CARD
    ============================================ */
    .table-card {
        background: #FFFFFF;
        border-radius: 14px;
        border: 1px solid #E8E8E8;
        padding: 20px 24px;
        transition: all 0.4s ease;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
    }

    .table-card:hover {
        border-color: rgba(193, 18, 31, 0.06);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    }

    .table-card .table-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 14px;
    }

    .table-card .table-header h6 {
        color: #1A1A2E;
        font-weight: 600;
        font-size: 15px;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .table-card .table-header h6 i {
        color: #C1121F;
    }

    .table-card .view-all-link {
        color: #C1121F;
        text-decoration: none;
        font-weight: 600;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: all 0.3s ease;
    }

    .table-card .view-all-link:hover {
        color: #780000;
        gap: 8px;
    }

    .table-card .view-all-link:hover i {
        transform: translateX(4px);
    }

    .table-card .table {
        margin: 0;
        font-size: 13px;
        color: #4A5568;
    }

    .table-card .table thead th {
        background: #F8F9FA;
        color: #6B7280;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 10px 14px;
        border-bottom: 2px solid #E8E8E8;
    }

    .table-card .table tbody td {
        padding: 10px 14px;
        border-bottom: 1px solid #F0F0F0;
        vertical-align: middle;
    }

    .table-card .table tbody tr {
        transition: all 0.3s ease;
    }

    .table-card .table tbody tr:hover {
        background: rgba(193, 18, 31, 0.02);
    }

    .table-card .table tbody tr:last-child td {
        border-bottom: none;
    }

    .table-card .table tbody td strong {
        color: #1A1A2E;
    }

    /* Table Footer */
    .table-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid #E8E8E8;
    }

    .table-footer .table-info {
        color: #6B7280;
        font-size: 13px;
    }

    .table-footer .table-info strong {
        color: #1A1A2E;
    }

    /* ============================================
       ANIMATIONS
    ============================================ */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in {
        animation: fadeIn 0.5s ease;
    }

    .animate-slide-up {
        animation: slideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
    }

    /* ============================================
       RESPONSIVE
    ============================================ */
    @media (max-width: 992px) {
        .dashboard-content {
            padding: 16px;
        }

        .content-header h2 {
            font-size: 22px;
        }

        .stat-card h3 {
            font-size: 22px;
        }
    }

    @media (max-width: 768px) {
        .dashboard-content {
            padding: 12px;
        }

        .content-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .content-header h2 {
            font-size: 20px;
        }

        .header-actions {
            width: 100%;
        }

        .header-actions .btn-outline-red,
        .header-actions .btn-gradient-red {
            flex: 1;
            justify-content: center;
            font-size: 12px;
            padding: 8px 14px;
        }

        .stat-card {
            padding: 16px 18px;
        }

        .stat-card h3 {
            font-size: 20px;
        }

        .stat-card .stat-icon {
            width: 38px;
            height: 38px;
            font-size: 17px;
        }

        .quick-action {
            padding: 16px;
        }

        .quick-action .quick-icon {
            width: 40px;
            height: 40px;
            font-size: 18px;
        }

        .chart-card {
            padding: 16px 18px;
        }

        .table-card {
            padding: 14px 16px;
            border-radius: 12px;
        }

        .table-card .table thead th,
        .table-card .table tbody td {
            padding: 8px 10px;
            font-size: 12px;
        }

        .table-footer {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    }

    @media (max-width: 576px) {
        .dashboard-content {
            padding: 8px;
        }

        .content-header h2 {
            font-size: 18px;
        }

        .content-header .text-muted {
            font-size: 13px;
        }

        .stat-card {
            padding: 14px 16px;
            border-radius: 12px;
        }

        .stat-card h3 {
            font-size: 18px;
        }

        .stat-card .stat-icon {
            width: 34px;
            height: 34px;
            font-size: 15px;
        }

        .quick-action {
            padding: 14px;
            border-radius: 12px;
        }

        .quick-action .quick-icon {
            width: 36px;
            height: 36px;
            font-size: 16px;
        }

        .quick-action h6 {
            font-size: 13px;
        }

        .quick-action p {
            font-size: 11px;
        }

        .chart-card {
            padding: 12px 14px;
            border-radius: 12px;
        }

        .chart-card .card-header-custom h6 {
            font-size: 13px;
        }

        .table-card {
            padding: 10px 12px;
            border-radius: 10px;
            border: none;
            box-shadow: none;
        }

        .table-card .table thead th,
        .table-card .table tbody td {
            padding: 6px 8px;
            font-size: 11px;
        }

        .table-card .table-header h6 {
            font-size: 13px;
        }

        .table-card .view-all-link {
            font-size: 12px;
        }

        .breadcrumb-wrap .breadcrumb-item {
            font-size: 12px;
        }
    }

    @media (max-width: 380px) {
        .dashboard-content {
            padding: 6px;
        }

        .stat-card {
            padding: 12px 14px;
        }

        .stat-card h3 {
            font-size: 16px;
        }

        .stat-card p {
            font-size: 12px;
        }

        .stat-card .trend {
            font-size: 10px;
            padding: 1px 10px;
        }

        .header-actions .btn-outline-red,
        .header-actions .btn-gradient-red {
            font-size: 11px;
            padding: 6px 10px;
        }

        .table-card .table thead th,
        .table-card .table tbody td {
            padding: 4px 6px;
            font-size: 10px;
        }
    }
</style>

<!-- ============================================
   DASHBOARD CONTENT
============================================ -->

<div class="dashboard-content">

    <!-- ===== BREADCRUMB ===== -->
    <nav aria-label="breadcrumb" class="breadcrumb-wrap animate-fade-in">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ route('admin.dashboard') }}">
                    <i class="bi bi-house-door-fill"></i>
                    <span>Home</span>
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
    </nav>

    <!-- ===== PAGE HEADER ===== -->
    <div class="content-header animate-fade-in">
        <div>
            <h2>Overview</h2>
            <p class="text-muted">
                <i class="bi bi-clock-history"></i> 
                Here's what's happening across RedSpider today.
            </p>
        </div>
        <div class="header-actions">
            <button class="btn-outline-red" onclick="location.reload()">
                <i class="bi bi-arrow-clockwise"></i> Refresh
            </button>
            <a href="{{ route('admin.pages.create') }}" class="btn-gradient-red">
                <i class="bi bi-plus-circle"></i> Add New
            </a>
        </div>
    </div>

    <!-- ===== STATS ROW ===== -->
    <div class="row g-3 mb-4">
        <div class="col-xl-3 col-lg-6 col-md-6">
            <div class="stat-card animate-slide-up">
                <div class="stat-icon">
                    <i class="bi bi-file-earmark-text"></i>
                </div>
                <h3>{{ $stats['total_pages'] }}</h3>
                <p>Total Pages</p>
                <span class="trend up">
                    <i class="bi bi-arrow-up"></i> Active Pages
                </span>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-md-6">
            <div class="stat-card animate-slide-up" style="animation-delay: 0.1s;">
                <div class="stat-icon">
                    <i class="bi bi-newspaper"></i>
                </div>
                <h3>{{ $stats['published_blogs'] }}</h3>
                <p>Published Blogs</p>
                <span class="trend up">
                    <i class="bi bi-arrow-up"></i> {{ $stats['draft_blogs'] }} Drafts
                </span>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-md-6">
            <div class="stat-card animate-slide-up" style="animation-delay: 0.2s;">
                <div class="stat-icon">
                    <i class="bi bi-images"></i>
                </div>
                <h3>{{ $totalMedia }}</h3>
                <p>Media Files</p>
                <span class="trend up">
                    <i class="bi bi-arrow-up"></i> Gallery + Videos
                </span>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-md-6">
            <div class="stat-card animate-slide-up" style="animation-delay: 0.3s;">
                <div class="stat-icon">
                    <i class="bi bi-envelope-paper"></i>
                </div>
                <h3>{{ $stats['unread_enquiries'] }}</h3>
                <p>Unread Enquiries</p>
                <span class="trend down">
                    <i class="bi bi-clock-history"></i> Total: {{ $stats['total_enquiries'] }}
                </span>
            </div>
        </div>
    </div>

    <!-- ===== QUICK ACTIONS ===== -->
    <div class="row g-3 mb-4">
        <div class="col-lg-3 col-md-6">
            <a href="{{ route('admin.pages.create') }}" class="quick-action animate-slide-up" style="animation-delay: 0.4s;">
                <div class="quick-icon">
                    <i class="bi bi-file-earmark-plus"></i>
                </div>
                <h6>New Page</h6>
                <p>Create a new website page</p>
            </a>
        </div>
        <div class="col-lg-3 col-md-6">
            <a href="{{ route('admin.blogs.create') }}" class="quick-action animate-slide-up" style="animation-delay: 0.5s;">
                <div class="quick-icon">
                    <i class="bi bi-pencil-square"></i>
                </div>
                <h6>Write Blog</h6>
                <p>Create a new blog post</p>
            </a>
        </div>
        <div class="col-lg-3 col-md-6">
            <a href="{{ route('admin.galleries.create') }}" class="quick-action animate-slide-up" style="animation-delay: 0.6s;">
                <div class="quick-icon">
                    <i class="bi bi-cloud-upload"></i>
                </div>
                <h6>Upload Media</h6>
                <p>Add images or videos</p>
            </a>
        </div>
        <div class="col-lg-3 col-md-6">
            <a href="{{ route('admin.enquiries.index') }}" class="quick-action animate-slide-up" style="animation-delay: 0.7s;">
                <div class="quick-icon">
                    <i class="bi bi-envelope"></i>
                </div>
                <h6>View Enquiries</h6>
                <p>{{ $stats['unread_enquiries'] }} unread enquiries</p>
            </a>
        </div>
    </div>

    <!-- ===== CHARTS ROW ===== -->
    <div class="row g-3 mb-4">
        <div class="col-lg-8">
            <div class="chart-card animate-slide-up" style="animation-delay: 0.8s;">
                <div class="card-header-custom">
                    <h6><i class="bi bi-graph-up-arrow me-2"></i> Enquiries Overview</h6>
                    <small class="text-muted" style="font-size: 12px;">Last 30 Days</small>
                </div>
                <div class="chart-placeholder">
                    @if($enquiriesOverTime->count() > 0)
                        <canvas id="enquiriesChart" style="height: 200px; width: 100%;"></canvas>
                    @else
                        <div style="padding: 40px 0;">
                            <i class="bi bi-bar-chart-line" style="font-size: 40px; color: #D1D5DB; display: block; margin-bottom: 8px;"></i>
                            <p style="color: #6B7280; font-size: 14px;">No data available</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="chart-card animate-slide-up" style="animation-delay: 0.9s;">
                <div class="card-header-custom">
                    <h6><i class="bi bi-pie-chart-fill me-2"></i> Enquiry Status</h6>
                </div>
                <div class="chart-placeholder">
                    @if($enquiryStatus['unread'] + $enquiryStatus['read'] + $enquiryStatus['responded'] > 0)
                        <canvas id="enquiryPieChart" style="height: 150px; width: 100%;"></canvas>
                        <div class="badge-container">
                            <span class="badge bg-danger">Unread: {{ $enquiryStatus['unread'] }}</span>
                            <span class="badge bg-warning" style="color: #1A1A2E;">Read: {{ $enquiryStatus['read'] }}</span>
                            <span class="badge bg-success">Responded: {{ $enquiryStatus['responded'] }}</span>
                        </div>
                    @else
                        <div style="padding: 30px 0;">
                            <i class="bi bi-pie-chart" style="font-size: 40px; color: #D1D5DB; display: block; margin-bottom: 8px;"></i>
                            <p style="color: #6B7280; font-size: 14px;">No enquiries</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- ===== RECENT ACTIVITIES TABLE ===== -->
    <div class="table-card animate-slide-up" style="animation-delay: 1s;">
        <div class="table-header">
            <h6><i class="bi bi-clock-history me-2"></i> Recent Activities</h6>
            <a href="{{ route('admin.activity-logs.index') }}" class="view-all-link">
                View All <i class="bi bi-arrow-right"></i>
            </a>
        </div>
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>#ID</th>
                        <th>Module</th>
                        <th>Action</th>
                        <th>User</th>
                        <th>Description</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recentActivities as $activity)
                    <tr>
                        <td><strong>#{{ $activity->id }}</strong></td>
                        <td><span class="badge bg-secondary">{{ $activity->module }}</span></td>
                        <td>
                            <span class="badge 
                                @if($activity->action == 'Create') bg-success 
                                @elseif($activity->action == 'Update') bg-info 
                                @elseif($activity->action == 'Delete') bg-danger 
                                @else bg-secondary @endif">
                                {{ $activity->action }}
                            </span>
                        </td>
                        <td>{{ $activity->user?->name ?? 'System' }}</td>
                        <td>{{ Str::limit($activity->description ?? 'N/A', 50) }}</td>
                        <td>{{ $activity->created_at ? $activity->created_at->diffForHumans() : 'N/A' }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center text-muted py-4">
                            <i class="bi bi-inbox fs-2 d-block mb-2"></i>
                            No recent activities found.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="table-footer">
            <div class="table-info">
                Showing <strong>{{ $recentActivities->count() }}</strong> recent activities
            </div>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {

    // =============================================================
    // ENQUIRIES OVER TIME - LINE CHART
    // =============================================================
    @if($enquiriesOverTime->count() > 0)
        var ctx = document.getElementById('enquiriesChart');
        if (ctx) {
            var enquiriesChart = new Chart(ctx.getContext('2d'), {
                type: 'line',
                data: {
                    labels: @json($enquiriesOverTime->pluck('date')),
                    datasets: [{
                        label: 'Enquiries',
                        data: @json($enquiriesOverTime->pluck('total')),
                        backgroundColor: 'rgba(193, 18, 31, 0.08)',
                        borderColor: '#C1121F',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true,
                        pointBackgroundColor: '#C1121F',
                        pointBorderColor: '#FFFFFF',
                        pointBorderWidth: 2,
                        pointRadius: 3,
                        pointHoverRadius: 6,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1,
                                font: {
                                    size: 11
                                }
                            }
                        },
                        x: {
                            ticks: {
                                font: {
                                    size: 10
                                },
                                maxRotation: 45,
                                minRotation: 45
                            }
                        }
                    }
                }
            });
        }
    @endif

    // =============================================================
    // ENQUIRY STATUS - PIE CHART
    // =============================================================
    @if($enquiryStatus['unread'] + $enquiryStatus['read'] + $enquiryStatus['responded'] > 0)
        var pieCtx = document.getElementById('enquiryPieChart');
        if (pieCtx) {
            var enquiryPieChart = new Chart(pieCtx.getContext('2d'), {
                type: 'doughnut',
                data: {
                    labels: ['Unread', 'Read', 'Responded'],
                    datasets: [{
                        data: [
                            {{ $enquiryStatus['unread'] }},
                            {{ $enquiryStatus['read'] }},
                            {{ $enquiryStatus['responded'] }}
                        ],
                        backgroundColor: ['#DC2626', '#F59E0B', '#22C55E'],
                        borderWidth: 0,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    cutout: '70%',
                }
            });
        }
    @endif
});
</script>
@endpush