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


@section('content')
<section>
    <div class="page-head-title mb-4">
        <a href="{{ route('backend.template.vk.index') }}" 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>New Product
            </h2>
        </a>
    </div>

    <form id="vkProductForm" enctype="multipart/form-data" novalidate>
        @csrf
        <input type="hidden" name="status" id="finalStatus" value="active">
        <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' => null
                ])

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

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

                <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.index') }}" class="outline-button-green" id="cancelBtn">Cancel</a>
                    <button type="button" class="button-green" id="createProductBtn">Create 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 Create Modal --}}
    <div id="confirmCreateModal" 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">Create 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>
                    <p class="text-title mb-2">Add this product to your catalog?</p>
                    <div class="bg-color-lightOrange rounded-3 p-2 mb-3">
                        <ul class="ps-3 fs-12 color-orange list-disc mb-0">
                            <li>Ensure all ingredients and customization options are configured.</li>
                            <li>Pricing and ingredient combinations will impact order totals.</li>
                        </ul>
                    </div>
                    <label class="form-label status mt-3">Product Status</label>
                    <div class="d-flex gap-4 mt-2">
                        <div class="form-check custom-radio">
                            <input class="form-check-input" type="radio" name="confirmStatus" id="confirmActive" value="active" checked>
                            <label class="form-check-label" for="confirmActive">Active</label>
                        </div>
                        <div class="form-check custom-radio">
                            <input class="form-check-input" type="radio" name="confirmStatus" id="confirmInactive" value="inactive">
                            <label class="form-check-label" for="confirmInactive">Inactive</label>
                        </div>
                        <div class="form-check custom-radio">
                            <input class="form-check-input" type="radio" name="confirmStatus" id="confirmDraft" value="draft">
                            <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="doCreateProductBtn">Create 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
    $('#seoToggle').on('change', function () {
        $(this).is(':checked') ? $('#seoSettingsBody').slideDown(200) : $('#seoSettingsBody').slideUp(200);
        if (!$(this).is(':checked')) { $('#seoSettingsBody .error').removeClass('error'); }
    });

    // Save as Draft
    $('#saveDraftBtn, #saveDraftBtnMobile').on('click', function () {
        if (!validateVkForm()) return;
        $('#finalStatus').val('draft');
        submitVkProduct();
    });

    // Open confirm modal with validation
    $('#createProductBtn').on('click', function () {
        if (!validateVkForm()) return;
        var name = $('input[name="name"]').val().trim();
        var tamil = $('input[name="name_tamil"]').val().trim();
        $('#confirmProductName').text(name + (tamil ? ' (' + tamil + ')' : ''));
        var all = Object.values(window.addedIngredients);
        $('#confirmIngCount').text(all.length);
        $('#confirmMrp').text('₹' + all.filter(function(i){return i.ingredient_type==='standard';})
            .reduce(function(s,i){return s+i.mrp;},0).toFixed(2));
        $('#confirmCreateModal').modal('show');
    });

    $('#doCreateProductBtn').on('click', function () {
        $('#finalStatus').val($('input[name="confirmStatus"]:checked').val());
        $('#confirmCreateModal').modal('hide');
        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;
    }

    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 = $('#doCreateProductBtn, #saveDraftBtn, #saveDraftBtnMobile').prop('disabled', true);
        $.ajax({
            url: '{{ route("backend.template.vk.products.store") }}',
            type: 'POST',
            data: form,
            processData: false,
            contentType: false,
        }).done(function (res) {
            toastr.success(res.message || 'Product created successfully.');
            setTimeout(function () {
                window.location.href = '{{ route("backend.template.vk.index") }}';
            }, 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 create product. Check all fields.');
            toastr.error(msg);
        });
    }
});
</script>
@endsection