@php
    $selectedService = old('service_type', $item->service_type ?: 'food');
    $isInstaKart = $selectedService === 'grocery';
    $variantsText = collect(old('variants', $item->variants ?? []))->map(fn ($row) => ($row['name'] ?? '') . ' | ' . ($row['price'] ?? 0))->implode("\n");
    $addonsText = collect(old('add_ons', $item->add_ons ?? []))->map(fn ($row) => ($row['name'] ?? '') . ' | ' . ($row['price'] ?? 0))->implode("\n");
    $selectedGlobalCategoryId = old('global_category_id');
    $selectedGlobalSubcategoryId = old('global_subcategory_id');
    $categoryOptions = ($globalCategories ?? collect())->mapWithKeys(function ($category) {
        return [
            $category->id => [
                'name' => $category->name,
                'service_type' => $category->service_type,
                'children' => $category->children->map(fn ($child) => [
                    'id' => $child->id,
                    'name' => $child->name,
                ])->values(),
            ],
        ];
    });
@endphp

<form action="{{ $action }}" method="POST" enctype="multipart/form-data" class="stat-card">
    @csrf
    @if($method !== 'POST')
        @method($method)
    @endif

    <div class="row g-3">
        <div class="col-md-3">
            <label class="form-label fw-semibold">Service</label>
            <select name="service_type" id="serviceType" class="form-select" required>
                <option value="food" @selected($selectedService === 'food')>Food</option>
                <option value="grocery" @selected($selectedService === 'grocery')>InstaKart</option>
            </select>
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold" data-menu-name-label>{{ $isInstaKart ? 'Product Name' : 'Menu Name' }}</label>
            <input type="text" name="name" value="{{ old('name', $item->name) }}" class="form-control @error('name') is-invalid @enderror" placeholder="{{ $isInstaKart ? 'e.g., Aashirvaad Atta 5 kg' : 'e.g., Paneer Tikka' }}" required>
            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-md-3">
            <label class="form-label fw-semibold">Global Category</label>
            <select name="global_category_id" id="globalCategorySelect" class="form-select">
                <option value="">Select Global Category</option>
                @foreach(($globalCategories ?? collect()) as $globalCategory)
                    <option
                        value="{{ $globalCategory->id }}"
                        data-name="{{ $globalCategory->name }}"
                        data-service="{{ $globalCategory->service_type }}"
                        @selected($selectedGlobalCategoryId == $globalCategory->id || (!$selectedGlobalCategoryId && old('category_name', $item->category_name) === $globalCategory->name))
                    >
                        {{ $globalCategory->name }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label fw-semibold">Global Sub Category</label>
            <select name="global_subcategory_id" id="globalSubcategorySelect" class="form-select">
                <option value="">Select Sub Category</option>
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label fw-semibold">Category Name</label>
            <input type="text" name="category_name" value="{{ old('category_name', $item->category_name) }}" class="form-control" placeholder="{{ $isInstaKart ? 'Atta, Rice & Dal' : 'Pizza' }}">
        </div>
        <div class="col-md-3">
            <label class="form-label fw-semibold">Sub Category Name</label>
            <input type="text" name="subcategory_name" value="{{ old('subcategory_name', $item->subcategory_name) }}" class="form-control" placeholder="{{ $isInstaKart ? 'Wheat Flour' : 'Veg Pizza' }}">
        </div>
        <div class="col-md-3" data-food-field>
            <label class="form-label fw-semibold">Cuisine</label>
            <select name="cuisine_id" class="form-select">
                <option value="">Auto detect cuisine</option>
                @foreach(($cuisines ?? collect()) as $cuisine)
                    <option value="{{ $cuisine->id }}" @selected((string) old('cuisine_id', $item->cuisine_id) === (string) $cuisine->id)>
                        {{ $cuisine->name }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3" data-brand-field>
            <label class="form-label fw-semibold">InstaKart Brand</label>
            <select name="brand_id" class="form-select">
                <option value="">Select Brand</option>
                @foreach(($brands ?? collect()) as $brand)
                    <option value="{{ $brand->id }}" @selected((string) old('brand_id', $item->brand_id) === (string) $brand->id)>
                        {{ $brand->name }}
                        @if(! $brand->is_active)
                            (inactive)
                        @endif
                    </option>
                @endforeach
            </select>
            <div class="form-text">Visible for InstaKart items only.</div>
        </div>
        <div class="col-12">
            <label class="form-label fw-semibold">Description</label>
            <textarea name="description" class="form-control" rows="3" placeholder="{{ $isInstaKart ? 'Pack size, shelf life, quality and product details' : 'Ingredients, flavour and serving details' }}">{{ old('description', $item->description) }}</textarea>
        </div>
        <div class="col-md-3" data-food-field>
            <label class="form-label fw-semibold">Food Type</label>
            <select name="food_type" class="form-select">
                @foreach(['veg' => 'Veg', 'egg' => 'Egg', 'non_veg' => 'Non-Veg'] as $value => $label)
                    <option value="{{ $value }}" @selected(old('food_type', $item->food_type ?: 'veg') === $value)>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label fw-semibold" data-time-label>{{ $isInstaKart ? 'Fulfilment Time' : 'Preparation Time' }}</label>
            <input type="number" name="preparation_time" value="{{ old('preparation_time', $item->preparation_time) }}" class="form-control" min="1" max="120">
        </div>
        <div class="col-md-3">
            <label class="form-label fw-semibold">GST</label>
            <input type="number" name="gst" value="{{ old('gst', $item->gst) }}" class="form-control" min="0" max="99.99" step="0.01">
        </div>
        <div class="col-md-3">
            <label class="form-label fw-semibold">HSN Code</label>
            <input type="text" name="hsn_code" value="{{ old('hsn_code', $item->hsn_code) }}" class="form-control">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Main Image</label>
            <input type="file" name="image" class="form-control" accept="image/*">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">Image URL</label>
            <input type="url" name="image_url" value="{{ old('image_url', str_starts_with((string) $item->image, 'http') ? $item->image : '') }}" class="form-control" placeholder="{{ $isInstaKart ? 'https://example.com/product.jpg' : 'https://example.com/menu-item.jpg' }}">
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold" data-variants-label>{{ $isInstaKart ? 'Pack Sizes / Variants' : 'Global Variants' }}</label>
            <textarea name="variants_text" class="form-control" rows="5" placeholder="{{ $isInstaKart ? '500 g | 60&#10;1 kg | 110' : 'Small | 199&#10;Medium | 299' }}">{{ old('variants_text', $variantsText) }}</textarea>
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold" data-addons-label>{{ $isInstaKart ? 'Optional Extras' : 'Global Addons' }}</label>
            <textarea name="add_ons_text" class="form-control" rows="5" placeholder="{{ $isInstaKart ? 'Reusable carry bag | 10&#10;Gift wrap | 20' : 'Extra Cheese | 50&#10;Cold Drink | 60' }}">{{ old('add_ons_text', $addonsText) }}</textarea>
        </div>
        <div class="col-12">
            <div class="form-check form-switch">
                <input type="checkbox" name="is_active" value="1" id="isActive" class="form-check-input" {{ old('is_active', $item->is_active ?? true) ? 'checked' : '' }}>
                <label for="isActive" class="form-check-label fw-semibold">Active</label>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-end gap-2 mt-4">
        <a href="{{ route('admin.master-menu-items.index') }}" class="btn btn-outline-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary" data-submit-label>Save Global {{ $isInstaKart ? 'Product' : 'Item' }}</button>
    </div>
</form>

@section('scripts')
@parent
<script>
document.addEventListener('DOMContentLoaded', function () {
    const categorySelect = document.getElementById('globalCategorySelect');
    const serviceSelect = document.getElementById('serviceType');
    const subcategorySelect = document.getElementById('globalSubcategorySelect');
    const categoryNameInput = document.querySelector('input[name="category_name"]');
    const subcategoryNameInput = document.querySelector('input[name="subcategory_name"]');
    const itemNameInput = document.querySelector('input[name="name"]');
    const descriptionInput = document.querySelector('textarea[name="description"]');
    const imageUrlInput = document.querySelector('input[name="image_url"]');
    const variantsInput = document.querySelector('textarea[name="variants_text"]');
    const addonsInput = document.querySelector('textarea[name="add_ons_text"]');
    const brandField = document.querySelector('[data-brand-field]');
    const foodFields = document.querySelectorAll('[data-food-field]');
    const menuNameLabel = document.querySelector('[data-menu-name-label]');
    const timeLabel = document.querySelector('[data-time-label]');
    const variantsLabel = document.querySelector('[data-variants-label]');
    const addonsLabel = document.querySelector('[data-addons-label]');
    const submitLabel = document.querySelector('[data-submit-label]');
    const categories = @json($categoryOptions);
    const selectedSubcategoryId = @json((string) $selectedGlobalSubcategoryId);
    const selectedSubcategoryName = @json(old('subcategory_name', $item->subcategory_name));
    const serviceCopy = {
        food: {
            nameLabel: 'Menu Name',
            namePlaceholder: 'e.g., Paneer Tikka',
            categoryPlaceholder: 'Pizza',
            subcategoryPlaceholder: 'Veg Pizza',
            descriptionPlaceholder: 'Ingredients, flavour and serving details',
            imagePlaceholder: 'https://example.com/menu-item.jpg',
            timeLabel: 'Preparation Time',
            variantsLabel: 'Global Variants',
            variantsPlaceholder: 'Small | 199\nMedium | 299',
            addonsLabel: 'Global Addons',
            addonsPlaceholder: 'Extra Cheese | 50\nCold Drink | 60',
            submit: 'Save Global Item',
        },
        grocery: {
            nameLabel: 'Product Name',
            namePlaceholder: 'e.g., Aashirvaad Atta 5 kg',
            categoryPlaceholder: 'Atta, Rice & Dal',
            subcategoryPlaceholder: 'Wheat Flour',
            descriptionPlaceholder: 'Pack size, shelf life, quality and product details',
            imagePlaceholder: 'https://example.com/product.jpg',
            timeLabel: 'Fulfilment Time',
            variantsLabel: 'Pack Sizes / Variants',
            variantsPlaceholder: '500 g | 60\n1 kg | 110',
            addonsLabel: 'Optional Extras',
            addonsPlaceholder: 'Reusable carry bag | 10\nGift wrap | 20',
            submit: 'Save Global Product',
        },
    };

    function hydrateSubcategories() {
        const selected = categories[categorySelect.value];
        subcategorySelect.innerHTML = '<option value="">Select Sub Category</option>';

        if (selected) {
            categoryNameInput.value = selected.name;
            selected.children.forEach((child) => {
                const option = document.createElement('option');
                option.value = child.id;
                option.textContent = child.name;
                option.dataset.name = child.name;
                option.selected = selectedSubcategoryId
                    ? String(child.id) === selectedSubcategoryId
                    : child.name === selectedSubcategoryName;
                subcategorySelect.appendChild(option);
            });
        }
    }

    categorySelect?.addEventListener('change', function () {
        hydrateSubcategories();
        subcategoryNameInput.value = '';
    });

    function filterCategories() {
        const isGrocery = serviceSelect.value === 'grocery';
        const copy = serviceCopy[isGrocery ? 'grocery' : 'food'];

        brandField?.classList.toggle('d-none', !isGrocery);
        brandField?.querySelectorAll('select,input,textarea').forEach((input) => {
            input.disabled = !isGrocery;
        });
        foodFields.forEach((field) => {
            field.classList.toggle('d-none', isGrocery);
            field.querySelectorAll('select,input,textarea').forEach((input) => {
                input.disabled = isGrocery;
            });
        });
        if (menuNameLabel) menuNameLabel.textContent = copy.nameLabel;
        if (itemNameInput) itemNameInput.placeholder = copy.namePlaceholder;
        if (categoryNameInput) categoryNameInput.placeholder = copy.categoryPlaceholder;
        if (subcategoryNameInput) subcategoryNameInput.placeholder = copy.subcategoryPlaceholder;
        if (descriptionInput) descriptionInput.placeholder = copy.descriptionPlaceholder;
        if (imageUrlInput) imageUrlInput.placeholder = copy.imagePlaceholder;
        if (timeLabel) timeLabel.textContent = copy.timeLabel;
        if (variantsLabel) variantsLabel.textContent = copy.variantsLabel;
        if (variantsInput) variantsInput.placeholder = copy.variantsPlaceholder;
        if (addonsLabel) addonsLabel.textContent = copy.addonsLabel;
        if (addonsInput) addonsInput.placeholder = copy.addonsPlaceholder;
        if (submitLabel) submitLabel.textContent = copy.submit;

        categorySelect.querySelectorAll('option[data-service]').forEach((option) => {
            option.hidden = option.dataset.service !== serviceSelect.value;
            if (option.hidden && option.selected) categorySelect.value = '';
        });
        hydrateSubcategories();
    }

    serviceSelect?.addEventListener('change', filterCategories);

    subcategorySelect?.addEventListener('change', function () {
        const option = subcategorySelect.options[subcategorySelect.selectedIndex];
        subcategoryNameInput.value = option?.dataset?.name || '';
    });

    filterCategories();
});
</script>
@endsection