@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Modern Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb modern-breadcrumb-loans">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}" class="breadcrumb-link">
                    <i class="bx bx-home"></i>
                    <span>Dashboard</span>
                </a>
            </li>
            <li class="breadcrumb-item">
                <span>Loan Management</span>
            </li>
            <li class="breadcrumb-item active">
                <i class="bx bx-wallet"></i>
                <span>Existing Loans</span>
            </li>
        </ol>
    </nav>

    <!-- Modern Page Header -->
    <div class="page-header-modern mb-4">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <div class="header-icon me-3">
                    <i class="bx bx-wallet"></i>
                </div>
                <div>
                    <h1 class="page-title mb-0">Existing Loan Records</h1>
                    <p class="page-subtitle mb-0">Imported loans for top-up tracking</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Success/Warning/Error Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show modern-alert" role="alert">
            <i class="bx bx-check-circle fs-5 me-2"></i>
            <strong>Success!</strong> {!! session('success') !!}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('warning'))
        <div class="alert alert-warning alert-dismissible fade show modern-alert" role="alert">
            <i class="bx bx-error-circle fs-5 me-2"></i>
            <strong>Warning!</strong> {!! session('warning') !!}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show modern-alert" role="alert">
            <i class="bx bx-x-circle fs-5 me-2"></i>
            <strong>Error!</strong> {!! session('error') !!}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Action Buttons -->
    <div class="d-flex justify-content-between mb-4">
        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#filterModal">
            <i class="bx bx-filter-alt"></i> Filter Records
        </button>
        <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#uploadWizardModal">
            <i class="bx bx-cloud-upload"></i> Import Existing Loans
        </button>
    </div>

    <!-- Records Table -->
    <div class="card modern-card">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="mb-0">
                <i class="bx bx-table"></i> Loan Records
                @if(isset($loans) && $loans->total() > 0)
                    <span class="badge bg-primary">{{ $loans->total() }} Total</span>
                @endif
            </h5>
        </div>
        <div class="card-body">
            @if(isset($loans) && $loans->count() > 0)
            <div class="table-responsive">
                <table class="table table-hover mb-0 modern-table" style="width:100%">
                    <thead>
                        <tr>
                            <th width="60" class="text-center border-0">
                                <div class="d-flex align-items-center justify-content-center">
                                    <i class="fas fa-hashtag me-1"></i>
                                    <span class="fw-bold">SN</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-id-card me-2"></i>
                                    <span class="fw-bold">Check Number</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-user me-2"></i>
                                    <span class="fw-bold">Full Name</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-file-invoice me-2"></i>
                                    <span class="fw-bold">Loan Number</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-money-bill-wave me-2"></i>
                                    <span class="fw-bold">Original Amount</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-wallet me-2"></i>
                                    <span class="fw-bold">Outstanding Balance</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <span class="fw-bold">Status</span>
                                </div>
                            </th>
                            <th class="border-0 text-center">
                                <div class="d-flex align-items-center justify-content-center">
                                    <i class="fas fa-tools me-2"></i>
                                    <span class="fw-bold">Actions</span>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($loans as $index => $loan)
                        <tr>
                            <td class="text-center align-middle">
                                <div class="badge" style="background: #17479E; color: white; font-weight: bold; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 50%;">
                                    {{ $loans->firstItem() + $index }}
                                </div>
                            </td>
                            <td class="align-middle">{{ $loan->check_number }}</td>
                            <td class="align-middle text-uppercase">{{ $loan->full_name ?? ($loan->payroll->full_name ?? 'N/A') }}</td>
                            <td class="align-middle">{{ $loan->loan_number ?? 'N/A' }}</td>
                            <td class="align-middle">
                                <span class="badge bg-info-subtle text-info px-2 py-1">
                                    TSh {{ number_format($loan->requested_amount ?? 0, 2) }}
                                </span>
                            </td>
                            <td class="align-middle">
                                <span class="badge bg-danger-subtle text-danger px-2 py-1">
                                    TSh {{ number_format($loan->outstanding_balance ?? 0, 2) }}
                                </span>
                            </td>
                            <td class="align-middle text-center">
                                @php
                                    $status = strtolower($loan->display_status ?? 'NOT AVAILABLE');
                                @endphp
                                @if($status == 'approved')
                                    <span class="badge bg-success">Approved</span>
                                @elseif($status == 'pending')
                                    <span class="badge bg-warning">Pending</span>
                                @elseif($status == 'disbursed')
                                    <span class="badge bg-info">Disbursed</span>
                                @elseif($status == 'rejected' || $status == 'cancelled')
                                    <span class="badge bg-danger">{{ ucfirst($status) }}</span>
                                @elseif($status == 'not available')
                                    <span class="badge bg-danger">NOT AVAILABLE</span>
                                @else
                                    <span class="badge bg-secondary">{{ strtoupper($loan->display_status ?? 'NOT AVAILABLE') }}</span>
                                @endif
                            </td>
                            <td class="align-middle text-center">
                                <div class="dropdown">
                                    <button class="btn btn-sm dropdown-toggle modern-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-cog"></i> Actions
                                    </button>
                                    <ul class="dropdown-menu shadow border-0">
                                        <li>
                                            <a class="dropdown-item" href="/deductions/details/contributions/{{ $loan->check_number }}">
                                                <i class="bx bx-money text-success"></i> View Contributions
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="/deductions/details/{{ $loan->check_number }}">
                                                <i class="bx bx-credit-card text-info"></i> View Salary Deductions
                                            </a>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item" href="#" onclick="openTopupsModal({{ $loan->id }}); return false;">
                                                <i class="bx bx-arrow-to-top text-primary"></i> Topups
                                                <span class="badge bg-primary ms-2">{{ $loan->topups_count ?? 0 }}</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#" onclick="openApprovalsModal({{ $loan->id }}); return false;">
                                                <i class="bx bx-check-circle text-success"></i> Approvals
                                                <span class="badge bg-success ms-2">{{ $loan->approvals_count ?? 0 }}</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#" onclick="openDisbursementsModal({{ $loan->id }}); return false;">
                                                <i class="bx bx-wallet text-warning"></i> Disbursements
                                                <span class="badge bg-warning ms-2">{{ $loan->disbursements_count ?? 0 }}</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            @if($loans->hasPages())
            <div class="d-flex justify-content-between align-items-center mt-4">
                <div class="text-muted">
                    Showing {{ $loans->firstItem() }} to {{ $loans->lastItem() }} of {{ $loans->total() }} records
                </div>
                <div>
                    {{ $loans->links('pagination::bootstrap-5') }}
                </div>
            </div>
            @endif
            @else
            <div class="text-center py-5 empty-state">
                <i class="bx bx-wallet display-1 text-muted mb-3"></i>
                <h4 class="text-muted">No Existing Loans Found</h4>
                <p class="text-muted mb-0">No loan records have been imported yet.</p>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Filter Modal -->
<div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="filterModalLabel">
                    <i class="bx bx-filter-alt"></i> Filter Existing Loans
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="GET" action="{{ route('existing-loans.index') }}" id="filterForm">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="bx bx-search"></i> Search Existing Loans
                        </label>
                        <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Search by Check Number, Loan Number, Application Number, or Name...">
                    </div>
                    @if(request('search'))
                        <div class="alert alert-info">
                            <i class="bx bx-info-circle"></i> Currently showing results for: <strong>"{{ request('search') }}"</strong>
                        </div>
                    @endif
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bx bx-x"></i> Cancel
                </button>
                @if(request('search'))
                    <a href="{{ route('existing-loans.index') }}" class="btn btn-outline-warning">
                        <i class="bx bx-refresh"></i> Clear Filter
                    </a>
                @endif
                <button type="submit" form="filterForm" class="btn btn-primary">
                    <i class="bx bx-search"></i> Apply Filter
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Upload Wizard Modal -->
<div class="modal fade" id="uploadWizardModal" tabindex="-1" aria-labelledby="uploadWizardModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="uploadWizardModalLabel">
                    <i class="bx bx-cloud-upload"></i> Import Existing Loans - Multi-Step Wizard
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" onclick="resetWizard()"></button>
            </div>
            <div class="modal-body">
                <!-- Step Progress Indicator -->
                <div class="step-progress mb-4">
                    <div class="step-item active" id="stepIndicator1">
                        <div class="step-number">1</div>
                        <div class="step-label">Select File</div>
                    </div>
                    <div class="step-line"></div>
                    <div class="step-item" id="stepIndicator2">
                        <div class="step-number">2</div>
                        <div class="step-label">Validate</div>
                    </div>
                    <div class="step-line"></div>
                    <div class="step-item" id="stepIndicator3">
                        <div class="step-number">3</div>
                        <div class="step-label">Confirm</div>
                    </div>
                    <div class="step-line"></div>
                    <div class="step-item" id="stepIndicator4">
                        <div class="step-number">4</div>
                        <div class="step-label">Import</div>
                    </div>
                    <div class="step-line"></div>
                    <div class="step-item" id="stepIndicator5">
                        <div class="step-number">5</div>
                        <div class="step-label">Complete</div>
                    </div>
                </div>

                <!-- STEP 1: File Selection -->
                <div id="step1" class="wizard-step">
                    <div class="step-content">
                        <h5 class="mb-3"><i class="bx bx-file"></i> Step 1: Select Your File</h5>
                        <input type="file" name="file" class="form-control form-control-lg" accept=".xlsx,.xls,.csv" id="fileInput">
                        <div class="form-text mt-2">
                            <i class="bx bx-info-circle"></i> Supported formats: Excel (.xlsx, .xls) or CSV (.csv) - Max size: 10MB
                        </div>
                    </div>
                </div>

                <!-- STEP 2: Validation Progress -->
                <div id="step2" class="wizard-step" style="display: none;">
                    <div class="step-content">
                        <h5 class="mb-3"><i class="bx bx-search-alt"></i> Step 2: Validating File...</h5>
                        <div id="validationProgress">
                            <div class="text-center py-4">
                                <div class="spinner-border text-primary mb-3" style="width: 3rem; height: 3rem;" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <h6>Please wait while we validate your file...</h6>
                                <p class="text-muted">Checking column structure, required fields, and duplicates</p>
                            </div>
                        </div>
                        <div id="validationResults" style="display: none;"></div>
                    </div>
                </div>

                <!-- STEP 3: Confirmation -->
                <div id="step3" class="wizard-step" style="display: none;">
                    <div class="step-content">
                        <h5 class="mb-3"><i class="bx bx-check-circle"></i> Step 3: Confirm Import</h5>
                        <div class="alert alert-success">
                            <h6><i class="bx bx-info-circle"></i> File Validation Successful!</h6>
                            <p class="mb-0">Your file has been validated and is ready to import. Click "Start Import" to proceed.</p>
                        </div>
                        <div id="confirmationSummary" class="mb-3"></div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-success btn-lg" onclick="startImport()">
                                <i class="bx bx-upload"></i> Start Import
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-lg" onclick="resetWizard()">
                                <i class="bx bx-x"></i> Cancel
                            </button>
                        </div>
                    </div>
                </div>

                <!-- STEP 4: Import Progress -->
                <div id="step4" class="wizard-step" style="display: none;">
                    <div class="step-content">
                        <h5 class="mb-3"><i class="bx bx-loader-alt bx-spin"></i> Step 4: Importing Data...</h5>
                        <div class="text-center py-4">
                            <div class="spinner-border text-success mb-3" style="width: 3rem; height: 3rem;" role="status">
                                <span class="visually-hidden">Importing...</span>
                            </div>
                            <h6>Please wait while we import existing loans data to the database...</h6>
                            <p class="text-muted">This may take a few moments depending on the file size</p>
                        </div>
                    </div>
                </div>

                <!-- STEP 5: Final Report -->
                <div id="step5" class="wizard-step" style="display: none;">
                    <div class="step-content">
                        <div id="finalReport"></div>
                        <div class="mt-4">
                            <button type="button" class="btn btn-primary btn-lg" onclick="resetWizard()">
                                <i class="bx bx-refresh"></i> Import Another File
                            </button>
                            <a href="{{ route('existing-loans.index') }}" class="btn btn-outline-secondary btn-lg">
                                <i class="bx bx-list-ul"></i> View All Records
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Hidden Form for Actual Upload -->
                <form action="{{ route('existing-loans.store') }}" method="POST" enctype="multipart/form-data" id="uploadForm" style="display: none;">
                    @csrf
                    <input type="file" name="file" id="hiddenFileInput">
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Topups Modal -->
<div class="modal fade" id="topupsModal" tabindex="-1" aria-labelledby="topupsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="topupsModalLabel">
                    <i class="bx bx-arrow-to-top"></i> Loan Topups
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="topupsLoading" class="text-center py-5">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <h6>Loading topup records...</h6>
                </div>
                <div id="topupsContent" style="display: none;">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Topup Date</th>
                                    <th class="text-end">Settlement Amount</th>
                                    <th class="text-end">Outstanding Balance</th>
                                    <th>Original Loan Number</th>
                                    <th>New Loan Number</th>
                                    <th class="text-center">Status</th>
                                </tr>
                            </thead>
                            <tbody id="topupsTableBody">
                                <!-- Data will be loaded via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="topupsEmpty" style="display: none;" class="text-center py-4">
                    <i class="bx bx-info-circle display-4 text-muted"></i>
                    <p class="text-muted mt-3 mb-0">No topup records found for this loan.</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Approvals Modal -->
<div class="modal fade" id="approvalsModal" tabindex="-1" aria-labelledby="approvalsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="approvalsModalLabel">
                    <i class="bx bx-check-circle"></i> Loan Approvals
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="approvalsLoading" class="text-center py-5">
                    <div class="spinner-border text-success mb-3" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <h6>Loading approval records...</h6>
                </div>
                <div id="approvalsContent" style="display: none;">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-end">Approved Amount</th>
                                    <th class="text-end">Other Charges</th>
                                    <th>Approval Type</th>
                                    <th class="text-center">Status</th>
                                    <th>Approved Date</th>
                                    <th>Approver Name</th>
                                    <th>Reason</th>
                                </tr>
                            </thead>
                            <tbody id="approvalsTableBody">
                                <!-- Data will be loaded via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="approvalsEmpty" style="display: none;" class="text-center py-4">
                    <i class="bx bx-info-circle display-4 text-muted"></i>
                    <p class="text-muted mt-3 mb-0">No approval records found for this loan.</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Disbursements Modal -->
<div class="modal fade" id="disbursementsModal" tabindex="-1" aria-labelledby="disbursementsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title" id="disbursementsModalLabel">
                    <i class="bx bx-wallet"></i> Loan Disbursements
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="disbursementsLoading" class="text-center py-5">
                    <div class="spinner-border text-warning mb-3" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <h6>Loading disbursement records...</h6>
                </div>
                <div id="disbursementsContent" style="display: none;">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-end">Disbursement Amount</th>
                                    <th class="text-end">Net Amount</th>
                                    <th>Disbursement Date</th>
                                    <th class="text-center">Status</th>
                                    <th>Reference Number</th>
                                    <th>Transaction ID</th>
                                    <th>Account Number</th>
                                    <th>Bank Name</th>
                                </tr>
                            </thead>
                            <tbody id="disbursementsTableBody">
                                <!-- Data will be loaded via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="disbursementsEmpty" style="display: none;" class="text-center py-4">
                    <i class="bx bx-info-circle display-4 text-muted"></i>
                    <p class="text-muted mt-3 mb-0">No disbursement records found for this loan.</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
/* Modal Header Fix */
.modal-header.bg-primary {
    background: #17479E !important;
}

.modal-header.bg-primary .modal-title,
.modal-header.bg-primary h5 {
    color: white !important;
}

.modal-header.bg-success {
    background: #28a745 !important;
}

.modal-header.bg-success .modal-title,
.modal-header.bg-success h5 {
    color: white !important;
}

.modal-header.bg-warning {
    background: #ffc107 !important;
}

.modal-header.bg-warning .modal-title,
.modal-header.bg-warning h5 {
    color: #212529 !important;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

.modern-card .card-header {
    border-bottom: 2px solid #e5e7eb;
    padding: 1rem 1.5rem;
}

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

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

/* Modern Alert */
.modern-alert {
    border-radius: 6px;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    animation: slideInRight 0.5s ease-out;
}

/* Form Styling */
.form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.form-control {
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.6rem 1rem;
    transition: all 0.2s ease;
}

.form-control:focus {
    border-color: #17479E;
    box-shadow: 0 0 0 3px rgba(23, 71, 158, 0.1);
}

/* Button Styling */
.btn {
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 0.5rem 1.25rem;
}

.btn-primary {
    background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
    border: none;
}

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

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

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

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

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

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

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

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

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

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

/* Modern Button */
.modern-btn {
    background: #17479E !important;
    color: white !important;
    border: 1px solid #17479E !important;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.modern-btn:hover {
    background: #0f3470 !important;
    color: white !important;
    border-color: #0f3470 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23, 71, 158, 0.3);
}

/* Dropdown */
.dropdown-menu {
    border: none;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 200px;
    z-index: 1060;
}

.dropdown-item {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    margin: 2px 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    color: #333;
}

.dropdown-item:hover {
    background: #17479E;
    color: white !important;
}

.dropdown-item i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

/* Empty State */
.empty-state {
    padding: 3rem 2rem;
    animation: fadeInUp 0.5s ease-out;
}

.empty-state i {
    animation: pulse 2s ease-in-out infinite;
}

/* Modal Styling */
.modal-content {
    border-radius: 8px;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modal-header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.modal-body {
    padding: 1.5rem;
}

/* Loading Spinner */
.spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header-modern {
        padding: 20px;
    }

    .header-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .page-title {
        font-size: 20px;
    }

    .table-responsive {
        font-size: 0.85rem;
    }

    .dropdown-menu {
        font-size: 0.9rem;
    }
}
</style>
@endpush

@push('scripts')
<script>
// Open Topups Modal
function openTopupsModal(loanId) {
    // Reset modal content
    document.getElementById('topupsLoading').style.display = 'block';
    document.getElementById('topupsContent').style.display = 'none';
    document.getElementById('topupsEmpty').style.display = 'none';
    document.getElementById('topupsTableBody').innerHTML = '';

    // Open modal
    const modal = new bootstrap.Modal(document.getElementById('topupsModal'));
    modal.show();

    // Fetch data via AJAX
    fetch(`/existing-loans/${loanId}/topups`, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        console.log('Topups Response Status:', response.status);
        return response.json();
    })
    .then(data => {
        console.log('Topups Data:', data);
        document.getElementById('topupsLoading').style.display = 'none';

        if (data && data.success && data.topups && data.topups.length > 0) {
            // Populate table
            let tableHtml = '';
            data.topups.forEach(topup => {
                let statusBadge = '';
                if (topup.status == 'approved') {
                    statusBadge = '<span class="badge bg-success">Approved</span>';
                } else if (topup.status == 'pending') {
                    statusBadge = '<span class="badge bg-warning">Pending</span>';
                } else if (topup.status == 'rejected') {
                    statusBadge = '<span class="badge bg-danger">Rejected</span>';
                } else {
                    statusBadge = `<span class="badge bg-secondary">${topup.status || 'N/A'}</span>`;
                }

                tableHtml += `
                    <tr>
                        <td>${topup.topup_date || 'N/A'}</td>
                        <td class="text-end">${parseFloat(topup.settlement_amount || 0).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                        <td class="text-end">${parseFloat(topup.outstanding_balance || 0).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                        <td>${topup.original_loan_number || 'N/A'}</td>
                        <td>${topup.new_loan_number || 'N/A'}</td>
                        <td class="text-center">${statusBadge}</td>
                    </tr>
                `;
            });

            document.getElementById('topupsTableBody').innerHTML = tableHtml;
            document.getElementById('topupsContent').style.display = 'block';
        } else {
            document.getElementById('topupsEmpty').style.display = 'block';
        }
    })
    .catch(error => {
        console.error('Error fetching topups:', error);
        document.getElementById('topupsLoading').style.display = 'none';
        document.getElementById('topupsEmpty').style.display = 'block';
        document.getElementById('topupsEmpty').innerHTML = `
            <i class="bx bx-error-circle display-4 text-danger"></i>
            <p class="text-danger mt-3 mb-0">Error loading topup records: ${error.message || 'Unknown error'}</p>
            <p class="text-muted small">Check console for more details.</p>
        `;
    });
}

// Open Approvals Modal
function openApprovalsModal(loanId) {
    // Reset modal content
    document.getElementById('approvalsLoading').style.display = 'block';
    document.getElementById('approvalsContent').style.display = 'none';
    document.getElementById('approvalsEmpty').style.display = 'none';
    document.getElementById('approvalsTableBody').innerHTML = '';

    // Open modal
    const modal = new bootstrap.Modal(document.getElementById('approvalsModal'));
    modal.show();

    // Fetch data via AJAX
    fetch(`/existing-loans/${loanId}/approvals`, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        console.log('Approvals Response Status:', response.status);
        return response.json();
    })
    .then(data => {
        console.log('Approvals Data:', data);
        document.getElementById('approvalsLoading').style.display = 'none';

        if (data && data.success && data.approvals && data.approvals.length > 0) {
            // Populate table
            let tableHtml = '';
            data.approvals.forEach(approval => {
                let statusBadge = '';
                if (approval.approval_status == 'approved') {
                    statusBadge = '<span class="badge bg-success">Approved</span>';
                } else if (approval.approval_status == 'pending') {
                    statusBadge = '<span class="badge bg-warning">Pending</span>';
                } else if (approval.approval_status == 'rejected') {
                    statusBadge = '<span class="badge bg-danger">Rejected</span>';
                } else {
                    statusBadge = `<span class="badge bg-secondary">${approval.approval_status || 'N/A'}</span>`;
                }

                // Only show reason cell if reason exists
                let reasonCell = '';
                if (approval.reason && approval.reason.trim() !== '') {
                    reasonCell = `<td>${approval.reason}</td>`;
                } else {
                    reasonCell = '<td class="text-muted"><i>No reason provided</i></td>';
                }

                tableHtml += `
                    <tr>
                        <td class="text-end">${parseFloat(approval.total_amount_to_pay || 0).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                        <td class="text-end">${parseFloat(approval.other_charges || 0).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                        <td>${approval.approval_type || 'N/A'}</td>
                        <td class="text-center">${statusBadge}</td>
                        <td>${approval.approved_date || 'N/A'}</td>
                        <td>${approval.approver_name || 'N/A'}</td>
                        ${reasonCell}
                    </tr>
                `;
            });

            document.getElementById('approvalsTableBody').innerHTML = tableHtml;
            document.getElementById('approvalsContent').style.display = 'block';
        } else {
            document.getElementById('approvalsEmpty').style.display = 'block';
        }
    })
    .catch(error => {
        console.error('Error fetching approvals:', error);
        document.getElementById('approvalsLoading').style.display = 'none';
        document.getElementById('approvalsEmpty').style.display = 'block';
        document.getElementById('approvalsEmpty').innerHTML = `
            <i class="bx bx-error-circle display-4 text-danger"></i>
            <p class="text-danger mt-3 mb-0">Error loading approval records: ${error.message || 'Unknown error'}</p>
            <p class="text-muted small">Check console for more details.</p>
        `;
    });
}

// Open Disbursements Modal
function openDisbursementsModal(loanId) {
    // Reset modal content
    document.getElementById('disbursementsLoading').style.display = 'block';
    document.getElementById('disbursementsContent').style.display = 'none';
    document.getElementById('disbursementsEmpty').style.display = 'none';
    document.getElementById('disbursementsTableBody').innerHTML = '';

    // Open modal
    const modal = new bootstrap.Modal(document.getElementById('disbursementsModal'));
    modal.show();

    // Fetch data via AJAX
    fetch(`/existing-loans/${loanId}/disbursements`, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        console.log('Disbursements Response Status:', response.status);
        return response.json();
    })
    .then(data => {
        console.log('Disbursements Data:', data);
        document.getElementById('disbursementsLoading').style.display = 'none';

        if (data && data.success && data.disbursements && data.disbursements.length > 0) {
            // Populate table
            let tableHtml = '';
            data.disbursements.forEach(disbursement => {
                let statusBadge = '';
                if (disbursement.status == 'completed') {
                    statusBadge = '<span class="badge bg-success">Completed</span>';
                } else if (disbursement.status == 'pending') {
                    statusBadge = '<span class="badge bg-warning">Pending</span>';
                } else if (disbursement.status == 'failed') {
                    statusBadge = '<span class="badge bg-danger">Failed</span>';
                } else {
                    statusBadge = `<span class="badge bg-secondary">${disbursement.status || 'N/A'}</span>`;
                }

                tableHtml += `
                    <tr>
                        <td class="text-end">${parseFloat(disbursement.disbursement_amount || 0).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                        <td class="text-end">${parseFloat(disbursement.net_amount || 0).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                        <td>${disbursement.disbursement_date || 'N/A'}</td>
                        <td class="text-center">${statusBadge}</td>
                        <td>${disbursement.reference_number || 'N/A'}</td>
                        <td>${disbursement.transaction_id || 'N/A'}</td>
                        <td>${disbursement.account_number || 'N/A'}</td>
                        <td>${disbursement.bank_name || 'N/A'}</td>
                    </tr>
                `;
            });

            document.getElementById('disbursementsTableBody').innerHTML = tableHtml;
            document.getElementById('disbursementsContent').style.display = 'block';
        } else {
            document.getElementById('disbursementsEmpty').style.display = 'block';
        }
    })
    .catch(error => {
        console.error('Error fetching disbursements:', error);
        document.getElementById('disbursementsLoading').style.display = 'none';
        document.getElementById('disbursementsEmpty').style.display = 'block';
        document.getElementById('disbursementsEmpty').innerHTML = `
            <i class="bx bx-error-circle display-4 text-danger"></i>
            <p class="text-danger mt-3 mb-0">Error loading disbursement records: ${error.message || 'Unknown error'}</p>
            <p class="text-muted small">Check console for more details.</p>
        `;
    });
}
</script>
@endpush
@endsection