@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@php($headingOptions = [
    '<a href="' . route('merchants.index') . '" class="'. \Config::get('view.buttons.secondary') .'"><i class="bx bx-arrow-back"></i> Merchants</a>',
])
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="col-12">
    <x-heading-sec :module="'Merchant Importer'" :options="$headingOptions" />

    {{-- Tab bar --}}
    <div class="project-box p-0 mb-3" style="overflow:hidden;">
        <div class="d-flex" id="importer-tab-bar" style="gap:0;">
            @foreach(['1. Upload a File','2. Select Defaults','3. Map Fields','4. Preview'] as $ti => $tLabel)
            <button type="button"
                class="importer-tab btn border-0 rounded-0 px-4 py-2 fw-semibold small"
                data-tab="{{ $ti + 1 }}"
                style="background:{{ $ti === 0 ? 'linear-gradient(135deg,#5cb85c,#4cae4c)' : '#e9ecef' }};
                       color:{{ $ti === 0 ? '#fff' : '#555' }};
                       border-right:1px solid #dee2e6!important;
                       min-width:130px;">
                {{ $tLabel }}
            </button>
            @endforeach
            <button type="button"
                class="importer-tab btn border-0 rounded-0 px-4 py-2 fw-semibold small ms-auto"
                data-tab="activity"
                style="background:#2c6fad;color:#fff;min-width:140px;">
                Import Activity
            </button>
        </div>
    </div>

    {{-- Step 1: Upload --}}
    <div class="project-box p-4" id="importer-pane-1">
        <p class="text-muted small mb-3">Please drag &amp; drop or select the CSV file to be imported. First row must contain the column names that will be used for mapping.</p>
        <div id="csv-drop-zone"
            class="border rounded p-5 text-center"
            style="border:2px dashed #adb5bd!important;cursor:pointer;background:#f8fbff;"
            ondragover="event.preventDefault()" ondrop="handleDrop(event)">
            <i class="bx bx-cloud-upload fs-1 text-primary d-block mb-2"></i>
            <p class="mb-1 fw-semibold">Drop CSV file here to upload, or</p>
            <input type="file" id="csv-file-input" accept=".csv,.txt" class="d-none">
            <button type="button" class="{{ \Config::get('view.buttons.primary') }} mt-2" onclick="document.getElementById('csv-file-input').click()">
                <i class="bx bx-folder-open me-1"></i> Browse
            </button>
        </div>
        <div id="upload-progress" class="mt-3 d-none">
            <div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width:100%"></div></div>
            <p class="small text-muted mt-1">Uploading...</p>
        </div>
        <div class="d-flex align-items-center justify-content-between mt-2">
            <p class="text-muted small mb-0">Supported format: CSV (UTF-8). Maximum size: 10MB.</p>
            <a href="{{ route('merchants.importer.download-sample') }}" class="{{ \Config::get('view.buttons.secondary') }}">
                <i class="bx bx-download me-1"></i> Download Sample CSV
            </a>
        </div>
    </div>

    {{-- Step 2: Set Defaults --}}
    <div class="project-box p-4 d-none" id="importer-pane-2">
        <h6 class="fw-semibold mb-3">Select Default Values</h6>
        <p class="text-muted small mb-3">These values will be applied to all imported records unless overridden by the CSV data.</p>
        <div class="project-form row g-3">
            <div class="col-md-4">
                <label class="form-label small fw-semibold">Processor</label>
                <select id="default-processor" class="form-control select2 no-search">
                    <option value="">— Select Processor —</option>
                    @foreach($processors ?? [] as $pVal => $pLabel)
                    <option value="{{ $pVal }}">{{ $pLabel }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label small fw-semibold">Group</label>
                <select id="default-group" class="form-control select2 no-search">
                    <option value="">— Select Group —</option>
                    @foreach($groups ?? [] as $gId => $gTitle)
                    <option value="{{ $gId }}">{{ $gTitle }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label small fw-semibold">Merchant Type</label>
                <select id="default-type" class="form-control select2 no-search">
                    <option value="1">Manual</option>
                    <option value="2" selected>Payrix</option>
                </select>
            </div>
        </div>
        <div class="mt-4 d-flex gap-2">
            <button type="button" class="{{ \Config::get('view.buttons.secondary') }}" onclick="goToWizardStep(1)"><i class="bx bx-chevron-left me-1"></i> Back</button>
            <button type="button" class="{{ \Config::get('view.buttons.primary') }}" onclick="goToWizardStep(3)">Next <i class="bx bx-chevron-right ms-1"></i></button>
        </div>
    </div>

    {{-- Step 3: Map Fields --}}
    <div class="project-box p-4 d-none" id="importer-pane-3">
        <h6 class="fw-semibold mb-3">Map CSV Columns to CRM Fields</h6>
        <p class="text-muted small mb-3">Match each CSV column to the corresponding CRM field. Columns set to <em>"— Skip This Column —"</em> will not be imported.</p>
        <div class="table-responsive">
            <table class="table table-bordered table-sm" id="mapping-table">
                <thead class="table-light">
                <tr>
                    <th>CSV Column</th>
                    <th>Sample Data</th>
                    <th>Maps To CRM Field</th>
                </tr>
                </thead>
                <tbody id="mapping-body"></tbody>
            </table>
        </div>
        <div class="mt-4 d-flex gap-2">
            <button type="button" class="{{ \Config::get('view.buttons.secondary') }}" onclick="goToWizardStep(2)"><i class="bx bx-chevron-left me-1"></i> Back</button>
            <button type="button" class="{{ \Config::get('view.buttons.primary') }}" id="btn-load-preview">Next: Preview <i class="bx bx-chevron-right ms-1"></i></button>
        </div>
    </div>

    {{-- Step 4: Preview --}}
    <div class="project-box p-4 d-none" id="importer-pane-4">
        <h6 class="fw-semibold mb-3">Preview <span class="text-muted small fw-normal">(first 10 rows)</span></h6>
        <div id="preview-loading" class="text-muted small py-3"><i class="bx bx-loader-alt bx-spin me-1"></i> Loading preview...</div>
        <div id="preview-content" class="d-none">
            <div class="table-responsive">
                <table class="table table-bordered table-sm" id="preview-table">
                    <thead class="table-light"><tr id="preview-header"></tr></thead>
                    <tbody id="preview-body"></tbody>
                </table>
            </div>
        </div>
        <div id="preview-error" class="alert alert-warning d-none small"></div>
        <div class="mt-4 d-flex gap-2">
            <button type="button" class="{{ \Config::get('view.buttons.secondary') }}" onclick="goToWizardStep(3)"><i class="bx bx-chevron-left me-1"></i> Back</button>
            <button type="button" class="{{ \Config::get('view.buttons.primary') }}" id="btn-start-import">
                <i class="bx bx-import me-1"></i> Start Import
            </button>
        </div>
    </div>

    {{-- Import Activity (history) pane --}}
    <div class="project-box p-4 d-none" id="importer-pane-activity">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="fw-semibold mb-0">Import Activity</h6>
            <button type="button" class="{{ \Config::get('view.buttons.primary') }}" onclick="resetWizard()">
                <i class="bx bx-plus me-1"></i> New Import
            </button>
        </div>

        {{-- Post-import summary (hidden until an import completes) --}}
        <div id="import-result-summary" class="d-none mb-4">
            <div class="row g-3 mb-2">
                <div class="col-md-3">
                    <div class="card text-center border-0 shadow-sm p-3">
                        <div class="text-muted small mb-1">Total Rows</div>
                        <div class="fw-bold fs-4" id="sum-total">—</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center border-0 shadow-sm p-3">
                        <div class="text-muted small mb-1">Imported</div>
                        <div class="fw-bold fs-4 text-success" id="sum-success">—</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center border-0 shadow-sm p-3">
                        <div class="text-muted small mb-1">Failed</div>
                        <div class="fw-bold fs-4 text-danger" id="sum-failed">—</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="d-flex flex-column gap-2 justify-content-center h-100">
                        <a href="{{ route('merchants.index') }}" class="{{ \Config::get('view.buttons.primary') }}"><i class="bx bx-list-ul me-1"></i> View Merchants</a>
                        <a id="error-csv-download" href="#" class="{{ \Config::get('view.buttons.secondary') }} d-none"><i class="bx bx-download me-1"></i> Download Errors</a>
                    </div>
                </div>
            </div>
            <div id="error-table-wrapper" class="d-none">
                <h6 class="fw-semibold mb-2 text-danger small">Import Errors</h6>
                <div class="table-responsive">
                    <table class="table table-sm table-bordered">
                        <thead class="table-light"><tr><th>Row</th><th>Error</th><th>Data</th></tr></thead>
                        <tbody id="error-table-body"></tbody>
                    </table>
                </div>
            </div>
            <hr>
        </div>

        {{-- Import progress bar (shown during processing) --}}
        <div id="import-progress-wrapper" class="d-none mb-3">
            <div class="progress mb-2"><div id="import-progress-bar" class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:0%"></div></div>
            <p class="small text-muted" id="import-status-text">Processing import...</p>
        </div>

        {{-- History table --}}
        <div id="history-loading" class="text-muted small py-2 d-none"><i class="bx bx-loader-alt bx-spin me-1"></i> Loading history...</div>
        <div id="history-content">
            <div class="table-responsive">
                <table class="table table-bordered table-sm">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>File Name</th>
                            <th>Total</th>
                            <th>Imported</th>
                            <th>Failed</th>
                            <th>Status</th>
                            <th>Imported By</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody id="history-table-body">
                        <tr><td colspan="8" class="text-center text-muted small">No import history yet.</td></tr>
                    </tbody>
                </table>
            </div>
            <div id="history-pagination" class="mt-2"></div>
        </div>
    </div>

</div>
@endsection
@push('page_script')
<script src="{{ asset('assets/js/common.js') }}"></script>
<script>
window.ImporterConfig = {
    uploadUrl:  '{{ route('merchants.importer.upload') }}',
    previewUrl: '{{ route('merchants.importer.preview') }}',
    processUrl: '{{ route('merchants.importer.process') }}',
    historyUrl: '{{ route('merchants.importer.history') }}',
    csrf:       '{{ csrf_token() }}',
    crmFields: {
        'mid':           'Merchant ID (MID)',
        'dba':           'DBA Name',
        'legal_name':    'Legal Name',
        'phone':         'Phone',
        'processor':     'Processor',
        'datasource':    'Datasource',
        'approval_date': 'Approval Date',
        'note':          'Notes',
        '':              '— Skip This Column —'
    }
};
</script>
<script src="{{ asset('assets/js/merchant-importer.js') }}?v={{ time() }}"></script>
@endpush