@extends('layouts.seller')

@section('title', 'Add Product')

@section('content')
@section('content')
<div class="page-header">
    <div>
        <h4 class="page-title">Add New Product</h4>
        <p class="text-muted mb-0">Create a new product listing for your store</p>
    </div>
    <a href="{{ route('seller.products.index') }}" class="btn btn-light">
        <i class="bi bi-arrow-left me-1"></i> Back to Products
    </a>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header bg-white py-3 border-bottom">
                <h6 class="fw-bold mb-0 text-primary"><i class="bi bi-box-seam me-2"></i>Product Details</h6>
            </div>
            <div class="card-body p-4">
                <form action="{{ route('seller.products.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-4">
                        <label class="form-label fw-bold">Product Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-lg @error('name') is-invalid @enderror" name="name" 
                               value="{{ old('name') }}" required placeholder="e.g. Premium Cotton Shirt">
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-4">
                        <label class="form-label fw-bold">Description <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('description') is-invalid @enderror" name="description" 
                                  rows="5" required placeholder="Describe your product features, benefits, and details...">{{ old('description') }}</textarea>
                        @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="row g-4 mb-4">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Category <span class="text-danger">*</span></label>
                            <select class="form-select @error('category_id') is-invalid @enderror" name="category_id" required>
                                <option value="">Select Category</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Price <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <select class="form-select bg-light" name="currency" style="max-width: 100px;">
                                    <option value="INR" {{ old('currency') == 'INR' ? 'selected' : '' }}>₹ INR</option>
                                    <option value="USD" {{ old('currency') == 'USD' ? 'selected' : '' }}>$ USD</option>
                                </select>
                                <input type="number" class="form-control" name="price" step="0.01" value="{{ old('price') }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Stock Quantity <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="stock" value="{{ old('stock', 0) }}" min="0" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">MOQ <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="moq" value="{{ old('moq') }}" min="{{ $minMoq }}" max="{{ $maxMoq }}" required placeholder="Min Order Qty">
                            <small class="text-muted">Allowed Range: {{ $minMoq }} - {{ $maxMoq }}</small>
                        </div>
                    </div>

                    <hr class="my-4 border-light">

                    <h6 class="fw-bold mb-3 text-primary"><i class="bi bi-list-ul me-2"></i>Specifications (Optional)</h6>
                    <div id="specifications-container" class="mb-3">
                        <div class="row g-2 mb-2 spec-row">
                            <div class="col-5">
                                <input type="text" class="form-control bg-light" name="specifications[0][key]" placeholder="Key (e.g. Color)">
                            </div>
                            <div class="col-5">
                                <input type="text" class="form-control bg-light" name="specifications[0][value]" placeholder="Value (e.g. Red)">
                            </div>
                            <div class="col-2">
                                <button type="button" class="btn btn-light text-danger w-100 remove-spec" disabled><i class="bi bi-trash"></i></button>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-light btn-sm mb-4 text-primary" id="add-spec-btn">
                        <i class="bi bi-plus-lg me-1"></i>Add Specification
                    </button>

                    <hr class="my-4 border-light">

                    <div class="mb-4">
                        <label class="form-label fw-bold"><i class="bi bi-images me-2 text-primary"></i>Product Images (Max {{ $imageLimit }}) <span class="text-danger">*</span></label>
                        <div class="p-4 border border-dashed rounded-3 bg-light text-center">
                            <input type="file" class="form-control mb-2" name="images[]" multiple accept="image/*" required>
                            <small class="text-muted d-block">First image will be the thumbnail. Supported: jpeg, png, jpg</small>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 pt-2">
                        <button type="button" class="btn btn-light px-4" onclick="window.history.back()">Cancel</button>
                        <button type="submit" class="btn btn-primary-gradient px-4">
                            <i class="bi bi-check-lg me-1"></i>Create Product
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card bg-primary bg-opacity-10 border-0">
            <div class="card-body">
                <h6 class="fw-bold mb-3 text-primary"><i class="bi bi-lightbulb me-2"></i>Pro Tips</h6>
                <ul class="small text-muted mb-0 ps-3">
                    <li class="mb-2">Use clear, descriptive product names to improve search visibility.</li>
                    <li class="mb-2">Add detailed descriptions highlighting key features and benefits.</li>
                    <li class="mb-2">Upload high-quality images from different angles.</li>
                    <li class="mb-2">Set competitive prices based on market trends.</li>
                    <li class="mb-2">Include all relevant specifications to reduce buyer questions.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let specIndex = 1;
    const container = document.getElementById('specifications-container');
    const addBtn = document.getElementById('add-spec-btn');

    addBtn.addEventListener('click', function() {
        const row = document.createElement('div');
        row.className = 'row g-2 mb-2 spec-row';
        row.innerHTML = `
            <div class="col-5"><input type="text" class="form-control" name="specifications[${specIndex}][key]" placeholder="Key"></div>
            <div class="col-5"><input type="text" class="form-control" name="specifications[${specIndex}][value]" placeholder="Value"></div>
            <div class="col-2"><button type="button" class="btn btn-outline-danger w-100 remove-spec"><i class="bi bi-trash"></i></button></div>
        `;
        container.appendChild(row);
        specIndex++;
        updateRemoveButtons();
    });

    container.addEventListener('click', function(e) {
        if (e.target.closest('.remove-spec')) {
            e.target.closest('.spec-row').remove();
            updateRemoveButtons();
        }
    });

    function updateRemoveButtons() {
        const rows = container.querySelectorAll('.spec-row');
        rows.forEach(row => {
            row.querySelector('.remove-spec').disabled = rows.length === 1;
        });
    }
});
</script>
@endpush
@endsection