@extends('backend.template.layouts.template-base')
@section('title', 'Vital Kitchen - Edit ' . $product->name)


@section('content')
<section>
    <div class="page-head-title mb-4">
        <a href="{{ route('backend.template.vk.products.show', $product->id) }}" class="d-inline-block">
            <h2 class="text-title fw-semibold mb-0 d-flex align-items-center">
                <i class="ri-arrow-left-s-line fs-1 me-2"></i>Edit Product
            </h2>
        </a>
    </div>

    <form id="vkProductForm" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="status" id="finalStatus" value="{{ $product->status }}">
        <input type="hidden" name="ingredients_json" id="ingredientsJson" value="[]">
        <input type="hidden" name="groups_json" id="groupsJson" value="{}">

        <div class="row">
            <div class="col-lg-12">

                @include('backend.template.product-management.vital-kitchen-products.partials.product-info-fields', [
                    'groups' => $groups, 'products' => $products, 'product' => $product
                ])

                @include('backend.template.product-management.vital-kitchen-products.partials.ingredient-section', [
                    'prefillIngredients' => $prefillIngredients,
                    'prefillGroups'      => $prefillGroups,
                ])

                @include('backend.template.product-management.vital-kitchen-products.partials.seo-fields', [
                    'seo' => $product->seo
                ])

                <div class="d-flex gap-3 align-items-center btn-list mb-3">
                    <button type="button" class="shadow-button-green d-lg-block d-none" id="saveDraftBtn">Save as Draft</button>
                    <a href="{{ route('backend.template.vk.products.show', $product->id) }}" class="outline-button-green">Cancel</a>
                    <button type="button" class="button-green" id="updateProductBtn">Update Product</button>
                </div>
                <button type="button" class="shadow-button-green1 d-lg-none d-block" id="saveDraftBtnMobile">Save as Draft</button>

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

    @include('backend.template.product-management.vital-kitchen-products.partials.group-modal')

    {{-- Confirm Update Modal --}}
    <div id="confirmUpdateModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content custom-modal">
                <div class="modal-header custom-header">
                    <h5 class="modal-title1 mt-2">Update Product?</h5>
                </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">Product Name</div>
                            <div class="col-6 text-title fs-12 text-end" id="confirmProductName">-</div>
                            <div class="col-6 secondary-text fw-normal">Total Ingredients</div>
                            <div class="col-6 text-title text-end" id="confirmIngCount">0</div>
                            <div class="col-6 secondary-text fw-normal">MRP (Standards)</div>
                            <div class="col-6 text-title fw-bold text-end" id="confirmMrp">₹0.00</div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="table-responsive mt-1 rounded-4">

                                <table class="table align-middle pricing-info-table  text-nowrap mb-0">
                                    <thead class="all-table-head">
                                        <tr class="text-capitalize">
                                            <th scope="row" class="p-3" style="width: 80px">
                                                <div class="form-check justify-content-end">
                                                    <input class="form-check-input" type="checkbox" name="checkAll"
                                                        value="option1">
                                                </div>
                                            </th>
                                            <th class="p-3 table-head-content" style="width: 50px">S.no</th>
                                            <th class="p-3 table-head-content">Ingredient Img</th>
                                            <th class="p-3 table-head-content">Ingredient Name</th>
                                            <th class="p-3 table-head-content" style="width: 140px">Variant & Units</th>
                                            <th class="p-3 table-head-content" style="width: 80px">Price ₹</th>
                                            <th class="p-3 table-head-content" style="width: 200px">Ingredient Type</th>
                                            <th class="p-3 table-head-content">Action</th>
                                        </tr>
                                        <tr>
                                        <th colspan="8" class="p-2 table-head-content">
                                            <div class="row g-3 flex-row">
                                                <div class="col-5">
                                                    <div class="table-search-box">
                                                        <img class="table-search-icon"
                                                            src="{{ asset('backend/template/svg-icon/search.svg') }}"
                                                            alt="search2">
                                                        <input type="text" placeholder="Search by ingredient name"
                                                            class="table-search-input">
                                                    </div>
                                                </div>
                                                <div class="col-3">
                                                    <div class="drop-contain ">
                                                        <select class="js-example-basic-single" name="state">
                                                            <option value="All types">All types</option>
                                                            <option value="All types">All types</option>
                                                            <option value="All types">All types</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody class="list form-check-all sortable-table">
                                        <tr class="table-body-content p-3" data-id="1">
                                            <td class="table-body-content p-3">
                                                <div class="d-flex align-items-center gap-3 justify-content-start">
                                                    <img src="{{ asset('backend/template/svg-icon/drag-bar.svg') }}"
                                                    class="drag-handle" alt="drag-icon">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="checkAll"
                                                            value="option1">
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="table-body-content p-3">1</td>
                                            <td class="table-body-content p-3">
                                                <img src="{{ asset('backend/template/svg-icon/product-img.svg') }}"
                                                    class="product-image-size" alt="product-image">
                                            </td>
                                            <td class="table-body-content p-3">
                                                <p class="mb-1">Lorem ipsum</p>
                                                <p class="mb-0 fs-12">லோரம் இப்சம்</p>
                                            </td>
                                            <td class="table-body-content p-3">250 g</td>
                                            <td class="table-body-content p-3">₹000</td>
                                            <td class="table-body-content p-3">
                                                <div class="standard-dressing-switch">
                                                    
                                                    <input type="radio" name="foodType" id="standard" class="standard-input" checked>
                                                    <input type="radio" name="foodType" id="dressing" class="dressing-input">
                                                    
                                                    <label for="standard" class="standard-text mb-0">Standard</label>
                                                    <label for="dressing" class="dressing-text mb-0">Dressing</label>
                                                    
                                                    <span class="standard-dressing-slider"></span>
                                                    
                                                </div>
                                            </td>
                                            <td class="table-body-content p-3">
                                                <div class="d-flex align-items-center gap-4">
                                                    <div class="check-hover-wrap">
                                                        <label class="custom-check-green">
                                                            <input type="checkbox">
                                                            <span class="checkmark-green"></span>
                                                        </label>
                                                        {{-- hover note --}}
                                                        <div class="hover-note-box">
                                                            <span class="hover-note-icon"><img src="{{ asset('backend/template/images/svg/alert-hove-blue.svg') }}" alt="icon"></span>
                                                            By checking, you’re dropping your suggestions for dressing. Customer can Uncheck.
                                                        </div>
                                                    </div>

                                                    <img class="mb-1" src="{{ asset('backend/template/images/svg/tabler-checkbox-red.svg') }}" alt="checkmark-red">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="table-body-content p-3" data-id="1">
                                            <td class="table-body-content p-3">
                                                <div class="d-flex align-items-center gap-3 justify-content-start">
                                                    <img src="{{ asset('backend/template/svg-icon/drag-bar.svg') }}"
                                                    class="drag-handle" alt="drag-icon">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="checkAll"
                                                            value="option1">
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="table-body-content p-3">1</td>
                                            <td class="table-body-content p-3">
                                                <img src="{{ asset('backend/template/svg-icon/product-img.svg') }}"
                                                    class="product-image-size" alt="product-image">
                                            </td>
                                            <td class="table-body-content p-3">
                                                <p class="mb-1">Lorem ipsum</p>
                                                <p class="mb-0 fs-12">லோரம் இப்சம்</p>
                                            </td>
                                            <td class="table-body-content p-3">250 g</td>
                                            <td class="table-body-content p-3">₹000</td>
                                            <td class="table-body-content p-3">
                                                <div class="standard-dressing-switch">
                                                    
                                                    <input type="radio" name="foodType1" id="standard1" class="standard-input">
                                                    <input type="radio" name="foodType1" id="dressing1" class="dressing-input" checked>
                                                    
                                                    <label for="standard1" class="standard-text mb-0">Standard</label>
                                                    <label for="dressing1" class="dressing-text mb-0">Dressing</label>
                                                    
                                                    <span class="standard-dressing-slider"></span>
                                                    
                                                </div>
                                            </td>
                                            <td class="table-body-content p-3">
                                                <div class="d-flex align-items-center gap-4">
                                                    <div class="check-hover-wrap">
                                                        <label class="custom-check-green">
                                                            <input type="checkbox">
                                                            <span class="checkmark-green"></span>
                                                        </label>
                                                        {{-- hover note --}}
                                                        <div class="hover-note-box">
                                                            <span class="hover-note-icon"><img src="{{ asset('backend/template/images/svg/alert-hove-blue.svg') }}" alt="icon"></span>
                                                            By checking, you’re dropping your suggestions for dressing. Customer can Uncheck.
                                                        </div>
                                                    </div>

                                                    <img class="mb-1" src="{{ asset('backend/template/images/svg/tabler-checkbox-red.svg') }}" alt="checkmark-red">
                                                </div>
                                            </td>
                                        </tr>

                                        {{-- Group-1 start --}}
                                        <tr class="table-body-content p-3 ingredient-group-head show-group" data-group="group-1">
                                            <td class="table-body-content p-3">
                                                <div class="d-flex align-items-center gap-3 justify-content-start">
                                                    <img src="{{ asset('backend/template/svg-icon/drag-bar.svg') }}" class="drag-handle" alt="drag-icon">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="checkAll" value="option1">
                                                    </div>
                                                </div>
                                            </td>

                                            <td class="table-body-content p-3">1</td>

                                            <td colspan="5" class="table-body-content p-3">
                                                [Group Label Name] <span class="fw-bold">. 5 Ingredients added</span>
                                            </td>

                                            <td class="table-body-content p-3">
                                                <div class="d-flex align-items-center justify-content-end gap-3 pe-4">
                                                    <img class="mb-1" src="{{ asset('backend/template/images/svg/tabler-checkbox-red.svg') }}" alt="checkmark-red">
                                                    <img class="table-grp-arrow" src="{{ asset('backend/template/images/svg/table-down-arrow.svg') }}" alt="arrow">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="ingredient-group-row group-1 p-3 text-center ">
                                            <td class="table-body-content p-3">
                                                <div class="ps-3 d-flex align-items-center gap-3 justify-content-start">
                                                    <img src="{{ asset('backend/template/svg-icon/drag-bar.svg') }}"
                                                    class="drag-handle" alt="drag-icon">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="checkAll"
                                                            value="option1">
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="table-body-content p-3">1</td>
                                            <td class="table-body-content p-3" style="width: 50px">
                                                <img src="{{ asset('backend/template/svg-icon/product-img.svg') }}"
                                                    class="product-image-size" alt="product-image">
                                            </td>
                                            <td class="table-body-content p-3">
                                                <p class="mb-1">Lorem ipsum</p>
                                                <p class="mb-0 fs-12">லோரம் இப்சம்</p>
                                            </td>
                                            <td class="table-body-content p-3">250 g</td>
                                            <td class="table-body-content p-3">₹000</td>
                                            <td class="table-body-content p-3">
                                                {{-- To change the status standard-pill(green) / dressing-pill(orange) --}}
                                                <span class="dressing-pill">Dressing</span>
                                            </td>
                                            <td class="table-body-content p-3">
                                                <div class="d-flex align-items-center gap-4">
                                                    <div class="check-hover-wrap">
                                                        <label class="custom-check-green">
                                                            <input type="checkbox">
                                                            <span class="checkmark-green"></span>
                                                        </label>
                                                        {{-- hover note --}}
                                                        <div class="hover-note-box">
                                                            <span class="hover-note-icon"><img src="{{ asset('backend/template/images/svg/alert-hove-blue.svg') }}" alt="icon"></span>
                                                            By checking, you’re dropping your suggestions for dressing. Customer can Uncheck.
                                                        </div>
                                                    </div>

                                                    <img class="mb-1" src="{{ asset('backend/template/images/svg/tabler-checkbox-red.svg') }}" alt="checkmark-red">
                                                </div>
                                            </td>
                                        </tr>
                                        {{-- Group-1 end --}}

                                        {{-- Group-2 start --}}
                                        <tr class="table-body-content p-3 ingredient-group-head show-collapsed" data-group="group-2">
                                            <td class="table-body-content p-3">
                                                <div class="d-flex align-items-center gap-3 justify-content-start">
                                                    <img src="{{ asset('backend/template/svg-icon/drag-bar.svg') }}" class="drag-handle" alt="drag-icon">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="checkAll" value="option1">
                                                    </div>
                                                </div>
                                            </td>

                                            <td class="table-body-content p-3">1</td>

                                            <td colspan="5" class="table-body-content p-3">
                                                [Group Label Name] <span class="fw-bold">. 5 Ingredients added</span>
                                            </td>

                                            <td class="table-body-content p-3">
                                                <div class="d-flex align-items-center justify-content-end gap-3 pe-4">
                                                    <img class="mb-1" src="{{ asset('backend/template/images/svg/tabler-checkbox-red.svg') }}" alt="checkmark-red">
                                                    <img class="table-grp-arrow" src="{{ asset('backend/template/images/svg/table-down-arrow.svg') }}" alt="arrow">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="ingredient-group-row group-2 p-3 text-center ">
                                            <td class="table-body-content p-3">
                                                <div class="ps-3 d-flex align-items-center gap-3 justify-content-start">
                                                    <img src="{{ asset('backend/template/svg-icon/drag-bar.svg') }}"
                                                    class="drag-handle" alt="drag-icon">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="checkAll"
                                                            value="option1">
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="table-body-content p-3">1</td>
                                            <td class="table-body-content p-3" style="width: 50px">
                                                <img src="{{ asset('backend/template/svg-icon/product-img.svg') }}"
                                                    class="product-image-size" alt="product-image">
                                            </td>
                                            <td class="table-body-content p-3">
                                                <p class="mb-1">Lorem ipsum</p>
                                                <p class="mb-0 fs-12">லோரம் இப்சம்</p>
                                            </td>
                                            <td class="table-body-content p-3">250 g</td>
                                            <td class="table-body-content p-3">₹000</td>
                                            <td class="table-body-content p-3">
                                                {{-- To change the status standard-pill(green) / dressing-pill(orange) --}}
                                                <span class="dressing-pill">Dressing</span>
                                            </td>
                                            <td class="table-body-content p-3">
                                                <div class="d-flex align-items-center gap-4">
                                                    <div class="check-hover-wrap">
                                                        <label class="custom-check-green">
                                                            <input type="checkbox">
                                                            <span class="checkmark-green"></span>
                                                        </label>
                                                        {{-- hover note --}}
                                                        <div class="hover-note-box">
                                                            <span class="hover-note-icon"><img src="{{ asset('backend/template/images/svg/alert-hove-blue.svg') }}" alt="icon"></span>
                                                            By checking, you’re dropping your suggestions for dressing. Customer can Uncheck.
                                                        </div>
                                                    </div>

                                                    <img class="mb-1" src="{{ asset('backend/template/images/svg/tabler-checkbox-red.svg') }}" alt="checkmark-red">
                                                </div>
                                            </td>
                                        </tr>
                                        {{-- Group-2 end --}}
                                       
                                        {{-- if no product show this --}}
                                        <tr class="">
                                            <td colspan="8" class="table-body-content p-3">
                                                <div class="text-center">
                                                    <span
                                                        class="secondary-text d-flex gap-2 align-items-center justify-content-center">
                                                        <img src="{{ asset('backend/template/svg-icon/alert-muted.svg') }}"
                                                            alt="icon" width="20" height="20">
                                                        <p class="mb-1">No products selected yet!</p>
                                                    </span>

                                                    <p class="mb-0 fs-12 secondary-text">Select product by its name or select
                                                        multiple products by selecting group at once. </p>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                        <div class="form-check custom-radio">
                            <input class="form-check-input" type="radio" name="confirmStatus" id="confirmDraft" value="draft"
                                {{ $product->status === 'draft' ? 'checked' : '' }}>
                            <label class="form-check-label" for="confirmDraft">Draft</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn-create" id="doUpdateProductBtn">Update Product</button>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scripts')
@include('backend.template.product-management.vital-kitchen-products.partials.ingredient-scripts')
<script>
$(function () {
    // SEO toggle
    @php $seo = $product->seo; @endphp
    @if ($seo && ($seo->meta_title || $seo->meta_description || $seo->schema || $seo->h1 || $seo->image_alt))
        $('#seoToggle').prop('checked', true);
        $('#seoSettingsBody').show();
    @endif
    $('#seoToggle').on('change', function () {
        $(this).is(':checked') ? $('#seoSettingsBody').slideDown(200) : $('#seoSettingsBody').slideUp(200);
        if (!$(this).is(':checked')) { $('#seoSettingsBody .error').removeClass('error'); }
    });

    $('#saveDraftBtn, #saveDraftBtnMobile').on('click', function () {
        $('#finalStatus').val('draft');
        submitVkProduct();
    });

    function validateVkForm() {
        var ok = true;

        var $name = $('input[name="name"]');
        if (!$name.val().trim()) {
            $name.addClass('error');
            if (!$name.next('.error-msg').length) $name.after('<small class="error-msg" style="color:#e03137;font-size:12px;display:block;margin-top:2px">Product name is required.</small>');
            ok = false;
        } else { $name.removeClass('error').next('.error-msg').remove(); }

        var $tamil = $('input[name="name_tamil"]');
        if (!$tamil.val().trim()) {
            $tamil.addClass('error');
            if (!$tamil.next('.error-msg').length) $tamil.after('<small class="error-msg" style="color:#e03137;font-size:12px;display:block;margin-top:2px">Tamil / Tanglish name is required.</small>');
            ok = false;
        } else { $tamil.removeClass('error').next('.error-msg').remove(); }

        var $group = $('select[name="group_id"]');
        if (!$group.val()) {
            $group.closest('.drop-contain').addClass('border border-danger rounded');
            if (!$group.closest('.drop-contain').next('.error-msg').length)
                $group.closest('.drop-contain').after('<small class="error-msg" style="color:#e03137;font-size:12px;display:block;margin-top:2px">Group is required.</small>');
            ok = false;
        } else { $group.closest('.drop-contain').removeClass('border border-danger rounded').next('.error-msg').remove(); }

        if ($('#seoToggle').is(':checked')) {
            $('#seoSettingsBody input').each(function () {
                if (!$(this).val().trim()) { $(this).addClass('error'); ok = false; }
                else { $(this).removeClass('error'); }
            });
        }

        if (!ok) { toastr.error('Please fill in all required fields.'); if (!$name.val().trim()) $name.focus(); }
        return ok;
    }

    $('#updateProductBtn').on('click', function () {
        if (!validateVkForm()) return;
        var name = $('input[name="name"]').val().trim();
        $('#confirmProductName').text(name + ($('input[name="name_tamil"]').val() ? ' (' + $('input[name="name_tamil"]').val() + ')' : ''));
        var total = Object.keys(window.addedIngredients).length;
        var mrp   = Object.values(window.addedIngredients).filter(i => i.ingredient_type === 'standard').reduce((s, i) => s + parseFloat(i.mrp || 0), 0);
        $('#confirmIngCount').text(total);
        $('#confirmMrp').text('₹' + mrp.toFixed(2));
        $('#confirmUpdateModal').modal('show');
    });

    $('#doUpdateProductBtn').on('click', function () {
        $('#finalStatus').val($('input[name="confirmStatus"]:checked').val());
        $('#confirmUpdateModal').modal('hide');
        submitVkProduct();
    });

    function submitVkProduct() {
        if (typeof window.serializeIngredientState === 'function') serializeIngredientState();
        var seoOn = $('#seoToggle').is(':checked');
        if (!seoOn) { $('#seoSettingsBody input').prop('disabled', true); }
        var form = new FormData(document.getElementById('vkProductForm'));
        if (!seoOn) { $('#seoSettingsBody input').prop('disabled', false); }
        if (typeof window.vkDescEditor !== 'undefined') {
            try { form.set('description', window.vkDescEditor.getData()); } catch(e) {}
        }
        var $btn = $('#doUpdateProductBtn, #saveDraftBtn, #saveDraftBtnMobile').prop('disabled', true);
        $.ajax({
            url: '{{ route("backend.template.vk.products.update", $product->id) }}',
            type: 'POST',
            data: form,
            processData: false,
            contentType: false,
        }).done(function (res) {
            toastr.success(res.message || 'Product updated.');
            setTimeout(function () {
                window.location.href = '{{ route("backend.template.vk.products.show", $product->id) }}';
            }, 900);
        }).fail(function (xhr) {
            $btn.prop('disabled', false);
            var errs = xhr.responseJSON?.errors;
            var msg  = errs ? Object.values(errs).flat().join('\n') : (xhr.responseJSON?.message || 'Failed to update product.');
            toastr.error(msg);
        });
    }
});
</script>
@endsection