@extends('layouts.app')
@section('title', 'Import Products')
@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('products.index') }}">Products</a></li>
<li class="breadcrumb-item active">Import Excel</li>
@endsection
@section('content')

<div class="page-header">
    <h1 class="page-title"><i class="bi bi-file-earmark-excel me-2" style="color:#059669;"></i>Import Products from Excel</h1>
    <p class="page-subtitle">Bulk-add or update products and their variants using an Excel file</p>
</div>

<div class="row g-3">

    {{-- ══════════════ LEFT: Steps + Upload ══════════════ --}}
    <div class="col-12 col-lg-7">

        <div class="card mb-3">
            <div class="card-header fw-600"><i class="bi bi-list-ol me-2"></i>How it works</div>
            <div class="card-body">
                <div class="d-flex gap-3 mb-3">
                    <div class="flex-shrink-0 d-flex align-items-center justify-content-center"
                         style="width:32px;height:32px;border-radius:50%;background:#eff6ff;color:#1d4ed8;font-weight:700;">1</div>
                    <div>
                        <div class="fw-600">Download the template</div>
                        <div class="text-muted" style="font-size:.85rem;">
                            It includes column instructions and a few example rows so you can see exactly how to fill it in.
                        </div>
                    </div>
                </div>
                <div class="d-flex gap-3 mb-3">
                    <div class="flex-shrink-0 d-flex align-items-center justify-content-center"
                         style="width:32px;height:32px;border-radius:50%;background:#eff6ff;color:#1d4ed8;font-weight:700;">2</div>
                    <div>
                        <div class="fw-600">Fill in your products</div>
                        <div class="text-muted" style="font-size:.85rem;">
                            One row = one product + one variant. If a product has several variants, add one row per variant and repeat the product name.
                        </div>
                    </div>
                </div>
                <div class="d-flex gap-3">
                    <div class="flex-shrink-0 d-flex align-items-center justify-content-center"
                         style="width:32px;height:32px;border-radius:50%;background:#eff6ff;color:#1d4ed8;font-weight:700;">3</div>
                    <div>
                        <div class="fw-600">Upload it below</div>
                        <div class="text-muted" style="font-size:.85rem;">
                            New products are created automatically. Re-uploading the same file later (e.g. to fix a typo) safely updates existing rows instead of duplicating them.
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header fw-600"><i class="bi bi-download me-2"></i>Step 1 — Get the Template</div>
            <div class="card-body">
                <p class="text-muted mb-3" style="font-size:.875rem;">
                    The template has an <strong>Instructions</strong> sheet explaining every column, and a
                    <strong>Products</strong> sheet where you'll enter your data.
                </p>
                <a href="{{ route('products.import.template') }}" class="btn btn-outline-success">
                    <i class="bi bi-file-earmark-arrow-down me-1"></i> Download Excel Template
                </a>
            </div>
        </div>

        <div class="card">
            <div class="card-header fw-600"><i class="bi bi-upload me-2"></i>Step 2 — Upload Your File</div>
            <div class="card-body">
                <form method="POST" action="{{ route('products.import.store') }}" enctype="multipart/form-data" id="importForm">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Excel File <span class="text-danger">*</span></label>
                        <input type="file" name="file" id="fileInput" class="form-control @error('file') is-invalid @enderror"
                               accept=".xlsx,.xls" required>
                        @error('file')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        <small class="text-muted" style="font-size:.75rem;">Accepted formats: .xlsx, .xls — Max size: 10MB</small>
                    </div>
                    <button type="submit" class="btn btn-primary" id="importBtn">
                        <span id="importBtnText"><i class="bi bi-cloud-upload me-1"></i>Upload & Import</span>
                        <span id="importBtnSpinner" class="d-none spinner-border spinner-border-sm"></span>
                    </button>
                </form>
            </div>
        </div>

    </div>

    {{-- ══════════════ RIGHT: Quick reference ══════════════ --}}
    <div class="col-12 col-lg-5">
        <div class="card" style="position:sticky;top:76px;">
            <div class="card-header fw-600"><i class="bi bi-info-circle me-2"></i>Quick Column Reference</div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm mb-0" style="font-size:.8rem;">
                        <thead style="background:#f8fafc;">
                            <tr>
                                <th>Column</th>
                                <th>Required</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr><td>Product Name</td><td><span class="badge bg-danger-subtle text-danger-emphasis">Required</span></td></tr>
                            <tr><td>Category</td><td><span class="badge bg-danger-subtle text-danger-emphasis">Required</span></td></tr>
                            <tr><td>Variant Name</td><td><span class="badge bg-danger-subtle text-danger-emphasis">Required</span></td></tr>
                            <tr><td>Purchase Price</td><td><span class="badge bg-danger-subtle text-danger-emphasis">Required</span></td></tr>
                            <tr><td>Selling Price</td><td><span class="badge bg-danger-subtle text-danger-emphasis">Required</span></td></tr>
                            <tr><td>Brand</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                            <tr><td>Product Type</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                            <tr><td>Serial Tracked</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                            <tr><td>Warranty Months</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                            <tr><td>Unit</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                            <tr><td>Description</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                            <tr><td>Product SKU</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                            <tr><td>Variant SKU</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                            <tr><td>Barcode</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                            <tr><td>Cost Price</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                            <tr><td>Wholesale Price</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                            <tr><td>Opening Stock</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                            <tr><td>Min Stock Alert</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                            <tr><td>Reorder Level</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                            <tr><td>Is Active</td><td><span class="badge bg-success-subtle text-success-emphasis">Optional</span></td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="p-3" style="background:#fffbeb;border-top:1px solid #fde68a;font-size:.78rem;color:#92400e;">
                    <i class="bi bi-exclamation-triangle me-1"></i>
                    SKU/Barcode columns left blank are auto-generated — leave them blank unless you already use your own codes.
                </div>
            </div>
        </div>
    </div>

</div>

{{-- ══════════════ Error report (shown after a failed/partial import) ══════════════ --}}
@if(session('importErrors') && count(session('importErrors')) > 0)
<div class="card mt-3 border-danger">
    <div class="card-header bg-danger-subtle text-danger-emphasis fw-600">
        <i class="bi bi-exclamation-circle me-2"></i>Rows Skipped Due to Errors
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm mb-0">
                <thead style="background:#f8fafc;">
                    <tr><th style="width:100px;">Excel Row</th><th>Error</th></tr>
                </thead>
                <tbody>
                    @foreach(session('importErrors') as $err)
                    <tr>
                        <td class="fw-600">Row {{ $err['row'] }}</td>
                        <td>{{ $err['message'] }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif

@endsection

@push('scripts')
<script>
document.getElementById('importForm').addEventListener('submit', function () {
    document.getElementById('importBtn').disabled = true;
    document.getElementById('importBtnText').classList.add('d-none');
    document.getElementById('importBtnSpinner').classList.remove('d-none');
});
</script>
@endpush