@extends('Kitchen.layout')

<style>
    textarea.form-control {
        height: 135px;
        resize: none;
    }

    .upload-container {
        border: 2px dashed #cbd5e1;
        border-radius: 12px;
        background: #fdfdfd;
        min-height: 164px;
        padding: 15px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-content: flex-start;
    }

    .upload-container.is-invalid {
        border: 2px solid #ff676c !important;
    }

    .image-preview-wrapper {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }

    .image-preview-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 7px;
    }

    .remove-img-btn {
        position: absolute;
        top: -5px;
        right: -5px;
        background: #ff4d4d;
        color: white;
        border: none;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-size: 12px;
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .add-image-box {
        width: 100px;
        height: 100px;
        border: 2px dashed #0056b3;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #0056b3;
        transition: 0.3s;
        background: #f0f7ff;
    }

    .add-image-box:hover {
        background: #e0eeff;
    }

    .plan-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 15px;
        align-items: end;
    }

    @media (max-width: 992px) {
        .plan-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 768px) {
        .plan-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 576px) {
        .plan-grid {
            grid-template-columns: 1fr;
        }
    }

    .plan-block+.plan-block {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px dashed #e2e8f0;
    }
</style>

@section('content')
    {{-- Page Header --}}
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5>
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('kitchen.product') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Add Product
            </h5>
        </div>
    </div>

    <div class="card p-4">
        <h4 class="mb-4">Add Product</h4>
        {{-- File input is OUTSIDE the form intentionally.
        We append selectedFiles[] manually to FormData before AJAX submit.
        This avoids the DataTransfer/browser-reset bug where images arrive empty. --}}
        <input type="file" id="fileInput" multiple hidden accept="image/png,image/jpeg,image/webp">

        <form id="addProductForm" novalidate>
            @csrf

            <!-- <div class="row"> -->

            <div class="row">

                <div class="col-lg-3 mb-3">
                    <label class="form-label">Select Category</label>
                    <select class="form-select" name="kitchen_category_id" id="f_category">
                        <option value="">Select Category</option>
                        @foreach ($categories as $cat)
                            <option value="{{ $cat->id }}">{{ $cat->category }}</option>
                        @endforeach
                    </select>
                    <div class="invalid-feedback" id="err_category"></div>
                </div>

                <div class="col-lg-3 mb-3">
                    <label class="form-label">Product Name</label>
                    <input type="text" class="form-control" name="product_name" id="f_name"
                        placeholder="Enter Product Name">
                    <div class="invalid-feedback" id="err_name"></div>
                </div>

                <div class="col-lg-3 mb-3">
                    <label class="form-label">Product Code(nullable)</label>
                    <input type="text" class="form-control" name="product_code" id="f_product_code"
                        placeholder="Update if needed">
                    <div class="invalid-feedback" id="err_product_code"></div>
                </div>

                <div class="col-lg-3 mb-3">
                    <label class="form-label">Tax (%)</label>
                    <input type="text" class="form-control" name="tax" placeholder="Enter Tax" id="tax">
                    <div class="invalid-feedback" id="err_tax"></div>
                </div>

                <div class="col-lg-3 mb-3">
                    <label class="form-label">Tax Mode</label>
                    <select class="form-select" name="tax_mode" id="tax_mode">
                        <option value="include" selected>Include Tax (already inside price)</option>
                        <option value="exclude">Exclude Tax (add tax on top)</option>
                        <option value="none">No Tax</option>
                    </select>
                    <div class="invalid-feedback" id="err_tax_mode"></div>
                </div>
                <div class="col-lg-3 mb-3">
                    <label class="form-label">Type</label>
                    <select class="form-select" name="product_type_id" id="product_type_id">
                        <option value="" selected>Normal</option>
                        @foreach($productTypes as $pt)
                            <option value="{{ $pt->id }}" data-name="{{ $pt->type_name }}">{{ $pt->type_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-3 mb-3">
                    <label class="form-label">Stock Limit</label>
                    <input type="number" name="stock_limit" class="form-control" min="0" placeholder="10">
                </div>
                <div class="row">
                    <div class="col-lg-3 mb-3">
                        <label class="form-label">Packed Date <span class="text-muted">(optional)</span></label>
                        <input type="date" class="form-control" name="packed_date" id="packed_date">
                    </div>

                    <div class="col-lg-3 mb-3">
                        <label class="form-label">Expiry Date <span class="text-muted">(optional)</span></label>
                        <input type="date" class="form-control" name="expiry_date" id="expiry_date">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-8 mb-3">
                    <label class="form-label">Description</label>
                    <textarea class="form-control" name="description" placeholder="Enter Product Description"></textarea>
                </div>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">Product Images</label>

                    <div class="upload-container" id="imageGallery">
                        <div class="add-image-box" id="addImgTrigger">
                            <span class="fs-4">+</span>
                            <small>Add Image</small>
                        </div>
                    </div>

                    <small class="text-muted">Max file size: 5MB (PNG, JPG)</small>
                    <div class="text-danger small mt-1" id="err_images" style="display:none;"></div>
                </div>
            </div>

            <hr class="my-4">

            {{-- Variants --}}
            <div id="variantRows"></div>

            {{-- Actions --}}
            <div class="text-center mt-4 d-flex gap-3 justify-content-center">
                <button type="button" id="submitBtn" class="btn btn-primary px-5">Submit</button>
                <button type="button" class="btn btn-secondary px-5" onclick="resetForm()">Discard</button>
            </div>

        </form>

    </div>


    <template id="variantTemplate">
        <div class="plan-block">
            <div class="plan-grid">

                <div>
                    <label class="form-label">Unit Value</label>
                    <input type="text" name="unit_value[]" class="form-control vf-unit-value" placeholder="500">
                    <div class="invalid-feedback vf-err-unit_value"></div>
                </div>

                <div>
                    <label class="form-label">Unit</label>
                    <select name="unit[]" class="form-select vf-unit">
                        <option value="">Select Unit</option>
                        <option value="g">gm</option>
                        <option value="kg">kg</option>
                        <option value="ml">ml</option>
                        <option value="ltr">ltr</option>
                        <option value="pcs">pcs</option>
                    </select>
                    <div class="invalid-feedback vf-err-unit"></div>
                </div>

                <div>
                    <label class="form-label">MRP</label>
                    <input type="number" name="mrp[]" class="form-control vf-mrp" placeholder="300" min="0" step="0.01">
                    <div class="invalid-feedback vf-err-mrp"></div>
                </div>

                <div>
                    <label class="form-label">Price</label>
                    <input type="number" name="price[]" class="form-control vf-price" placeholder="250" min="0" step="0.01">
                    <div class="invalid-feedback vf-err-price"></div>
                </div>

                <div>
                    <label class="form-label">Price (Excl. Tax)</label>
                    <input type="text" class="form-control vf-price-excl" readonly style="background:#f5f5f5;">
                </div>

                <div>
                    <label class="form-label">Stock</label>
                    <input type="number" name="stock[]" class="form-control vf-stock" placeholder="100" min="0" step="1">
                    <div class="invalid-feedback vf-err-stock"></div>
                </div>
                <div>
                    <label class="form-label">Stock Type</label>
                    <select name="stock_type[]" class="form-select vf-stock-type">
                        <option value="">Select Stock Type</option>
                        <option value="kg">Weight Based (Kg)</option>
                        <option value="pcs">Piece Based</option>
                    </select>
                    <div class="invalid-feedback vf-err-stock_type"></div>
                </div>

                <div>
                    <label class="form-label">Display</label>
                    <select name="display[]" class="form-select vf-display">
                        <option value="Yes" selected>Yes</option>
                        <option value="No">No</option>
                    </select>
                    <div class="invalid-feedback vf-err-display"></div>
                </div>

                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-primary btn-add w-100">Add More</button>
                    <button type="button" class="btn btn-danger btn-remove w-100" style="display:none;">Remove</button>
                </div>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(function () {


            var fileInput = document.getElementById('fileInput');
            var gallery = document.getElementById('imageGallery');
            var addTrigger = document.getElementById('addImgTrigger');
            var selectedFiles = [];

            addTrigger.addEventListener('click', function () {
                fileInput.click();
            });
            $('#tax_mode').on('change', function () {
                if (this.value === 'none') {
                    $('#tax').val('0').prop('readonly', true);
                } else {
                    $('#tax').prop('readonly', false);
                }
            });
            // $('#f_category').on('change', function() {
            //     var categoryId = $(this).val();
            //     if (!categoryId) return;

            //     $.ajax({
            //         url: '{{ route('kitchen.next_product_code') }}',
            //         method: 'GET'
            //         data: {
            //             category_id: categoryId
            //         },
            //         success: function(res) {
            //             if (res.status) {
            //                 $('#f_product_code').val(res.product_code);
            //             }
            //         }
            //     });
            // });

            fileInput.addEventListener('change', function () {
                Array.from(this.files).forEach(function (file) {
                    if (file.size > 5 * 1024 * 1024) {
                        showToast('warning', file.name + ' exceeds 5 MB and was skipped.');
                        return;
                    }
                    var idx = selectedFiles.push(file) - 1;
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var wrapper = document.createElement('div');
                        wrapper.className = 'image-preview-wrapper';
                        wrapper.dataset.idx = idx;
                        wrapper.innerHTML = '<img src="' + e.target.result +
                            '" alt="preview">' +
                            '<button type="button" class="remove-img-btn">&#x2715;</button>';
                        gallery.insertBefore(wrapper, addTrigger);
                    };
                    reader.readAsDataURL(file);
                });
                // reset input so the same file can be selected again
                this.value = '';
            });

            gallery.addEventListener('click', function (e) {
                if (!e.target.classList.contains('remove-img-btn')) return;
                var wrapper = e.target.closest('.image-preview-wrapper');
                var idx = parseInt(wrapper.dataset.idx, 10);
                selectedFiles.splice(idx, 1);
                wrapper.remove();
                // re-index remaining thumbs
                gallery.querySelectorAll('.image-preview-wrapper').forEach(function (el, i) {
                    el.dataset.idx = i;
                });
            });

            var variantRows = document.getElementById('variantRows');
            var tmpl = document.getElementById('variantTemplate');

            function addVariantRow() {
                variantRows.appendChild(tmpl.content.cloneNode(true));
                refreshButtons();
            }

            function refreshButtons() {
                variantRows.querySelectorAll('.plan-block').forEach(function (block, i) {
                    block.querySelector('.btn-add').style.display = i === 0 ? '' : 'none';
                    block.querySelector('.btn-remove').style.display = i === 0 ? 'none' : '';
                });
            }

            variantRows.addEventListener('click', function (e) {
                if (e.target.classList.contains('btn-add')) {
                    addVariantRow();
                }
                if (e.target.classList.contains('btn-remove')) {
                    e.target.closest('.plan-block').remove();
                    refreshButtons();
                }
            });

            addVariantRow(); // seed first row


            /* ════════════════════════════════════
               CLEAR VALIDATION ERRORS
            ════════════════════════════════════ */
            function clearErrors() {
                ['f_category', 'f_name', 'tax', 'f_product_code'].forEach(function (id) {
                    document.getElementById(id).classList.remove('is-invalid');
                });

                document.getElementById('err_category').textContent = '';
                document.getElementById('err_name').textContent = '';
                document.getElementById('err_tax').textContent = '';
                document.getElementById('err_product_code').textContent = '';

                var imgErr = document.getElementById('err_images');
                imgErr.style.display = 'none';
                imgErr.textContent = '';
                document.getElementById('imageGallery').classList.remove('is-invalid');

                variantRows.querySelectorAll('.form-control, .form-select').forEach(function (el) {
                    el.classList.remove('is-invalid');
                });
                variantRows.querySelectorAll('.invalid-feedback').forEach(function (el) {
                    el.textContent = '';
                });
            }


            function applyErrors(errors) {
                var basicMap = {
                    'kitchen_category_id': ['f_category', 'err_category'],
                    'product_name': ['f_name', 'err_name'],
                    'tax': ['tax', 'err_tax'],
                    'product_code': ['f_product_code', 'err_product_code'],
                };
                // var basicMap = {
                //     'kitchen_category_id': ['f_category', 'err_category'],
                //     'product_name': ['f_name', 'err_name'],
                //     'tax': ['tax', 'err_tax'],
                // };

                Object.entries(errors).forEach(function (entry) {
                    var key = entry[0];
                    var msgs = entry[1];
                    var msg = Array.isArray(msgs) ? msgs[0] : msgs;

                    // Basic fields
                    if (basicMap[key]) {
                        document.getElementById(basicMap[key][0]).classList.add('is-invalid');
                        document.getElementById(basicMap[key][1]).textContent = msg;
                        return;
                    }

                    // Image errors
                    if (key === 'product_image' || key.indexOf('product_image.') === 0) {
                        var imgErr = document.getElementById('err_images');
                        document.getElementById('imageGallery').classList.add('is-invalid');
                        imgErr.textContent = msg;
                        imgErr.style.display = 'block';
                        return;
                    }

                    // Variant errors e.g. unit_value.0, mrp.2
                    var m = key.match(/^(unit_value|unit|mrp|price|stock|display)\.(\d+)$/);
                    if (m) {
                        var field = m[1];
                        var block = variantRows.querySelectorAll('.plan-block')[parseInt(m[2], 10)];
                        if (!block) return;
                        var input = block.querySelector('[name="' + field + '[]"]');
                        var errEl = block.querySelector('.vf-err-' + field);
                        if (input) input.classList.add('is-invalid');
                        if (errEl) errEl.textContent = msg;
                    }
                });
            }

            /* ════════════════════════════════════
               AJAX SUBMIT
               Build FormData from the form, then
               manually append each file from
               selectedFiles[] as product_image[].
            ════════════════════════════════════ */
            $('#submitBtn').on('click', function () {
                var $btn = $(this);
                clearErrors();

                var formData = new FormData(document.getElementById('addProductForm'));

                selectedFiles.forEach(function (file) {
                    formData.append('product_image[]', file);
                });

                $btn.prop('disabled', true)
                    .html('Processing...');

                $.ajax({
                    url: '{{ route('kitchen.kitchen_storeProduct') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    success: function (res) {
                        if (res.status) {
                            showToast(res.message || 'Product saved successfully.',
                                'success');
                            setTimeout(function () {
                                window.location.href = '{{ route('kitchen.product') }}';
                            }, 1500);
                        } else {
                            showToast('Something went wrong', 'error');
                            $btn.prop('disabled', false).text('Submit');
                        }
                    },

                    error: function (xhr) {
                        if (xhr.status === 422) {
                            var data = xhr.responseJSON;

                            // Build error messages
                            var errorMessages = [];
                            if (data.errors) {
                                Object.keys(data.errors).forEach(function (key) {
                                    var fieldErrors = data.errors[key];
                                    var errorMsg = Array.isArray(fieldErrors) ?
                                        fieldErrors[0] : fieldErrors;
                                    errorMessages.push(errorMsg);
                                });
                            }

                            // Show first error or all errors
                            var errorText = errorMessages.length > 0 ? errorMessages[0] :
                                'Please fix the errors below.';
                            // Or show all: var errorText = errorMessages.join(' • ');

                            showToast(errorText, 'error');

                            if (data.errors) applyErrors(data.errors);
                        } else {
                            showToast('Server error. Please try again.', 'error');
                        }
                        $btn.prop('disabled', false).text('Submit');
                    }
                });
            });

        }); // end $(function)

        /* ════════════════════════════════════
           RESET FORM (global for onclick)
        ════════════════════════════════════ */
        function updatePriceExclTax() {
            const taxPercent = parseFloat($('#tax').val()) || 0;
            const taxMode = $('#tax_mode').val();

            variantRows.querySelectorAll('.plan-block').forEach(function (block) {
                const priceInput = block.querySelector('.vf-price');
                const exclField = block.querySelector('.vf-price-excl');
                const price = parseFloat(priceInput.value) || 0;

                let exclTax;
                if (taxMode === 'include' && taxPercent > 0) {
                    exclTax = price / (1 + taxPercent / 100);
                } else if (taxMode === 'none') {
                    exclTax = price;
                } else {
                    exclTax = price; // exclude mode: price itself IS the tax-excluded value
                }

                exclField.value = exclTax ? '₹' + exclTax.toFixed(2) : '';
            });
        }

        $('#tax, #tax_mode').on('input change', updatePriceExclTax);
        variantRows.addEventListener('input', function (e) {
            if (e.target.classList.contains('vf-price')) updatePriceExclTax();
        });

        function resetForm() {
            document.getElementById('addProductForm').reset();

            // clear image previews and reset file array
            document.querySelectorAll('#imageGallery .image-preview-wrapper').forEach(function (el) {
                el.remove();
            });
            // reset selectedFiles via reassignment (accessible since it's in outer scope via closure)
            document.getElementById('fileInput').value = '';

            // re-seed one clean variant row
            var rows = document.getElementById('variantRows');
            rows.innerHTML = '';
            rows.appendChild(document.getElementById('variantTemplate').content.cloneNode(true));

            // clear all error states
            document.querySelectorAll('.is-invalid').forEach(function (el) {
                el.classList.remove('is-invalid');
            });
            document.querySelectorAll('.invalid-feedback').forEach(function (el) {
                el.textContent = '';
            });
            var imgErr = document.getElementById('err_images');
            imgErr.style.display = 'none';
            imgErr.textContent = '';
        }
    </script>
    <script>
        function showToast(message, bg = "bg-success") {

            let toast = $(`
                            <div class="toast align-items-center text-white ${bg} border-0 position-fixed"
                                 style="top:20px;right:20px;z-index:99999;">
                                <div class="d-flex">
                                    <div class="toast-body">${message}</div>
                                    <button type="button"
                                            class="btn-close btn-close-white me-2 m-auto"
                                            data-bs-dismiss="toast"></button>
                                </div>
                            </div>
                        `);

            $("body").append(toast);

            let bsToast = new bootstrap.Toast(toast[0], {
                delay: 3000
            });

            bsToast.show();

            toast.on("hidden.bs.toast", function () {
                toast.remove();
            });

        }
    </script>
@endsection