@extends('layouts.app')

@section('title', 'View Enquiry')

@section('content')
<style>
    /* Animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Enhanced Modern Styling */
    .card {
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        border: 1px solid #e5e7eb;
        animation: fadeInUp 0.5s ease-out backwards;
    }

    .card:hover {
        box-shadow: 0 3px 8px rgba(23, 71, 158, 0.12);
        transform: translateY(-2px);
    }

    .card-header {
        background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
        color: white;
        font-weight: 600;
        border-radius: 6px 6px 0 0 !important;
        border: none;
        padding: 1rem 1.25rem;
    }

    .info-item {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e9ecef;
        background-color: #f9fafb;
        margin-bottom: 0.5rem;
        border-radius: 4px;
        transition: all 0.2s ease;
    }

    .info-item:hover {
        background-color: #f3f4f6;
        transform: translateX(3px);
    }

    .info-item:last-child {
        border-bottom: none;
    }

    .list-group-item {
        border: 1px solid #e9ecef;
    }

    .personnel-info .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f8f9fa;
    }

    .personnel-info .info-row:last-child {
        border-bottom: none;
    }

    .personnel-info .info-row span {
        font-size: 0.9rem;
    }

    .badge {
        font-size: 0.8rem;
        padding: 6px 12px;
        border-radius: 6px;
        font-weight: 600;
    }

    .btn {
        border-radius: 6px;
        transition: all 0.3s ease;
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }

    .breadcrumb-card {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }

    /* Breadcrumb Responsive */
    @media (max-width: 768px) {
        .breadcrumb {
            padding: 10px 14px !important;
            font-size: 0.85rem;
        }

        .breadcrumb-item span {
            display: none;
        }

        .breadcrumb-item i {
            font-size: 1.1rem;
        }

        .breadcrumb-item.active span {
            display: inline;
            font-size: 0.85rem;
        }
    }

    @media (max-width: 576px) {
        .breadcrumb {
            padding: 8px 12px !important;
            font-size: 0.8rem;
        }

        .breadcrumb-item i {
            font-size: 1rem;
        }

        .breadcrumb-item.active span {
            font-size: 0.8rem;
        }
    }

    .pdf-preview iframe {
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border-radius: 4px;
        background: white;
    }

    .pdf-preview-container {
        background: #f9fafb;
        padding: 1rem;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
    }

    /* Modern Clean List Group Items */
    .list-group-flush .list-group-item {
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 4px !important;
        background: #f9fafb;
        transition: all 0.2s ease;
        position: relative;
        margin-bottom: 8px;
        padding: 14px 20px 14px 24px !important;
        border: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        min-height: 50px;
        display: flex;
        align-items: center;
    }

    .list-group-flush .list-group-item:first-child {
        border-top: 0 !important;
    }

    .list-group-flush .list-group-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
        transform: scaleY(1);
        transition: transform 0.3s ease;
        border-radius: 4px 0 0 4px;
    }

    .list-group-flush .list-group-item:hover {
        background: #f3f4f6;
        transform: translateX(3px);
        border-color: #d1d5db;
        box-shadow: 0 2px 6px rgba(107, 114, 128, 0.1);
        padding-left: 28px !important;
    }

    .list-group-flush .list-group-item:hover::before {
        transform: scaleY(1);
    }

    .list-group-flush .list-group-item .text-muted {
        font-weight: 600;
        color: #4b5563 !important;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .list-group-flush .list-group-item .text-dark {
        font-weight: 600;
        color: #111827 !important;
        font-size: 14px;
        transition: all 0.2s ease;
    }

    .list-group-flush .list-group-item:hover span.text-dark {
        color: #374151 !important;
        font-weight: 600;
    }

    .timeline {
        position: relative;
        padding-left: 30px;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom, #007bff, #17a2b8, #28a745);
    }

    .timeline-item {
        position: relative;
        margin-bottom: 30px;
    }

    .timeline-marker {
        position: absolute;
        left: -22px;
        top: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px solid white;
        box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
    }

    .timeline-content {
        background: white;
        border: 1px solid #e3e6f0;
        border-radius: 8px;
        padding: 15px;
        margin-left: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }

    .timeline-content:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        transform: translateX(5px);
    }

    .timeline-item.active .timeline-content {
        border-left: 4px solid #007bff;
    }

    .timeline-item.pending .timeline-content {
        background-color: #f8f9fa;
        border-style: dashed;
    }

    .timeline-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .timeline-header h6 {
        flex: 1;
    }

    .timeline-body p {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    /* Modern Table Styles for Enquiry Details */
    .enquiry-details-table {
        margin-bottom: 0;
    }

    .enquiry-details-table th {
        background: #f8f9fa;
        color: #6b7280;
        font-weight: 600;
        font-size: 0.9rem;
        width: 40%;
        padding: 12px 16px;
        border-right: 2px solid #e5e7eb;
    }

    .enquiry-details-table td {
        color: #1f2937;
        font-weight: 500;
        font-size: 0.9rem;
        padding: 12px 16px;
    }

    .enquiry-details-table tr:hover {
        background: #f9fafb;
    }

    .enquiry-details-table i {
        color: #17479E;
        margin-right: 8px;
    }

    /* Table Responsive Wrapper */
    .table-responsive-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 768px) {
        .enquiry-details-table th,
        .enquiry-details-table td {
            font-size: 0.85rem;
            padding: 10px 12px;
        }

        .enquiry-details-table th {
            width: 45%;
        }
    }

    @media (max-width: 576px) {
        .enquiry-details-table th,
        .enquiry-details-table td {
            font-size: 0.8rem;
            padding: 8px 10px;
        }

        .enquiry-details-table th {
            width: 35%;
        }

        .enquiry-details-table i {
            font-size: 0.75rem;
            margin-right: 4px;
        }
    }

    /* Page Header Responsive */
    @media (max-width: 768px) {
        .mb-4[style*="linear-gradient"] {
            padding: 20px !important;
        }

        .mb-4[style*="linear-gradient"] h1 {
            font-size: 20px !important;
        }

        .mb-4[style*="linear-gradient"] .d-flex.align-items-center.gap-3 a {
            width: 40px !important;
            height: 40px !important;
            font-size: 20px !important;
        }

        .mb-4[style*="linear-gradient"] small {
            font-size: 0.8rem !important;
        }

        .timeline {
            padding-left: 20px;
        }

        .timeline-marker {
            left: -15px;
            width: 24px;
            height: 24px;
        }

        .timeline-content {
            margin-left: 15px;
        }

        .card-header h6 {
            font-size: 0.95rem;
        }
    }

    @media (max-width: 576px) {
        .mb-4[style*="linear-gradient"] {
            padding: 16px !important;
        }

        .mb-4[style*="linear-gradient"] h1 {
            font-size: 18px !important;
        }

        .mb-4[style*="linear-gradient"] .d-flex.align-items-center.gap-3 a {
            width: 36px !important;
            height: 36px !important;
            font-size: 18px !important;
        }

        .mb-4[style*="linear-gradient"] .d-flex.align-items-center.gap-3 {
            gap: 0.75rem !important;
        }

        .mb-4[style*="linear-gradient"] small {
            font-size: 0.75rem !important;
        }

        .timeline {
            padding-left: 15px;
        }

        .timeline-marker {
            left: -12px;
            width: 20px;
            height: 20px;
            font-size: 0.7rem;
        }

        .timeline-content {
            margin-left: 12px;
        }

        .timeline-content h6 {
            font-size: 0.9rem;
        }

        .timeline-content p,
        .timeline-body p {
            font-size: 0.8rem;
        }

        .card-header h6 {
            font-size: 0.9rem;
        }

        .card-header i {
            font-size: 0.9rem;
        }
    }
</style>

<!-- Modern Breadcrumb -->
<nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb" style="background: white; padding: 14px 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #e5e7eb;">
        <li class="breadcrumb-item">
            <a href="{{ route('dashboard') }}" style="display: inline-flex; align-items: center; gap: 8px; color: #6b7280; text-decoration: none; transition: color 0.2s;">
                <i class="bx bx-home"></i>
                <span>Dashboard</span>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ route('enquiries.index') }}" style="display: inline-flex; align-items: center; gap: 8px; color: #6b7280; text-decoration: none; transition: color 0.2s;">
                <i class="bx bx-folder"></i>
                <span>Enquiries</span>
            </a>
        </li>
        <li class="breadcrumb-item active">
            <i class="bx bx-file"></i>
            <span>#{{ $enquiry->check_number }}</span>
        </li>
    </ol>
</nav>

<!-- Modern Page Header -->
<div class="mb-4" style="background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%); padding: 32px; border-radius: 6px; color: white; box-shadow: 0 2px 6px rgba(23, 71, 158, 0.15);">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
        <div class="d-flex align-items-center gap-3">
            <a href="{{ route('enquiries.index') }}" style="width: 50px; height: 50px; background: rgba(255,255,255,0.2); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; text-decoration: none; transition: all 0.3s; backdrop-filter: blur(10px);">
                <i class="bx bx-arrow-back"></i>
            </a>
            <div>
                <h1 class="mb-1" style="font-size: 28px; font-weight: 700; color: white;">
                    {{ ucfirst(str_replace('_', ' ', $enquiry->type)) }} Details
                </h1>
                <p class="mb-0" style="color: rgba(255,255,255,0.9); font-size: 14px;">
                    Complete enquiry information and processing status
                </p>
            </div>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            @if($enquiry->registered_by == auth()->user()->id && $enquiry->status == 'pending')
                <a href="{{ route('enquiries.edit', $enquiry->id) }}" class="btn btn-warning fw-semibold">
                    <i class="bx bx-edit me-2"></i>Edit Enquiry
                </a>
            @endif
        </div>
    </div>
</div>

<!-- Main Content Grid -->
<div class="row g-4">
    <!-- Applicant Details -->
    <div class="col-lg-7">
        <div class="card h-100" style="animation-delay: 0.1s;">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h6 class="mb-0 text-white">APPLICANT INFORMATION</h6>
                <div class="d-flex gap-2">
                    @if(auth()->user()->hasRole('registrar_hq'))
                        @if(in_array($enquiry->status, ['pending', 'pending_overdue']))
                            <button class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#assignUserModal-{{ $enquiry->id }}">
                                <i class="mdi mdi-account-arrow-right me-1"></i>Assign
                            </button>
                        @elseif(in_array($enquiry->status, ['assigned', 'pending_overdue']))
                            <button class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#reassignUserModal-{{ $enquiry->id }}">
                                <i class="mdi mdi-account-switch me-1"></i>Reassign
                            </button>
                        @endif
                    @endif
                    @if($enquiry->registered_by == auth()->user()->id && $enquiry->status == 'pending')
                        <a href="{{ route('enquiries.edit', $enquiry->id) }}" class="btn btn-light btn-sm">
                            <i class="mdi mdi-pencil me-1"></i>Edit
                        </a>
                    @endif
                    @if($enquiry->registered_by == auth()->user()->id && in_array($enquiry->status, ['pending', 'rejected']) && $enquiry->status != 'assigned')
                        <form action="{{ route('enquiries.destroy', $enquiry->id) }}" method="POST" class="d-inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-light btn-sm" onclick="return confirm('Are you sure you want to delete this enquiry?')">
                                <i class="fas fa-trash me-1"></i>Delete
                            </button>
                        </form>
                    @endif
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="list-group list-group-flush">
                            <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                                <span class="text-muted">Full Name</span>
                                <span class="text-dark">{{ $enquiry->full_name }}</span>
                            </div>

                            <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                                <span class="text-muted">Force Number</span>
                                <span class="text-dark">{{ $enquiry->force_no }}</span>
                            </div>

                            <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                                <span class="text-muted">Phone</span>
                                <span class="text-dark">{{ $enquiry->phone }}</span>
                            </div>

                            <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                                <span class="text-muted">Date Received</span>
                                <span class="text-dark">{{ $enquiry->date_received }}</span>
                            </div>

                            <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                                <span class="text-muted">Check Number</span>
                                <span class="text-dark">{{ $enquiry->check_number }}</span>
                            </div>

                            <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                                <span class="text-muted">Enquiry Type</span>
                                <span class="badge bg-primary">{{ ucfirst(str_replace('_', ' ', $enquiry->type)) }}</span>
                            </div>

                            <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                                <span class="text-muted">Account Number</span>
                                <span class="text-dark">{{ $enquiry->account_number }}</span>
                            </div>

                            <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                                <span class="text-muted">Bank Name</span>
                                <span class="text-dark">{{ $enquiry->bank_name }}</span>
                            </div>

                            <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                                <span class="text-muted">Region</span>
                                <span class="text-dark">{{ $enquiry->region->name ?? 'No Region' }}</span>
                            </div>

                            <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                                <span class="text-muted">District</span>
                                <span class="text-dark">{{ $enquiry->district->name ?? 'No District' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <h6 class="text-secondary mb-3 border-bottom pb-2">Attached Documents</h6>
                        @if ($enquiry->folios->isNotEmpty())
                            <div class="d-grid gap-2">
                                @foreach ($enquiry->folios as $index => $folio)
                                    @if (strtolower(pathinfo($folio->file_path, PATHINFO_EXTENSION)) === 'pdf')
                                        <div class="card">
                                            <div class="card-body text-center p-3">
                                                <div class="mb-2 text-danger fs-1"> <i class="fas fa-file-pdf text-danger fa-2x mb-2"></i></div>
                                                <p class="small mb-2 text-truncate">{{ basename($folio->file_path) }}</p>
                                                <button class="btn btn-primary btn-sm w-100 mb-1" data-bs-toggle="modal" data-bs-target="#pdfModal{{ $index }}">
                                                    View
                                                </button>
                                                <a href="{{ asset($folio->file_path) }}" class="btn btn-success btn-sm w-100" download>
                                                    Download
                                                </a>
                                            </div>
                                        </div>
                                    @else
                                        <div class="card">
                                            <div class="card-body text-center p-3">
                                                <div class="mb-2 text-primary fs-1">📎</div>
                                                <p class="small mb-2 text-truncate">{{ basename($folio->file_path) }}</p>
                                                <a href="{{ asset('/' . $folio->file_path) }}" target="_blank" class="btn btn-outline-primary btn-sm w-100">
                                                    Download
                                                </a>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-4 text-muted">
                                <div class="fs-1 mb-2">📭</div>
                                <p class="small">No documents</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Personnel Information Section -->
    <div class="col-lg-5">
        <div class="card h-100" style="animation-delay: 0.2s;">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0 text-white">REGISTRAR & ASSIGNED USERS</h6>
            </div>
            <div class="card-body">
                <!-- Registrar Details -->
                <div class="mb-4">
                    <h6 class="text-primary text-muted fw-bold mb-3 border-bottom pb-2">REGISTRAR</h6>
                    <div class="list-group list-group-flush">
                        <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                            <span class="text-muted">Name</span>
                            <span class="text-dark">{{ $enquiry->registeredBy->name ?? 'N/A' }}</span>
                        </div>

                        <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                            <span class="text-muted">Command</span>
                            <span class="text-dark">{{ $enquiry->registeredBy->command->name ?? 'N/A' }}</span>
                        </div>

                        <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                            <span class="text-muted">Phone</span>
                            <span class="text-dark">{{ $enquiry->registeredBy->phone_number ?? 'N/A' }}</span>
                        </div>

                        <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                            <span class="text-muted">Region</span>
                            <span class="text-dark">{{ $enquiry->registeredBy->region->name ?? 'N/A' }}</span>
                        </div>

                        <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                            <span class="text-muted">District</span>
                            <span class="text-dark">{{ $enquiry->registeredBy->district->name ?? 'N/A' }}</span>
                        </div>
                    </div>
                </div>

                <!-- Assigned User Details -->
                <div>
                    <h6 class="text-primary text-muted fw-bold mb-3 border-bottom pb-2">ASSIGNED TO</h6>
                    @if ($enquiry->assignedUsers->isNotEmpty())
                        @foreach ($enquiry->assignedUsers as $assignedUser)
                            <div class="list-group list-group-flush mb-3">
                                <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                                    <span class="text-muted">Name</span>
                                    <span class="text-dark">{{ $assignedUser->name }}</span>
                                </div>

                                <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                                    <span class="text-muted">Phone</span>
                                    <span class="text-dark">{{ $assignedUser->phone_number ?? 'N/A' }}</span>
                                </div>

                                <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                                    <span class="text-muted">Region</span>
                                    <span class="text-dark">{{ $assignedUser->region->name ?? 'N/A' }}</span>
                                </div>

                                <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2 border-bottom">
                                    <span class="text-muted">District</span>
                                    <span class="text-dark">{{ $assignedUser->district->name ?? 'N/A' }}</span>
                                </div>

                                <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                                    <span class="text-muted">Role</span>
                                    <span class="badge bg-primary">
                                        {{ $enquiry->users->first()->getRoleNames()->first() ?? 'N/A' }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="alert alert-info">
                            Not yet assigned
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- PDF Viewer Modals -->
@if ($enquiry->folios->isNotEmpty())
    @foreach ($enquiry->folios as $index => $folio)
        @if (strtolower(pathinfo($folio->file_path, PATHINFO_EXTENSION)) === 'pdf')
            <div class="modal fade" id="pdfModal{{ $index }}" tabindex="-1" aria-labelledby="pdfModalLabel{{ $index }}" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header bg-primary text-white">
                            <h5 class="modal-title text-white" id="pdfModalLabel{{ $index }}">
                                <i class="fas fa-file-pdf me-2 text-white"></i>{{ basename($folio->file_path) }}
                            </h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body p-0">
                            <iframe src="{{ asset($folio->file_path) }}" class="w-100" style="height: 80vh; border: none;"></iframe>
                        </div>
                        <div class="modal-footer">
                            <a href="{{ asset($folio->file_path) }}" class="btn btn-success" download>
                                <i class="fas fa-download me-2"></i>Download PDF
                            </a>
                            <a href="{{ asset($folio->file_path) }}" target="_blank" class="btn btn-info">
                                <i class="fas fa-external-link-alt me-2"></i>Open in New Tab
                            </a>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                <i class="fas fa-times me-2"></i>Close
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endforeach
@endif

@if($enquiry->childData)
<div class="row mt-4">
    <div class="col-12">
        <div class="card shadow-sm border-0">
            <div class="card-header">
                <h6 class="mb-0 text-white">
                    <i class="fas fa-info-circle me-2"></i>{{ ucfirst(str_replace('_', ' ', $enquiry->type)) }} Specific Details
                </h6>
            </div>
            <div class="card-body">
                @switch($enquiry->type)
                    @case('loan_application')
                        @if($enquiry->loanApplication)
                            <div class="table-responsive-wrapper">
                                <table class="table table-bordered table-hover enquiry-details-table">
                                    <tbody>
                                        <tr>
                                            <th><i class="fas fa-money-bill-wave"></i>Requested Amount</th>
                                            <td>{{ number_format($enquiry->loanApplication->requested_amount ?? 0, 0) }} TZS</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-check-circle"></i>Processed Amount</th>
                                            <td>{{ number_format($enquiry->loanApplication->loan_amount ?? 0, 0) }} TZS</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-calendar-alt"></i>Loan Duration</th>
                                            <td>{{ $enquiry->loanApplication->loan_duration ?? 'N/A' }} months</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-percentage"></i>Interest Rate</th>
                                            <td>{{ $enquiry->loanApplication->interest_rate ?? 'N/A' }}%</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-calendar-minus"></i>Monthly Deduction</th>
                                            <td>{{ number_format($enquiry->loanApplication->monthly_deduction ?? 0, 0) }} TZS</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-calculator"></i>Total Loan with Interest</th>
                                            <td>{{ number_format($enquiry->loanApplication->total_loan_with_interest ?? 0, 0) }} TZS</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-chart-line"></i>Total Interest</th>
                                            <td>{{ number_format($enquiry->loanApplication->total_interest ?? 0, 0) }} TZS</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-file-invoice-dollar"></i>Processing Fee</th>
                                            <td>{{ number_format($enquiry->loanApplication->processing_fee ?? 0, 0) }} TZS</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-shield-alt"></i>Insurance</th>
                                            <td>{{ number_format($enquiry->loanApplication->insurance ?? 0, 0) }} TZS</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-hand-holding-usd"></i>Disbursement Amount</th>
                                            <td>{{ number_format($enquiry->loanApplication->disbursement_amount ?? 0, 0) }} TZS</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-tag"></i>Loan Purpose</th>
                                            <td class="text-capitalize">{{ $enquiry->loanApplication->loan_type ?? 'N/A' }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @endif
                        @break

                    @case('refund')
                        @if($enquiry->refund)
                            <div class="table-responsive-wrapper">
                                <table class="table table-bordered table-hover enquiry-details-table">
                                    <tbody>
                                        <tr>
                                            <th><i class="fas fa-money-bill-wave"></i>Refund Amount</th>
                                            <td>{{ number_format($enquiry->refund->refund_amount ?? 0, 0) }} TZS</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-calendar-alt"></i>Refund Duration</th>
                                            <td>{{ $enquiry->refund->refund_duration ?? 'N/A' }} months</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @endif
                        @break

                    @case('retirement')
                        @if($enquiry->retirement)
                            <div class="table-responsive-wrapper">
                                <table class="table table-bordered table-hover enquiry-details-table">
                                    <tbody>
                                        <tr>
                                            <th><i class="fas fa-calendar-check"></i>Date of Retirement</th>
                                            <td>{{ $enquiry->retirement->date_of_retirement ?? 'N/A' }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @endif
                        @break

                    @case('condolences')
                        @if($enquiry->condolence)
                            <div class="table-responsive-wrapper">
                                <table class="table table-bordered table-hover enquiry-details-table">
                                    <tbody>
                                        <tr>
                                            <th><i class="fas fa-venus-mars"></i>Gender</th>
                                            <td>{{ ucfirst($enquiry->condolence->gender ?? 'N/A') }}</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-heart"></i>Dependent Member Type</th>
                                            <td>{{ ucfirst($enquiry->condolence->dependent_member_type ?? 'N/A') }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @endif
                        @break

                    @case('deduction_add')
                        @if($enquiry->deduction)
                            <div class="table-responsive-wrapper">
                                <table class="table table-bordered table-hover enquiry-details-table">
                                    <tbody>
                                        <tr>
                                            <th><i class="fas fa-arrow-down"></i>From Amount</th>
                                            <td>{{ number_format($enquiry->deduction->from_amount ?? 0, 0) }} TZS</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-arrow-up"></i>To Amount</th>
                                            <td>{{ number_format($enquiry->deduction->to_amount ?? 0, 0) }} TZS</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-arrows-alt-h"></i>Change</th>
                                            <td>{{ number_format($enquiry->deduction->changes ?? 0, 0) }} TZS</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-check-circle"></i>Status</th>
                                            <td>{{$enquiry->deduction->status ?? 'N/A' }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @endif
                        @break

                    @case('injured_at_work')
                        @if($enquiry->injury)
                            <div class="table-responsive-wrapper">
                                <table class="table table-bordered table-hover enquiry-details-table">
                                    <tbody>
                                        @if($enquiry->injury->description)
                                        <tr>
                                            <th><i class="fas fa-file-medical"></i>Injury Description</th>
                                            <td>{{ $enquiry->injury->description }}</td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        @endif
                        @break

                    @case('share_enquiry')
                    @case('withdraw_savings')
                    @case('withdraw_deposit')
                        {{-- Share Enquiry --}}
                        @if($enquiry->type == 'share_enquiry' && $enquiry->share)
                            <div class="table-responsive-wrapper">
                                <table class="table table-bordered table-hover enquiry-details-table">
                                    <tbody>
                                        <tr>
                                            <th><i class="fas fa-chart-line"></i>Share Amount</th>
                                            <td>{{ number_format($enquiry->share->share_amount ?? 0, 0) }} TZS</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @endif

                        {{-- Withdraw Savings / Deposit --}}
                        @if(($enquiry->type == 'withdraw_savings' || $enquiry->type == 'withdraw_deposit') && $enquiry->withdrawal)
                            <div class="table-responsive-wrapper">
                                <table class="table table-bordered table-hover enquiry-details-table">
                                    <tbody>
                                        <tr>
                                            <th><i class="fas fa-money-bill-alt"></i>Withdrawal Amount</th>
                                            <td>{{ number_format($enquiry->withdrawal->amount ?? 0, 0) }} TZS</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-university"></i>Withdrawal Type</th>
                                            <td>{{ ucfirst($enquiry->withdrawal->type ?? str_replace('_', ' ', $enquiry->type)) }}</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-calendar"></i>Request Date</th>
                                            <td>{{ $enquiry->withdrawal->created_at ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-comment-dots"></i>Reason</th>
                                            <td>{{ $enquiry->withdrawal->reason ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-clock"></i>Days</th>
                                            <td>{{ $enquiry->withdrawal->days ?? 'N/A' }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @endif
                        @break


                    @case('join_membership')
                    @case('unjoin_membership')
                        @if($enquiry->membershipChange)
                            <div class="table-responsive-wrapper">
                                <table class="table table-bordered table-hover enquiry-details-table">
                                    <tbody>
                                        <tr>
                                            <th><i class="fas fa-tag"></i>Category</th>
                                            <td>{{ ucfirst($enquiry->membershipChange->category ?? 'N/A') }}</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-exchange-alt"></i>Action</th>
                                            <td>{{ ucfirst($enquiry->membershipChange->action ?? 'N/A') }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @endif
                        @break

                    @case('sick_for_30_days')
                        @if($enquiry->sickLeave)
                            <div class="table-responsive-wrapper">
                                <table class="table table-bordered table-hover enquiry-details-table">
                                    <tbody>
                                        <tr>
                                            <th><i class="fas fa-calendar-plus"></i>Start Date</th>
                                            <td>{{ $enquiry->sickLeave->startdate ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-calendar-minus"></i>End Date</th>
                                            <td>{{ $enquiry->sickLeave->enddate ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-clock"></i>Total Days</th>
                                            <td>{{ $enquiry->sickLeave->days ?? 'N/A' }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @endif
                        @break

                    @case('ura_mobile')
                        @if($enquiry->uraMobile)
                            <div class="table-responsive-wrapper">
                                <table class="table table-bordered table-hover enquiry-details-table">
                                    <tbody>
                                        <tr>
                                            <th><i class="fas fa-mobile-alt"></i>Service Type</th>
                                            <td>{{ $enquiry->uraMobile->service_type ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th><i class="fas fa-phone"></i>Phone Number</th>
                                            <td>{{ $enquiry->uraMobile->phone_number ?? 'N/A' }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @endif
                        @break

                    @case('residential_disaster')
                        @if($enquiry->residentialDisaster)
                            <div class="table-responsive-wrapper">
                                <table class="table table-bordered table-hover enquiry-details-table">
                                    <tbody>
                                        <tr>
                                            <th><i class="fas fa-house-damage"></i>Disaster Type</th>
                                            <td>{{ ucfirst($enquiry->residentialDisaster->disaster_type ?? 'N/A') }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @endif
                        @break

                    @default
                        <div class="text-center py-4">
                            <i class="fas fa-info-circle fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No specific details available for this enquiry type</h5>
                            <p class="text-muted">General enquiry information is displayed in the sections above.</p>
                        </div>
                @endswitch
            </div>
        </div>
    </div>
</div>
@endif

<!-- Enhanced Status Timeline -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card shadow-sm border-0">
            <div class="card-header">
                <h6 class="mb-0 text-white">
                    <i class="fas fa-history me-2"></i>Enquiry Timeline & Status History
                </h6>
            </div>
            <div class="card-body p-4">
                @php
                    $now = now();
                    $isOverdue = $enquiry->status == 'pending' && $enquiry->created_at->diffInWeekdays($now) >= 3;
                    $hasAssignment = $enquiry->users->count() > 0;
                    $isLoanType = $enquiry->type == 'loan_application';

                    // Calculate progress percentage based on type and status
                    $progressPercent = 0;
                    $totalSteps = 0;
                    $currentStep = 0;
                    $isRejected = false;

                    if ($isLoanType) {
                        // For loan applications, check loan_application status
                        $loanStatus = $enquiry->loanApplication ? $enquiry->loanApplication->status : $enquiry->status;
                        $isRejected = $loanStatus == 'rejected';

                        if ($isRejected) {
                            // If rejected, progress is 100% but with red color
                            $progressPercent = 100;
                        } else {
                            $totalSteps = 5; // pending, assigned, processed, approved, paid
                            if ($loanStatus == 'pending') {
                                $currentStep = 1;
                            } elseif ($loanStatus == 'assigned') {
                                $currentStep = 2;
                            } elseif ($loanStatus == 'processed') {
                                $currentStep = 3;
                            } elseif ($loanStatus == 'approved') {
                                $currentStep = 4;
                            } elseif ($loanStatus == 'paid') {
                                $currentStep = 5;
                            }
                            $progressPercent = ($currentStep / $totalSteps) * 100;
                        }
                    } else {
                        // For payments, check payment status
                        $paymentStatus = isset($enquiry->payment) ? $enquiry->payment->status : $enquiry->status;
                        $isRejected = $paymentStatus == 'rejected' || $enquiry->status == 'rejected';

                        if ($isRejected) {
                            // If rejected, progress is 100% but with red color
                            $progressPercent = 100;
                        } else {
                            $totalSteps = 5; // pending, assigned, initiated, approved, paid
                            if ($enquiry->status == 'pending') {
                                $currentStep = 1;
                            } elseif ($enquiry->status == 'assigned') {
                                $currentStep = 2;
                            } elseif (isset($enquiry->payment) && $enquiry->payment->status == 'initiated') {
                                $currentStep = 3;
                            } elseif (isset($enquiry->payment) && $enquiry->payment->status == 'approved') {
                                $currentStep = 4;
                            } elseif (isset($enquiry->payment) && $enquiry->payment->status == 'paid') {
                                $currentStep = 5;
                            }
                            $progressPercent = ($currentStep / $totalSteps) * 100;
                        }
                    }
                @endphp

                <!-- Progress Chart -->
                <div class="mb-4 p-3 rounded" style="background-color: #f8f9fa;">
                    <h6 class="mb-3 fw-bold">Processing Progress</h6>
                    <div class="progress" style="height: 30px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated {{ $isRejected ? 'bg-danger' : 'bg-success' }}"
                             role="progressbar"
                             style="width: {{ $progressPercent }}%;"
                             aria-valuenow="{{ $progressPercent }}"
                             aria-valuemin="0"
                             aria-valuemax="100">
                            {{ number_format($progressPercent, 0) }}% {{ $isRejected ? '- REJECTED' : '' }}
                        </div>
                    </div>
                    <div class="mt-2 text-center">
                        @if($isRejected)
                            <small class="text-danger fw-bold">{{ $isLoanType ? 'Loan Application' : 'Payment Request' }} Rejected</small>
                        @else
                            <small class="text-muted">Step {{ $currentStep }} of {{ $totalSteps }}</small>
                        @endif
                    </div>
                </div>

                <div class="timeline">
                    <!-- Step 1: Registration (Pending) -->
                    <div class="timeline-item active">
                        <div class="timeline-marker bg-success">
                            <i class="fas fa-check text-white"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-header">
                                <h6 class="mb-0 fw-bold text-success">
                                    <i class="fas fa-check-circle me-1"></i>Enquiry Registered (Pending)
                                </h6>
                                <small class="text-muted">{{ $enquiry->created_at->format('M d, Y - H:i') }}</small>
                            </div>
                            <div class="timeline-body">
                                <p class="mb-1">Enquiry submitted by <strong>{{ $enquiry->registeredBy->name ?? 'System' }}</strong></p>
                                <small class="text-muted">Type: {{ ucfirst(str_replace('_', ' ', $enquiry->type)) }}</small>
                            </div>
                        </div>
                    </div>

                    <!-- Step 2: Assignment -->
                    <div class="timeline-item {{ $hasAssignment ? 'active' : 'pending' }}">
                        <div class="timeline-marker {{ $hasAssignment ? 'bg-success' : 'bg-secondary' }}">
                            <i class="fas {{ $hasAssignment ? 'fa-check' : 'fa-user-check' }} text-white"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-header">
                                <h6 class="mb-0 fw-bold {{ $hasAssignment ? 'text-success' : 'text-muted' }}">
                                    @if($hasAssignment)
                                        <i class="fas fa-check-circle me-1"></i>Assigned to User
                                    @else
                                        Awaiting Assignment
                                    @endif
                                </h6>
                                @if($hasAssignment)
                                    <small class="text-muted">{{ $enquiry->updated_at->format('M d, Y - H:i') }}</small>
                                @endif
                            </div>
                            @if($hasAssignment)
                                <div class="timeline-body">
                                    <p class="mb-1">
                                        Assigned to <strong>{{ $enquiry->users->first()->name }}</strong>
                                        <span class="badge bg-info ms-1">{{ $enquiry->users->first()->getRoleNames()->first() }}</span>
                                    </p>
                                </div>
                            @else
                                <div class="timeline-body">
                                    <p class="mb-1 text-muted">Waiting for assignment to appropriate officer</p>
                                    @if($isOverdue)
                                        <span class="badge bg-danger">Overdue ({{ $enquiry->created_at->diffInWeekdays($now) }} days)</span>
                                    @endif
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Check if rejected -->
                    @php
                        // Check rejection based on type
                        if ($isLoanType) {
                            $isStatusRejected = $enquiry->loanApplication && $enquiry->loanApplication->status == 'rejected';
                        } else {
                            $isStatusRejected = (isset($enquiry->payment) && $enquiry->payment->status == 'rejected') || $enquiry->status == 'rejected';
                        }
                    @endphp
                    @if($isStatusRejected)
                        <!-- Rejected Step (can happen at any stage) -->
                        <div class="timeline-item active">
                            <div class="timeline-marker bg-danger">
                                <i class="fas fa-times text-white"></i>
                            </div>
                            <div class="timeline-content" style="border-left: 4px solid #dc3545;">
                                <div class="timeline-header">
                                    <h6 class="mb-0 fw-bold text-danger">
                                        <i class="fas fa-times-circle me-1"></i>{{ $isLoanType ? 'Loan' : 'Payment' }} Rejected
                                    </h6>
                                    <small class="text-muted">{{ $enquiry->updated_at->format('M d, Y - H:i') }}</small>
                                </div>
                                <div class="timeline-body">
                                    @php
                                        $rejection = \App\Models\Rejection::where('enquiry_id', $enquiry->id)->latest()->first();
                                    @endphp
                                    @if($isLoanType && $enquiry->loanApplication && $enquiry->loanApplication->rejectedBy)
                                        <p class="mb-1 text-danger">
                                            Loan rejected by <strong>{{ $enquiry->loanApplication->rejectedBy->name }}</strong>
                                            <span class="badge bg-danger ms-1">{{ $enquiry->loanApplication->rejectedBy->getRoleNames()->first() ?? 'N/A' }}</span>
                                        </p>
                                    @elseif(!$isLoanType && isset($enquiry->payment) && $enquiry->payment->rejectedBy)
                                        <p class="mb-1 text-danger">
                                            Payment rejected by <strong>{{ $enquiry->payment->rejectedBy->name }}</strong>
                                            <span class="badge bg-danger ms-1">{{ $enquiry->payment->rejectedBy->getRoleNames()->first() ?? 'N/A' }}</span>
                                        </p>
                                    @else
                                        <p class="mb-1 text-danger">{{ $isLoanType ? 'Loan application' : 'Payment request' }} has been rejected</p>
                                    @endif

                                    @if($rejection)
                                        <div class="alert alert-danger mt-2 mb-0" style="border-left: 4px solid #dc3545;">
                                            <div class="d-flex align-items-start">
                                                <i class="fas fa-exclamation-circle me-2 mt-1"></i>
                                                <div>
                                                    <strong class="text-danger">Rejection Reason:</strong>
                                                    <p class="mb-1 text-danger">{{ $rejection->reason_text ?? $rejection->rejection_reason }}</p>
                                                    @if($rejection->rejection_detail)
                                                        <small class="text-danger"><strong>Details:</strong> {{ $rejection->rejection_detail }}</small>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @elseif($isLoanType)
                        @php
                            $loanStatus = $enquiry->loanApplication ? $enquiry->loanApplication->status : 'pending';
                        @endphp
                        <!-- Step 3: Loan Processed -->
                        <div class="timeline-item {{ in_array($loanStatus, ['processed', 'approved', 'paid']) ? 'active' : 'pending' }}">
                            <div class="timeline-marker {{ in_array($loanStatus, ['processed', 'approved', 'paid']) ? 'bg-success' : 'bg-secondary' }}">
                                <i class="fas {{ in_array($loanStatus, ['processed', 'approved', 'paid']) ? 'fa-check' : 'fa-hourglass-half' }} text-white"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-header">
                                    <h6 class="mb-0 fw-bold {{ in_array($loanStatus, ['processed', 'approved', 'paid']) ? 'text-success' : 'text-muted' }}">
                                        @if(in_array($loanStatus, ['processed', 'approved', 'paid']))
                                            <i class="fas fa-check-circle me-1"></i>Loan Processed
                                        @else
                                            Awaiting Processing
                                        @endif
                                    </h6>
                                    @if(in_array($loanStatus, ['processed', 'approved', 'paid']))
                                        <small class="text-muted">{{ $enquiry->loanApplication->updated_at->format('M d, Y - H:i') }}</small>
                                    @endif
                                </div>
                                <div class="timeline-body">
                                    @if(in_array($loanStatus, ['processed', 'approved', 'paid']))
                                        @if($enquiry->loanApplication && $enquiry->loanApplication->processedBy)
                                            <p class="mb-1 text-success">
                                                Loan processed by <strong>{{ $enquiry->loanApplication->processedBy->name }}</strong>
                                                <span class="badge bg-info ms-1">{{ $enquiry->loanApplication->processedBy->getRoleNames()->first() ?? 'N/A' }}</span>
                                            </p>
                                        @else
                                            <p class="mb-1 text-success">Loan has been processed by loan officer</p>
                                        @endif
                                    @else
                                        <p class="mb-1 text-muted">Pending processing by loan officer</p>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Step 4: Loan Approved -->
                        <div class="timeline-item {{ in_array($loanStatus, ['approved', 'paid']) ? 'active' : 'pending' }}">
                            <div class="timeline-marker {{ in_array($loanStatus, ['approved', 'paid']) ? 'bg-success' : 'bg-secondary' }}">
                                <i class="fas {{ in_array($loanStatus, ['approved', 'paid']) ? 'fa-check' : 'fa-hourglass-half' }} text-white"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-header">
                                    <h6 class="mb-0 fw-bold {{ in_array($loanStatus, ['approved', 'paid']) ? 'text-success' : 'text-muted' }}">
                                        @if(in_array($loanStatus, ['approved', 'paid']))
                                            <i class="fas fa-check-circle me-1"></i>Loan Approved
                                        @else
                                            Awaiting Approval
                                        @endif
                                    </h6>
                                    @if(in_array($loanStatus, ['approved', 'paid']))
                                        <small class="text-muted">{{ $enquiry->loanApplication->updated_at->format('M d, Y - H:i') }}</small>
                                    @endif
                                </div>
                                <div class="timeline-body">
                                    @if(in_array($loanStatus, ['approved', 'paid']))
                                        @if($enquiry->loanApplication && $enquiry->loanApplication->approvedBy)
                                            <p class="mb-1 text-success">
                                                Loan approved by <strong>{{ $enquiry->loanApplication->approvedBy->name }}</strong>
                                                <span class="badge bg-info ms-1">{{ $enquiry->loanApplication->approvedBy->getRoleNames()->first() ?? 'N/A' }}</span>
                                            </p>
                                        @else
                                            <p class="mb-1 text-success">Loan application has been approved by manager</p>
                                        @endif
                                    @else
                                        <p class="mb-1 text-muted">Awaiting manager approval</p>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Step 5: Paid (Enquiry shows as Completed) -->
                        <div class="timeline-item {{ $loanStatus == 'paid' ? 'active' : 'pending' }}">
                            <div class="timeline-marker {{ $loanStatus == 'paid' ? 'bg-success' : 'bg-secondary' }}">
                                <i class="fas {{ $loanStatus == 'paid' ? 'fa-check' : 'fa-money-bill-wave' }} text-white"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-header">
                                    <h6 class="mb-0 fw-bold {{ $loanStatus == 'paid' ? 'text-success' : 'text-muted' }}">
                                        @if($loanStatus == 'paid')
                                            <i class="fas fa-check-circle me-1"></i>Paid (Completed)
                                        @else
                                            Awaiting Payment
                                        @endif
                                    </h6>
                                    @if($loanStatus == 'paid')
                                        <small class="text-muted">{{ $enquiry->loanApplication->updated_at->format('M d, Y - H:i') }}</small>
                                    @endif
                                </div>
                                <div class="timeline-body">
                                    @if($loanStatus == 'paid')
                                        @if($enquiry->loanApplication && $enquiry->loanApplication->paidBy)
                                            <p class="mb-1 text-success">
                                                Payment completed by <strong>{{ $enquiry->loanApplication->paidBy->name }}</strong>
                                                <span class="badge bg-info ms-1">{{ $enquiry->loanApplication->paidBy->getRoleNames()->first() ?? 'N/A' }}</span>
                                            </p>
                                        @else
                                            <p class="mb-1 text-success">Payment has been completed</p>
                                        @endif
                                        <small class="text-muted d-block mt-1">Loan disbursed • Enquiry status: <span class="badge bg-success">Completed</span></small>
                                    @else
                                        <p class="mb-1 text-muted">Awaiting payment processing</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @else
                        <!-- Step 3: Payment Initiated -->
                        @php
                            $paymentInitiated = isset($enquiry->payment) && in_array($enquiry->payment->status, ['initiated', 'approved', 'paid']);
                        @endphp
                        <div class="timeline-item {{ $paymentInitiated ? 'active' : 'pending' }}">
                            <div class="timeline-marker {{ $paymentInitiated ? 'bg-success' : 'bg-secondary' }}">
                                <i class="fas {{ $paymentInitiated ? 'fa-check' : 'fa-hourglass-half' }} text-white"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-header">
                                    <h6 class="mb-0 fw-bold {{ $paymentInitiated ? 'text-success' : 'text-muted' }}">
                                        @if($paymentInitiated)
                                            <i class="fas fa-check-circle me-1"></i>Payment Initiated
                                        @else
                                            Awaiting Payment Initiation
                                        @endif
                                    </h6>
                                    @if($paymentInitiated)
                                        <small class="text-muted">{{ $enquiry->payment->created_at->format('M d, Y - H:i') }}</small>
                                    @endif
                                </div>
                                <div class="timeline-body">
                                    @if($paymentInitiated)
                                        @if($enquiry->payment->initiatedBy)
                                            <p class="mb-1 text-success">
                                                Payment initiated by <strong>{{ $enquiry->payment->initiatedBy->name }}</strong>
                                                <span class="badge bg-info ms-1">{{ $enquiry->payment->initiatedBy->getRoleNames()->first() ?? 'N/A' }}</span>
                                            </p>
                                        @else
                                            <p class="mb-1 text-success">Payment has been initiated</p>
                                        @endif
                                    @else
                                        <p class="mb-1 text-muted">Waiting for payment initiation</p>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Step 4: Payment Approved -->
                        @php
                            $paymentApproved = isset($enquiry->payment) && in_array($enquiry->payment->status, ['approved', 'paid']);
                        @endphp
                        <div class="timeline-item {{ $paymentApproved ? 'active' : 'pending' }}">
                            <div class="timeline-marker {{ $paymentApproved ? 'bg-success' : 'bg-secondary' }}">
                                <i class="fas {{ $paymentApproved ? 'fa-check' : 'fa-hourglass-half' }} text-white"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-header">
                                    <h6 class="mb-0 fw-bold {{ $paymentApproved ? 'text-success' : 'text-muted' }}">
                                        @if($paymentApproved)
                                            <i class="fas fa-check-circle me-1"></i>Payment Approved
                                        @else
                                            Awaiting Payment Approval
                                        @endif
                                    </h6>
                                    @if($paymentApproved)
                                        <small class="text-muted">{{ $enquiry->payment->updated_at->format('M d, Y - H:i') }}</small>
                                    @endif
                                </div>
                                <div class="timeline-body">
                                    @if($paymentApproved)
                                        @if($enquiry->payment->approvedBy)
                                            <p class="mb-1 text-success">
                                                Payment approved by <strong>{{ $enquiry->payment->approvedBy->name }}</strong>
                                                <span class="badge bg-info ms-1">{{ $enquiry->payment->approvedBy->getRoleNames()->first() ?? 'N/A' }}</span>
                                            </p>
                                        @else
                                            <p class="mb-1 text-success">Payment has been approved</p>
                                        @endif
                                    @else
                                        <p class="mb-1 text-muted">Waiting for payment approval</p>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Step 5: Paid -->
                        @php
                            $paymentPaid = isset($enquiry->payment) && $enquiry->payment->status == 'paid';
                        @endphp
                        <div class="timeline-item {{ $paymentPaid ? 'active' : 'pending' }}">
                            <div class="timeline-marker {{ $paymentPaid ? 'bg-success' : 'bg-secondary' }}">
                                <i class="fas {{ $paymentPaid ? 'fa-check' : 'fa-money-bill-wave' }} text-white"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-header">
                                    <h6 class="mb-0 fw-bold {{ $paymentPaid ? 'text-success' : 'text-muted' }}">
                                        @if($paymentPaid)
                                            <i class="fas fa-check-circle me-1"></i>Paid
                                        @else
                                            Awaiting Payment
                                        @endif
                                    </h6>
                                    @if($paymentPaid)
                                        <small class="text-muted">{{ $enquiry->payment->updated_at->format('M d, Y - H:i') }}</small>
                                    @endif
                                </div>
                                <div class="timeline-body">
                                    @if($paymentPaid)
                                        @if($enquiry->payment->paidBy)
                                            <p class="mb-1 text-success">
                                                Payment completed by <strong>{{ $enquiry->payment->paidBy->name }}</strong>
                                                <span class="badge bg-info ms-1">{{ $enquiry->payment->paidBy->getRoleNames()->first() ?? 'N/A' }}</span>
                                            </p>
                                        @else
                                            <p class="mb-1 text-success">Payment has been completed</p>
                                        @endif
                                        <small class="text-muted d-block mt-1">All steps completed</small>
                                    @else
                                        <p class="mb-1 text-muted">Awaiting final payment</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Current Status Summary -->
                <div class="mt-4 p-3 rounded" style="background-color: #f8f9fa;">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <h6 class="mb-0 fw-bold">Current Status</h6>
                            <small class="text-muted">Last updated: {{ $enquiry->updated_at->diffForHumans() }}</small>
                        </div>
                        <div>
                            <span class="badge {{
                                $enquiry->status == 'approved' ? 'bg-success' :
                                ($enquiry->status == 'rejected' ? 'bg-danger' :
                                ($enquiry->status == 'assigned' ? 'bg-info' :
                                ($enquiry->status == 'completed' ? 'bg-success' :
                                ($enquiry->status == 'processed' ? 'bg-primary' :
                                ($isOverdue ? 'bg-danger' : 'bg-warning text-dark'))))) }} fs-6 px-3 py-2">
                                @if($isOverdue)
                                    Overdue ({{ $enquiry->created_at->diffInWeekdays($now) }} days)
                                @else
                                    {{ ucwords($enquiry->status) }}
                                @endif
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('modals.assign_enquries')
@if($enquiry->users->count() > 0)
    @include('modals.reassign_enquiry')
@endif
@endsection