@extends('admin::layouts.master')

@section('title', 'Import Products')

@section('content')
    <h1 class="text-2xl font-bold mb-6">Import Products</h1>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold mb-4">Upload CSV / Excel File</h2>
            <form method="POST" action="{{ route('admin.products.import.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">File</label>
                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-400 transition cursor-pointer relative"
                         onclick="document.getElementById('import_file').click()">
                        <div class="space-y-1 text-center" id="import_file_placeholder">
                            <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <p class="text-sm text-gray-600"><span class="text-blue-600 font-medium">Click to upload</span> or drag and drop</p>
                            <p class="text-xs text-gray-500">CSV, XLSX files only</p>
                        </div>
                        <p id="import_file_name" class="hidden text-sm text-gray-700 font-medium"></p>
                    </div>
                    <input type="file" name="file" id="import_file" accept=".csv,.xlsx,.xls" class="hidden"
                           onchange="document.getElementById('import_file_name').textContent = this.files[0].name; document.getElementById('import_file_placeholder').classList.add('hidden'); document.getElementById('import_file_name').classList.remove('hidden')">
                    @error('file') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                </div>
                <p class="text-xs text-gray-500 mb-4">The first row must contain column headers. See the template on the right for expected columns.</p>
                <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">Import</button>
                <a href="{{ route('admin.products.index') }}" class="ml-2 bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">Cancel</a>
            </form>

            @if(session('import_results'))
                <div class="mt-6 p-4 rounded-lg {{ session('import_results.success') > 0 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                    <p class="font-semibold">
                        {{ session('import_results.success') }} products imported successfully.
                        {{ session('import_results.errors') > 0 ? session('import_results.errors') . ' rows had errors.' : '' }}
                    </p>
                    @if(session('import_results.failures'))
                        <ul class="mt-2 text-sm list-disc list-inside">
                            @foreach(session('import_results.failures') as $failure)
                                <li>Row {{ $failure->row() }}: {{ implode(', ', $failure->errors()) }}</li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            @endif
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold mb-4">Template</h2>
            <p class="text-sm text-gray-600 mb-4">Your file must include these columns in the first row:</p>
            <div class="overflow-x-auto">
                <table class="w-full text-sm border-collapse">
                    <thead>
                        <tr class="bg-gray-100">
                            <th class="px-3 py-2 border text-left font-medium">Column</th>
                            <th class="px-3 py-2 border text-left font-medium">Required</th>
                            <th class="px-3 py-2 border text-left font-medium">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td class="px-3 py-2 border">name</td><td class="px-3 py-2 border text-red-600">Yes</td><td class="px-3 py-2 border">Product name</td></tr>
                        <tr><td class="px-3 py-2 border">slug</td><td class="px-3 py-2 border text-yellow-600">No</td><td class="px-3 py-2 border">Auto-generated from name if empty</td></tr>
                        <tr><td class="px-3 py-2 border">price</td><td class="px-3 py-2 border text-red-600">Yes</td><td class="px-3 py-2 border">Product price (numeric)</td></tr>
                        <tr><td class="px-3 py-2 border">description</td><td class="px-3 py-2 border text-yellow-600">No</td><td class="px-3 py-2 border">Product description</td></tr>
                        <tr><td class="px-3 py-2 border">unit</td><td class="px-3 py-2 border text-yellow-600">No</td><td class="px-3 py-2 border">e.g. kg, Stück, Packung</td></tr>
                        <tr><td class="px-3 py-2 border">unit_price</td><td class="px-3 py-2 border text-yellow-600">No</td><td class="px-3 py-2 border">Price per unit for comparison</td></tr>
                        <tr><td class="px-3 py-2 border">brand</td><td class="px-3 py-2 border text-yellow-600">No</td><td class="px-3 py-2 border">Brand name</td></tr>
                        <tr><td class="px-3 py-2 border">discount</td><td class="px-3 py-2 border text-yellow-600">No</td><td class="px-3 py-2 border">Discount percentage (0-100)</td></tr>
                        <tr><td class="px-3 py-2 border">stock_quantity</td><td class="px-3 py-2 border text-yellow-600">No</td><td class="px-3 py-2 border">Stock count (default 0)</td></tr>
                        <tr><td class="px-3 py-2 border">category_id</td><td class="px-3 py-2 border text-yellow-600">No</td><td class="px-3 py-2 border">Category ID number</td></tr>
                        <tr><td class="px-3 py-2 border">is_active</td><td class="px-3 py-2 border text-yellow-600">No</td><td class="px-3 py-2 border">true/false (default true)</td></tr>
                        <tr><td class="px-3 py-2 border">is_save_the_food</td><td class="px-3 py-2 border text-yellow-600">No</td><td class="px-3 py-2 border">true/false (default false)</td></tr>
                        <tr><td class="px-3 py-2 border">is_weekly_special</td><td class="px-3 py-2 border text-yellow-600">No</td><td class="px-3 py-2 border">true/false (default false)</td></tr>
                        <tr><td class="px-3 py-2 border">nutri_score</td><td class="px-3 py-2 border text-yellow-600">No</td><td class="px-3 py-2 border">A, B, C, D, or E</td></tr>
                        <tr><td class="px-3 py-2 border">ingredients</td><td class="px-3 py-2 border text-yellow-600">No</td><td class="px-3 py-2 border">Ingredient list</td></tr>
                        <tr><td class="px-3 py-2 border">allergens_info</td><td class="px-3 py-2 border text-yellow-600">No</td><td class="px-3 py-2 border">Allergen information</td></tr>
                    </tbody>
                </table>
            </div>
            <p class="text-xs text-gray-500 mt-4">Download <a href="{{ route('admin.products.import.template') }}" class="text-blue-600 hover:underline">example CSV template</a>.</p>
        </div>
    </div>
@endsection