@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 {
        max-width: 1400px;
        margin: 0 auto;
        padding: 20px;
    }

    /* Breadcrumb */
    .breadcrumb-custom {
        background: white;
        padding: 15px 20px;
        border-radius: 10px;
        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: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    /* 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: 10px 10px 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: 10px 12px;
        border: 2px solid var(--secondary-color);
        border-radius: 8px;
        background: #f8f9fa;
        color: #333;
        font-size: 14px;
        font-weight: 500;
    }

    /* 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: 8px;
        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: 8px;
        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: var(--accent-color);
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 20px;
    }

    .generated-password-option {
        background: white;
        padding: 12px 15px;
        margin-bottom: 10px;
        border-radius: 8px;
        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: 8px;
        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: 10px;
        padding: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 15px;
        border: 1px solid #e9ecef;
        text-align: center;
    }

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

    .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: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        margin-bottom: 20px;
        height: 400px;
    }

    .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: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        margin-bottom: 20px;
        height: 400px;
        overflow-y: auto;
    }

    .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: 8px;
        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: 12px;
        font-weight: 700;
        font-size: 13px;
    }

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

    .modal-content {
        border-radius: 15px;
        border: none;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    .modal-header {
        background: var(--primary-color);
        color: white;
        border-radius: 15px 15px 0 0;
        padding: 20px 30px;
    }

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

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

    .table-modern {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
    }

    .table-modern thead th {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
        padding: 15px;
        border: none;
        font-size: 13px;
    }

    .table-modern tbody td {
        padding: 12px 15px;
        border-bottom: 1px solid var(--secondary-color);
        font-size: 13px;
    }

    .table-modern tbody tr:hover {
        background: var(--accent-color);
    }

    /* Status Badges */
    .status-badge {
        padding: 6px 12px;
        border-radius: 6px;
        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: 10px;
        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; }

    @media (max-width: 768px) {
        .password-row {
            flex-direction: column;
        }
    }
</style>

<div class="profile-container">
    <!-- Breadcrumb -->
    <div class="breadcrumb-custom">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="bx bx-home"></i> Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">My Profile</li>
            </ol>
        </nav>
    </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="{{ $user->rank->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">
                    <ul style="margin: 0; padding-left: 20px;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </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 -->
                <div class="row">
                    @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

                    <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>

                <!-- Charts Layout: List + Donut (Row 1), Bar Graph (Row 2) -->
                <div class="row mt-3">
                    <!-- Type List -->
                    <div class="col-md-6">
                        <div class="type-list">
                            <h5 class="chart-title">Enquiry Types</h5>
                            @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
                        </div>
                    </div>

                    <!-- Donut Chart -->
                    <div class="col-md-6">
                        <div class="chart-container">
                            <h5 class="chart-title">Status Distribution</h5>
                            <div style="height: 350px;">
                                <canvas id="statusChart"></canvas>
                            </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;">
                                <canvas id="typeChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </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" 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>
        </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';
    }

    // 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>';
        } else {
            let html = '';
            data.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 modal using Bootstrap 5
        const modalElement = document.getElementById('enquiriesModal');
        const modal = new bootstrap.Modal(modalElement);
        modal.show();
    }
</script>
@endsection