@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Modern Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb modern-breadcrumb-members">
            <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>Members 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-user-plus"></i>
                </div>
                <div>
                    <h1 class="page-title mb-0">Members Data Upload</h1>
                    <p class="page-subtitle mb-0">Upload and manage member 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

    <!-- 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> Upload Members Data
        </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> Members Records
                @if(isset($members) && $members->total() > 0)
                    <span class="badge bg-primary">{{ $members->total() }} Total</span>
                @endif
            </h5>
            @if(isset($members) && $members->total() > 0)
            <form action="{{ route('members.destroyAll') }}" method="POST" onsubmit="return confirm('⚠️ WARNING: Are you sure you want to delete ALL {{ $members->total() }} member 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($members) && $members->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">First Name</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-user-circle me-2"></i>
                                    <span class="fw-bold">Middle Name</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-user-check me-2"></i>
                                    <span class="fw-bold">Last Name</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-fingerprint me-2"></i>
                                    <span class="fw-bold">Member Number</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($members as $index => $member)
                        <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%;">
                                    {{ $members->firstItem() + $index }}
                                </div>
                            </td>
                            <td class="align-middle">{{ $member->check_number }}</td>
                            <td class="align-middle text-uppercase">{{ $member->first_name }}</td>
                            <td class="align-middle text-uppercase">{{ $member->middle_name ?? '-' }}</td>
                            <td class="align-middle text-uppercase">{{ $member->last_name ?? '-' }}</td>
                            <td class="align-middle">
                                <span class="badge bg-info-subtle text-info px-2 py-1">
                                    {{ $member->member_number ?? 'N/A' }}
                                </span>
                            </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="{{ route('members.show', $member->check_number) }}">
                                                <i class="bx bx-show text-info"></i> View Details
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="{{ route('members.edit', $member->check_number) }}">
                                                <i class="bx bx-edit text-warning"></i> Edit Record
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#deleteModal{{ $member->check_number }}">
                                                <i class="bx bx-trash text-danger"></i> Delete Record
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <!-- Delete Confirmation Modal -->
                                <div class="modal fade" id="deleteModal{{ $member->check_number }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ $member->check_number }}" 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{{ $member->check_number }}">
                                                    <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 member record?</h6>
                                                <div class="alert alert-warning">
                                                    <strong>Member:</strong> {{ $member->first_name }} {{ $member->middle_name }} {{ $member->last_name }}<br>
                                                    <strong>Check Number:</strong> {{ $member->check_number }}<br>
                                                    <strong>Member Number:</strong> {{ $member->member_number ?? 'N/A' }}
                                                </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('members.destroy', $member->check_number) }}" 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>
                </table>
            </div>

            <!-- Pagination -->
            @if($members->hasPages())
            <div class="d-flex justify-content-between align-items-center mt-4">
               {{--  <div class="text-muted">
                    Showing {{ $members->firstItem() }} to {{ $members->lastItem() }} of {{ $members->total() }} records
                </div>- --}}
                <div>
                    {{ $members->links('pagination::bootstrap-5') }}
                </div>
            </div>
            @endif
            @else
            <div class="text-center py-5 empty-state">
                <i class="bx bx-user display-1 text-muted mb-3"></i>
                <h4 class="text-muted">No Member Records Found</h4>
                <p class="text-muted mb-0">Upload a file to get started with member management.</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 Members Records
                </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('members.upload') }}" id="filterForm">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="bx bx-search"></i> Search Members
                        </label>
                        <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Search by Check Number, Name, or Member Number...">
                    </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('members.upload') }}" 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> Upload Members Data - 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 class="mt-3">
                            <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="modal" data-bs-target="#columnHelpModalMembers">
                                <i class="bx bx-help-circle"></i> View Column Order Help
                            </button>
                        </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 members 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('members.upload') }}" 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('members.import') }}" method="POST" enctype="multipart/form-data" id="uploadForm" style="display: none;">
                    @csrf
                    <input type="file" name="file" id="hiddenFileInput">
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Column Help Modal -->
<div class="modal fade" id="columnHelpModalMembers" tabindex="-1" aria-labelledby="columnHelpModalMembersLabel" 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="columnHelpModalMembersLabel">
                    <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>Unique check number (Primary Key) <span class="badge bg-danger">Required</span></td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">2</span></td>
                            <td><strong>FirstName</strong></td>
                            <td>Member'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>MiddleName</strong></td>
                            <td>Member's middle name (optional)</td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">4</span></td>
                            <td><strong>LastName</strong></td>
                            <td>Member's last name (optional)</td>
                        </tr>
                        <tr>
                            <td class="text-center"><span class="badge bg-primary">5</span></td>
                            <td><strong>MemberNumber</strong></td>
                            <td>Member identification number (optional)</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 members data</p>
    </div>
</div>

@push('styles')
<style>
/* Modern Table Styling - Updated */
.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;
}

.table-responsive {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

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

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

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

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

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

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

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

.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-menu {
    border: none;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 200px;
}

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

/* 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-info {
    background: #17a2b8 !important;
}

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

.modal-header.bg-danger {
    background: #dc3545 !important;
}

.modal-header.bg-danger .modal-title,
.modal-header.bg-danger h5 {
    color: white !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-members {
    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-members .breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

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

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

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

.filter-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.filter-card .form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.filter-card .form-control {
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    padding: 10px 14px;
    transition: all 0.2s ease;
}

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

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

/* Pagination */
 

/* 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("members.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("members.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) {
            // 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 members 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