@php
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    );
@endphp
@extends('admin.layouts.layout', $headerOption)
@section('content')

<div class="project-box">
    <div class="heading-btn-sec brd-bottom">
        <h3>Import Tickets</h3>
        <div class="heading-btn in-re">
            <a href="{{ route('helpdesk-ticket-import.history') }}" class="green-btn-inner waves-effect">
                <i class="mdi mdi-history"></i> View History
            </a>
        </div>
    </div>

    <div class="heading-btn-sec px-3 resp-flex-column">
        <p><b>Instructions:</b> Click Upload File or Drag &amp; Drop your CSV/XLSX file, map the columns to your ticket fields, and import your tickets.</p>
        <div class="heading-btn mob-resp">
            <button type="button" class="green-btn-inner waves-effect" data-bs-toggle="modal" data-bs-target="#validationRulesModal">
                <i class="bx bx-info-circle"></i> Field Validation Rule
            </button>
            <a href="{{ route('helpdesk-ticket-import.download-sample') }}" class="green-btn-inner waves-effect">
                <i class="bx bx-file-blank"></i> Download CSV File
            </a>
        </div>
    </div>

    {{-- Step Progress Bar --}}
    <div class="px-3 pt-3 pb-2">
        <div class="d-flex align-items-center justify-content-center import-steps">
            <div class="import-step active">
                <div class="step-circle">1</div>
                <div class="step-label">Upload File</div>
            </div>
            <div class="step-line"></div>
            <div class="import-step">
                <div class="step-circle">2</div>
                <div class="step-label">Map Columns</div>
            </div>
            <div class="step-line"></div>
            <div class="import-step">
                <div class="step-circle">3</div>
                <div class="step-label">Check Duplicates</div>
            </div>
            <div class="step-line"></div>
            <div class="import-step">
                <div class="step-circle">4</div>
                <div class="step-label">Import</div>
            </div>
        </div>
    </div>

    {{-- Drop Zone --}}
    <div class="project-form form-line mx-3 mb-2" id="dropZone">
        <div class="inner-dropp">
            <i class="mdi mdi-cloud-upload-outline" style="font-size:2.5rem; color:#6c757d;"></i>
            <p class="mb-1">Drag &amp; Drop to upload, or</p>
            <p class="text-muted small mb-2">Accepted formats: .csv, .xlsx &nbsp;|&nbsp; Max size: 10 MB</p>
            <button type="button" class="green-btn-inner waves-effect" id="browseBtn">
                <i class="mdi mdi-upload-outline me-1"></i> Upload File
            </button>
            <input type="file" id="importFileInput" accept=".csv,.xlsx" style="display:none;">
        </div>
    </div>

    {{-- Selected file name --}}
    <div id="fileNameDisplay" class="px-3 text-muted small d-none mb-1"></div>

    {{-- Upload Progress --}}
    <div class="px-3 d-none" id="progressWrap">
        <div class="progress" style="height:8px;">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" id="uploadProgressBar" role="progressbar" style="width:0%"></div>
        </div>
        <p class="small text-muted mt-1" id="progressText">Uploading… 0%</p>
    </div>

    {{-- Error Alert --}}
    <div class="px-3 d-none" id="uploadErrorWrap">
        <div class="alert alert-danger d-flex align-items-center" id="uploadErrorMsg" role="alert">
            <i class="bx bx-error-circle me-2"></i>
            <span id="uploadErrorText"></span>
        </div>
    </div>

    {{-- Save & Continue --}}
    <div class="text-end px-3 pb-3 mt-2">
        <button type="button" class="green-btn-inner waves-effect" id="saveContinueBtn" disabled>
            <i class="bx bx-check me-1"></i> Save &amp; Continue
        </button>
    </div>
</div>

{{-- Field Validation Rules Modal --}}
<div class="modal fade" id="validationRulesModal" tabindex="-1" aria-labelledby="validationRulesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="validationRulesModalLabel">Field Validation Rules</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <table class="table table-bordered table-sm mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width:20%">Field</th>
                            <th style="width:15%">Required</th>
                            <th>Accepted Values / Format</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>Subject</strong></td>
                            <td><span class="badge bg-danger">Required</span></td>
                            <td>Any text string. Rows missing a subject will be skipped and reported as errors.</td>
                        </tr>
                        <tr>
                            <td><strong>Description</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>Free text. HTML is stripped on import.</td>
                        </tr>
                        <tr>
                            <td><strong>External ID</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>Alphanumeric identifier from your source system. Used for duplicate detection.</td>
                        </tr>
                        <tr>
                            <td><strong>Ticket Status</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>
                                <code>New</code>, <code>Open</code>, <code>In Progress</code>,
                                <code>Additional</code>, <code>Resolved</code>, <code>Closed</code><br>
                                <span class="text-muted small">Unrecognised values default to <em>New</em>.</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Priority</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>
                                <code>Normal</code>, <code>Medium</code>, <code>High</code>,
                                <code>Urgent</code>, <code>Rush</code><br>
                                <span class="text-muted small">Unrecognised values default to <em>Normal</em>.</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Ticket Type</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>
                                Exact name of an active Ticket Type configured for your company (case-insensitive).<br>
                                <span class="text-muted small">Unmatched values are skipped with a warning; the ticket is still imported.</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Channel</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>
                                Exact name of a Channel configured for your company (case-insensitive).<br>
                                <span class="text-muted small">Unmatched values are skipped with a warning; the ticket is still imported.</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>For</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>
                                <code>merchant</code> or <code>lead</code>.<br>
                                <span class="text-muted small">Unrecognised values are omitted (field left blank).</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Merchant Visibility</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>
                                <code>1</code> / <code>yes</code> / <code>true</code> / <code>visible</code> → visible to merchant.<br>
                                Any other value → hidden.
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Group</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>
                                Exact name of a Group configured for your company (case-insensitive).<br>
                                <span class="text-muted small">Unmatched values are skipped with a warning; the ticket is still imported.</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Assigned To</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>
                                User's email address (preferred) or full name <em>First Last</em> (case-insensitive fallback).<br>
                                <span class="text-muted small">If the user is not found the ticket is still created; a warning is logged.</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Due Date</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>
                                Any standard date format, e.g. <code>2025-06-30</code>, <code>30/06/2025</code>, <code>June 30 2025</code>.<br>
                                <span class="text-muted small">Unparseable values are stored as null.</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Created</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>
                                Original creation date. Same date formats as <em>Due Date</em>.<br>
                                <span class="text-muted small">Overwrites the system-generated creation timestamp on the imported ticket.</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Last Modified</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>Same date formats as <em>Due Date</em>.</td>
                        </tr>
                        <tr>
                            <td><strong>Last Status Update</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>Same date formats as <em>Due Date</em>.</td>
                        </tr>
                        <tr>
                            <td><strong>Outcome</strong></td>
                            <td><span class="badge bg-secondary">Optional</span></td>
                            <td>
                                Exact name of an Outcome configured for your company (case-insensitive).<br>
                                <span class="text-muted small">Unmatched values are skipped with a warning; the ticket is still imported.</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('page_script')
<script>
    window.ImporterConfig = {
        uploadUrl:  '{{ route('helpdesk-ticket-import.upload') }}',
        csrfToken:  '{{ csrf_token() }}'
    };
</script>
<script src="{{ asset('assets/js/helpdesk_ticket_importer.js') }}"></script>
<script>
    // Move modal to <body> to escape the .cards animate__fadeInUp CSS transform stacking context
    document.addEventListener('DOMContentLoaded', function () {
        var modal = document.getElementById('validationRulesModal');
        if (modal) { document.body.appendChild(modal); }
    });
</script>
<style>
    .import-steps { gap: 0; }
    .import-step  { display:flex; flex-direction:column; align-items:center; min-width:90px; }
    .step-circle  { width:32px; height:32px; border-radius:50%; background:#dee2e6; color:#6c757d;
                    display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.85rem; }
    .import-step.active   .step-circle { background:#28a745; color:#fff; }
    .import-step.complete .step-circle { background:#198754; color:#fff; }
    .step-label   { font-size:.75rem; margin-top:4px; color:#6c757d; text-align:center; }
    .import-step.active .step-label { color:#28a745; font-weight:600; }
    .step-line    { flex:1; height:2px; background:#dee2e6; margin-bottom:18px; min-width:30px; }
    #dropZone.dragover { border-color:#28a745 !important; background:#f0fff4 !important; }
</style>
@endpush