@extends('layouts.app')

@section('content')
<!-- Add Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<style>
    :root {
        --primary-color: #17479E;
        --secondary-color: #D8E0EB;
        --accent-color: #B5D0F5;
    }

    .profile-container {
      
        margin: 0 auto;
        padding: 10px;
    }

    /* Breadcrumb */
    .breadcrumb-custom {
        background: white;
        padding: 15px 20px;
        border-radius: 4px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .breadcrumb-custom .breadcrumb {
        margin: 0;
        background: transparent;
    }

    .breadcrumb-custom .breadcrumb-item {
        font-size: 14px;
        font-weight: 500;
    }

    .breadcrumb-custom .breadcrumb-item a {
        color: var(--primary-color);
        text-decoration: none;
    }

    .breadcrumb-custom .breadcrumb-item.active {
        color: #666;
    }

    .profile-tabs {
        background: white;
        border-radius: 6px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        animation: fadeInUp 0.5s ease-out 0.4s backwards;
    }

    /* Improved Modern Tabs */
    .nav-tabs {
        border-bottom: none;
        padding: 10px 20px 0 20px;
        margin: 0;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        display: flex;
        gap: 10px;
    }

    .nav-tabs .nav-link {
        border: none;
        color: #666;
        font-weight: 600;
        padding: 12px 25px;
        margin: 0;
        border-radius: 4px 4px 0 0;
        transition: all 0.3s ease;
        position: relative;
        background: transparent;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .nav-tabs .nav-link i {
        font-size: 18px;
    }

    .nav-tabs .nav-link:hover {
        background: rgba(255, 255, 255, 0.5);
        color: var(--primary-color);
    }

    .nav-tabs .nav-link.active {
        background: white;
        color: var(--primary-color);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    }

    .tab-content {
        padding: 30px;
        min-height: 500px;
        background: white;
    }

    .info-group {
        margin-bottom: 20px;
    }

    .info-label {
        font-weight: 700;
        color: var(--primary-color);
        font-size: 11px;
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-input {
        width: 100%;
        padding: 12px 15px;
        border: 2px solid var(--secondary-color);
        border-radius: 4px;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        color: #333;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        position: relative;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .info-input:hover {
        border-color: var(--primary-color);
        box-shadow: 0 3px 10px rgba(23, 71, 158, 0.15);
        transform: translateY(-1px);
    }

    .info-group {
        animation: fadeInUp 0.5s ease-out backwards;
        position: relative;
        margin-bottom: 20px;
    }

    .info-group .info-input {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .info-group:hover .info-input {
        border-color: var(--primary-color);
        box-shadow: 0 3px 10px rgba(23, 71, 158, 0.15);
        transform: translateY(-1px);
    }

    .info-group:nth-child(1) { animation-delay: 0.1s; }
    .info-group:nth-child(2) { animation-delay: 0.15s; }
    .info-group:nth-child(3) { animation-delay: 0.2s; }
    .info-group:nth-child(4) { animation-delay: 0.25s; }
    .info-group:nth-child(5) { animation-delay: 0.3s; }
    .info-group:nth-child(6) { animation-delay: 0.35s; }
    .info-group:nth-child(7) { animation-delay: 0.4s; }
    .info-group:nth-child(8) { animation-delay: 0.45s; }
    .info-group:nth-child(9) { animation-delay: 0.5s; }
    .info-group:nth-child(10) { animation-delay: 0.55s; }
    .info-group:nth-child(11) { animation-delay: 0.6s; }
    .info-group:nth-child(12) { animation-delay: 0.65s; }
    .info-group:nth-child(13) { animation-delay: 0.7s; }
    .info-group:nth-child(14) { animation-delay: 0.75s; }
    .info-group:nth-child(15) { animation-delay: 0.8s; }
    .info-group:nth-child(16) { animation-delay: 0.85s; }
    .info-group:nth-child(17) { animation-delay: 0.9s; }

    /* Password Section */
    .password-row {
        display: flex;
        gap: 30px;
    }

    .password-form-col {
        flex: 1;
    }

    .password-generator-col {
        flex: 1;
    }

    .form-group {
        margin-bottom: 25px;
    }

    .form-label {
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: 8px;
        display: block;
    }

    .form-control {
        border: 2px solid var(--secondary-color);
        border-radius: 4px;
        padding: 12px 15px;
        transition: all 0.3s ease;
    }

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(23, 71, 158, 0.15);
    }

    .btn-primary-custom {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 12px 30px;
        border-radius: 4px;
        font-weight: 600;
        transition: all 0.3s ease;
        width: 100%;
    }

    .btn-primary-custom:hover {
        background: #1a5bc4;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(23, 71, 158, 0.3);
    }

    .password-generator {
        background: whitesmoke;
        padding: 20px;
        border-radius: 6px;
        margin-bottom: 20px;
        animation: fadeInUp 0.5s ease-out 0.6s backwards;
    }

    .generated-password-option {
        background: white;
        padding: 12px 15px;
        margin-bottom: 10px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        font-family: 'Courier New', monospace;
        font-weight: 600;
    }

    .generated-password-option:hover {
        border-color: var(--primary-color);
        transform: translateX(5px);
        box-shadow: 0 2px 8px rgba(23, 71, 158, 0.2);
    }

    .btn-generate {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        font-weight: 600;
        width: 100%;
        margin-bottom: 15px;
    }

    .btn-generate:hover {
        background: #1a5bc4;
    }

    /* Standard Modern Metric Cards */
    .metric-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        border-radius: 6px;
        padding: 15px;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 15px;
        border: 1px solid #e9ecef;
        text-align: center;
        animation: fadeInUp 0.5s ease-out backwards;
    }

    .metric-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        border-color: var(--primary-color);
    }

    /* Stagger animation for metric cards */
    .metric-card:nth-child(1) { animation-delay: 0.5s; }
    .metric-card:nth-child(2) { animation-delay: 0.6s; }
    .metric-card:nth-child(3) { animation-delay: 0.7s; }
    .metric-card:nth-child(4) { animation-delay: 0.8s; }
    .metric-card:nth-child(5) { animation-delay: 0.9s; }
    .metric-card:nth-child(6) { animation-delay: 1s; }
    .metric-card:nth-child(7) { animation-delay: 1.1s; }

    .metric-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
        margin: 0 auto 12px auto;
    }

    .metric-card-total .metric-icon { background: linear-gradient(135deg, #17479E, #1a5bc4); }
    .metric-card-pending .metric-icon { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .metric-card-approved .metric-icon { background: linear-gradient(135deg, #10b981, #059669); }
    .metric-card-rejected .metric-icon { background: linear-gradient(135deg, #ef4444, #dc2626); }
    .metric-card-assigned .metric-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
    .metric-card-completed .metric-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); }
    .metric-card-overdue .metric-icon { background: linear-gradient(135deg, #f97316, #ea580c); }

    .metric-value {
        font-size: 28px;
        font-weight: 700;
        margin: 8px 0;
        color: #333;
    }

    .metric-label {
        font-size: 12px;
        color: #666;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Charts */
    .chart-container {
        background: white;
        padding: 25px;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        margin-bottom: 20px;
        height: 400px;
        animation: fadeInUp 0.5s ease-out 1.2s backwards;
    }

    .chart-title {
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 20px;
        font-size: 18px;
    }

    /* Type List */
    .type-list {
        background: white;
        padding: 25px;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        margin-bottom: 20px;
        height: 400px;
        overflow-y: auto;
        animation: fadeInUp 0.5s ease-out 1.2s backwards;
    }

    .type-list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        margin-bottom: 8px;
        background: linear-gradient(135deg, #ffffff 0%, var(--secondary-color) 100%);
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
        border-left: 4px solid var(--primary-color);
    }

    .type-list-item:hover {
        transform: translateX(5px);
        box-shadow: 0 2px 10px rgba(23, 71, 158, 0.15);
    }

    .type-name {
        font-weight: 600;
        color: #333;
        font-size: 14px;
    }

    .type-count {
        background: var(--primary-color);
        color: white;
        padding: 4px 12px;
        border-radius: 4px;
        font-weight: 700;
        font-size: 13px;
    }

    /* Modal Full Width */
    .modal-fullwidth .modal-dialog {
        max-width: 95%;
        margin: 20px auto;
    }

    .modal-content {
        border-radius: 6px;
        border: none;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        animation: fadeInUp 0.4s ease-out;
    }

    .modal-header {
        background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
        color: white;
        border-radius: 6px 6px 0 0;
        padding: 20px 30px;
        position: relative;
        overflow: hidden;
    }

    .modal-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        border-radius: 50%;
    }

    .modal-title {
        font-weight: 700;
        position: relative;
        z-index: 1;
    }

    .modal-body {
        padding: 25px 30px;
    }

    .table {
        border-collapse: collapse;
        border-spacing: 0;
        background: white;
        width: 100%;
        margin: 0;
        border: 1px solid #dee2e6;
    }

    .table thead th {
        background: #CEEDF5 !important;
        color: #17479E !important;
        font-weight: 600;
        border: 1px solid #dee2e6 !important;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
        transition: all 0.3s ease;
    }

    .table thead th:hover {
        background: #B8E2F0 !important;
    }

    .table tbody tr {
        transition: all 0.2s ease;
        background: white;
    }

    .table tbody tr:nth-child(even) {
        background: #f8f9fa;
    }

    .table tbody tr:hover {
        background: #e3f2fd !important;
    }

    .table tbody td {
        padding: 0.75rem 1rem !important;
        vertical-align: middle;
        border: 1px solid #dee2e6;
        font-size: 0.875rem;
        color: #495057;
    }

    .table-responsive {
        overflow-x: auto;
        margin-bottom: 1.5rem;
    }

    /* Legacy support for .table-modern class */
    .table-modern {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
    }

    .table-modern thead th {
        background: #CEEDF5 !important;
        color: #17479E !important;
        padding: 15px;
        border: 1px solid #dee2e6 !important;
        font-size: 13px;
    }

    .table-modern tbody td {
        padding: 12px 15px;
        border: 1px solid #dee2e6;
        font-size: 13px;
    }

    .table-modern tbody tr:hover {
        background: #e3f2fd !important;
    }

    /* Status Badges */
    .status-badge {
        padding: 6px 12px;
        border-radius: 4px;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        display: inline-block;
    }

    .status-pending { background: #f59e0b; color: white; }
    .status-assigned { background: #8b5cf6; color: white; }
    .status-rejected { background: #ef4444; color: white; }
    .status-completed { background: #06b6d4; color: white; }
    .status-approved { background: #10b981; color: white; }
    .status-pending_overdue { background: #f97316; color: white; }

    .alert {
        border-radius: 4px;
        border: none;
        padding: 15px 20px;
    }

    .password-strength {
        height: 6px;
        background: var(--secondary-color);
        border-radius: 3px;
        margin-top: 8px;
        overflow: hidden;
    }

    .password-strength-bar {
        height: 100%;
        transition: all 0.3s ease;
        border-radius: 3px;
    }

    .strength-weak { width: 25%; background: #ef4444; }
    .strength-medium { width: 50%; background: #f59e0b; }
    .strength-strong { width: 75%; background: #3b82f6; }
    .strength-very-strong { width: 100%; background: #10b981; }

    /* ENHANCED MOBILE RESPONSIVE IMPROVEMENTS */
    @media (max-width: 768px) {
        .profile-container {
            padding: 10px;
        }

        .password-row {
            flex-direction: column;
        }

        .breadcrumb {
            font-size: 0.85rem;
        }

        .breadcrumb-item + .breadcrumb-item::before {
            padding-right: 0.3rem;
            padding-left: 0.3rem;
        }

        .card-body.py-3 h5 {
            font-size: 1rem !important;
        }

        .nav-tabs {
            padding: 5px 10px 0 10px;
            gap: 5px;
            overflow-x: auto;
            flex-wrap: nowrap;
            -webkit-overflow-scrolling: touch;
        }

        .nav-tabs .nav-link {
            padding: 10px 15px;
            font-size: 0.85rem;
            white-space: nowrap;
        }

        .nav-tabs .nav-link i {
            font-size: 16px;
        }

        .tab-content {
            padding: 15px;
        }

        .info-input,
        .form-control {
            padding: 8px 10px;
            font-size: 13px;
        }

        .info-label,
        .form-label {
            font-size: 10px;
        }

        .metric-card {
            margin-bottom: 10px;
            padding: 12px;
        }

        .metric-value {
            font-size: 22px;
        }

        .metric-label {
            font-size: 11px;
        }

        .metric-icon {
            width: 40px;
            height: 40px;
            font-size: 20px;
        }

        .chart-container,
        .type-list {
            height: 300px;
            padding: 15px;
        }

        .chart-title {
            font-size: 16px;
            margin-bottom: 15px;
        }

        .btn-primary-custom,
        .btn-generate {
            padding: 10px 20px;
            font-size: 14px;
        }

        .password-generator {
            padding: 15px;
        }

        .generated-password-option {
            padding: 10px 12px;
            font-size: 13px;
        }

        .modal-fullwidth .modal-dialog {
            max-width: 98%;
            margin: 10px auto;
        }

        .modal-body {
            padding: 15px;
        }
    }

    @media (max-width: 576px) {
        .nav-tabs .nav-link {
            padding: 8px 12px;
            font-size: 0.8rem;
        }

        .tab-content {
            padding: 10px;
        }

        .metric-card {
            padding: 10px;
        }

        .metric-value {
            font-size: 20px;
        }

        .metric-icon {
            width: 35px;
            height: 35px;
            font-size: 18px;
        }

        h5.fw-bold {
            font-size: 0.9rem !important;
        }

        .breadcrumb {
            font-size: 0.75rem;
        }

        .btn-primary-custom,
        .btn-generate {
            padding: 8px 15px;
            font-size: 13px;
        }

        .form-control {
            padding: 8px;
            font-size: 12px;
        }
    }

    /* Input field enhancements */
    .info-input:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(23, 71, 158, 0.1);
        transition: all 0.3s ease;
    }

    /* Smooth transitions */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    .nav-tabs,
    .tab-content,
    .metric-card,
    .info-input,
    .form-control {
        transition: all 0.3s ease;
    }

    /* Smooth scroll behavior */
    html {
        scroll-behavior: smooth;
    }

    /* Enhanced hover effects for cards */
    .metric-card {
        position: relative;
        overflow: hidden;
    }

    .metric-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.5s;
    }

    .metric-card:hover::before {
        left: 100%;
    }

    /* Loading animation for charts */
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    .chart-loading {
        animation: pulse 1.5s ease-in-out infinite;
    }

    /* Enhanced password generator */
    .password-generator {
        position: relative;
        overflow: hidden;
    }

    .generated-password-option {
        position: relative;
        overflow: hidden;
    }

    .generated-password-option::after {
        content: 'Click to use';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%) translateX(20px);
        opacity: 0;
        transition: all 0.3s ease;
        font-size: 11px;
        color: var(--primary-color);
        font-weight: 600;
        text-transform: uppercase;
    }

    .generated-password-option:hover::after {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }

    /* Tab transition effects */
    .tab-pane {
        animation: fadeIn 0.4s ease-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* Empty state animations */
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }

    .chart-container i[class*='bx-'],
    .type-list i[class*='bx-'] {
        animation: float 3s ease-in-out infinite;
    }

    /* Ripple effect for clickable items */
    @keyframes ripple {
        0% {
            transform: scale(0);
            opacity: 1;
        }
        100% {
            transform: scale(4);
            opacity: 0;
        }
    }

    .metric-card:active::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: ripple 0.6s ease-out;
    }

    /* Enhanced button styles */
    .btn-primary-custom,
    .btn-generate {
        position: relative;
        overflow: hidden;
    }

    .btn-primary-custom:active,
    .btn-generate:active {
        transform: scale(0.98);
    }

    /* Info label icon animation */
    .info-label i {
        transition: transform 0.3s ease;
    }

    .info-group:hover .info-label i {
        transform: rotate(360deg);
    }

    /* Metric value count-up effect */
    .metric-value {
        font-variant-numeric: tabular-nums;
    }

    /* Enhanced type list items */
    .type-list-item {
        position: relative;
    }

    .type-list-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 4px;
        background: var(--primary-color);
        transition: width 0.3s ease;
    }

    .type-list-item:hover::before {
        width: 8px;
    }

    /* Skeleton loader */
    @keyframes shimmer {
        0% {
            background-position: -468px 0;
        }
        100% {
            background-position: 468px 0;
        }
    }

    .skeleton {
        animation: shimmer 1.2s ease-in-out infinite;
        background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
        background-size: 800px 104px;
    }

    /* Enhanced status badges */
    .status-badge {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .status-badge:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    /* Modal animations */
    .modal.fade .modal-dialog {
        transform: scale(0.9);
        opacity: 0;
        transition: all 0.3s ease-out;
    }

    .modal.show .modal-dialog {
        transform: scale(1);
        opacity: 1;
    }

    /* Pagination styles */
    .pagination-btn {
        background: white;
        border: 2px solid var(--secondary-color);
        color: var(--primary-color);
        padding: 8px 12px;
        border-radius: 4px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .pagination-btn:hover:not(.disabled) {
        background: var(--primary-color);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(23, 71, 158, 0.2);
    }

    .pagination-btn.active {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }

    .pagination-btn.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .pagination-ellipsis {
        padding: 8px 5px;
        color: #666;
        font-weight: 600;
    }

    /* Table responsive improvements */
    .table thead th,
    .table tbody td {
        white-space: nowrap;
    }

    @media (max-width: 768px) {
        .table thead th,
        .table tbody td {
            padding: 0.5rem !important;
            font-size: 0.75rem;
        }

        .table .btn-sm {
            font-size: 10px !important;
            padding: 4px 8px;
        }
    }

    /* Modern Breadcrumb */
    .modern-breadcrumb-notification {
        background: white;
        padding: 14px 20px;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        margin-bottom: 0;
        border: 1px solid #e5e7eb;
    }

    .modern-breadcrumb-notification .breadcrumb-item {
        display: flex;
        align-items: center;
        font-size: 14px;
    }

    .breadcrumb-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #6b7280;
        text-decoration: none;
        transition: color 0.2s;
    }

    .breadcrumb-link:hover {
        color: #3b82f6;
    }

    .modern-breadcrumb-notification .breadcrumb-item.active {
        color: #17479E;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Page Header */
    .page-header-modern {
        background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
        padding: 36px;
        border-radius: 6px;
        color: white;
        box-shadow: 0 2px 6px rgba(23, 71, 158, 0.15);
        position: relative;
        overflow: hidden;
        animation: fadeInUp 0.6s ease-out 0.2s backwards;
    }

    .page-header-modern::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        border-radius: 50%;
    }

    .header-icon {
        width: 70px;
        height: 70px;
        background: rgba(255,255,255,0.25);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }

    .page-header-modern:hover .header-icon {
        transform: rotate(10deg) scale(1.1);
        background: rgba(255,255,255,0.3);
    }

    .page-title {
        font-size: 28px;
        font-weight: 700;
        color: white;
    }

    .page-subtitle {
        color: rgba(255,255,255,0.9);
        font-size: 14px;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>

<div class="profile-container">
    <!-- Modern Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb modern-breadcrumb-notification">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}" class="breadcrumb-link">
                    <i class="bx bx-home"></i>
                    <span>Dashboard</span>
                </a>
            </li>
            <li class="breadcrumb-item active">
                <i class="bx bx-user-circle"></i>
                <span>My Profile</span>
            </li>
        </ol>
    </nav>

    <!-- Modern Page Header -->
    <div class="page-header-modern mb-4">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <div class="header-icon me-3">
                    <i class="bx bx-user-circle"></i>
                </div>
                <div>
                    <h1 class="page-title mb-0">My Profile</h1>
                    <p class="page-subtitle mb-0">Manage your personal information and settings</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs -->
    <div class="profile-tabs">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#personal-info">
                    <i class="bx bx-user"></i>
                    <span>Personal Information</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#change-password">
                    <i class="bx bx-lock-alt"></i>
                    <span>Change Password</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#performed-tasks">
                    <i class="bx bx-task"></i>
                    <span>Performed Tasks</span>
                </a>
            </li>
        </ul>

        <div class="tab-content">
            <!-- Tab 1: Personal Information (3 Columns) -->
            <div id="personal-info" class="tab-pane fade show active">
                <h4 style="color: var(--primary-color); font-weight: 700; margin-bottom: 25px;">
                    <i class="bx bx-info-circle"></i> Your Personal Information
                </h4>

                <div class="row">
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Full Name</div>
                            <input type="text" class="info-input" value="{{ $user->name }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Email Address</div>
                            <input type="text" class="info-input" value="{{ $user->email }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Phone Number</div>
                            <input type="text" class="info-input" value="{{ $user->phone_number ?? 'N/A' }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Rank</div>
                            <input type="text" class="info-input" value="{{ optional($user->rank()->first())->name ?? 'N/A' }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Designation</div>
                            <input type="text" class="info-input" value="{{ $user->designation ?? 'N/A' }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Status</div>
                            <input type="text" class="info-input" value="{{ ucfirst($user->status) }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Region</div>
                            <input type="text" class="info-input" value="{{ $user->region->name ?? 'N/A' }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">District</div>
                            <input type="text" class="info-input" value="{{ $user->district->name ?? 'N/A' }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Department</div>
                            <input type="text" class="info-input" value="{{ $user->department->name ?? 'N/A' }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Branch</div>
                            <input type="text" class="info-input" value="{{ $user->branch->name ?? 'N/A' }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Command</div>
                            <input type="text" class="info-input" value="{{ $user->command->name ?? 'N/A' }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Role</div>
                            <input type="text" class="info-input" value="{{ $user->getRoleNames()->first() ?? 'N/A' }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">First Login</div>
                            <input type="text" class="info-input" value="{{ $user->first_login ? \Carbon\Carbon::parse($user->first_login)->format('Y-m-d H:i:s') : 'Never logged in' }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Last Login</div>
                            <input type="text" class="info-input" value="{{ $user->last_login ? $user->last_login->format('Y-m-d H:i:s') : 'Never logged in' }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Last Password Change</div>
                            <input type="text" class="info-input" value="{{ $user->last_password_change ? $user->last_password_change->format('Y-m-d H:i:s') : 'Never changed' }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Last Activity</div>
                            <input type="text" class="info-input" value="{{ $user->last_activity ? $user->last_activity->format('Y-m-d H:i:s') : 'No activity' }}" disabled>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-group">
                            <div class="info-label">Login Attempts</div>
                            <input type="text" class="info-input" value="{{ $user->login_attempts ?? 0 }}" disabled>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab 2: Change Password -->
            <div id="change-password" class="tab-pane fade">
                <h4 style="color: var(--primary-color); font-weight: 700; margin-bottom: 25px; text-align: center;">
                    <i class="bx bx-shield"></i> Change Your Password
                </h4>

                @if($errors->any())
                <div class="alert alert-danger" style="border-left: 4px solid #ef4444; animation: fadeInUp 0.4s ease-out;">
                    <div style="display: flex; align-items: start; gap: 10px;">
                        <i class="bx bx-error-circle" style="font-size: 24px; color: #ef4444; margin-top: 2px;"></i>
                        <div style="flex: 1;">
                            <strong style="display: block; margin-bottom: 8px;">Please fix the following errors:</strong>
                            <ul style="margin: 0; padding-left: 20px;">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                @endif

                @if(session('success'))
                <div class="alert alert-success" style="border-left: 4px solid #10b981; animation: fadeInUp 0.4s ease-out;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <i class="bx bx-check-circle" style="font-size: 24px; color: #10b981;"></i>
                        <strong>{{ session('success') }}</strong>
                    </div>
                </div>
                @endif

                <div class="password-row">
                    <!-- Left Column: Form -->
                    <div class="password-form-col">
                        <form method="POST" action="{{ route('profile.update-password') }}">
                            @csrf

                            <div class="form-group">
                                <label class="form-label">Current Password</label>
                                <input type="password" class="form-control" name="current_password" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label">New Password</label>
                                <input type="password" class="form-control" id="new_password" name="new_password" required onkeyup="checkPasswordStrength()">
                                <div class="password-strength">
                                    <div class="password-strength-bar" id="strength-bar"></div>
                                </div>
                                <small id="strength-text" style="color: var(--primary-color); font-weight: 600;"></small>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Confirm New Password</label>
                                <input type="password" class="form-control" name="new_password_confirmation" required>
                            </div>

                            <div style="background: var(--accent-color); padding: 15px; border-radius: 8px; margin-bottom: 20px;">
                                <h6 style="color: var(--primary-color); font-weight: 700; margin-bottom: 10px;">
                                    <i class="bx bx-info-circle"></i> Password Requirements:
                                </h6>
                                <ul style="margin: 0; padding-left: 20px; color: #333; font-size: 13px;">
                                    <li>8-15 characters long</li>
                                    <li>At least one uppercase letter</li>
                                    <li>At least one lowercase letter</li>
                                    <li>At least one number</li>
                                    <li>At least one special character (@$!%*#?&)</li>
                                    <li>Cannot contain your name</li>
                                    <li>Cannot be same as current password</li>
                                </ul>
                            </div>

                            <button type="submit" class="btn-primary-custom">
                                <i class="bx bx-check-circle"></i> Update Password
                            </button>
                        </form>
                    </div>

                    <!-- Right Column: Password Generator -->
                    <div class="password-generator-col">
                        <div class="password-generator">
                            <h6 style="color: var(--primary-color); font-weight: 700; margin-bottom: 15px;">
                                <i class="bx bx-bolt"></i> Generate Secure Password
                            </h6>
                            <button type="button" class="btn-generate" onclick="generatePasswords()">
                                <i class="bx bx-refresh"></i> Generate Passwords
                            </button>
                            <div id="generated-passwords"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab 3: Performed Tasks -->
            <div id="performed-tasks" class="tab-pane fade">
                <h4 style="color: var(--primary-color); font-weight: 700; margin-bottom: 25px;">
                    <i class="bx bx-task"></i> Your Task Performance
                </h4>

                <!-- Standard Modern Metric Cards -->
                @php
                    $enquiriesByStatus = $enquiriesByStatus ?? [];
                    $totalCount = collect($enquiriesByStatus)->sum('count');

                    $statusConfig = [
                        'pending' => ['class' => 'metric-card-pending', 'icon' => 'bx-time'],
                        'approved' => ['class' => 'metric-card-approved', 'icon' => 'bx-check-circle'],
                        'rejected' => ['class' => 'metric-card-rejected', 'icon' => 'bx-x-circle'],
                        'assigned' => ['class' => 'metric-card-assigned', 'icon' => 'bx-user-check'],
                        'completed' => ['class' => 'metric-card-completed', 'icon' => 'bx-check-double'],
                        'pending_overdue' => ['class' => 'metric-card-overdue', 'icon' => 'bx-error'],
                    ];
                @endphp

                @if($totalCount > 0)
                <div class="row">
                    <div class="col-md-3">
                        <div class="metric-card metric-card-total" onclick="showEnquiriesByStatus('all')">
                            <div class="metric-icon">
                                <i class="bx bx-list-ul"></i>
                            </div>
                            <div class="metric-value">{{ $totalCount }}</div>
                            <div class="metric-label">Total Enquiries</div>
                        </div>
                    </div>

                    @foreach($enquiriesByStatus as $statusData)
                    @php
                        $statusLower = strtolower($statusData['status']);
                        $config = $statusConfig[$statusLower] ?? ['class' => 'metric-card-total', 'icon' => 'bx-info-circle'];
                    @endphp
                    <div class="col-md-3">
                        <div class="metric-card {{ $config['class'] }}" onclick="showEnquiriesByStatus('{{ $statusLower }}')">
                            <div class="metric-icon">
                                <i class="bx {{ $config['icon'] }}"></i>
                            </div>
                            <div class="metric-value">{{ $statusData['count'] }}</div>
                            <div class="metric-label">{{ $statusData['status'] }}</div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <!-- Comprehensive Empty State -->
                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 500px; padding: 40px; text-align: center;">
                    <div style="width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, #f8f9fa, #e9ecef); display: flex; align-items: center; justify-content: center; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                        <i class="bx bx-task-x" style="font-size: 60px; color: #D8E0EB;"></i>
                    </div>
                    <h4 style="color: var(--primary-color); font-weight: 700; margin-bottom: 12px;">No Tasks Performed Yet</h4>
                    <p style="color: #666; font-size: 15px; max-width: 500px; margin-bottom: 20px; line-height: 1.6;">
                        You haven't registered or processed any enquiries yet. Your performance analytics and statistics will appear here once you start working on tasks.
                    </p>
                    <div style="display: flex; gap: 15px; margin-top: 15px;">
                        <div style="padding: 15px 20px; background: #f8f9fa; border-radius: 6px; border-left: 3px solid var(--primary-color);">
                            <i class="bx bx-info-circle" style="color: var(--primary-color); margin-right: 8px;"></i>
                            <strong style="color: var(--primary-color);">Tip:</strong>
                            <span style="color: #666; font-size: 14px; margin-left: 5px;">Start registering enquiries to track your performance.</span>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Charts Layout: List + Donut (Row 1), Bar Graph (Row 2) -->
                @if($totalCount > 0)
                <div class="row mt-3">
                    <!-- Type List -->
                    <div class="col-md-6">
                        <div class="type-list">
                            <h5 class="chart-title">Enquiry Types</h5>
                            @if(count($enquiriesByType ?? []) > 0)
                                @foreach($enquiriesByType ?? [] as $typeItem)
                                <div class="type-list-item" onclick="showEnquiriesByType('{{ $typeItem['type_key'] }}')">
                                    <span class="type-name">{{ $typeItem['type'] }}</span>
                                    <span class="type-count">{{ $typeItem['count'] }}</span>
                                </div>
                                @endforeach
                            @else
                                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 300px; color: #666;">
                                    <i class="bx bx-inbox" style="font-size: 64px; color: #D8E0EB; margin-bottom: 15px;"></i>
                                    <h6 style="color: var(--primary-color); font-weight: 600; margin-bottom: 8px;">No Enquiries Yet</h6>
                                    <p style="font-size: 14px; margin: 0; text-align: center;">You haven't registered any enquiries yet.</p>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Donut Chart -->
                    <div class="col-md-6">
                        <div class="chart-container">
                            <h5 class="chart-title">Status Distribution</h5>
                            <div style="height: 350px;">
                                @if(count($enquiriesByStatus ?? []) > 0)
                                    <canvas id="statusChart"></canvas>
                                @else
                                    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #666;">
                                        <i class="bx bx-pie-chart-alt" style="font-size: 64px; color: #D8E0EB; margin-bottom: 15px;"></i>
                                        <h6 style="color: var(--primary-color); font-weight: 600; margin-bottom: 8px;">No Data Available</h6>
                                        <p style="font-size: 14px; margin: 0; text-align: center;">Start working on enquiries to see statistics.</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bar Graph Standard Height -->
                <div class="row mt-3">
                    <div class="col-md-12">
                        <div class="chart-container">
                            <h5 class="chart-title">Enquiries by Type (Bar Chart)</h5>
                            <div style="height: 350px;">
                                @if(count($enquiriesByType ?? []) > 0)
                                    <canvas id="typeChart"></canvas>
                                @else
                                    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #666;">
                                        <i class="bx bx-bar-chart" style="font-size: 64px; color: #D8E0EB; margin-bottom: 15px;"></i>
                                        <h6 style="color: var(--primary-color); font-weight: 600; margin-bottom: 8px;">No Data to Display</h6>
                                        <p style="font-size: 14px; margin: 0; text-align: center;">Enquiry type statistics will appear here once you start working.</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Modal for Enquiries Table (Full Width) -->
<div class="modal fade modal-fullwidth" id="enquiriesModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-white" id="modalTitle">Enquiries</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-modern" id="enquiriesTable">
                        <thead>
                            <tr>
                                <th>Date Received</th>
                                <th>Full Name</th>
                                <th>Check Number</th>
                                <th>District</th>
                                <th>Phone</th>
                                <th>Region</th>
                                <th>Type</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="enquiriesTableBody">
                        </tbody>
                    </table>
                </div>
                <div id="paginationControls" style="display: none; justify-content: center; align-items: center; margin-top: 20px; gap: 10px; flex-wrap: wrap;">
                    <div id="paginationButtons" style="display: flex; gap: 5px; align-items: center; flex-wrap: wrap;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
    // Password Strength Checker
    function checkPasswordStrength() {
        const password = document.getElementById('new_password').value;
        const strengthBar = document.getElementById('strength-bar');
        const strengthText = document.getElementById('strength-text');

        let strength = 0;

        if (password.length >= 8) strength++;
        if (password.match(/[a-z]/)) strength++;
        if (password.match(/[A-Z]/)) strength++;
        if (password.match(/[0-9]/)) strength++;
        if (password.match(/[@$!%*#?&]/)) strength++;

        strengthBar.className = 'password-strength-bar';

        if (strength <= 2) {
            strengthBar.classList.add('strength-weak');
            strengthText.textContent = 'Weak';
        } else if (strength <= 3) {
            strengthBar.classList.add('strength-medium');
            strengthText.textContent = 'Medium';
        } else if (strength <= 4) {
            strengthBar.classList.add('strength-strong');
            strengthText.textContent = 'Strong';
        } else {
            strengthBar.classList.add('strength-very-strong');
            strengthText.textContent = 'Very Strong';
        }
    }

    // Generate Passwords
    function generatePasswords() {
        if (typeof axios === 'undefined') {
            alert('Axios is not loaded. Please refresh the page.');
            return;
        }

        axios.post('/password/generate')
            .then(response => {
                const passwords = response.data.passwords;
                let html = '';
                passwords.forEach(password => {
                    html += `<div class="generated-password-option" onclick="selectPassword('${password}')">${password}</div>`;
                });
                document.getElementById('generated-passwords').innerHTML = html;
            })
            .catch(error => {
                console.error('Error generating passwords:', error);
                alert('Error generating passwords. Please try again.');
            });
    }

    // Select Password
    function selectPassword(password) {
        document.getElementById('new_password').value = password;
        document.querySelector('[name="new_password_confirmation"]').value = password;
        checkPasswordStrength();
    }

    // Charts Data
    const typeData = @json($enquiriesByType ?? []);
    const statusData = @json($enquiriesByStatus ?? []);

    // Bar Chart - Enquiries by Type (Standard Height)
    const typeCtx = document.getElementById('typeChart');
    if (typeCtx && typeData.length > 0) {
        new Chart(typeCtx, {
            type: 'bar',
            data: {
                labels: typeData.map(item => item.type),
                datasets: [{
                    label: 'Count',
                    data: typeData.map(item => item.count),
                    backgroundColor: '#17479E',
                    borderColor: '#17479E',
                    borderWidth: 1,
                    borderRadius: 8
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                onClick: (e, activeElements) => {
                    if (activeElements.length > 0) {
                        const index = activeElements[0].index;
                        const typeKey = typeData[index].type_key;
                        showEnquiriesByType(typeKey);
                    }
                },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: '#17479E',
                        padding: 12,
                        cornerRadius: 8
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: { color: '#17479E', font: { weight: 600 } }
                    },
                    x: {
                        ticks: { color: '#17479E', font: { weight: 600 } }
                    }
                }
            }
        });
    }

    // Donut Chart - Enquiries by Status
    const statusCtx = document.getElementById('statusChart');
    if (statusCtx && statusData.length > 0) {
        new Chart(statusCtx, {
            type: 'doughnut',
            data: {
                labels: statusData.map(item => item.status),
                datasets: [{
                    data: statusData.map(item => item.count),
                    backgroundColor: ['#17479E', '#f59e0b', '#10b981', '#ef4444', '#8b5cf6', '#06b6d4', '#f97316'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                onClick: (e, activeElements) => {
                    if (activeElements.length > 0) {
                        const index = activeElements[0].index;
                        const status = statusData[index].status.toLowerCase();
                        showEnquiriesByStatus(status);
                    }
                },
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 15,
                            font: { size: 12, weight: 600 },
                            color: '#17479E'
                        }
                    },
                    tooltip: {
                        backgroundColor: '#17479E',
                        padding: 12,
                        cornerRadius: 8
                    }
                }
            }
        });
    }

    // Show Enquiries by Status
    function showEnquiriesByStatus(status) {
        if (typeof axios === 'undefined') {
            alert('Axios is not loaded. Please refresh the page.');
            return;
        }

        axios.get('/profile/enquiries?filter=' + status)
            .then(response => {
                displayEnquiries(response.data.data, 'Enquiries - ' + status.toUpperCase());
            })
            .catch(error => {
                console.error('Error fetching enquiries:', error);
                alert('Error fetching enquiries. Please try again.');
            });
    }

    // Show Enquiries by Type
    function showEnquiriesByType(type) {
        if (typeof axios === 'undefined') {
            alert('Axios is not loaded. Please refresh the page.');
            return;
        }

        axios.get('/profile/enquiries?filter=type&type=' + type)
            .then(response => {
                displayEnquiries(response.data.data, 'Enquiries - ' + type.replace(/_/g, ' ').toUpperCase());
            })
            .catch(error => {
                console.error('Error fetching enquiries:', error);
                alert('Error fetching enquiries. Please try again.');
            });
    }

    // Get Status Badge Class
    function getStatusBadgeClass(status) {
        const statusLower = status.toLowerCase();
        const badges = {
            'pending': 'status-pending',
            'assigned': 'status-assigned',
            'rejected': 'status-rejected',
            'completed': 'status-completed',
            'approved': 'status-approved',
            'pending_overdue': 'status-pending_overdue'
        };
        return badges[statusLower] || 'status-pending';
    }

    // Pagination State
    let currentPage = 1;
    let totalPages = 1;
    let currentFilter = '';
    let currentType = '';
    const itemsPerPage = 15;

    // Display Enquiries in Modal
    function displayEnquiries(data, title) {
        document.getElementById('modalTitle').textContent = title;
        const tbody = document.getElementById('enquiriesTableBody');

        if (!data || data.length === 0) {
            tbody.innerHTML = '<tr><td colspan="8" class="text-center">No enquiries found</td></tr>';
            document.getElementById('paginationControls').style.display = 'none';
        } else {
            // Calculate pagination
            totalPages = Math.ceil(data.length / itemsPerPage);
            const startIndex = (currentPage - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            const paginatedData = data.slice(startIndex, endIndex);

            let html = '';
            paginatedData.forEach(enquiry => {
                const badgeClass = getStatusBadgeClass(enquiry.status);
                html += `
                    <tr>
                        <td>${enquiry.date_received || 'N/A'}</td>
                        <td>${enquiry.full_name || 'N/A'}</td>
                        <td>${enquiry.check_number || 'N/A'}</td>
                        <td>${enquiry.district || 'N/A'}</td>
                        <td>${enquiry.phone || 'N/A'}</td>
                        <td>${enquiry.region || 'N/A'}</td>
                        <td>${enquiry.type || 'N/A'}</td>
                        <td><span class="status-badge ${badgeClass}">${enquiry.status || 'N/A'}</span></td>
                    </tr>
                `;
            });
            tbody.innerHTML = html;

            // Show pagination controls
            if (totalPages > 1) {
                renderPagination();
                document.getElementById('paginationControls').style.display = 'flex';
            } else {
                document.getElementById('paginationControls').style.display = 'none';
            }
        }

        // Show modal using Bootstrap 5
        const modalElement = document.getElementById('enquiriesModal');
        const modal = new bootstrap.Modal(modalElement);
        modal.show();
    }

    // Render Pagination Controls
    function renderPagination() {
        const paginationDiv = document.getElementById('paginationButtons');
        let html = '';

        // Previous button
        html += `<button class="pagination-btn ${currentPage === 1 ? 'disabled' : ''}" onclick="changePage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}>
            <i class="bx bx-chevron-left"></i> Previous
        </button>`;

        // Page numbers
        for (let i = 1; i <= totalPages; i++) {
            if (i === 1 || i === totalPages || (i >= currentPage - 1 && i <= currentPage + 1)) {
                html += `<button class="pagination-btn ${i === currentPage ? 'active' : ''}" onclick="changePage(${i})">${i}</button>`;
            } else if (i === currentPage - 2 || i === currentPage + 2) {
                html += `<span class="pagination-ellipsis">...</span>`;
            }
        }

        // Next button
        html += `<button class="pagination-btn ${currentPage === totalPages ? 'disabled' : ''}" onclick="changePage(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}>
            Next <i class="bx bx-chevron-right"></i>
        </button>`;

        paginationDiv.innerHTML = html;
    }

    // Change Page
    function changePage(page) {
        if (page < 1 || page > totalPages) return;
        currentPage = page;

        if (currentFilter === 'type') {
            showEnquiriesByType(currentType);
        } else {
            showEnquiriesByStatus(currentFilter);
        }
    }

    // Modified show functions to reset pagination
    const originalShowEnquiriesByStatus = showEnquiriesByStatus;
    function showEnquiriesByStatus(status) {
        currentPage = 1;
        currentFilter = status;
        currentType = '';
        originalShowEnquiriesByStatus(status);
    }

    const originalShowEnquiriesByType = showEnquiriesByType;
    function showEnquiriesByType(type) {
        currentPage = 1;
        currentFilter = 'type';
        currentType = type;
        originalShowEnquiriesByType(type);
    }
</script>
@endsection