@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Add Product - {{ $website->name }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <a href="{{ route('products.index', $website) }}" class="btn btn-sm btn-secondary">
            <i class="bi bi-arrow-left"></i> Back to Products
        </a>
    </div>
</div>

@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        @foreach($errors->all() as $error)
            <div>{{ $error }}</div>
        @endforeach
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<form action="{{ route('products.store', $website) }}" method="POST" enctype="multipart/form-data">
    @csrf
    
    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Basic Information</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label for="name" class="form-label">Product Name *</label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror"
                                       id="name" name="name" value="{{ old('name') }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="sku" class="form-label">SKU</label>
                                <input type="text" class="form-control @error('sku') is-invalid @enderror"
                                       id="sku" name="sku" value="{{ old('sku') }}">
                                @error('sku')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="slug" class="form-label">Slug *</label>
                        <input type="text" class="form-control @error('slug') is-invalid @enderror"
                               id="slug" name="slug" value="{{ old('slug') }}">
                        <div class="form-text">Leave blank to auto-generate from name</div>
                        @error('slug')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control @error('description') is-invalid @enderror"
                                  id="description" name="description" rows="5">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Product Images -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-images me-2"></i>Product Images</h5>
                </div>
                <div class="card-body">
                    <div id="product-images">
                        <!-- Add Images -->
                        <div class="border-dashed border-2 border-secondary rounded p-4 text-center" id="image-upload-area">
                            <i class="bi bi-cloud-upload display-4 text-muted"></i>
                            <h5 class="mt-2">Upload Product Images</h5>
                            <p class="text-muted">Drag and drop images here or click to browse</p>
                            <input type="file" class="form-control d-none" id="image-upload" name="images[]" multiple accept="image/*">
                            <button type="button" class="btn btn-outline-primary" onclick="document.getElementById('image-upload').click()">
                                Choose Images
                            </button>
                        </div>

                        <!-- Image previews will be inserted here -->
                        <div id="image-previews" class="row mt-3"></div>
                    </div>
                </div>
            </div>

            <!-- Pricing & Inventory -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-currency-dollar me-2"></i>Pricing & Inventory</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="price" class="form-label">Regular Price (RM) *</label>
                                <input type="number" step="0.01" min="0" class="form-control @error('price') is-invalid @enderror"
                                       id="price" name="price" value="{{ old('price') }}" required>
                                @error('price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="sale_price" class="form-label">Sale Price (RM)</label>
                                <input type="number" step="0.01" min="0" class="form-control @error('sale_price') is-invalid @enderror"
                                       id="sale_price" name="sale_price" value="{{ old('sale_price') }}">
                                <div class="form-text">Leave empty if not on sale</div>
                                @error('sale_price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="stock_quantity" class="form-label">Stock Quantity *</label>
                                <input type="number" min="0" class="form-control @error('stock_quantity') is-invalid @enderror"
                                       id="stock_quantity" name="stock_quantity" value="{{ old('stock_quantity', 0) }}" required>
                                @error('stock_quantity')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="weight" class="form-label">Weight (kg)</label>
                                <input type="number" step="0.01" min="0" class="form-control @error('weight') is-invalid @enderror"
                                       id="weight" name="weight" value="{{ old('weight') }}">
                                @error('weight')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <!-- Dimensions -->
                            <label class="form-label">Dimensions (cm)</label>
                            <div class="row">
                                <div class="col">
                                    <input type="number" step="0.1" min="0" class="form-control" 
                                           name="dimensions[length]" placeholder="Length"
                                           value="{{ old('dimensions.length') }}">
                                </div>
                                <div class="col">
                                    <input type="number" step="0.1" min="0" class="form-control" 
                                           name="dimensions[width]" placeholder="Width"
                                           value="{{ old('dimensions.width') }}">
                                </div>
                                <div class="col">
                                    <input type="number" step="0.1" min="0" class="form-control" 
                                           name="dimensions[height]" placeholder="Height"
                                           value="{{ old('dimensions.height') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SEO Settings -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-search me-2"></i>SEO Settings</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="meta_title" class="form-label">Meta Title</label>
                        <input type="text" class="form-control @error('meta_title') is-invalid @enderror"
                               id="meta_title" name="meta_title" value="{{ old('meta_title') }}"
                               maxlength="60">
                        <div class="form-text">Leave empty to use product name. Recommended: 50-60 characters</div>
                        @error('meta_title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="meta_description" class="form-label">Meta Description</label>
                        <textarea class="form-control @error('meta_description') is-invalid @enderror"
                                  id="meta_description" name="meta_description" rows="3" maxlength="160">{{ old('meta_description') }}</textarea>
                        <div class="form-text">Leave empty to auto-generate from description. Recommended: 150-160 characters</div>
                        @error('meta_description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="meta_keywords" class="form-label">Meta Keywords</label>
                        <input type="text" class="form-control @error('meta_keywords') is-invalid @enderror"
                               id="meta_keywords" name="meta_keywords" value="{{ old('meta_keywords') }}">
                        <div class="form-text">Comma-separated keywords (optional)</div>
                        @error('meta_keywords')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Product Status -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-gear me-2"></i>Product Settings</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" checked>
                            <label class="form-check-label" for="is_active">
                                Product Active
                            </label>
                        </div>
                        <div class="form-text">Inactive products won't be visible to customers</div>
                    </div>

                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="featured" name="featured" value="1"
                                   {{ old('featured') ? 'checked' : '' }}>
                            <label class="form-check-label" for="featured">
                                Featured Product
                            </label>
                        </div>
                        <div class="form-text">Featured products appear prominently in your store</div>
                    </div>

                    <div class="mb-3">
                        <label for="sort_order" class="form-label">Sort Order</label>
                        <input type="number" min="0" class="form-control @error('sort_order') is-invalid @enderror"
                               id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}">
                        <div class="form-text">Lower numbers appear first</div>
                        @error('sort_order')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Categories -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-tags me-2"></i>Categories</h5>
                </div>
                <div class="card-body">
                    @php
                        $categories = $website->productCategories()->active()->get();
                        $selectedCategories = old('categories', []);
                    @endphp
                    
                    @if($categories->count() > 0)
                        @foreach($categories as $category)
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="categories[]" 
                                       value="{{ $category->id }}" id="category_{{ $category->id }}"
                                       {{ in_array($category->id, $selectedCategories) ? 'checked' : '' }}>
                                <label class="form-check-label" for="category_{{ $category->id }}">
                                    {{ $category->name }}
                                    @if($category->parent)
                                        <small class="text-muted">({{ $category->parent->name }})</small>
                                    @endif
                                </label>
                            </div>
                        @endforeach
                    @else
                        <p class="text-muted">No categories available. 
                            <a href="{{ route('product-categories.create', $website) }}" class="btn btn-sm btn-outline-primary">Create Category</a>
                        </p>
                    @endif
                </div>
            </div>

            <!-- Quick Tips -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-lightbulb me-2"></i>Quick Tips</h5>
                </div>
                <div class="card-body">
                    <div class="small">
                        <p><strong>Images:</strong> First image becomes the main product image. Use high-quality images (recommended: 800x800px).</p>
                        <p><strong>SEO:</strong> Good meta descriptions help your products rank better in search engines.</p>
                        <p><strong>Categories:</strong> Organize products into categories to help customers find them easily.</p>
                        <p><strong>Next Steps:</strong> After creating, you can add product variations for different sizes, colors, etc.</p>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="card">
                <div class="card-body">
                    <button type="submit" class="btn btn-primary w-100 mb-2">
                        <i class="bi bi-check-lg"></i> Create Product
                    </button>
                    
                    <a href="{{ route('products.index', $website) }}" class="btn btn-outline-secondary w-100">
                        <i class="bi bi-x-lg"></i> Cancel
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('styles')
<style>
.border-dashed {
    border-style: dashed !important;
}

.image-preview {
    position: relative;
    margin-bottom: 1rem;
}

.image-preview img {
    max-height: 150px;
    object-fit: cover;
}

.image-controls {
    position: absolute;
    top: 5px;
    right: 5px;
}

#image-upload-area {
    transition: all 0.3s ease;
    cursor: pointer;
}

#image-upload-area:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Auto-generate slug from product name
    $('#name').on('input', function() {
        var name = $(this).val();
        var slug = name.toLowerCase()
            .replace(/[^a-z0-9 -]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-')
            .trim('-');
        $('#slug').val(slug);
    });

    // Image upload handling
    $('#image-upload').on('change', function(e) {
        const files = e.target.files;
        const uploadArea = $('#image-upload-area');
        const previewContainer = $('#image-previews');
        
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            const reader = new FileReader();
            
            reader.onload = function(e) {
                const imagePreview = $(`
                    <div class="col-md-3 mb-3 image-preview">
                        <div class="position-relative">
                            <img src="${e.target.result}" class="img-fluid rounded" alt="Product Image">
                            <div class="image-controls">
                                <button type="button" class="btn btn-sm btn-danger remove-preview-image">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                            ${previewContainer.children().length === 0 ? '<span class="badge bg-primary position-absolute top-0 start-0 m-2">Main</span>' : ''}
                        </div>
                    </div>
                `);
                
                previewContainer.append(imagePreview);
            };
            
            reader.readAsDataURL(file);
        }
    });

    // Remove preview images
    $(document).on('click', '.remove-preview-image', function() {
        $(this).closest('.image-preview').remove();
        
        // Update main badge
        $('#image-previews .image-preview:first-child').find('.badge').remove();
        if ($('#image-previews .image-preview').length > 0) {
            $('#image-previews .image-preview:first-child .position-relative').append('<span class="badge bg-primary position-absolute top-0 start-0 m-2">Main</span>');
        }
    });

    // Drag and drop for image upload area
    $('#image-upload-area').on('dragover', function(e) {
        e.preventDefault();
        $(this).addClass('border-primary');
    });

    $('#image-upload-area').on('dragleave', function(e) {
        e.preventDefault();
        $(this).removeClass('border-primary');
    });

    $('#image-upload-area').on('drop', function(e) {
        e.preventDefault();
        $(this).removeClass('border-primary');
        
        const files = e.originalEvent.dataTransfer.files;
        $('#image-upload')[0].files = files;
        $('#image-upload').trigger('change');
    });

    // Click to upload
    $('#image-upload-area').on('click', function() {
        $('#image-upload').click();
    });

    // Character counters for SEO fields
    $('#meta_title').on('input', function() {
        const length = $(this).val().length;
        const color = length > 60 ? 'text-danger' : length > 50 ? 'text-warning' : 'text-muted';
        $(this).next('.form-text').html(`Leave empty to use product name. <span class="${color}">${length}/60 characters</span>`);
    });

    $('#meta_description').on('input', function() {
        const length = $(this).val().length;
        const color = length > 160 ? 'text-danger' : length > 150 ? 'text-warning' : 'text-muted';
        $(this).next('.form-text').html(`Leave empty to auto-generate from description. <span class="${color}">${length}/160 characters</span>`);
    });
});
</script>
@endpush