@extends('layouts.bootstrap')

@section('title', 'Import Products for ' . $tender->name)

@section('header')
    <h1 class="h3 mb-0">
        <i class="bi bi-upload me-2"></i>Import Products
    </h1>
    <div>
        <a href="{{ route('tenders.show', $tender) }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back to Tender
        </a>
    </div>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card shadow">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-1">
                                <i class="bi bi-upload me-2"></i>Import Products
                            </h4>
                            <p class="text-muted mb-0">
                                Import products for tender: <strong>{{ $tender->name }}</strong> ({{ $tender->reference_number }})
                            </p>
                        </div>
                        <a href="{{ route('tenders.show', $tender) }}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left me-1"></i>Back to Tender
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert-danger">
                            <h6><i class="bi bi-exclamation-triangle me-2"></i>Please fix the following errors:</h6>
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <!-- Import Instructions -->
                    <div class="alert alert-info">
                        <h6><i class="bi bi-info-circle me-2"></i>Import Instructions</h6>
                        <ul class="mb-0">
                            <li><strong>Duplicate Detection:</strong> Products with identical names will be automatically skipped</li>
                            <li><strong>Similarity Check:</strong> Products >90% similar to existing ones will require manual verification</li>
                            <li><strong>Auto Import:</strong> Products <90% similar will be imported automatically</li>
                            <li><strong>CSV Format:</strong> Product Name (required), Country, Subcategory, Price, Unit, Description, Quantity</li>
                        </ul>
                    </div>

                    <form method="POST" action="{{ route('tenders.import', $tender) }}" enctype="multipart/form-data">
                        @csrf

                        <!-- Category Selection -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="bi bi-tags me-2"></i>Step 1: Select Category (Optional)
                                </h5>
                                <p class="text-muted">Choose a category to organize imported products. This is optional but recommended for better organization.</p>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="category_id" class="form-label">Category</label>
                                <select class="form-select" id="category_id" name="category_id">
                                    <option value="">Select a category (optional)</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="form-text">Products will be organized under this category</div>
                            </div>
                            <div class="col-md-6" id="subcategory_container" style="display: none;">
                                <label for="subcategory_preview" class="form-label">Available Subcategories</label>
                                <div id="subcategory_list" class="border rounded p-2 bg-light">
                                    <small class="text-muted">Select a category to see available subcategories</small>
                                </div>
                            </div>
                        </div>

                        <!-- File Upload -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="bi bi-file-earmark-spreadsheet me-2"></i>Step 2: Upload CSV File
                                </h5>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-8">
                                <label for="csv_file" class="form-label">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,.txt" required>
                                @error('csv_file')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">
                                    <i class="bi bi-info-circle me-1"></i>
                                    Maximum file size: 2MB. Supported formats: CSV, TXT
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check mt-4">
                                    <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)
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- CSV Format Guide -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="bi bi-table me-2"></i>Step 3: CSV Format Guide
                                </h5>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6>Required CSV Format:</h6>
                                        <div class="table-responsive">
                                            <table class="table table-sm table-bordered">
                                                <thead class="table-dark">
                                                    <tr>
                                                        <th>Column 1</th>
                                                        <th>Column 2</th>
                                                        <th>Column 3</th>
                                                        <th>Column 4</th>
                                                        <th>Column 5</th>
                                                        <th>Column 6</th>
                                                        <th>Column 7</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td><strong>Product Name</strong><br><small class="text-danger">Required</small></td>
                                                        <td><strong>Country of Origin</strong><br><small class="text-muted">Optional</small></td>
                                                        <td><strong>Subcategory</strong><br><small class="text-muted">Optional</small></td>
                                                        <td><strong>Price (BDT)</strong><br><small class="text-muted">Optional</small></td>
                                                        <td><strong>Measurement Unit</strong><br><small class="text-muted">Optional</small></td>
                                                        <td><strong>Description</strong><br><small class="text-muted">Optional</small></td>
                                                        <td><strong>Quantity Required</strong><br><small class="text-muted">Optional (default: 1)</small></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        
                                        <h6 class="mt-3">Sample CSV Data:</h6>
                                        <div class="bg-white p-2 border rounded">
                                            <code>
                                                Product Name,Country of Origin,Subcategory,Price,Measurement Unit,Description,Quantity<br>
                                                "Office Chair","China","Furniture",15000,"piece","Ergonomic office chair with lumbar support",10<br>
                                                "Laptop Computer","USA","Electronics",85000,"piece","Business laptop with 16GB RAM",5<br>
                                                "Printer Paper","India","Stationery",500,"ream","A4 size white paper 80gsm",50
                                            </code>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Import Options -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="bi bi-gear me-2"></i>Step 4: Import Options
                                </h5>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="card border-info">
                                    <div class="card-body">
                                        <h6 class="card-title text-info">
                                            <i class="bi bi-shield-check me-2"></i>Duplicate Detection
                                        </h6>
                                        <p class="card-text small">
                                            Products with identical names will be automatically skipped to prevent duplicates in this tender.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card border-warning">
                                    <div class="card-body">
                                        <h6 class="card-title text-warning">
                                            <i class="bi bi-search me-2"></i>Similarity Check
                                        </h6>
                                        <p class="card-text small">
                                            Products >90% similar to existing products will require manual verification before import.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('tenders.show', $tender) }}" class="btn btn-outline-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
                                </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>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const categorySelect = document.getElementById('category_id');
    const subcategoryContainer = document.getElementById('subcategory_container');
    const subcategoryList = document.getElementById('subcategory_list');

    // Handle category selection
    categorySelect.addEventListener('change', function() {
        const categoryId = this.value;
        
        if (categoryId) {
            // Show subcategory container
            subcategoryContainer.style.display = 'block';
            subcategoryList.innerHTML = '<div class="spinner-border spinner-border-sm me-2"></div>Loading subcategories...';
            
            // Fetch subcategories
            fetch(`/categories/${categoryId}/subcategories`)
                .then(response => response.json())
                .then(data => {
                    if (data.length > 0) {
                        let html = '<small class="text-muted d-block mb-2">Available subcategories for CSV:</small>';
                        data.forEach(subcategory => {
                            html += `<span class="badge bg-secondary me-1 mb-1">${subcategory.name}</span>`;
                        });
                        subcategoryList.innerHTML = html;
                    } else {
                        subcategoryList.innerHTML = '<small class="text-muted">No subcategories available for this category</small>';
                    }
                })
                .catch(error => {
                    subcategoryList.innerHTML = '<small class="text-danger">Error loading subcategories</small>';
                });
        } else {
            subcategoryContainer.style.display = 'none';
        }
    });

    // Show loading state on form submission
    const form = document.querySelector('form[action*="import"]');
    const importBtn = document.getElementById('import_btn');
    
    if (form && importBtn) {
        form.addEventListener('submit', function(e) {
            // 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>Checking for duplicates and similarities. This may take a moment.</small>
                    </div>
                </div>
            `;
            form.appendChild(processingAlert);
        });
    }
});
</script>
@endpush
@endsection