@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Modern Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb modern-breadcrumb-payroll">
            <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 active">
                <i class="bx bx-upload"></i>
                <span>Payroll Upload</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-upload"></i>
                </div>
                <div>
                    <h1 class="page-title mb-0">Payroll Data Upload</h1>
                    <p class="page-subtitle mb-0">Upload and manage payroll 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

    <!-- Search Filter Card -->
    <div class="card filter-card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('payroll.showUpload') }}" class="row g-3">
                <div class="col-md-10">
                    <label class="form-label fw-semibold">
                        <i class="bx bx-search"></i> Search Payroll Records
                    </label>
                    <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Search by Check Number or Full Name...">
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bx bx-search"></i> Search
                    </button>
                </div>
            </form>
            @if(request('search'))
                <div class="mt-3">
                    <a href="{{ route('payroll.showUpload') }}" class="btn btn-sm btn-outline-secondary">
                        <i class="bx bx-x"></i> Clear Search
                    </a>
                    <span class="text-muted ms-2">Showing results for: <strong>"{{ request('search') }}"</strong></span>
                </div>
            @endif
        </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> Upload Payroll Data - 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 payroll 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('payroll.showUpload') }}" 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('payroll.upload') }}" method="POST" enctype="multipart/form-data" id="uploadForm" style="display: none;">
                @csrf
                <input type="file" name="file" id="hiddenFileInput">
            </form>
        </div>
    </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> Payroll Records
                @if(isset($payrolls) && $payrolls->total() > 0)
                    <span class="badge bg-primary">{{ $payrolls->total() }} Total</span>
                @endif
            </h5>
            @if(isset($payrolls) && $payrolls->total() > 0)
            <form action="{{ route('payroll.destroyAll') }}" method="POST" onsubmit="return confirm('⚠️ WARNING: Are you sure you want to delete ALL {{ $payrolls->total() }} payroll records?\n\nThis action cannot be undone!\n\nClick OK to proceed or Cancel to abort.');" style="display: inline;">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger btn-sm">
                    <i class="bx bx-trash"></i> Delete All Records
                </button>
            </form>
            @endif
        </div>
        <div class="card-body">
            @if(isset($payrolls) && $payrolls->count() > 0)
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover align-middle">
                    <thead class="table-primary">
                        <tr>
                            <th class="text-center" style="width: 60px;">#</th>
                            <th>Check Number</th>
                            <th>Full Name</th>
                            <th>Account Number</th>
                            <th>Bank Name</th>
                            <th class="text-end">Basic Salary</th>
                            <th class="text-end">Allowance</th>
                            <th class="text-end">Gross Amount</th>
                            <th class="text-end">Net Amount</th>
                            <th class="text-center" style="width: 120px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($payrolls as $index => $payroll)
                        <tr>
                            <td class="text-center fw-bold">{{ $payrolls->firstItem() + $index }}</td>
                            <td>{{ $payroll->check_number }}</td>
                            <td class="text-muted">{{ $payroll->full_name }}</td>
                            <td>{{ $payroll->account_number }}</td>
                            <td>{{ $payroll->bank_name }}</td>
                            <td class="text-end">{{ number_format($payroll->basic_salary, 2) }}</td>
                            <td class="text-end">{{ number_format($payroll->allowance, 2) }}</td>
                            <td class="text-end fw-semibold">{{ number_format($payroll->gross_amount, 2) }}</td>
                            <td class="text-end text-primary fw-bold">{{ number_format($payroll->net_amount, 2) }}</td>
                            <td class="text-center">
                                <div class="btn-group" role="group">
                                    <a href="{{ route('payroll.edit', $payroll->id) }}" class="btn btn-sm btn-warning" title="Edit Record">
                                        <i class="bx bx-edit"></i>
                                    </a>
                                    <button type="button" class="btn btn-sm btn-danger" title="Delete Record"
                                        data-bs-toggle="modal"
                                        data-bs-target="#deleteModal{{ $payroll->id }}">
                                        <i class="bx bx-trash"></i>
                                    </button>
                                </div>

                                <!-- Delete Confirmation Modal -->
                                <div class="modal fade" id="deleteModal{{ $payroll->id }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ $payroll->id }}" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header bg-danger text-white">
                                                <h5 class="modal-title" id="deleteModalLabel{{ $payroll->id }}">
                                                    <i class="bx bx-error-circle"></i> Confirm Delete
                                                </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="text-center mb-3">
                                                    <i class="bx bx-trash fs-1 text-danger"></i>
                                                </div>
                                                <h6 class="text-center mb-3">Are you sure you want to delete this payroll record?</h6>
                                                <div class="alert alert-warning">
                                                    <strong>Employee:</strong> {{ $payroll->full_name }}<br>
                                                    <strong>Check Number:</strong> {{ $payroll->check_number }}<br>
                                                    <strong>Net Amount:</strong> {{ number_format($payroll->net_amount, 2) }}
                                                </div>
                                                <p class="text-danger mb-0"><i class="bx bx-info-circle"></i> This action cannot be undone!</p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                    <i class="bx bx-x"></i> Cancel
                                                </button>
                                                <form action="{{ route('payroll.destroy', $payroll->id) }}" method="POST" style="display:inline;">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger">
                                                        <i class="bx bx-trash"></i> Yes, Delete
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="table-light">
                        <tr>
                            <td colspan="5" class="text-end fw-bold">Page Totals:</td>
                            <td class="text-muted">{{ number_format($payrolls->sum('basic_salary'), 2) }}</td>
                            <td class="text-muted">{{ number_format($payrolls->sum('allowance'), 2) }}</td>
                            <td class="text-muted">{{ number_format($payrolls->sum('gross_amount'), 2) }}</td>
                            <td class="text-end text-muted text-primary">{{ number_format($payrolls->sum('net_amount'), 2) }}</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- Pagination -->
            @if($payrolls->hasPages())
            <div class="d-flex justify-content-between align-items-center mt-4">
                {{-- - <div class="text-muted">
                    Showing {{ $payrolls->firstItem() }} to {{ $payrolls->lastItem() }} of {{ $payrolls->total() }} records
                </div>--}}
                <div>
                    {{ $payrolls->links('pagination::bootstrap-5') }}
                </div>
            </div>
            @endif
            @else
            <div class="text-center py-5 empty-state">
                <i class="bx bx-data display-1 text-muted mb-3"></i>
                <h4 class="text-muted">No Payroll Records Found</h4>
                <p class="text-muted mb-0">Upload a file to get started with payroll management.</p>
            </div>
            @endif
        </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>CheckNumber</strong></td>
                            <td>Check or reference number <span class="badge bg-danger">Required</span></td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">2</span></td>
                            <td><strong>FullName</strong></td>
                            <td>Employee's full 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>AccountNumber</strong></td>
                            <td>Bank account number</td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">4</span></td>
                            <td><strong>BankName</strong></td>
                            <td>Name of the bank</td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">5</span></td>
                            <td><strong>BasicSalary</strong></td>
                            <td>Basic salary amount (numeric)</td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">6</span></td>
                            <td><strong>Allowance</strong></td>
                            <td>Allowance amount (numeric)</td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">7</span></td>
                            <td><strong>GrossAmount</strong></td>
                            <td>Gross salary amount (numeric)</td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">8</span></td>
                            <td><strong>NetAmount</strong></td>
                            <td>Net salary amount (numeric)</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 payroll 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-payroll {
    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-payroll .breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

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

.modern-breadcrumb-payroll .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;
}

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

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

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

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

/* 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("payroll.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("payroll.upload") }}', {
        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) {
            // 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 payroll 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-4">
                                    <div class="p-3 bg-white rounded text-center">
                                        <h3 class="mb-0 text-success">${data.imported_count || 0}</h3>
                                        <small class="text-muted">New Records</small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <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-4">
                                    <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>
                        </div>
                    </div>

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