@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">Edit Product - {{ $product->name }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        @if($product->website->subdomain)
            <a href="http://{{ $product->website->subdomain }}.{{ config('app.domain', 'neosolvix.test') }}/product/{{ $product->slug }}" 
               target="_blank" class="btn btn-sm btn-outline-primary me-2">
                <i class="bi bi-eye"></i> View Product
            </a>
        @endif
        <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(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<form action="{{ route('products.update', [$website, $product]) }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    
    <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', $product->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', $product->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', $product->slug) }}" required>
                        <div class="form-text">Used in the product URL</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', $product->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">
                        <!-- Current Images -->
                        @if($product->images && count($product->images) > 0)
                            <div class="row" id="current-images">
                                @foreach($product->images as $index => $image)
                                    <div class="col-md-3 mb-3" data-image-index="{{ $index }}">
                                        <div class="image-item">
                                            <img src="{{ $image }}" class="img-fluid rounded" alt="Product Image">
                                            <div class="image-controls">
                                                <button type="button" class="btn btn-sm btn-danger remove-image" data-index="{{ $index }}">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                                @if($index === 0)
                                                    <span class="badge bg-primary position-absolute top-0 end-0 m-2">Main</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        <!-- Add New 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="new_images[]" multiple accept="image/*">
                            <button type="button" class="btn btn-outline-primary" onclick="document.getElementById('image-upload').click()">
                                Choose Images
                            </button>
                        </div>

                        <!-- Hidden field for removed images -->
                        <input type="hidden" name="removed_images" id="removed-images" value="">
                    </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', $product->getRawOriginal('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', $product->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', $product->stock_quantity) }}" 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', $product->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', $product->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', $product->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', $product->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', $product->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', $product->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', $product->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 Status</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"
                                   {{ old('is_active', $product->is_active) ? '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', $product->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', $product->sort_order) }}">
                        <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', $product->categories->pluck('id')->toArray());
                    @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="#" class="btn btn-sm btn-outline-primary">Create Category</a>
                        </p>
                    @endif
                </div>
            </div>

            <!-- Product Stats -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-bar-chart me-2"></i>Product Stats</h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-end">
                                <h4 class="mb-0">{{ $product->variations->count() }}</h4>
                                <small class="text-muted">Variations</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4 class="mb-0">{{ $product->total_stock }}</h4>
                            <small class="text-muted">Total Stock</small>
                        </div>
                    </div>
                    
                    @if($product->orderItems->count() > 0)
                        <hr>
                        <div class="text-center">
                            <h4 class="mb-0">{{ $product->orderItems->sum('quantity') }}</h4>
                            <small class="text-muted">Total Sold</small>
                        </div>
                    @endif
                    
                    <hr>
                    <div class="d-grid">
                        <a href="{{ route('product-variations.index', [$website, $product]) }}" class="btn btn-outline-primary">
                            <i class="bi bi-layers"></i> Manage Variations
                        </a>
                    </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> Update Product
                    </button>
                    
                    <a href="{{ route('products.index', $website) }}" class="btn btn-outline-secondary w-100 mb-2">
                        <i class="bi bi-arrow-left"></i> Back to Products
                    </a>
                    
                    <button type="button" class="btn btn-outline-danger w-100" onclick="confirmDelete()">
                        <i class="bi bi-trash"></i> Delete Product
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Delete Form -->
<form id="delete-form" action="{{ route('products.destroy', [$website, $product]) }}" method="POST" class="d-none">
    @csrf
    @method('DELETE')
</form>
@endsection

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

.image-item {
    position: relative;
}

.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;
}

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

.image-preview img {
    max-height: 150px;
    object-fit: cover;
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    let removedImages = [];

    // 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');
        
        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="image-item">
                            <img src="${e.target.result}" class="img-fluid rounded" alt="New Image">
                            <div class="image-controls">
                                <button type="button" class="btn btn-sm btn-danger remove-new-image">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                `);
                
                uploadArea.before(imagePreview);
            };
            
            reader.readAsDataURL(file);
        }
    });

    // Remove existing images
    $(document).on('click', '.remove-image', function() {
        const index = $(this).data('index');
        removedImages.push(index);
        $('#removed-images').val(removedImages.join(','));
        $(this).closest('.col-md-3').remove();
    });

    // Remove new image previews
    $(document).on('click', '.remove-new-image', function() {
        $(this).closest('.image-preview').remove();
    });

    // 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>`);
    });
});

function confirmDelete() {
    if (confirm('Are you sure you want to delete this product? This action cannot be undone.')) {
        $('#delete-form').submit();
    }
}
</script>
@endpush