@extends('layouts.admin')

@section('title', 'Product Variants - ' . $product->name . ' - ' . $vendor->vendor_name)

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 fw-bold">
            <i class="bi bi-grid-3x3-gap me-2"></i>Product Variants
        </h1>
    </div>

    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.vendors.index') }}">Vendors</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.vendors.show', $vendor) }}">{{ $vendor->vendor_name }}</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.vendors.products.index', $vendor) }}">Products</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.vendors.products.products', ['vendor' => $vendor, 'categoryId' => $product->bizspot_main_category_id]) }}">{{ $product->mainCategory->name }}</a></li>
            <li class="breadcrumb-item active">{{ $product->name }} - Variants</li>
        </ol>
    </nav>

    <!-- Action Buttons -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <a href="{{ route('admin.vendors.products.products.edit', ['vendor' => $vendor, 'product' => $product]) }}" class="btn btn-outline-info me-2">
                <i class="bi bi-pencil me-1"></i>Edit Product
            </a>
            <a href="{{ route('admin.vendors.products.products', ['vendor' => $vendor, 'categoryId' => $product->bizspot_main_category_id]) }}" class="btn btn-outline-primary">
                <i class="bi bi-arrow-left me-1"></i>Back to {{ $product->mainCategory->name }}
            </a>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#variantModal" onclick="openVariantModal()">
            <i class="bi bi-plus-circle me-1"></i>Add Variant
        </button>
    </div>

    <!-- Product Info -->
    <div class="row g-4 mb-4">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="me-3">
                            @if($product->featured_image)
                                <img src="{{ Storage::url($product->featured_image) }}" alt="{{ $product->name }}" 
                                     class="rounded" style="width: 80px; height: 80px; object-fit: cover;">
                            @else
                                <div class="rounded bg-light d-flex align-items-center justify-content-center" 
                                     style="width: 80px; height: 80px;">
                                    <i class="bi bi-box-seam text-muted" style="font-size: 2rem;"></i>
                                </div>
                            @endif
                        </div>
                        <div>
                            <h5 class="fw-bold mb-1">{{ $product->name }}</h5>
                            <p class="text-muted mb-2">{{ $product->short_description }}</p>
                            <div class="d-flex align-items-center gap-3">
                                <span class="fw-bold text-primary">د.إ{{ number_format($product->base_price, 2) }}</span>
                                <span class="badge bg-light text-dark">{{ $product->sku ?: 'No SKU' }}</span>
                                <span class="badge 
                                    @if($product->stock_status === 'in_stock') bg-success
                                    @elseif($product->stock_status === 'low_stock') bg-warning text-dark
                                    @else bg-danger
                                    @endif">
                                    {{ ucwords(str_replace('_', ' ', $product->stock_status)) }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <h6 class="fw-bold mb-2">Total Variants</h6>
                    <div class="h4 text-primary mb-0">{{ $product->variants()->count() }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Variants List -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0 pt-4 pb-3">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0 fw-bold">Product Variants</h5>
                <span class="badge bg-light text-dark">{{ $product->variants()->count() }} {{ Str::plural('Variant', $product->variants()->count()) }}</span>
            </div>
        </div>
        <div class="card-body p-0">
            @if($variants->count() > 0)
                @foreach($variants as $sizeGroup => $sizeVariants)
                    <div class="border-bottom">
                        <div class="p-3 bg-light">
                            <h6 class="fw-bold mb-0">
                                @if($sizeGroup === 'Default')
                                    <i class="bi bi-star me-2"></i>Default Variants
                                @else
                                    <i class="bi bi-arrows-fullscreen me-2"></i>Size: {{ $sizeGroup }}
                                @endif
                                <span class="badge bg-primary ms-2">{{ $sizeVariants->count() }}</span>
                            </h6>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Variant Details</th>
                                        <th>SKU</th>
                                        <th>Price</th>
                                        <th>Stock</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($sizeVariants as $variant)
                                        <tr>
                                            <td>
                                                <div>
                                                    @if($variant->variant_name)
                                                        <div class="fw-bold">{{ $variant->variant_name }}</div>
                                                    @endif
                                                    <div class="d-flex flex-wrap gap-1 mt-1">
                                                        @if($variant->color)
                                                            <span class="badge bg-info text-white">{{ $variant->color }}</span>
                                                        @endif
                                                        @if($variant->material)
                                                            <span class="badge bg-secondary">{{ $variant->material }}</span>
                                                        @endif
                                                        @if($variant->style)
                                                            <span class="badge bg-dark">{{ $variant->style }}</span>
                                                        @endif
                                                        @if($variant->is_default)
                                                            <span class="badge bg-warning text-dark">Default</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                @if($variant->sku)
                                                    <code class="small">{{ $variant->sku }}</code>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div>
                                                    @if($variant->price)
                                                        @if($variant->sale_price)
                                                            <span class="text-success fw-bold">د.إ{{ number_format($variant->sale_price, 2) }}</span>
                                                            <br><small class="text-muted text-decoration-line-through">د.إ{{ number_format($variant->price, 2) }}</small>
                                                        @else
                                                            <span class="fw-bold">د.إ{{ number_format($variant->price, 2) }}</span>
                                                        @endif
                                                    @else
                                                        <span class="text-muted">Base price</span>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <span class="fw-bold">{{ $variant->stock_quantity }}</span>
                                                    <br>
                                                    <span class="badge 
                                                        @if($variant->stock_status === 'in_stock') bg-success
                                                        @elseif($variant->stock_status === 'low_stock') bg-warning text-dark
                                                        @else bg-danger
                                                        @endif">
                                                        {{ ucwords(str_replace('_', ' ', $variant->stock_status)) }}
                                                    </span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" 
                                                           {{ $variant->is_active ? 'checked' : '' }}
                                                           onchange="toggleVariantStatus({{ $variant->id }})">
                                                </div>
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <button class="btn btn-outline-primary btn-sm" 
                                                            onclick="editVariant({{ $variant->id }}, '{{ $variant->size }}', '{{ $variant->color }}', '{{ $variant->material }}', '{{ $variant->style }}', '{{ $variant->variant_name }}', '{{ $variant->sku }}', '{{ $variant->barcode }}', {{ $variant->price ?: 'null' }}, {{ $variant->sale_price ?: 'null' }}, {{ $variant->cost_price ?: 'null' }}, {{ $variant->stock_quantity }}, {{ $variant->low_stock_threshold }}, {{ $variant->track_inventory ? 'true' : 'false' }}, {{ $variant->allow_backorder ? 'true' : 'false' }}, {{ $variant->is_default ? 'true' : 'false' }}, {{ $variant->weight ?: 'null' }}, {{ $variant->length ?: 'null' }}, {{ $variant->width ?: 'null' }}, {{ $variant->height ?: 'null' }})"
                                                            title="Edit Variant">
                                                        <i class="bi bi-pencil"></i>
                                                    </button>
                                                    <button class="btn btn-outline-danger btn-sm" 
                                                            onclick="deleteVariant({{ $variant->id }})"
                                                            title="Delete Variant">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endforeach
            @else
                <!-- Empty State -->
                <div class="text-center py-5">
                    <div class="mb-3">
                        <i class="bi bi-grid-3x3-gap text-muted" style="font-size: 3rem;"></i>
                    </div>
                    <h5 class="mt-3 text-muted">No Variants Created</h5>
                    <p class="text-muted">Create variants to offer different options like size, color, or material for this product.</p>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#variantModal" onclick="openVariantModal()">
                        <i class="bi bi-plus-circle me-1"></i>Create First Variant
                    </button>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Variant Modal -->
<div class="modal fade" id="variantModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="variantModalTitle">Add Product Variant</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="variantForm">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="variant_name" class="form-label fw-bold">Variant Name</label>
                            <input type="text" class="form-control" id="variant_name" name="variant_name" 
                                   placeholder="e.g., Large Red Cotton">
                        </div>

                        <div class="col-md-6">
                            <label for="size" class="form-label fw-bold">Size</label>
                            <input type="text" class="form-control" id="size" name="size" 
                                   placeholder="e.g., S, M, L, XL">
                        </div>

                        <div class="col-md-6">
                            <label for="color" class="form-label fw-bold">Color</label>
                            <input type="text" class="form-control" id="color" name="color" 
                                   placeholder="e.g., Red, Blue, Black">
                        </div>

                        <div class="col-md-6">
                            <label for="material" class="form-label fw-bold">Material</label>
                            <input type="text" class="form-control" id="material" name="material" 
                                   placeholder="e.g., Cotton, Polyester">
                        </div>

                        <div class="col-md-6">
                            <label for="style" class="form-label fw-bold">Style</label>
                            <input type="text" class="form-control" id="style" name="style" 
                                   placeholder="e.g., Casual, Formal">
                        </div>

                        <div class="col-md-6">
                            <label for="sku" class="form-label fw-bold">Variant SKU</label>
                            <input type="text" class="form-control" id="sku" name="sku" 
                                   placeholder="Unique SKU for this variant">
                        </div>

                        <div class="col-md-4">
                            <label for="price" class="form-label fw-bold">Price (د.إ)</label>
                            <input type="number" class="form-control" id="price" name="price" 
                                   step="0.01" min="0" placeholder="Leave empty for base price">
                        </div>

                        <div class="col-md-4">
                            <label for="sale_price" class="form-label fw-bold">Sale Price (د.إ)</label>
                            <input type="number" class="form-control" id="sale_price" name="sale_price" 
                                   step="0.01" min="0" placeholder="Optional">
                        </div>

                        <div class="col-md-4">
                            <label for="cost_price" class="form-label fw-bold">Cost Price (د.إ)</label>
                            <input type="number" class="form-control" id="cost_price" name="cost_price" 
                                   step="0.01" min="0" placeholder="Optional">
                        </div>

                        <div class="col-md-6">
                            <label for="stock_quantity" class="form-label fw-bold">Stock Quantity *</label>
                            <input type="number" class="form-control" id="stock_quantity" name="stock_quantity" 
                                   min="0" value="0" required>
                        </div>

                        <div class="col-md-6">
                            <label for="low_stock_threshold" class="form-label fw-bold">Low Stock Alert *</label>
                            <input type="number" class="form-control" id="low_stock_threshold" name="low_stock_threshold" 
                                   min="0" value="5" required>
                        </div>

                        <!-- Physical Dimensions -->
                        <div class="col-12">
                            <hr>
                            <h6 class="fw-bold">Physical Dimensions (Optional)</h6>
                        </div>

                        <div class="col-md-3">
                            <label for="weight" class="form-label fw-bold">Weight (kg)</label>
                            <input type="number" class="form-control" id="weight" name="weight" 
                                   step="0.01" min="0" placeholder="0.00">
                        </div>

                        <div class="col-md-3">
                            <label for="length" class="form-label fw-bold">Length (cm)</label>
                            <input type="number" class="form-control" id="length" name="length" 
                                   step="0.01" min="0" placeholder="0">
                        </div>

                        <div class="col-md-3">
                            <label for="width" class="form-label fw-bold">Width (cm)</label>
                            <input type="number" class="form-control" id="width" name="width" 
                                   step="0.01" min="0" placeholder="0">
                        </div>

                        <div class="col-md-3">
                            <label for="height" class="form-label fw-bold">Height (cm)</label>
                            <input type="number" class="form-control" id="height" name="height" 
                                   step="0.01" min="0" placeholder="0">
                        </div>

                        <!-- Options -->
                        <div class="col-12">
                            <hr>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="track_inventory" 
                                               name="track_inventory" value="1" checked>
                                        <label class="form-check-label fw-bold" for="track_inventory">
                                            Track Inventory
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="allow_backorder" 
                                               name="allow_backorder" value="1">
                                        <label class="form-check-label fw-bold" for="allow_backorder">
                                            Allow Backorders
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="is_default" 
                                               name="is_default" value="1">
                                        <label class="form-check-label fw-bold" for="is_default">
                                            Default Variant
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <span id="submitButtonText">Create Variant</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let isEditing = false;
let editingVariantId = null;

function openVariantModal() {
    isEditing = false;
    editingVariantId = null;
    document.getElementById('variantModalTitle').textContent = 'Add Product Variant';
    document.getElementById('submitButtonText').textContent = 'Create Variant';
    document.getElementById('variantForm').reset();
    
    // Set default values
    document.getElementById('stock_quantity').value = '0';
    document.getElementById('low_stock_threshold').value = '5';
    document.getElementById('track_inventory').checked = true;
}

function editVariant(id, size, color, material, style, variantName, sku, barcode, price, salePrice, costPrice, stockQuantity, lowStockThreshold, trackInventory, allowBackorder, isDefault, weight, length, width, height) {
    isEditing = true;
    editingVariantId = id;
    
    document.getElementById('variantModalTitle').textContent = 'Edit Product Variant';
    document.getElementById('submitButtonText').textContent = 'Update Variant';
    
    // Populate form fields
    document.getElementById('size').value = size || '';
    document.getElementById('color').value = color || '';
    document.getElementById('material').value = material || '';
    document.getElementById('style').value = style || '';
    document.getElementById('variant_name').value = variantName || '';
    document.getElementById('sku').value = sku || '';
    document.getElementById('price').value = price || '';
    document.getElementById('sale_price').value = salePrice || '';
    document.getElementById('cost_price').value = costPrice || '';
    document.getElementById('stock_quantity').value = stockQuantity;
    document.getElementById('low_stock_threshold').value = lowStockThreshold;
    document.getElementById('weight').value = weight || '';
    document.getElementById('length').value = length || '';
    document.getElementById('width').value = width || '';
    document.getElementById('height').value = height || '';
    document.getElementById('track_inventory').checked = trackInventory;
    document.getElementById('allow_backorder').checked = allowBackorder;
    document.getElementById('is_default').checked = isDefault;
    
    // Show modal
    new bootstrap.Modal(document.getElementById('variantModal')).show();
}

document.getElementById('variantForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = {};
    
    // Convert FormData to regular object
    for (let [key, value] of formData.entries()) {
        if (key === 'track_inventory' || key === 'allow_backorder' || key === 'is_default') {
            data[key] = true;
        } else {
            data[key] = value;
        }
    }
    
    // Add unchecked checkboxes as false
    if (!formData.has('track_inventory')) data.track_inventory = false;
    if (!formData.has('allow_backorder')) data.allow_backorder = false;
    if (!formData.has('is_default')) data.is_default = false;
    
    let url, method;
    if (isEditing) {
        url = `{{ route('admin.vendors.products.variants.update', ['vendor' => $vendor, 'product' => $product, 'variant' => ':id']) }}`.replace(':id', editingVariantId);
        method = 'PUT';
    } else {
        url = `{{ route('admin.vendors.products.variants.store', ['vendor' => $vendor, 'product' => $product]) }}`;
        method = 'POST';
    }
    
    fetch(url, {
        method: method,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error: ' + (data.message || 'Failed to save variant'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while saving the variant');
    });
});

function deleteVariant(variantId) {
    if (!confirm('Are you sure you want to delete this variant? This action cannot be undone.')) {
        return;
    }
    
    fetch(`{{ route('admin.vendors.products.variants.delete', ['vendor' => $vendor, 'product' => $product, 'variant' => ':id']) }}`.replace(':id', variantId), {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Failed to delete variant');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred');
    });
}

function toggleVariantStatus(variantId) {
    // For now, just a placeholder - you can implement this if needed
    console.log('Toggle variant status:', variantId);
}
</script>
@endsection