@extends('layouts.app')

@section('title', 'Quotes - Select File')

@section('content')
<div class="container-wrapper" style="background-color: #fff; min-height: 100vh;">
    <!-- Top Step Indicator Header -->
    <div class="d-flex justify-content-between align-items-center mb-5 border-bottom pb-3">
        <div class="flex-grow-1"></div>
        <div class="text-center flex-grow-2">
            <h2 class="h5 fw-bold text-dark mb-3">Quotes - Select File</h2>
            <div class="d-flex align-items-center justify-content-center gap-4">
                <div class="d-flex align-items-center gap-2">
                    <span class="rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center" style="width: 24px; height: 24px; font-size: 12px;">1</span>
                    <span class="fw-bold text-dark pe-2">Configure</span>
                </div>
                <div class="border-top" style="width: 50px; border-color: #dee2e6 !important;"></div>
                <div class="d-flex align-items-center gap-2 text-muted">
                    <span class="rounded-circle border d-inline-flex align-items-center justify-content-center" style="width: 24px; height: 24px; font-size: 12px;">2</span>
                    <span>Map Fields</span>
                </div>
                <div class="border-top" style="width: 50px; border-color: #dee2e6 !important;"></div>
                <div class="d-flex align-items-center gap-2 text-muted">
                    <span class="rounded-circle border d-inline-flex align-items-center justify-content-center" style="width: 24px; height: 24px; font-size: 12px;">3</span>
                    <span>Preview</span>
                </div>
            </div>
        </div>
        <div class="flex-grow-1 text-end">
            <button type="button" class="btn-close" onclick="window.location='{{ route('quotes.index') }}'"></button>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-xl-8 col-lg-10">
            <form action="{{ route('quotes.import.step2') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                @if(session('error'))
                    <div class="alert alert-danger mb-4">{{ session('error') }}</div>
                @endif

                <!-- Upload Area -->
                <div class="card border-0 mb-5 text-center">
                    <div class="card-body p-0">
                        <div class="border border-2 rounded-3 p-5 bg-light position-relative mb-2" id="drop-area" style="border-style: dashed !important; border-color: #cbd5e0 !important;">
                            <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,.txt" required>
                            <div id="upload-prompt">
                                <i class="fas fa-upload fa-2x text-muted mb-3"></i>
                                <h6 class="fw-bold text-dark mb-4">Drag and drop file to import</h6>
                                <div class="btn-group mb-3 shadow-none">
                                    <button type="button" class="btn btn-primary px-4 fw-medium border-0" style="background-color: #408dfb;">Choose File</button>
                                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split border-0 border-start border-white border-opacity-25" style="background-color: #408dfb;" data-bs-toggle="dropdown"></button>
                                </div>
                                <p class="text-muted small">Maximum File Size: 25 MB • File Format: CSV or TSV or XLS</p>
                            </div>
                            <div id="file-selected" class="d-none">
                                <i class="fas fa-file-csv fa-3x text-primary mb-3"></i>
                                <h6 class="fw-bold" id="filename-display"></h6>
                                <button type="button" class="btn btn-link btn-sm text-danger text-decoration-none" onclick="resetUpload()">Remove</button>
                            </div>
                        </div>
                        <p class="small text-muted mb-5">
                            Download a <a href="#" class="text-primary text-decoration-none">sample csv file</a> or <a href="#" class="text-primary text-decoration-none">sample xls file</a> and compare it to your import file to ensure you have the file perfect for the import.
                        </p>
                    </div>
                </div>

                <!-- Settings -->
                <div class="row align-items-center mb-5 g-3">
                    <div class="col-sm-4 text-sm-end">
                        <label class="form-label mb-0 text-dark fw-medium">Character Encoding <i class="far fa-question-circle text-muted small ms-1"></i></label>
                    </div>
                    <div class="col-sm-8 col-md-6 col-lg-5">
                        <select class="form-select border shadow-none bg-white">
                            <option value="UTF-8">UTF-8 (Unicode)</option>
                            <option value="UTF-16">UTF-16</option>
                            <option value="ISO-8859-1">Western European (ISO-8859-1)</option>
                        </select>
                    </div>
                </div>

                <div class="row align-items-start mb-5 g-3">
                    <div class="col-sm-4"></div>
                    <div class="col-sm-8 col-md-7">
                        <div class="form-check p-0">
                            <input class="form-check-input ms-0 me-2" type="checkbox" name="auto_generate_numbers" id="auto_gen" value="1" checked style="float: none;">
                            <label class="form-check-label fw-bold text-dark" for="auto_gen">Auto-Generate Quote Numbers</label>
                            <p class="text-muted small mt-1 mb-0">Quote numbers will be generated automatically according to your settings. Any Quote numbers in the import file will be ignored.</p>
                        </div>
                    </div>
                </div>

                <!-- Page Tips Section -->
                <div class="card border-0 rounded-3 mb-5" style="background-color: #f8fbff;">
                    <div class="card-body p-4 pt-3">
                        <h6 class="fw-bold text-dark mb-3"><i class="fas fa-lightbulb text-warning me-2 small"></i>Page Tips</h6>
                        <ul class="list-unstyled mb-0 d-flex flex-column gap-2 small text-muted">
                            <li class="d-flex gap-2">
                                <span class="text-dark">•</span>
                                <div>Import data with the details of GST Treatment by referring these <a href="#" class="text-primary text-decoration-none">accepted formats.</a></div>
                            </li>
                            <li class="d-flex gap-2">
                                <span class="text-dark">•</span>
                                <div>You can download the <a href="#" class="text-primary text-decoration-none">sample xls file</a> to get detailed information about the data fields used while importing.</div>
                            </li>
                            <li class="d-flex gap-2">
                                <span class="text-dark">•</span>
                                <div>If you have files in other formats, you can convert it to an accepted file format using any online/offline converter.</div>
                            </li>
                            <li class="d-flex gap-2">
                                <span class="text-dark">•</span>
                                <div>You can configure your import settings and save them for future too!</div>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Sticky Footer Buttons -->
                <div class="position-fixed bottom-0 start-0 w-100 bg-light border-top py-3 px-4 d-flex justify-content-between z-3" style="margin-left: 250px; width: calc(100% - 250px) !important;">
                    <button type="submit" class="btn btn-primary px-4 fw-bold shadow-none border-0" style="background-color: #408dfb;">Next <i class="fas fa-chevron-right ms-1 small"></i></button>
                    <a href="{{ route('quotes.index') }}" class="btn btn-outline-secondary px-4 fw-bold bg-white text-dark shadow-none border">Cancel</a>
                </div>
            </form>
        </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>
.form-select:focus { border-color: #408dfb !important; }
.form-check-input:checked { background-color: #408dfb !important; border-color: #408dfb !important; }
.btn-primary:active, .btn-primary:focus { background-color: #357bd8 !important; }
body { padding-bottom: 80px; }
@media (max-width: 991.98px) {
    .position-fixed.bottom-0 { margin-left: 0 !important; width: 100% !important; }
}
</style>
@endsection