@extends('layouts.seller')

@section('title', 'Bulk Product Upload')

@section('content')
<div class="page-header">
    <div>
        <h4 class="page-title">Bulk Product Upload</h4>
        <p class="text-muted mb-0">Import multiple products using CSV file</p>
    </div>
    <a href="{{ route('seller.products.index') }}" class="btn btn-light border">
        <i class="bi bi-arrow-left me-1"></i> Back to Products
    </a>
</div>

<div class="row g-4">
    <!-- Upload Section -->
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3">
                <h6 class="fw-bold mb-0"><i class="bi bi-cloud-upload text-primary me-2"></i>Upload CSV File</h6>
            </div>
            <div class="card-body p-4">
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="bi bi-exclamation-circle me-2"></i>{{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if(session('bulk_errors') && count(session('bulk_errors')) > 0)
                    <div class="alert alert-warning">
                        <h6 class="fw-bold mb-2"><i class="bi bi-exclamation-triangle me-2"></i>Upload Errors:</h6>
                        <ul class="mb-0 small">
                            @foreach(session('bulk_errors') as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if($remainingSlots > 0)
                    <form action="{{ route('seller.products.bulk-upload.upload') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="upload-area text-center p-5 border-2 border-dashed rounded-3 bg-light mb-4" 
                             id="dropZone"
                             style="border-style: dashed !important;">
                            <div class="mb-3">
                                <i class="bi bi-file-earmark-spreadsheet display-3 text-primary opacity-50"></i>
                            </div>
                            <h5 class="fw-bold text-dark">Drag & Drop your CSV file here</h5>
                            <p class="text-muted mb-3">or click to browse</p>
                            <input type="file" name="csv_file" id="csvFile" class="d-none" accept=".csv,.txt" required>
                            <label for="csvFile" class="btn btn-primary-gradient px-4">
                                <i class="bi bi-upload me-2"></i>Choose File
                            </label>
                            <div id="fileName" class="mt-3 text-success fw-bold d-none"></div>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{{ route('seller.products.bulk-upload.template') }}" class="btn btn-outline-primary">
                                <i class="bi bi-download me-2"></i>Download Template
                            </a>
                            <button type="submit" class="btn btn-success px-4" id="uploadBtn" disabled>
                                <i class="bi bi-cloud-upload me-2"></i>Upload Products
                            </button>
                        </div>
                    </form>
                @else
                    <div class="text-center py-5">
                        <i class="bi bi-exclamation-circle display-3 text-warning mb-3"></i>
                        <h5 class="fw-bold">Product Limit Reached</h5>
                        <p class="text-muted">You've used all {{ $productLimit }} product slots.</p>
                        <a href="{{ route('seller.subscription.index') }}" class="btn btn-primary">
                            <i class="bi bi-star me-2"></i>Upgrade Plan
                        </a>
                    </div>
                @endif
            </div>
        </div>

        <!-- Recent Uploads -->
        @if($recentUploads->count() > 0)
        <div class="card border-0 shadow-sm mt-4">
            <div class="card-header bg-white py-3">
                <h6 class="fw-bold mb-0"><i class="bi bi-clock-history text-primary me-2"></i>Recently Uploaded (Last 24h)</h6>
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Product Name</th>
                            <th>Category</th>
                            <th>Price</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentUploads as $product)
                        <tr>
                            <td class="fw-bold">{{ Str::limit($product->name, 40) }}</td>
                            <td><span class="badge bg-light text-dark">{{ $product->category->name ?? 'N/A' }}</span></td>
                            <td>₹{{ number_format($product->price) }}</td>
                            <td>
                                <span class="badge bg-{{ $product->is_approved ? 'success' : 'warning' }}">
                                    {{ $product->is_approved ? 'Approved' : 'Pending' }}
                                </span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif
    </div>

    <!-- Instructions -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-primary text-white py-3">
                <h6 class="fw-bold mb-0 text-white"><i class="bi bi-info-circle me-2"></i>Instructions</h6>
            </div>
            <div class="card-body">
                <ol class="ps-3 mb-4">
                    <li class="mb-2">Download the CSV template</li>
                    <li class="mb-2">Fill in product details (one product per row)</li>
                    <li class="mb-2">Save the file as CSV format</li>
                    <li class="mb-2">Upload the file here</li>
                    <li class="mb-2">Products will be pending admin approval</li>
                </ol>

                <div class="alert alert-info small mb-3">
                    <i class="bi bi-lightbulb me-1"></i>
                    <strong>Tip:</strong> Images must be added manually after upload through the edit page.
                </div>

                <div class="border rounded-3 p-3 bg-light">
                    <h6 class="fw-bold mb-2">Product Slots</h6>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Used:</span>
                        <strong>{{ $currentCount }} / {{ $productLimit }}</strong>
                    </div>
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar bg-{{ $remainingSlots > 0 ? 'success' : 'danger' }}" 
                             style="width: {{ ($currentCount / $productLimit) * 100 }}%"></div>
                    </div>
                    <small class="text-muted mt-2 d-block">{{ $remainingSlots }} slots remaining</small>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mt-4">
            <div class="card-header bg-white py-3">
                <h6 class="fw-bold mb-0"><i class="bi bi-list-columns text-primary me-2"></i>CSV Columns</h6>
            </div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    <tbody>
                        <tr><td class="ps-3"><code>product_name</code></td><td>Required</td></tr>
                        <tr><td class="ps-3"><code>category_id</code></td><td>Required (number)</td></tr>
                        <tr><td class="ps-3"><code>description</code></td><td>Required</td></tr>
                        <tr><td class="ps-3"><code>price</code></td><td>Required (number)</td></tr>
                        <tr><td class="ps-3"><code>moq</code></td><td>Required (min order qty)</td></tr>
                        <tr><td class="ps-3"><code>stock</code></td><td>Required (number)</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card border-0 shadow-sm mt-4 bg-warning-subtle">
            <div class="card-body">
                <h6 class="fw-bold text-warning mb-2"><i class="bi bi-shield-exclamation me-2"></i>Categories</h6>
                <div class="small">
                    @foreach($categories->take(10) as $category)
                        <span class="badge bg-light text-dark me-1 mb-1">{{ $category->id }}: {{ $category->name }}</span>
                    @endforeach
                    @if($categories->count() > 10)
                        <span class="text-muted">+{{ $categories->count() - 10 }} more in template</span>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('csvFile');
    const fileName = document.getElementById('fileName');
    const uploadBtn = document.getElementById('uploadBtn');

    // File input change
    fileInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            fileName.textContent = '✓ ' + this.files[0].name;
            fileName.classList.remove('d-none');
            uploadBtn.disabled = false;
        }
    });

    // Drag and drop
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, () => dropZone.classList.add('bg-primary-subtle'), false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, () => dropZone.classList.remove('bg-primary-subtle'), false);
    });

    dropZone.addEventListener('drop', function(e) {
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            fileName.textContent = '✓ ' + files[0].name;
            fileName.classList.remove('d-none');
            uploadBtn.disabled = false;
        }
    });
});
</script>
@endsection
