@extends('layouts.app')

@section('title', 'Import Customers - Step 1')

@section('content')
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('customers.index') }}">Customers</a></li>
            <li class="breadcrumb-item active">Import Customers</li>
        </ol>
    </nav>
    <h2 class="h4">Import Customers</h2>
</div>

<!-- Progress Indicator -->
<div class="d-flex justify-content-center align-items-center mb-5 gap-3">
    <div class="d-flex align-items-center gap-2 text-primary">
        <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 28px; height: 28px; font-size: 0.8rem;">1</div>
        <span class="fw-bold small">Configure</span>
    </div>
    <div class="border-top" style="width: 50px;"></div>
    <div class="d-flex align-items-center gap-2 text-muted">
        <div class="bg-white border-2 border text-muted rounded-circle d-flex align-items-center justify-content-center" style="width: 28px; height: 28px; font-size: 0.8rem;">2</div>
        <span class="fw-bold small">Map Fields</span>
    </div>
    <div class="border-top" style="width: 50px;"></div>
    <div class="d-flex align-items-center gap-2 text-muted">
        <div class="bg-white border-2 border text-muted rounded-circle d-flex align-items-center justify-content-center" style="width: 28px; height: 28px; font-size: 0.8rem;">3</div>
        <span class="fw-bold small">Preview</span>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <form action="{{ route('customers.import.step2') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4">
                    <h5 class="fw-bold mb-4">Step 1: Configure & Upload</h5>
                    
                    @if(session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif

                    <!-- Upload Area -->
                    <div class="mb-5">
                        <label class="form-label fw-bold text-muted small text-uppercase mb-3">Upload File</label>
                        <div class="border border-2 border-dashed rounded-4 p-5 text-center bg-light hover-bg-light-primary transition-all position-relative" id="drop-area">
                            <input type="file" name="file" id="file-input" class="position-absolute top-0 start-0 w-100 h-100 opacity-0 cursor-pointer" accept=".csv" required>
                            <div id="upload-prompt">
                                <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
                                <h6 class="fw-bold">Drag & Drop file here or <span class="text-primary">Browse</span></h6>
                                <p class="text-muted small mb-0">Supported format: .CSV (Max 25MB)</p>
                            </div>
                            <div id="file-selected" class="d-none">
                                <i class="fas fa-file-csv fa-3x text-success mb-3"></i>
                                <h6 class="fw-bold" id="filename-display">file_name.csv</h6>
                                <button type="button" class="btn btn-link btn-sm text-danger" onclick="resetUpload()">Remove</button>
                            </div>
                        </div>
                    </div>

                    <div class="row g-4">
                        <!-- Duplicate Handling -->
                        <div class="col-md-12">
                            <label class="form-label fw-bold text-muted small text-uppercase mb-3">Duplicate Handling</label>
                            <div class="d-flex flex-column gap-3">
                                <div class="form-check custom-option border rounded-3 p-3">
                                    <input class="form-check-input" type="radio" name="duplicate_handling" id="handle_skip" value="skip" checked>
                                    <label class="form-check-label ms-2" for="handle_skip">
                                        <span class="d-block fw-bold">Skip Duplicates</span>
                                        <small class="text-muted">Ignore rows where email or name already exists in the system.</small>
                                    </label>
                                </div>
                                <div class="form-check custom-option border rounded-3 p-3">
                                    <input class="form-check-input" type="radio" name="duplicate_handling" id="handle_overwrite" value="overwrite">
                                    <label class="form-check-label ms-2" for="handle_overwrite">
                                        <span class="d-block fw-bold">Overwrite Existing</span>
                                        <small class="text-muted">Update information for existing customers if a match is found.</small>
                                    </label>
                                </div>
                                <div class="form-check custom-option border rounded-3 p-3">
                                    <input class="form-check-input" type="radio" name="duplicate_handling" id="handle_duplicate" value="duplicate">
                                    <label class="form-check-label ms-2" for="handle_duplicate">
                                        <span class="d-block fw-bold">Add Duplicates as New</span>
                                        <small class="text-muted">Always create a new record even if similar records exist.</small>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Encoding -->
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted small text-uppercase">Character Encoding</label>
                            <select class="form-select">
                                <option value="UTF-8">UTF-8 (Default)</option>
                                <option value="UTF-16">UTF-16</option>
                                <option value="ISO-8859-1">ISO-8859-1</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2 mb-5">
                <button type="submit" class="btn btn-primary px-5 rounded-pill">Next Step <i class="fas fa-arrow-right ms-2"></i></button>
                <a href="{{ route('customers.index') }}" class="btn btn-light px-5 rounded-pill border">Cancel</a>
            </div>
        </form>
    </div>

    <div class="col-md-4">
        <div class="card border-0 shadow-sm rounded-4 bg-light-primary border-primary border-opacity-10">
            <div class="card-body p-4">
                <h6 class="fw-bold mb-3"><i class="fas fa-lightbulb text-warning me-2"></i> Tips for successful import</h6>
                <ul class="small text-muted ps-3 mb-0">
                    <li class="mb-2">Ensure your CSV has a header row.</li>
                    <li class="mb-2">Customer Name is a <strong>mandatory</strong> field.</li>
                    <li class="mb-2">Duplicate detection is based on <strong>Email</strong> first, then <strong>Name</strong>.</li>
                    <li class="mb-2">Remove any empty rows from your file before uploading.</li>
                    <li>The first row of your file will be used for field mapping in the next step.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
const fileInput = document.getElementById('file-input');
const prompt = document.getElementById('upload-prompt');
const selected = document.getElementById('file-selected');
const filenameDisplay = document.getElementById('filename-display');

fileInput.addEventListener('change', function(e) {
    if (this.files && this.files[0]) {
        prompt.classList.add('d-none');
        selected.classList.remove('d-none');
        filenameDisplay.innerText = this.files[0].name;
    }
});

function resetUpload() {
    fileInput.value = '';
    prompt.classList.remove('d-none');
    selected.classList.add('d-none');
}
</script>

<style>
.border-dashed { border-style: dashed !important; }
.hover-bg-light-primary:hover { background-color: #f0f7ff !important; border-color: #0d6efd !important; }
.bg-light-primary { background-color: #f0f7ff; }
.cursor-pointer { cursor: pointer; }
.transition-all { transition: all 0.2s ease; }
.custom-option:has(.form-check-input:checked) { border-color: #0d6efd !important; background-color: #f0f7ff; }
</style>
@endsection