@extends('backend.template.layouts.template-base')
@section('title', 'Product Management - Vital Kitchen Products')


@section('content')
    <section>
        <div class="page-head-title mb-3">
            <div class="d-flex align-items-center justify-content-between">
                <h2 class="text-title fw-semibold mb-0">Vital Kitchen Products
                </h2>
                <div class="product-btn-wrap">



                    <div class="d-flex align-items-center gap-3">
                        <a id="createBtn" class="button-green d-flex align-items-center px-3 mb-3" href="javascript:void(0)">
                            <img src="{{ asset('backend/template/svg-icon/plus.svg') }}">
                            <span id="btnText">New Ingredients</span>
                        </a>

                    </div>
                </div>
            </div>

            <!-- Nav tabs -->
            <ul class="nav nav-tabs nav-tabs-custom" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" data-bs-toggle="tab" href="#Products" role="tab" aria-selected="false"
                        tabindex="-1">
                        Products
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" data-bs-toggle="tab" href="#Groups" role="tab" aria-selected="false"
                        tabindex="-1">
                        Ingredients
                    </a>
                </li>
            </ul>

    <div class="tab-content card-tab-border text-muted">

        {{-- ── Products Tab ──────────────────────────────────────────────── --}}
        <div class="tab-pane show active p-3" id="tabProducts" role="tabpanel">
            <div class="d-flex align-items-center justify-content-between mb-3 gap-3 flex-wrap">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <div class="table-search-box">
                        <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}" alt="search">
                        <input type="text" id="vkProductSearch" placeholder="Search product name or group" class="table-search-input">
                    </div>
                    <select id="vkProductGroupFilter" class="table-filter-select" style="width:160px;">
                        <option value="">All Groups</option>
                        @foreach($groups as $group)
                            <option value="{{ $group->id }}">{{ $group->name }}</option>
                        @endforeach
                    </select>
                    <select id="vkProductStatusFilter" class="table-filter-select" style="width:130px;">
                        <option value="">All Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                        <option value="draft">Draft</option>
                    </select>
                </div>
                <div class="d-flex align-items-center gap-2 secondary-text fs-13">
                    Show
                    <select id="vkProductPerPage" class="table-filter-select" style="width:70px;">
                        <option value="10" selected>10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                    </select>
                    entries
                </div>
            </div>
            <table id="vkProductsTable" class="table align-middle" style="width:100%">
                <thead class="all-table-head">
                    <tr>
                        <th class="p-3" style="width:40px;"><input type="checkbox" class="form-check-input" id="selectAllVkProducts"></th>
                        <th class="p-3">Product ID</th>
                        <th class="p-3">Product Img</th>
                        <th class="p-3">Product Name</th>
                        <th class="p-3">Group Under</th>
                        <th class="p-3">Ingredients</th>
                        <th class="p-3">Last Updated</th>
                        <th class="p-3">Status</th>
                        <th class="p-3">Action</th>
                    </tr>
                </thead>
            </table>
        </div>

        {{-- ── Ingredients Tab ──────────────────────────────────────────── --}}
        <div class="tab-pane p-3" id="tabIngredients" role="tabpanel">
            <table id="vkIngredientsTable" class="table align-middle" style="width:100%">
                <thead class="all-table-head">
                    <tr>
                        <th class="p-3" style="width:40px;"><input type="checkbox" class="form-check-input" id="selectAllVkIngredients"></th>
                        <th class="p-3">Ingredient ID</th>
                        <th class="p-3">Img</th>
                        <th class="p-3">Ingredient Name</th>
                        <th class="p-3">Calories</th>
                        <th class="p-3">Variant &amp; Unit</th>
                        <th class="p-3">MRP ₹</th>
                        <th class="p-3">Products Used</th>
                        <th class="p-3">Last Updated</th>
                        <th class="p-3">Status</th>
                        <th class="p-3">Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    {{-- ── Delete Product Modal ─────────────────────────────────────────── --}}
    <div class="modal fade" id="deleteVkProductModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightRed">
                    <h3 class="text-color-error modal-title mb-0">Delete Product</h3>
                    <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0 text-title">Are you sure you want to delete <span class="fw-bold" id="deleteVkProductName"></span>?</p>
                    <p class="mt-2 mb-0 secondary-text fs-14">This action cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button-outline w-button" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-red" id="confirmDeleteVkProduct">Delete Product</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── New / Edit Ingredient Modal ──────────────────────────────────── --}}
    <div class="modal fade" id="ingredientModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightGreen border-0">
                    <h3 class="mb-0 modal-title color-green" id="ingredientModalTitle">New Ingredient</h3>
                    <button type="button" class="btn-close opacity-100 shadow-none" data-bs-dismiss="modal"></button>
                </div>
                <form id="ingredientForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="ingredientId" value="">
                    <div class="modal-body p-4">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label-modal">Ingredient Name <span class="color-red">*</span></label>
                                <input type="text" name="name" id="ingName" class="form-control" placeholder="Enter ingredient name">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-modal">Ingredient Name (Tamil/Tanglish)</label>
                                <input type="text" name="name_tamil" id="ingNameTamil" class="form-control" placeholder="Enter in Tamil">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label-modal">Ingredient Image</label>
                                <div class="upload-dropzone text-center p-4 rounded-3 position-relative uploadBox" id="ingUploadBox">
                                    <img src="" class="img-fluid d-none previewImage" style="max-height:120px;" id="ingPreviewImage">
                                    <div class="uploadContent" id="ingUploadContent">
                                        <img src="{{ asset('backend/template/svg-icon/upload-file.svg') }}" width="28">
                                        <p class="mb-1 mt-2">Click to Upload or drag and drop</p>
                                        <small class="text-muted">PNG, JPG or JPEG. Max 2MB</small>
                                    </div>
                                    <button type="button" class="replace-btn d-none replaceBtn" id="ingReplaceBtn">Replace Image</button>
                                    <input type="file" name="image" class="d-none" id="ingImageInput" accept="image/png,image/jpeg,image/jpg">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Variant</label>
                                <div class="drop-contain">
                                    <select name="variant_id" id="ingVariant" class="js-example-basic-single">
                                        <option value="">Select Variant</option>
                                        @foreach (\App\Models\Variant::where('status','active')->orderBy('value')->get() as $v)
                                            <option value="{{ $v->id }}">{{ $v->value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Unit</label>
                                <div class="drop-contain">
                                    <select name="unit_id" id="ingUnit" class="js-example-basic-single">
                                        <option value="">Select Unit</option>
                                        @foreach (\App\Models\Unit::where('status','active')->orderBy('name')->get() as $u)
                                            <option value="{{ $u->id }}">{{ $u->name }} ({{ $u->nickname }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">MRP ₹ <span class="color-red">*</span></label>
                                <input type="number" name="mrp" id="ingMrp" class="form-control" placeholder="0.00" step="0.01" min="0">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label d-block">Status</label>
                                <div class="d-flex align-items-center gap-4 mt-2">
                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input" type="radio" name="status" id="ingStatusActive" value="active" checked>
                                        <label class="form-label mb-0" for="ingStatusActive">Active</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input" type="radio" name="status" id="ingStatusInactive" value="inactive">
                                        <label class="form-label mb-0" for="ingStatusInactive">Inactive</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 px-4 pb-4 pt-0 d-flex justify-content-end gap-2">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="button-green" id="saveIngredientBtn">Create Ingredient</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ── View Ingredient Modal ─────────────────────────────────────────── --}}
    <div class="modal fade" id="viewIngredientModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightGreen">
                    <div class="d-flex flex-row align-items-center gap-2">
                        <img src="" class="product-modal-img" id="viewIngImage" style="height:50px;width:50px;object-fit:cover;border-radius:8px;">
                        <div>
                            <h3 class="color-green modal-title mb-0 d-flex align-items-center gap-3">
                                <span id="viewIngName"></span>
                                <span class="fs-14 py-1" id="viewIngStatusBadge"></span>
                            </h3>
                            <span class="text-sub-heading mb-0 fs-12">Last updated on: <span id="viewIngUpdated"></span></span>
                        </div>
                    </div>
                    <button type="button" class="btn-close opacity-100" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="modal-Card-border p-3 mb-2">
                        <div class="row gy-2">
                            <div class="col-6 secondary-text fw-normal">Ingredient Name</div>
                            <div class="col-6 text-title fs-12 text-end" id="viewIngFullName"></div>
                            <div class="col-6 secondary-text fw-normal">Ingredient ID</div>
                            <div class="col-6 text-title text-end" id="viewIngCode"></div>
                            <div class="col-6 secondary-text fw-normal">Variant &amp; Unit</div>
                            <div class="col-6 text-title text-end" id="viewIngVariant"></div>
                            <div class="col-6 secondary-text fw-normal">MRP</div>
                            <div class="col-6 text-title fw-bold text-end" id="viewIngMrp"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Delete Ingredient Modal ──────────────────────────────────────── --}}
    <div class="modal fade" id="deleteIngredientModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightRed">
                    <h3 class="text-color-error modal-title mb-0">Delete Ingredient</h3>
                    <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0 text-title">Are you sure you want to delete <span class="fw-bold" id="deleteIngName"></span>?</p>
                    <p class="mt-2 mb-0 secondary-text fs-14">This action cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button-outline w-button" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-red" id="confirmDeleteIngredient">Delete Ingredient</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Activate / Inactivate Ingredient Modals ─────────────────────── --}}
    <div class="modal fade" id="activateIngModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightGreen">
                    <h3 class="color-green modal-title mb-0">Activate Ingredient</h3>
                    <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0 text-title">Activate <span class="fw-semibold ingStatusName"></span>?</p>
                    <p class="mb-0 secondary-text">This ingredient will become available for product configuration.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-green" id="confirmActivateIng">Activate</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="inactivateIngModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightOrange">
                    <h3 class="color-orange modal-title mb-0">Inactivate Ingredient</h3>
                    <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0 text-title">Inactivate <span class="fw-semibold ingStatusName"></span>?</p>
                    <p class="mb-0 secondary-text">This ingredient will no longer be available for new product configurations.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-orange" id="confirmInactivateIng">Inactivate</button>
                </div>
            </div>
        </div>
    </div>

</section>
@endsection

@section('scripts')
<script>
$(function () {

    // ── Tab → button label ────────────────────────────────────────────────
    var currentTab = 'products';
    $('[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
        currentTab = $(e.target).attr('href') === '#tabProducts' ? 'products' : 'ingredients';
        $('#btnText').text(currentTab === 'products' ? 'New Product' : 'New Ingredient');
    });

    $('#createBtn').on('click', function () {
        if (currentTab === 'products') {
            window.location.href = '{{ route("backend.template.vk.products.create") }}';
        } else {
            openIngredientModal(null);
        }
    });

    // ── Products DataTable ────────────────────────────────────────────────
    var productsDT = $('#vkProductsTable').DataTable({
        serverSide: true,
        ajax: {
            url: '{{ route("backend.template.vk.product-data") }}',
            data: function (d) {
                d.group_filter  = $('#vkProductGroupFilter').val();
                d.status_filter = $('#vkProductStatusFilter').val();
            }
        },
        columns: [
            { data: null, defaultContent: '<input type="checkbox" class="form-check-input row-check">', orderable: false, searchable: false },
            { data: 'product_code', name: 'product_code' },
            { data: 'image_html', name: 'image', orderable: false, searchable: false },
            { data: 'name_html', name: 'name' },
            { data: 'group_name', name: 'group.name' },
            { data: 'ingredients_count', name: 'ingredients_count', searchable: false },
            { data: 'updated_at_fmt', name: 'updated_at', searchable: false },
            { data: 'status_badge', name: 'status', orderable: false, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ],
        dom: 'rt<"d-flex align-items-center justify-content-end mt-3"ip>',
    });

    // VK product search (debounced)
    var vkProductSearchTimer;
    $('#vkProductSearch').on('input', function () {
        clearTimeout(vkProductSearchTimer);
        var val = $(this).val();
        vkProductSearchTimer = setTimeout(function () { productsDT.search(val).draw(); }, 350);
    });

    // Group / Status filter
    $('#vkProductGroupFilter, #vkProductStatusFilter').on('change', function () {
        productsDT.ajax.reload();
    });

    // Per-page
    $('#vkProductPerPage').on('change', function () {
        productsDT.page.len(parseInt($(this).val())).draw();
    });

    // Select-all VK products
    $('#selectAllVkProducts').on('change', function () {
        $('#vkProductsTable tbody .row-check').prop('checked', $(this).is(':checked'));
        $(this).prop('indeterminate', false);
    });
    $(document).on('change', '#vkProductsTable .row-check', function () {
        var total   = $('#vkProductsTable tbody .row-check').length;
        var checked = $('#vkProductsTable tbody .row-check:checked').length;
        $('#selectAllVkProducts').prop({ indeterminate: checked > 0 && checked < total, checked: checked === total });
    });
    productsDT.on('draw', function () {
        $('#selectAllVkProducts').prop({ indeterminate: false, checked: false });
    });

    // Delete product
    var deleteVkProductId = null;
    $(document).on('click', '.delete-vkproduct-btn', function () {
        deleteVkProductId = $(this).data('id');
        $('#deleteVkProductName').text($(this).data('name'));
        $('#deleteVkProductModal').modal('show');
    });
    $('#confirmDeleteVkProduct').on('click', function () {
        $.ajax({ url: '{{ url("admin/vk/products") }}/' + deleteVkProductId, type: 'DELETE' })
            .done(function (res) {
                toastr.success(res.message);
                $('#deleteVkProductModal').modal('hide');
                productsDT.ajax.reload(null, false);
            }).fail(function () { toastr.error('Delete failed.'); });
    });

    // ── Ingredients DataTable ─────────────────────────────────────────────
    var ingredientsDT = $('#vkIngredientsTable').DataTable({
        serverSide: true,
        ajax: '{{ route("backend.template.vk.ingredient-data") }}',
        columns: [
            { data: null, defaultContent: '<input type="checkbox" class="form-check-input row-check">', orderable: false, searchable: false },
            { data: 'ingredient_code', name: 'ingredient_code' },
            { data: 'image_html', name: 'image', orderable: false, searchable: false },
            { data: 'name_html', name: 'name' },
            { data: 'variant_label', name: 'variant_label', orderable: false, searchable: false },
            { data: 'mrp_fmt', name: 'mrp', searchable: false },
            { data: 'products_used', name: 'products_used', searchable: false },
            { data: 'updated_at_fmt', name: 'updated_at', searchable: false },
            { data: 'status_badge', name: 'status', orderable: false, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ],
        dom: '<"d-flex align-items-center justify-content-between mb-3"<"d-flex gap-3"f><"d-flex gap-2 align-items-center"l>>rt<"d-flex align-items-center justify-content-end mt-3"ip>',
    });

    // Select-all VK ingredients
    $('#selectAllVkIngredients').on('change', function () {
        $('#vkIngredientsTable tbody .row-check').prop('checked', $(this).is(':checked'));
        $(this).prop('indeterminate', false);
    });
    $(document).on('change', '#vkIngredientsTable .row-check', function () {
        var total   = $('#vkIngredientsTable tbody .row-check').length;
        var checked = $('#vkIngredientsTable tbody .row-check:checked').length;
        $('#selectAllVkIngredients').prop({ indeterminate: checked > 0 && checked < total, checked: checked === total });
    });
    ingredientsDT.on('draw', function () {
        $('#selectAllVkIngredients').prop({ indeterminate: false, checked: false });
    });

    // ── View Ingredient ───────────────────────────────────────────────────
    $(document).on('click', '.view-ingredient-btn', function () {
        var d = $(this).data();
        $('#viewIngName').text(d.name);
        $('#viewIngFullName').text(d.name + (d.name_tamil ? ' (' + d.name_tamil + ')' : ''));
        $('#viewIngCode').text(d.code);
        $('#viewIngVariant').text(d.variant || '-');
        $('#viewIngMrp').text('₹' + parseFloat(d.mrp).toFixed(2));
        $('#viewIngUpdated').text(d.updated);
        var sBadge = d.status === 'active' ? '<span class="status-green-pill">Active</span>' : '<span class="status-yellow-pill">Inactive</span>';
        $('#viewIngStatusBadge').html(sBadge);
        if (d.image) { $('#viewIngImage').attr('src', d.image).show(); } else { $('#viewIngImage').hide(); }
        $('#viewIngredientModal').modal('show');
    });

    // ── Ingredient CRUD ───────────────────────────────────────────────────
    function openIngredientModal(editData) {
        $('#ingredientForm')[0].reset();
        $('#ingPreviewImage').addClass('d-none').attr('src', '');
        $('#ingUploadContent').removeClass('d-none');
        $('#ingReplaceBtn').addClass('d-none');
        if (window.ingVariantSelect) { window.ingVariantSelect.val(null).trigger('change'); }
        if (window.ingUnitSelect)    { window.ingUnitSelect.val(null).trigger('change'); }

        if (editData) {
            $('#ingredientModalTitle').text('Edit ' + editData.name);
            $('#ingredientId').val(editData.id);
            $('#ingName').val(editData.name);
            $('#ingNameTamil').val(editData.name_tamil || '');
            $('#ingMrp').val(editData.mrp);
            $('input[name="status"][value="' + editData.status + '"]').prop('checked', true);
            if (editData.variant_id) $('#ingVariant').val(editData.variant_id).trigger('change');
            if (editData.unit_id)    $('#ingUnit').val(editData.unit_id).trigger('change');
            $('#saveIngredientBtn').text('Update Ingredient');
        } else {
            $('#ingredientModalTitle').text('New Ingredient');
            $('#ingredientId').val('');
            $('#saveIngredientBtn').text('Create Ingredient');
        }
        $('#ingredientModal').modal('show');
    }

    $(document).on('click', '.edit-ingredient-btn', function () {
        openIngredientModal($(this).data());
    });

    // Image upload preview — setTimeout required for Bootstrap modal compatibility
    $('#ingUploadBox').on('click', function (e) {
        if ($(e.target).is('#ingReplaceBtn') || $(e.target).is('#ingImageInput')) return;
        setTimeout(function () { document.getElementById('ingImageInput').click(); }, 50);
    });
    $('#ingReplaceBtn').on('click', function (e) {
        e.stopPropagation();
        setTimeout(function () { document.getElementById('ingImageInput').click(); }, 50);
    });
    $('#ingImageInput').on('click', function (e) { e.stopPropagation(); });
    $('#ingImageInput').on('change', function () {
        var file = this.files[0];
        if (!file) return;
        if (file.size > 2 * 1024 * 1024) { toastr.error('Image must be under 2MB.'); this.value = ''; return; }
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#ingPreviewImage').attr('src', e.target.result).removeClass('d-none');
            $('#ingUploadContent').addClass('d-none');
            $('#ingReplaceBtn').removeClass('d-none');
        };
        reader.readAsDataURL(file);
    });

    // Save ingredient — with client-side validation
    $('#saveIngredientBtn').on('click', function () {
        var name = $('#ingName').val().trim();
        var mrp  = $('#ingMrp').val();
        if (!name) { toastr.error('Ingredient name is required.'); $('#ingName').focus(); return; }
        if (mrp === '' || parseFloat(mrp) < 0) { toastr.error('MRP is required and must be ≥ 0.'); $('#ingMrp').focus(); return; }

        var id   = $('#ingredientId').val();
        var url  = id ? '{{ url("admin/vk/ingredients") }}/' + id : '{{ route("backend.template.vk.ingredients.store") }}';
        var form = new FormData($('#ingredientForm')[0]);
        var $btn = $(this).prop('disabled', true).text('Saving…');
        $.ajax({ url: url, type: 'POST', data: form, processData: false, contentType: false })
            .done(function (res) {
                toastr.success(res.message);
                $('#ingredientModal').modal('hide');
                ingredientsDT.ajax.reload(null, false);
            })
            .fail(function (xhr) {
                var msg = xhr.responseJSON?.errors ? Object.values(xhr.responseJSON.errors).flat().join('<br>') : (xhr.responseJSON?.message || 'Error.');
                toastr.error(msg);
            })
            .always(function () { $btn.prop('disabled', false).text(id ? 'Update Ingredient' : 'Create Ingredient'); });
    });

    // Delete ingredient
    var deleteIngId = null;
    $(document).on('click', '.delete-ingredient-btn', function () {
        deleteIngId = $(this).data('id');
        $('#deleteIngName').text($(this).data('name'));
        $('#deleteIngredientModal').modal('show');
    });
    $('#confirmDeleteIngredient').on('click', function () {
        $.ajax({ url: '{{ url("admin/vk/ingredients") }}/' + deleteIngId, type: 'DELETE' })
            .done(function (res) {
                toastr.success(res.message);
                $('#deleteIngredientModal').modal('hide');
                ingredientsDT.ajax.reload(null, false);
            }).fail(function () { toastr.error('Delete failed.'); });
    });

    // Status toggle
    var toggleIngId = null, toggleIngName = null;
    $(document).on('click', '.status-toggle-ing', function () {
        toggleIngId   = $(this).data('id');
        toggleIngName = $(this).closest('tr').find('.group-name').text() || 'this ingredient';
        var status    = $(this).data('status');
        $('.ingStatusName').text(toggleIngName);
        if (status === 'active') {
            $('#inactivateIngModal').modal('show');
        } else {
            $('#activateIngModal').modal('show');
        }
    });
    $('#confirmActivateIng, #confirmInactivateIng').on('click', function () {
        $.post('{{ url("admin/vk/ingredients") }}/' + toggleIngId + '/toggle-status')
            .done(function () {
                toastr.success('Status updated.');
                $('#activateIngModal, #inactivateIngModal').modal('hide');
                ingredientsDT.ajax.reload(null, false);
            }).fail(function () { toastr.error('Failed.'); });
    });
});
</script>
@endsection