@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">🔀 {{ $item->name }} - Variants</h1>
                    <p class="text-muted">
                        <i class="bi bi-shop"></i> {{ $vendor->vendor_name }}
                        • <i class="bi bi-tag"></i> {{ $item->bizspotMainCategory->name }}
                        • <span class="h6 text-success">Base Price: {{ $item->formatted_price }}</span>
                    </p>
                </div>
                <div>
                    <a href="{{ route('admin.vendors.menu.items', [$vendor, $item->bizspot_main_category_id]) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> Back to Items
                    </a>
                    <a href="{{ route('admin.vendors.menu.items.edit', [$vendor, $item]) }}" class="btn btn-outline-primary">
                        <i class="fas fa-edit"></i> Edit Item
                    </a>
                    <button type="button" class="btn btn-success" onclick="openCreateVariantModal()">
                        <i class="bi bi-plus"></i> Add Variant
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Item Info -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h5 class="mb-1">{{ $item->name }}</h5>
                    <p class="text-muted mb-0">{{ $item->description }}</p>
                    @if($item->dietary_badges && is_array($item->dietary_badges) && count($item->dietary_badges) > 0)
                        <div class="mt-2">
                            @foreach($item->dietary_badges as $badge)
                                <span class="badge {{ $badge['class'] }} badge-sm me-1">
                                    {{ $badge['icon'] }} {{ $badge['text'] }}
                                </span>
                            @endforeach
                        </div>
                    @endif
                </div>
                <div class="col-md-4 text-md-end">
                    <div class="h5 text-success mb-0">{{ $item->formatted_price }}</div>
                    <small class="text-muted">Base Price</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle"></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"></i> {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Variants List -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 fw-bold text-primary">Item Variants</h6>
        </div>
        <div class="card-body">
            @if($variants->count() > 0)
                @foreach($variants as $type => $variantGroup)
                    <div class="mb-4">
                        <h6 class="text-uppercase fw-bold text-muted mb-3">
                            {{ ucfirst(str_replace('_', ' ', $type)) }}
                            <span class="badge bg-info">{{ $variantGroup->count() }}</span>
                        </h6>
                        
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Price Modifier</th>
                                        <th>Final Price</th>
                                        <th>Status</th>
                                        <th>Order</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($variantGroup as $variant)
                                        <tr>
                                            <td>
                                                <strong>{{ $variant->name }}</strong>
                                                @if($variant->description)
                                                    <br><small class="text-muted">{{ $variant->description }}</small>
                                                @endif
                                            </td>
                                            <td>
                                                <span class="text-{{ $variant->price_modifier >= 0 ? 'success' : 'danger' }}">
                                                    {{ $variant->price_modifier_display }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="fw-bold text-success">
                                                    {{ $variant->formatted_final_price }}
                                                </span>
                                            </td>
                                            <td>
                                                @if($variant->is_available)
                                                    <span class="badge bg-success">Available</span>
                                                @else
                                                    <span class="badge bg-secondary">Unavailable</span>
                                                @endif
                                            </td>
                                            <td>{{ $variant->sort_order }}</td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <button type="button" class="btn btn-sm btn-outline-primary" 
                                                            onclick="editVariant({{ $variant->id }}, {{ json_encode($variant->name) }}, {{ $variant->price_modifier }}, {{ json_encode($variant->variant_type) }}, {{ json_encode($variant->description ?? '') }}, {{ $variant->sort_order }}, {{ $variant->is_available ? 'true' : 'false' }})"
                                                            title="Edit Variant">
                                                        <i class="bi bi-pencil"></i>
                                                    </button>
                                                    <form method="POST" action="{{ route('admin.vendors.menu.variants.delete', [$vendor, $item, $variant]) }}"
                                                          class="d-inline" onsubmit="return confirm('Are you sure you want to delete this variant?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-outline-danger">
                                                            <i class="fas fa-trash"></i> Delete
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endforeach

                <!-- Summary -->
                <div class="mt-4 pt-3 border-top">
                    <div class="row text-center">
                        <div class="col-md-3">
                            <div class="text-muted">Total Variants</div>
                            <div class="h5 mb-0">{{ $variants->flatten()->count() }}</div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-muted">Available</div>
                            <div class="h5 mb-0 text-success">{{ $variants->flatten()->where('is_available', true)->count() }}</div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-muted">Variant Types</div>
                            <div class="h5 mb-0 text-info">{{ $variants->count() }}</div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-muted">Price Range</div>
                            <div class="h5 mb-0 text-success">{{ $item->price_range }}</div>
                        </div>
                    </div>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="bi bi-layers display-1 text-muted mb-3"></i>
                    <h5 class="text-gray-600">No Variants for {{ $item->name }}</h5>
                    <p class="text-muted">Add variants like sizes, spice levels, or cooking styles to give customers more options.</p>
                    <button type="button" class="btn btn-success" onclick="openCreateVariantModal()">
                        <i class="bi bi-plus"></i> Add First Variant
                    </button>
                </div>
            @endif
        </div>
    </div>

    <!-- Quick Add Common Variants -->
    @if($commonVariants && count($commonVariants) > 0)
        <div class="card shadow mt-4">
            <div class="card-header py-3">
                <h6 class="m-0 fw-bold text-primary">💡 Quick Add - Common Variants</h6>
            </div>
            <div class="card-body">
                <p class="text-muted mb-3">Click to quickly add popular food service variants:</p>
                <div class="row">
                    @foreach($commonVariants as $common)
                        <div class="col-md-4 col-lg-3 mb-2">
                            <button type="button" class="btn btn-outline-success btn-sm w-100" 
                                    onclick="addCommonVariant({{ json_encode($common['name']) }}, {{ $common['price_modifier'] }}, {{ json_encode($common['variant_type']) }}, {{ json_encode($common['description'] ?? '') }})">
                                <strong>{{ $common['name'] }}</strong>
                                <br><small class="text-muted">
                                    {{ $common['price_modifier'] >= 0 ? '+' : '' }}{{ $common['price_modifier'] }} AED
                                    • {{ ucfirst(str_replace('_', ' ', $common['variant_type'])) }}
                                </small>
                            </button>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
</div>

<!-- Create Variant Modal -->
<div class="modal fade" id="createVariantModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('admin.vendors.menu.variants.store', [$vendor, $item]) }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add New Variant</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">Variant Name *</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>

                    <div class="mb-3">
                        <label for="variant_type" class="form-label">Variant Type *</label>
                        <select class="form-select" id="variant_type" name="variant_type" required>
                            <option value="size">Size (Small, Large, Family)</option>
                            <option value="spice_level">Spice Level (Mild, Spicy, Extra Hot)</option>
                            <option value="cooking_style">Cooking Style (Grilled, Fried, Steamed)</option>
                            <option value="addon">Add-on (Extra sauce, Side dish)</option>
                            <option value="color">Color</option>
                            <option value="other">Other</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="price_modifier" class="form-label">Price Modifier (AED) *</label>
                        <div class="input-group">
                            <span class="input-group-text">AED</span>
                            <input type="number" class="form-control" id="price_modifier" name="price_modifier" 
                                   step="0.01" value="0.00" required>
                        </div>
                        <div class="form-text">Use negative values for discounts (e.g., -5.00)</div>
                    </div>

                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="2"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="sort_order" class="form-label">Sort Order</label>
                        <input type="number" class="form-control" id="sort_order" name="sort_order" 
                               value="{{ $variants->flatten()->count() + 1 }}" min="1">
                    </div>

                    <div class="mb-3">
                        <label for="image_url" class="form-label">Upload Image</label>
                        <input type="file" class="form-control" id="image_url" name="image" accept="image/*">
                        <div class="form-text">Optional: Upload an image specific to this variant</div>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_available" name="is_available" value="1" checked>
                            <label class="form-check-label" for="is_available">
                                Available for ordering
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Create Variant</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Variant Modal -->
<div class="modal fade" id="editVariantModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" id="editVariantForm" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title">Edit Variant</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit_name" class="form-label">Variant Name *</label>
                        <input type="text" class="form-control" id="edit_name" name="name" required>
                    </div>

                    <div class="mb-3">
                        <label for="edit_variant_type" class="form-label">Variant Type *</label>
                        <select class="form-select" id="edit_variant_type" name="variant_type" required>
                            <option value="size">Size (Small, Large, Family)</option>
                            <option value="spice_level">Spice Level (Mild, Spicy, Extra Hot)</option>
                            <option value="cooking_style">Cooking Style (Grilled, Fried, Steamed)</option>
                            <option value="addon">Add-on (Extra sauce, Side dish)</option>
                            <option value="color">Color</option>
                            <option value="other">Other</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="edit_price_modifier" class="form-label">Price Modifier (AED) *</label>
                        <div class="input-group">
                            <span class="input-group-text">AED</span>
                            <input type="number" class="form-control" id="edit_price_modifier" name="price_modifier" 
                                   step="0.01" required>
                        </div>
                        <div class="form-text">Use negative values for discounts (e.g., -5.00)</div>
                    </div>

                    <div class="mb-3">
                        <label for="edit_description" class="form-label">Description</label>
                        <textarea class="form-control" id="edit_description" name="description" rows="2"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="edit_sort_order" class="form-label">Sort Order</label>
                        <input type="number" class="form-control" id="edit_sort_order" name="sort_order" min="1">
                    </div>

                    <div class="mb-3">
                        <label for="edit_image_url" class="form-label">Update Image</label>
                        <input type="file" class="form-control" id="edit_image_url" name="image" accept="image/*">
                        <div class="form-text">Optional: Upload a new image for this variant</div>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="edit_is_available" name="is_available" value="1">
                            <label class="form-check-label" for="edit_is_available">
                                Available for ordering
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Variant</button>
                </div>
            </form>
        </div>
    </div>
</div>

@section('scripts')
<script>
// Wait for DOM to be ready
document.addEventListener('DOMContentLoaded', function() {
    console.log('Variants page JavaScript loaded');
});

function editVariant(id, name, priceModifier, variantType, description, sortOrder, isAvailable) {
    try {
        console.log('Edit variant called with:', {id, name, priceModifier, variantType, description, sortOrder, isAvailable});
        
        // Check if elements exist
        const editNameEl = document.getElementById('edit_name');
        const editPriceEl = document.getElementById('edit_price_modifier');
        const editTypeEl = document.getElementById('edit_variant_type');
        const editDescEl = document.getElementById('edit_description');
        const editSortEl = document.getElementById('edit_sort_order');
        const editAvailEl = document.getElementById('edit_is_available');
        const formEl = document.getElementById('editVariantForm');
        const modalEl = document.getElementById('editVariantModal');
        
        if (!editNameEl || !editPriceEl || !editTypeEl || !formEl || !modalEl) {
            throw new Error('One or more form elements not found');
        }
        
        // Populate form fields
        editNameEl.value = name;
        editPriceEl.value = priceModifier;
        editTypeEl.value = variantType;
        if (editDescEl) editDescEl.value = description || '';
        if (editSortEl) editSortEl.value = sortOrder;
        if (editAvailEl) editAvailEl.checked = (isAvailable === true || isAvailable === 'true');
        
        // Set form action
        formEl.action = `{{ route('admin.vendors.menu.variants.update', [$vendor, $item, ':id']) }}`.replace(':id', id);
        console.log('Form action set to:', formEl.action);
        
        // Show modal - try multiple methods
        console.log('Attempting to show modal...');
        
        try {
            // Method 1: Bootstrap 5 way
            if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                const modal = new bootstrap.Modal(modalEl);
                modal.show();
                console.log('Modal shown using Bootstrap 5 method');
            } else {
                throw new Error('Bootstrap 5 not available');
            }
        } catch (bootstrapError) {
            console.log('Bootstrap 5 method failed:', bootstrapError);
            
            try {
                // Method 2: jQuery/Bootstrap way (fallback)
                if (typeof $ !== 'undefined') {
                    $(modalEl).modal('show');
                    console.log('Modal shown using jQuery method');
                } else {
                    throw new Error('jQuery not available');
                }
            } catch (jqueryError) {
                console.log('jQuery method failed:', jqueryError);
                
                // Method 3: Direct Bootstrap data-bs-toggle
                modalEl.setAttribute('data-bs-toggle', 'modal');
                modalEl.classList.add('show');
                modalEl.style.display = 'block';
                modalEl.setAttribute('aria-modal', 'true');
                modalEl.setAttribute('role', 'dialog');
                console.log('Manual modal show method used');
            }
        }
    } catch (error) {
        console.error('Error in editVariant:', error);
        alert('Error opening edit modal: ' + error.message);
    }
}

function addCommonVariant(name, priceModifier, variantType, description) {
    try {
        console.log('Add common variant called with:', {name, priceModifier, variantType, description});
        
        // Reset form first
        const form = document.getElementById('createVariantModal').querySelector('form');
        form.reset();
        
        // Fill in the common variant data
        document.getElementById('name').value = name;
        document.getElementById('price_modifier').value = priceModifier;
        document.getElementById('variant_type').value = variantType;
        document.getElementById('description').value = description || '';
        document.getElementById('is_available').checked = true;
        
        const modal = new bootstrap.Modal(document.getElementById('createVariantModal'));
        modal.show();
    } catch (error) {
        console.error('Error in addCommonVariant:', error);
        alert('Error opening create modal: ' + error.message);
    }
}

// Function to open the create modal with clean form
function openCreateVariantModal() {
    try {
        console.log('Open create variant modal called');
        
        const form = document.getElementById('createVariantModal').querySelector('form');
        form.reset();
        document.getElementById('price_modifier').value = '0.00';
        document.getElementById('is_available').checked = true;
        
        const modal = new bootstrap.Modal(document.getElementById('createVariantModal'));
        modal.show();
    } catch (error) {
        console.error('Error in openCreateVariantModal:', error);
        alert('Error opening create modal: ' + error.message);
    }
}
</script>
@endsection
@endsection