@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">
                <a href="#" class="breadcrumb-link">
                    <i class="bx bx-money"></i>
                    <span>Loans</span>
                </a>
            </li>
            <li class="breadcrumb-item active">
                <i class="bx bx-import"></i>
                <span>Import 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-import"></i>
                </div>
                <div>
                    <h1 class="page-title mb-0">Import Existing Loans</h1>
                    <p class="page-subtitle mb-0">Import and manage existing loan records efficiently</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

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show modern-alert" role="alert">
            <i class="bx bx-error fs-5 me-2"></i>
            <strong>Validation Errors:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Quick Import Options -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card quick-option-card h-100">
                <div class="card-body text-center">
                    <div class="quick-option-icon mb-3">
                        <i class="bx bx-file-blank"></i>
                    </div>
                    <h5 class="card-title mb-3">Use Default File</h5>
                    <p class="text-muted mb-3">Import from the pre-configured default existing loans file</p>
                    <button type="button" class="btn btn-primary" onclick="alert('Default file import feature coming soon!')">
                        <i class="bx bx-import"></i> Import Default File
                    </button>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card quick-option-card h-100">
                <div class="card-body">
                    <div class="quick-option-icon mb-3 text-center">
                        <i class="bx bx-info-circle"></i>
                    </div>
                    <h5 class="card-title mb-3 text-center">How It Works</h5>
                    <ol class="how-it-works-list">
                        <li><strong>Prepare Your File:</strong> Use Excel or CSV with required columns in order</li>
                        <li><strong>Select File:</strong> Choose your file using the wizard below</li>
                        <li><strong>Validate:</strong> System checks file structure and data integrity</li>
                        <li><strong>Review:</strong> Confirm the import summary before proceeding</li>
                        <li><strong>Import:</strong> Data is imported with new/updated/skipped tracking</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- Multi-Step Upload Wizard -->
    <div class="card modern-card mb-4">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="bx bx-cloud-upload"></i> Import Existing Loans - Multi-Step Wizard</h5>
            <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="modal" data-bs-target="#columnHelpModal">
                <i class="bx bx-help-circle"></i> Column Order Help
            </button>
        </div>
        <div class="card-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 your 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('loan-offers.index') }}" class="btn btn-outline-secondary btn-lg">
                            <i class="bx bx-list-ul"></i> View All Loans
                        </a>
                    </div>
                </div>
            </div>

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

<!-- Column Help Modal -->
<div class="modal fade" id="columnHelpModal" tabindex="-1" aria-labelledby="columnHelpModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="columnHelpModalLabel">
                    <i class="bx bx-info-circle"></i> Required Column Order (Must Match Exactly)
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="bx bx-error-circle"></i> <strong>Important:</strong> Your Excel/CSV file must have columns in this exact order (by position, not by name).
                </div>

                <table class="table table-bordered table-hover">
                    <thead class="table-primary">
                        <tr>
                            <th width="100">Position</th>
                            <th width="200">Column Name</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">1</span></td>
                            <td><strong>check_number</strong></td>
                            <td>Employee check number/ID <span class="badge bg-danger">REQUIRED</span></td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">2</span></td>
                            <td><strong>first_name</strong></td>
                            <td>Employee's first name <span class="badge bg-danger">REQUIRED</span></td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">3</span></td>
                            <td><strong>middle_name</strong></td>
                            <td>Employee's middle name <span class="badge bg-danger">REQUIRED</span></td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">4</span></td>
                            <td><strong>last_name</strong></td>
                            <td>Employee's last name <span class="badge bg-danger">REQUIRED</span></td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">5</span></td>
                            <td><strong>application_number</strong></td>
                            <td>Loan application reference number <span class="badge bg-danger">REQUIRED</span></td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">6</span></td>
                            <td><strong>loan_number</strong></td>
                            <td>Existing loan reference number <span class="badge bg-danger">REQUIRED</span></td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">7</span></td>
                            <td><strong>amount</strong></td>
                            <td>Monthly deduction amount (numeric) <span class="badge bg-danger">REQUIRED</span></td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">8</span></td>
                            <td><strong>initial_balance</strong></td>
                            <td>Original loan amount (numeric) <span class="badge bg-danger">REQUIRED</span></td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">9</span></td>
                            <td><strong>ded_balance_amount</strong></td>
                            <td>Current outstanding balance (numeric) <span class="badge bg-danger">REQUIRED</span></td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">10</span></td>
                            <td><strong>vote_code</strong></td>
                            <td>Vote/Department code <span class="badge bg-secondary">Optional</span></td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">11</span></td>
                            <td><strong>vote_name</strong></td>
                            <td>Vote/Department name <span class="badge bg-secondary">Optional</span></td>
                        </tr>
                    </tbody>
                </table>

                <div class="alert alert-info mb-0">
                    <i class="bx bx-info-circle"></i> <strong>Note:</strong> File must start from row 1 with these exact column headers in this order.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay" style="display: none;">
    <div class="loading-content">
        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
            <span class="visually-hidden">Loading...</span>
        </div>
        <h5 class="text-primary mt-3">Processing Upload...</h5>
        <p class="text-muted mb-0">Please wait while we process your existing loans data</p>
    </div>
</div>

@push('styles')
<style>
/* 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;
}

/* Quick Option Cards */
.quick-option-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 backwards;
}

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

.quick-option-icon {
    font-size: 48px;
    color: #17479E;
}

.how-it-works-list {
    padding-left: 1.2rem;
}

.how-it-works-list li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.how-it-works-list strong {
    color: #17479E;
}

/* 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;
}

/* 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);
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Table Styling */
.table {
    margin-bottom: 0;
}

.table thead th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #dee2e6;
}

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

.table tbody tr:hover {
    background-color: rgba(23, 71, 158, 0.05);
    transform: scale(1.01);
}

.table-dark {
    background: #4587D1 !important;
}

.table thead th {
    background: #4587D1 !important;
    color: white !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    border: none !important;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-content {
    background: white;
    padding: 3rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: fadeInUp 0.3s ease-out;
}

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

/* Step Progress Indicator */
.step-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.step-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.step-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    transition: all 0.3s ease;
}

.step-item.active .step-number {
    background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(23, 71, 158, 0.3);
    transform: scale(1.1);
}

.step-item.active .step-label {
    color: #17479E;
    font-weight: 700;
}

.step-item.completed .step-number {
    background: #10b981;
    color: white;
}

.step-item.completed .step-label {
    color: #059669;
}

.step-line {
    flex: 1;
    height: 3px;
    background: #e5e7eb;
    margin: 0 -10px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.step-line.completed {
    background: #10b981;
}

/* Wizard Steps */
.wizard-step {
    animation: fadeIn 0.5s ease-in-out;
}

.step-content {
    padding: 30px;
    background: #ffffff;
    border-radius: 8px;
    border: 2px dashed #e5e7eb;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Updated Records Table */
.updated-records-table {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.updated-records-table table {
    margin-bottom: 0;
}

.updated-records-table th {
    position: sticky;
    top: 0;
    background: #4587D1 !important;
    color: white !important;
    z-index: 10;
}

/* 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;
    }

    .btn-group {
        flex-direction: column;
        gap: 4px;
    }

    .step-progress {
        overflow-x: auto;
        padding: 15px;
    }

    .step-number {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .step-label {
        font-size: 11px;
    }
}
</style>
@endpush

@push('scripts')
<script>
let currentStep = 1;
let selectedFile = null;
let validationData = null;

// Move to specific step
function goToStep(step) {
    // Hide all steps
    for (let i = 1; i <= 5; i++) {
        document.getElementById('step' + i).style.display = 'none';
        document.getElementById('stepIndicator' + i).classList.remove('active');

        if (i < step) {
            document.getElementById('stepIndicator' + i).classList.add('completed');
        } else {
            document.getElementById('stepIndicator' + i).classList.remove('completed');
        }
    }

    // Show current step
    document.getElementById('step' + step).style.display = 'block';
    document.getElementById('stepIndicator' + step).classList.add('active');

    // Update step lines
    const lines = document.querySelectorAll('.step-line');
    lines.forEach((line, index) => {
        if (index < step - 1) {
            line.classList.add('completed');
        } else {
            line.classList.remove('completed');
        }
    });

    currentStep = step;
}

// File input change handler
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('fileInput');

    fileInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            selectedFile = this.files[0];
            // Move to step 2 (validation)
            goToStep(2);
            validateFileWizard();
        }
    });
});

// Validate file in wizard
function validateFileWizard() {
    if (!selectedFile) return;

    const formData = new FormData();
    formData.append('file', selectedFile);
    formData.append('_token', '{{ csrf_token() }}');

    // Send AJAX request to validate
    fetch('{{ route("existing-loans.validate") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        validationData = data;

        // Hide progress, show results
        document.getElementById('validationProgress').style.display = 'none';
        document.getElementById('validationResults').style.display = 'block';

        if (data.success) {
            // Validation passed - show success and move to step 3
            document.getElementById('validationResults').innerHTML = `
                <div class="alert alert-success mb-3">
                    <div class="d-flex align-items-center">
                        <i class="bx bx-check-circle fs-1 text-success me-3"></i>
                        <div>
                            <h5 class="mb-0">✓ Validation Successful!</h5>
                            <small>All checks passed. File is ready to import.</small>
                        </div>
                    </div>
                </div>
                <table class="table table-sm table-bordered">
                    <tr><th width="50%">Valid Rows Found</th><td class="text-center"><strong class="text-success">${data.valid_count}</strong></td></tr>
                    <tr><th>File Format</th><td class="text-center"><span class="badge bg-success">✓ Correct</span></td></tr>
                    <tr><th>Column Structure</th><td class="text-center"><span class="badge bg-success">✓ Valid</span></td></tr>
                </table>
            `;

            // Auto move to step 3 after 1.5 seconds
            setTimeout(() => {
                goToStep(3);
                document.getElementById('confirmationSummary').innerHTML = `
                    <div class="card">
                        <div class="card-body">
                            <h6 class="mb-3">Import Summary:</h6>
                            <ul class="list-unstyled mb-0">
                                <li><i class="bx bx-file text-primary"></i> <strong>File Name:</strong> ${selectedFile.name}</li>
                                <li><i class="bx bx-chart text-success"></i> <strong>Total Records:</strong> ${data.valid_count}</li>
                                <li><i class="bx bx-time text-info"></i> <strong>Status:</strong> <span class="badge bg-success">Ready to Import</span></li>
                            </ul>
                        </div>
                    </div>
                `;
            }, 1500);
        } else {
            // Validation failed
            let errorHtml = `
                <div class="alert alert-danger">
                    <div class="d-flex align-items-center mb-2">
                        <i class="bx bx-error-circle fs-1 text-danger me-3"></i>
                        <div>
                            <h5 class="mb-0">✗ Validation Failed</h5>
                            <small>Please fix these errors and try again</small>
                        </div>
                    </div>
                    <p><strong>Error:</strong> ${data.message}</p>
            `;

            if (data.errors && data.errors.length > 0) {
                errorHtml += `
                    <div class="mt-3">
                        <strong>Issues Found (${data.error_count}):</strong>
                        <ul class="mt-2" style="max-height: 250px; overflow-y: auto;">
                `;
                data.errors.forEach(error => {
                    errorHtml += `<li>${error}</li>`;
                });
                errorHtml += `</ul></div>`;
            }

            errorHtml += `
                </div>
                <button type="button" class="btn btn-primary mt-3" onclick="resetWizard()">
                    <i class="bx bx-refresh"></i> Try Again
                </button>
            `;

            document.getElementById('validationResults').innerHTML = errorHtml;
        }
    })
    .catch(error => {
        document.getElementById('validationProgress').style.display = 'none';
        document.getElementById('validationResults').style.display = 'block';
        document.getElementById('validationResults').innerHTML = `
            <div class="alert alert-danger">
                <strong>Error:</strong> Failed to validate file. ${error.message}
            </div>
            <button type="button" class="btn btn-primary mt-3" onclick="resetWizard()">
                <i class="bx bx-refresh"></i> Try Again
            </button>
        `;
    });
}

// Start import process
function startImport() {
    if (!selectedFile) return;

    // Move to step 4 (importing)
    goToStep(4);

    // Prepare form data
    const formData = new FormData();
    formData.append('file', selectedFile);
    formData.append('_token', '{{ csrf_token() }}');

    // Submit to server
    fetch('{{ route("existing-loans.import") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        // Move to step 5 (complete)
        goToStep(5);

        if (data.success) {
            // Build updated records table if available
            let updatedRecordsHtml = '';
            if (data.updated_records && data.updated_records.length > 0) {
                updatedRecordsHtml = `
                    <div class="card border-0 bg-light mt-3">
                        <div class="card-body">
                            <h6 class="mb-3"><i class="bx bx-info-circle"></i> Updated Records Details:</h6>
                            <div class="updated-records-table">
                                <table class="table table-sm table-bordered table-hover mb-0">
                                    <thead>
                                        <tr>
                                            <th>Check Number</th>
                                            <th>Loan Number</th>
                                            <th>Field Updated</th>
                                            <th>Old Value</th>
                                            <th>New Value</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                `;

                data.updated_records.forEach(record => {
                    updatedRecordsHtml += `
                        <tr>
                            <td>${record.check_number || 'N/A'}</td>
                            <td>${record.loan_number || 'N/A'}</td>
                            <td><strong>${record.field || 'N/A'}</strong></td>
                            <td class="text-muted">${record.old_value || 'N/A'}</td>
                            <td class="text-success"><strong>${record.new_value || 'N/A'}</strong></td>
                        </tr>
                    `;
                });

                updatedRecordsHtml += `
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                `;
            }

            // Success report
            document.getElementById('finalReport').innerHTML = `
                <div class="alert alert-success border-0 shadow-sm">
                    <div class="d-flex align-items-center mb-3">
                        <div class="rounded-circle bg-success bg-opacity-25 p-3 me-3">
                            <i class="bx bx-check-circle fs-1 text-success"></i>
                        </div>
                        <div>
                            <h4 class="mb-0 text-success">Import Completed Successfully!</h4>
                            <p class="mb-0 text-muted">Your existing loans data has been imported to the database</p>
                        </div>
                    </div>

                    <div class="card border-0 bg-light">
                        <div class="card-body">
                            <h6 class="mb-3"><i class="bx bx-bar-chart"></i> Import Statistics:</h6>
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <div class="p-3 bg-white rounded text-center">
                                        <h3 class="mb-0 text-success">${data.new_count || 0}</h3>
                                        <small class="text-muted">New Records</small>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="p-3 bg-white rounded text-center">
                                        <h3 class="mb-0 text-info">${data.updated_count || 0}</h3>
                                        <small class="text-muted">Updated Records</small>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="p-3 bg-white rounded text-center">
                                        <h3 class="mb-0 text-warning">${data.skipped_count || 0}</h3>
                                        <small class="text-muted">Skipped (No Changes)</small>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="p-3 bg-white rounded text-center">
                                        <h3 class="mb-0 text-primary">${data.total_imported || 0}</h3>
                                        <small class="text-muted">Total Processed</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    ${updatedRecordsHtml}

                    ${data.message ? `<div class="mt-3"><small class="text-muted">${data.message}</small></div>` : ''}
                </div>
            `;
        } else {
            // Error report
            document.getElementById('finalReport').innerHTML = `
                <div class="alert alert-danger border-0 shadow-sm">
                    <div class="d-flex align-items-center mb-3">
                        <div class="rounded-circle bg-danger bg-opacity-25 p-3 me-3">
                            <i class="bx bx-x-circle fs-1 text-danger"></i>
                        </div>
                        <div>
                            <h4 class="mb-0 text-danger">Import Failed</h4>
                            <p class="mb-0 text-muted">There was an error importing your data</p>
                        </div>
                    </div>
                    <div class="mt-3">
                        <strong>Error Details:</strong>
                        <p class="mb-0">${data.message || 'Unknown error occurred'}</p>
                    </div>
                </div>
            `;
        }
    })
    .catch(error => {
        goToStep(5);
        document.getElementById('finalReport').innerHTML = `
            <div class="alert alert-danger">
                <h5><i class="bx bx-error-circle"></i> Import Failed</h5>
                <p><strong>Error:</strong> ${error.message}</p>
            </div>
        `;
    });
}

// Reset wizard
function resetWizard() {
    currentStep = 1;
    selectedFile = null;
    validationData = null;

    document.getElementById('fileInput').value = '';
    document.getElementById('validationProgress').style.display = 'block';
    document.getElementById('validationResults').style.display = 'none';
    document.getElementById('validationResults').innerHTML = '';
    document.getElementById('confirmationSummary').innerHTML = '';
    document.getElementById('finalReport').innerHTML = '';

    goToStep(1);
}
</script>
@endpush
@endsection