@extends('layouts.bootstrap')

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

@section('header')
    <h1 class="h3 mb-0">
        <i class="bi bi-upload me-2"></i>Import Products
    </h1>
    <a href="{{ route('products.index') }}" class="btn btn-secondary">
        <i class="bi bi-arrow-left me-1"></i>Back to Products
    </a>
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="bi bi-upload me-2"></i>Category-Specific Product Import
                </h6>
            </div>
            <div class="card-body">
                <!-- Step 1: Category Selection -->
                <div class="mb-4">
                    <h6 class="text-primary">
                        <i class="bi bi-1-circle me-2"></i>Step 1: Select Category
                    </h6>
                    <p class="text-muted mb-3">Choose the category that all products in your CSV will belong to:</p>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="category_select" class="form-label">Category <span class="text-danger">*</span></label>
                            <select class="form-select" id="category_select" name="category_select">
                                <option value="">Select a category...</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" data-name="{{ $category->name }}">
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Instructions (Dynamic based on category) -->
                <div class="alert alert-info mb-4" id="instructions_section" style="display: none;">
                    <h6><i class="bi bi-info-circle me-2"></i>CSV Format for <span id="selected_category_name"></span></h6>
                    <p class="mb-2">Upload a CSV file with the following simplified format (no category column needed):</p>
                    <div class="bg-light p-3 rounded">
                        <code>Product Name,Country of Origin,Subcategory,Price,Measurement Unit,Description</code>
                    </div>
                    <ul class="mt-3 mb-2">
                        <li><strong>Product Name:</strong> Required - Name of the product</li>
                        <li><strong>Country of Origin:</strong> Optional - Country where product is made</li>
                        <li><strong>Subcategory:</strong> Optional - Must match existing subcategory names for <span id="selected_category_name2"></span></li>
                        <li><strong>Price:</strong> Optional - Numeric value (e.g., 29.99)</li>
                        <li><strong>Measurement Unit:</strong> Optional - Unit of measurement (e.g., kg, lbs, pieces)</li>
                        <li><strong>Description:</strong> Optional - Product description</li>
                    </ul>
                    <p class="mb-0">
                        <small class="text-success">
                            <i class="bi bi-check-circle me-1"></i>
                            <strong>Category will be automatically set to "<span id="selected_category_name3"></span>" for all products!</strong>
                        </small>
                    </p>

                    <!-- Available Subcategories -->
                    <div class="mt-3">
                        <h6>Available Subcategories for <span id="selected_category_name4"></span>:</h6>
                        <div id="subcategories_list" class="bg-light p-2 rounded">
                            <!-- Will be populated dynamically -->
                        </div>
                    </div>
                </div>

                <!-- Sample CSV Format (Dynamic) -->
                <div class="card mb-4" id="sample_section" style="display: none;">
                    <div class="card-header">
                        <h6 class="mb-0">Sample CSV Format for <span id="selected_category_name5"></span></h6>
                    </div>
                    <div class="card-body">
                        <pre class="bg-light p-3 rounded" id="sample_csv_content"><code></code></pre>
                        <p class="mt-2 mb-0">
                            <small class="text-muted">
                                First row can be a header (will be skipped if you check the option below).
                            </small>
                        </p>
                    </div>
                </div>

                <!-- Step 2: Upload Form -->
                <div id="upload_section" style="display: none;">
                    <h6 class="text-primary mb-3">
                        <i class="bi bi-2-circle me-2"></i>Step 2: Upload CSV File
                    </h6>

                    <form action="{{ route('products.import') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" id="selected_category_id" name="category_id" value="">

                    <div class="mb-3">
                        <label for="csv_file" class="form-label">Select CSV File <span class="text-danger">*</span></label>
                        <input type="file"
                               class="form-control @error('csv_file') is-invalid @enderror"
                               id="csv_file"
                               name="csv_file"
                               accept=".csv"
                               required>
                        @error('csv_file')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                        <div class="form-text">
                            Only CSV files are allowed. Maximum size: 2MB.
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="skip_header" name="skip_header" value="1" checked>
                            <label class="form-check-label" for="skip_header">
                                Skip first row (header row)
                            </label>
                        </div>
                        <div class="form-text">
                            Check this if your CSV file has column headers in the first row.
                        </div>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ route('products.index') }}" class="btn btn-secondary">
                            <i class="bi bi-x-circle me-1"></i>Cancel
                        </a>
                        <button type="submit" class="btn btn-primary" id="import_btn">
                            <span class="btn-text">
                                <i class="bi bi-upload me-1"></i>Import Products for <span id="selected_category_name6"></span>
                            </span>
                            <span class="btn-loading" style="display: none;">
                                <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                                Processing...
                            </span>
                        </button>
                    </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Download Sample -->
        <div class="card shadow mt-4" id="download_section" style="display: none;">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Download Sample</h6>
            </div>
            <div class="card-body">
                <p>Download a sample CSV file for <span id="selected_category_name7"></span>:</p>
                <a href="#" id="download_sample_btn" class="btn btn-outline-success">
                    <i class="bi bi-download me-1"></i>Download Sample CSV for <span id="selected_category_name8"></span>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Category selection handler
document.getElementById('category_select').addEventListener('change', function() {
    const categoryId = this.value;
    const categoryName = this.options[this.selectedIndex].dataset.name;

    if (categoryId) {
        // Show sections
        document.getElementById('instructions_section').style.display = 'block';
        document.getElementById('sample_section').style.display = 'block';
        document.getElementById('upload_section').style.display = 'block';
        document.getElementById('download_section').style.display = 'block';

        // Update category names in all spans
        const categorySpans = document.querySelectorAll('[id^="selected_category_name"]');
        categorySpans.forEach(span => span.textContent = categoryName);

        // Set hidden category ID
        document.getElementById('selected_category_id').value = categoryId;

        // Load subcategories for this category
        loadSubcategories(categoryId, categoryName);

        // Update download link
        document.getElementById('download_sample_btn').href = `{{ route('products.export') }}?sample=1&category_id=${categoryId}`;
    } else {
        // Hide sections
        document.getElementById('instructions_section').style.display = 'none';
        document.getElementById('sample_section').style.display = 'none';
        document.getElementById('upload_section').style.display = 'none';
        document.getElementById('download_section').style.display = 'none';
    }
});

// Load subcategories for selected category
function loadSubcategories(categoryId, categoryName) {
    fetch(`/categories/${categoryId}/subcategories`)
        .then(response => response.json())
        .then(data => {
            const subcategoriesList = document.getElementById('subcategories_list');
            if (data.length > 0) {
                const subcategoryNames = data.map(sub => `<span class="badge bg-secondary me-1 mb-1">${sub.name}</span>`).join('');
                subcategoriesList.innerHTML = subcategoryNames;

                // Generate sample CSV
                generateSampleCSV(data, categoryName);
            } else {
                subcategoriesList.innerHTML = '<span class="text-muted">No subcategories available for this category.</span>';
            }
        })
        .catch(error => {
            console.error('Error loading subcategories:', error);
            document.getElementById('subcategories_list').innerHTML = '<span class="text-danger">Error loading subcategories.</span>';
        });
}

// Generate sample CSV content
function generateSampleCSV(subcategories, categoryName) {
    const sampleData = [
        'Product Name,Country of Origin,Subcategory,Price,Measurement Unit,Description'
    ];

    // Add sample rows based on subcategories
    if (subcategories.length > 0) {
        const firstSub = subcategories[0];
        sampleData.push(`"Sample Product 1","USA","${firstSub.name}",29.99,"pieces","Sample product description"`);

        if (subcategories.length > 1) {
            const secondSub = subcategories[1];
            sampleData.push(`"Sample Product 2","Canada","${secondSub.name}",45.50,"kg","Another sample product"`);
        }
    }

    document.getElementById('sample_csv_content').innerHTML = sampleData.join('\n');
}

// File size validation
document.addEventListener('DOMContentLoaded', function() {
    const csvFileInput = document.getElementById('csv_file');
    if (csvFileInput) {
        csvFileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const fileSize = file.size / 1024 / 1024; // Convert to MB
                if (fileSize > 2) {
                    alert('File size must be less than 2MB');
                    e.target.value = '';
                }
            }
        });
    }
});

// Show loading state on form submission
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form[action*="import"]');
    const importBtn = document.getElementById('import_btn');

    if (form && importBtn) {
        form.addEventListener('submit', function(e) {
            // Validate that category is selected
            const categoryId = document.getElementById('selected_category_id').value;
            if (!categoryId) {
                e.preventDefault();
                alert('Please select a category first.');
                return;
            }

            // Validate that file is selected
            const fileInput = document.getElementById('csv_file');
            if (!fileInput.files.length) {
                e.preventDefault();
                alert('Please select a CSV file to import.');
                return;
            }

            // Show loading state
            importBtn.disabled = true;
            importBtn.querySelector('.btn-text').style.display = 'none';
            importBtn.querySelector('.btn-loading').style.display = 'inline-block';

            // Show processing message
            const processingAlert = document.createElement('div');
            processingAlert.className = 'alert alert-info mt-3';
            processingAlert.innerHTML = `
                <div class="d-flex align-items-center">
                    <div class="spinner-border spinner-border-sm me-3" role="status"></div>
                    <div>
                        <strong>Processing your CSV file...</strong><br>
                        <small>This may take a moment. We're checking for duplicates and similarities.</small>
                    </div>
                </div>
            `;
            form.appendChild(processingAlert);
        });
    }
});
</script>
@endpush