@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;
    }

    /* 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)
                            <table class="table table-bordered table-striped table-hover align-middle">
    <tbody>
         <tr>
            <th class="text-secondary fw-normal">Requested Amount</th>
            <td class="text-dark fw-normal">{{ number_format($enquiry->loanApplication->requested_amount ?? 0, 0) }} TZS</td>
        </tr>
        <tr>
            <th class="text-secondary fw-normal">Processed Amount</th>
            <td class="text-dark fw-normal">{{ number_format($enquiry->loanApplication->loan_amount ?? 0, 0) }} TZS</td>
        </tr>
       
        <tr>
            <th class="text-secondary fw-normal">Loan Duration</th>
            <td class="text-dark fw-normal">{{ $enquiry->loanApplication->loan_duration ?? 'N/A' }} months</td>
        </tr>
        <tr>
            <th class="text-secondary fw-normal">Interest Rate</th>
            <td class="text-dark fw-normal">{{ $enquiry->loanApplication->interest_rate ?? 'N/A' }}%</td>
        </tr>
        <tr>
            <th class="text-secondary fw-normal">Monthly Deduction</th>
            <td class="text-dark fw-normal">{{ number_format($enquiry->loanApplication->monthly_deduction ?? 0, 0) }} TZS</td>
        </tr>
        <tr>
            <th class="text-secondary fw-normal">Total Loan with Interest</th>
            <td class="text-dark fw-normal">{{ number_format($enquiry->loanApplication->total_loan_with_interest ?? 0, 0) }} TZS</td>
        </tr>
        <tr>
            <th class="text-secondary fw-normal">Total Interest</th>
            <td class="text-dark fw-normal">{{ number_format($enquiry->loanApplication->total_interest ?? 0, 0) }} TZS</td>
        </tr>
        <tr>
            <th class="text-secondary fw-normal">Processing Fee</th>
            <td class="text-dark fw-normal">{{ number_format($enquiry->loanApplication->processing_fee ?? 0, 0) }} TZS</td>
        </tr>
        <tr>
            <th class="text-secondary fw-normal">Insurance</th>
            <td class="text-dark fw-normal">{{ number_format($enquiry->loanApplication->insurance ?? 0, 0) }} TZS</td>
        </tr>
        <tr>
            <th class="text-secondary fw-normal">Disbursement Amount</th>
            <td class="text-dark fw-normal">{{ number_format($enquiry->loanApplication->disbursement_amount ?? 0, 0) }} TZS</td>
        </tr>
        <tr>
            <th class="text-secondary fw-normal">Loan Purpose</th>
            <td class="text-dark fw-normal text-capitalize">{{ $enquiry->loanApplication->loan_type ?? 'N/A' }}</td>
        </tr>
    </tbody>
</table>

                        @endif
                        @break

                    @case('refund')
                        @if($enquiry->refund)
                            <div class="list-group">
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold text-secondary">Refund Amount</span>
                                    <span class="text-dark fw-bold">{{ number_format($enquiry->refund->refund_amount ?? 0, 0) }} TZS</span>
                                </div>
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold text-secondary">Refund Duration</span>
                                    <span class="text-dark fw-bold">{{ $enquiry->refund->refund_duration ?? 'N/A' }} months</span>
                                </div>
                            </div>
                        @endif
                        @break

                    @case('retirement')
                        @if($enquiry->retirement)
                            <div class="list-group">
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-calendar-check me-2 text-secondary"></i>Date of Retirement:</span>
                                    <span class="text-dark fw-bold">{{ $enquiry->retirement->date_of_retirement ?? 'N/A' }}</span>
                                </div>
                            </div>
                        @endif
                        @break

                    @case('condolences')
                        @if($enquiry->condolence)
                            <div class="list-group">
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-venus-mars me-2 text-secondary"></i>Gender:</span>
                                    <span class="text-dark fw-bold">{{ ucfirst($enquiry->condolence->gender ?? 'N/A') }}</span>
                                </div>
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-heart me-2 text-secondary"></i>Dependent Member Type:</span>
                                    <span class="text-dark fw-bold">{{ ucfirst($enquiry->condolence->dependent_member_type ?? 'N/A') }}</span>
                                </div>
                            </div>
                        @endif
                        @break

                    @case('deduction_add')
                        @if($enquiry->deduction)
                            <div class="list-group">
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-arrow-down me-2 text-secondary"></i>From Amount:</span>
                                    <span class="text-dark fw-bold">{{ number_format($enquiry->deduction->from_amount ?? 0, 0) }} TZS</span>
                                </div>
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-arrow-up me-2 text-secondary"></i>To Amount:</span>
                                    <span class="text-dark fw-bold">{{ number_format($enquiry->deduction->to_amount ?? 0, 0) }} TZS</span>
                                </div>
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-arrows-alt-h me-2 text-secondary"></i>Change:</span>
                                    <span class="text-dark fw-bold">{{ number_format($enquiry->deduction->changes ?? 0, 0) }} TZS</span>
                                </div>
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-check-circle me-2 text-secondary"></i>Status:</span>
                                    <span class="text-dark fw-bold">{{$enquiry->deduction->status ?? 'N/A' }} </span>
                                </div>
                            </div>
                        @endif
                        @break

                    @case('injured_at_work')
                        @if($enquiry->injury)
                            <div class="list-group">
                                @if($enquiry->injury->description)
                                <div class="list-group-item p-3 bg-light rounded">
                                    <span class="fw-semibold d-block mb-2"><i class="fas fa-file-medical me-2 text-secondary"></i>Injury Description:</span>
                                    <span class="text-dark">{{ $enquiry->injury->description }}</span>
                                </div>
                                @endif
                            </div>
                        @endif
                        @break

                    @case('share_enquiry')
                    @case('withdraw_savings')
                    @case('withdraw_deposit')
                        {{-- Hizi kesi zina data nyingi, List Group Items zinafaa zaidi kutumika bila gridi ili zionekane vizuri wima. Lakini kwa kuwa tayari ulikuwa na gridi, nitaziweka kwenye List Group Items za kiwango kimoja kwa kila kisa cha kujirudia ili kufanya iwe wima. --}}

                        {{-- Kwa case ya 'share_enquiry' --}}
                        @if($enquiry->type == 'share_enquiry' && $enquiry->share)
                            <div class="list-group">
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-chart-line me-2 text-secondary"></i>Share Amount:</span>
                                    <span class="text-dark fw-bold">{{ number_format($enquiry->share->share_amount ?? 0, 0) }} TZS</span>
                                </div>
                            
                             
                            </div>
                        @endif

                        {{-- Kwa case ya 'withdraw_savings' au 'withdraw_deposit' (Zote zina data sawa) --}}
                        @if(($enquiry->type == 'withdraw_savings' || $enquiry->type == 'withdraw_deposit') && $enquiry->withdrawal)
                            <div class="list-group">
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-money-bill-alt me-2 text-secondary"></i>Withdrawal Amount:</span>
                                    <span class="text-dark fw-bold">{{ number_format($enquiry->withdrawal->amount ?? 0, 0) }} TZS</span>
                                </div>
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-university me-2 text-secondary"></i>Withdrawal Type:</span>
                                    <span class="text-dark fw-bold">{{ ucfirst($enquiry->withdrawal->type ?? str_replace('_', ' ', $enquiry->type)) }}</span>
                                </div>
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-calendar me-2 text-secondary"></i>Request Date:</span>
                                    <span class="text-dark fw-bold">{{ $enquiry->withdrawal->created_at?? 'N/A' }}</span>
                                </div>
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-comment-dots me-2 text-secondary"></i>Reason:</span>
                                    <span class="text-dark fw-bold">{{ $enquiry->withdrawal->reason?? 'N/A' }}</span>
                                </div>
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-clock me-2 text-secondary"></i>Days:</span>
                                    <span class="text-dark fw-bold">{{ $enquiry->withdrawal->days?? 'N/A' }}</span>
                                </div>
                            </div>
                        @endif
                        @break {{-- break inafaa hapa baada ya kumaliza 'withdraw' cases zote --}}


                    @case('join_membership')
                    @case('unjoin_membership')
                        @if($enquiry->membershipChange)
                            <div class="list-group">
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-tag me-2 text-secondary"></i>Category:</span>
                                    <span class="text-dark fw-bold">{{ ucfirst($enquiry->membershipChange->category ?? 'N/A') }}</span>
                                </div>
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-exchange-alt me-2 text-secondary"></i>Action:</span>
                                    <span class="text-dark fw-bold">{{ ucfirst($enquiry->membershipChange->action ?? 'N/A') }}</span>
                                </div>
                            </div>
                        @endif
                        @break

                    @case('sick_for_30_days')
                        @if($enquiry->sickLeave)
                            <div class="list-group">
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-calendar-plus me-2 text-secondary"></i>Start Date:</span>
                                    <span class="text-dark fw-bold">{{ $enquiry->sickLeave->startdate ?? 'N/A' }}</span>
                                </div>
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-calendar-minus me-2 text-secondary"></i>End Date:</span>
                                    <span class="text-dark fw-bold">{{ $enquiry->sickLeave->enddate ?? 'N/A' }}</span>
                                </div>
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-clock me-2 text-secondary"></i>Total Days:</span>
                                    <span class="text-dark fw-bold">{{ $enquiry->sickLeave->days ?? 'N/A' }}</span>
                                </div>
                            </div>
                        @endif
                        @break

                    @case('ura_mobile')
                        @if($enquiry->uraMobile)
                            <div class="list-group">
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-mobile-alt me-2 text-secondary"></i>Service Type:</span>
                                    <span class="text-dark fw-bold">{{ $enquiry->uraMobile->service_type ?? 'N/A' }}</span>
                                </div>
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-phone me-2 text-secondary"></i>Phone Number:</span>
                                    <span class="text-dark fw-bold">{{ $enquiry->uraMobile->phone_number ?? 'N/A' }}</span>
                                </div>
                            </div>
                        @endif
                        @break

                    @case('residential_disaster')
                        @if($enquiry->residentialDisaster)
                            <div class="list-group">
                                <div class="list-group-item d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                    <span class="fw-semibold"><i class="fas fa-house-damage me-2 text-secondary"></i>Disaster Type:</span>
                                    <span class="text-dark fw-bold">{{ ucfirst($enquiry->residentialDisaster->disaster_type ?? 'N/A') }}</span>
                                </div>
                            </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