@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')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    {{-- 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">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Edit Product
            </h5>
        </div>
    </div>

    <div class="card p-4">

        <h4 class="mb-4">Edit Product</h4>

        <input type="file" id="fileInput" multiple hidden accept="image/png,image/jpeg,image/webp">

        <form id="editProductForm" novalidate>
            @csrf

            {{-- Hidden product id — NOT in URL --}}
            <input type="hidden" name="product_id" id="product_id" value="{{ $product->id }}">
            {{-- Tracks removed existing images --}}
            <input type="hidden" name="removed_images" id="removed_images" value="[]">

            <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 }}" {{ $product->kitchen_category_id == $cat->id ? 'selected' : '' }}>
                                    {{ $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" value="{{ $product->product_name }}">
                        <div class="invalid-feedback" id="err_name"></div>
                    </div>
                    <div class="col-lg-3 mb-3">
                        <label class="form-label">Product Code</label>
                        <input type="text" class="form-control" name="product_code" id="product_code"
                            placeholder="Enter Product Code" value="{{ $product->product_id }}">
                        <div class="invalid-feedback" id="err_code"></div>
                    </div>
                    <div class="col-lg-3 mb-3">
                        <label class="form-label">Weight machine Code</label>
                        <input type="text" class="form-control" name="weight_machine_code" id="weight_machine_code"
                            placeholder="Enter machine Code" value="{{ $product->weight_machine_id }}">
                        <div class="invalid-feedback" id="err__machine_code"></div>
                    </div>
                    <div class="col-lg-3 mb-3">
                        <label class="form-label">Tax (%)</label>
                        <input type="text" class="form-control" name="tax" id="tax" placeholder="Enter Tax"
                            value="{{ $product->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="exclude" {{ $product->tax_mode == 'exclude' ? 'selected' : '' }}>Exclude Tax
                                (add
                                tax on top)</option>
                            <option value="include" {{ $product->tax_mode == 'include' ? 'selected' : '' }}>Include Tax
                                (already inside price)</option>
                            <option value="none" {{ $product->tax_mode == 'none' ? 'selected' : '' }}>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="" {{ !$product->type_id ? 'selected' : '' }}>Normal</option>
                            @foreach($productTypes as $pt)
                                <option value="{{ $pt->id }}" {{ $product->type_id == $pt->id ? 'selected' : '' }}>
                                    {{ $pt->type_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-lg-3 mb-3">
                        <label class="form-label">Stock Limit</label>
                        <input type="number" class="form-control" name="stock_limit" id="stock_limit" min="0"
                            value="{{ $product->stock_limit }}" placeholder="10">
                        <div class="invalid-feedback" id="err_stock_limit"></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">{{ $product->description }}</textarea>
                    </div>

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

                            @php
                                $images = !empty($product->images) ? json_decode($product->images, true) : [];

                                $images = is_array($images) ? $images : [];
                            @endphp

                            @foreach ($images as $img)
                                <div class="image-preview-wrapper existing-image" data-path="{{ $img }}">
                                    <img src="{{ asset('storage/' . $img) }}" alt="Product">
                                    <button type="button" class="remove-img-btn">&#10005;</button>
                                </div>
                            @endforeach
                            <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>
                <!-- {{-- Left: Details --}}
                                                <div class="col-lg-8">
                                                    <div class="row">

                                                        <div class="col-lg-4 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 }}"
                                                                        {{ $product->kitchen_category_id == $cat->id ? 'selected' : '' }}>
                                                                        {{ $cat->category }}
                                                                    </option>
                        @endforeach
                                                            </select>
                                                            <div class="invalid-feedback" id="err_category"></div>
                                                        </div>

                                                        <div class="col-lg-4 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"
                                                                value="{{ $product->product_name }}">
                                                            <div class="invalid-feedback" id="err_name"></div>
                                                        </div>

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

                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label">Description</label>
                                                        <textarea class="form-control" name="description" placeholder="Enter Product Description">{{ $product->description }}</textarea>
                                                    </div>
                                                </div>

                                                {{-- Right: Images --}}
                                                <div class="col-lg-4">
                                                    <label class="form-label">Product Images</label>
                                                    <div class="upload-container" id="imageGallery">

                                    @php
                                        $images = !empty($product->images) ? json_decode($product->images, true) : [];

                                        $images = is_array($images) ? $images : [];
                                    @endphp

                                    @foreach ($images as $img)
                        <div class="image-preview-wrapper existing-image"
                                             data-path="{{ $img }}">
                                            <img src="{{ asset('storage/' . $img) }}" alt="Product">
                                            <button type="button" class="remove-img-btn">&#10005;</button>
                                        </div>
                        @endforeach
                                                        <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">Update</button>
                    <button type="button" class="btn btn-secondary px-5"
                        onclick="window.location.href='{{ route('kitchen.product') }}'">
                        Cancel
                    </button>
                </div>

        </form>
    </div>

    {{-- Variant Template --}}
    <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="gm">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">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="kg">Kg</option>
                        <option value="pcs">Pieces</option>
                    </select>

                    <div class="invalid-feedback vf-err-stock_type"></div>

                    <div class="invalid-feedback" id="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 () {

            const csrf = $('meta[name="csrf-token"]').attr('content');
            const fileInput = document.getElementById('fileInput');
            const gallery = document.getElementById('imageGallery');
            const addTrigger = document.getElementById('addImgTrigger');
            const variantRows = document.getElementById('variantRows');
            const tmpl = document.getElementById('variantTemplate');

            const existingVariants = @json($variantData);
            let selectedFiles = [];

            let removedImages = [];

            addTrigger.addEventListener('click', () => fileInput.click());

            fileInput.addEventListener('change', function () {
                Array.from(this.files).forEach(function (file) {
                    if (file.size > 5 * 1024 * 1024) {
                        showToast(file.name + ' exceeds 5MB', 'bg-danger');
                        return;
                    }
                    $('#tax_mode').on('change', function () {
                        if (this.value === 'none') {
                            $('#tax').val('0').prop('readonly', true);
                        } else {
                            $('#tax').prop('readonly', false);
                        }
                    });

                    // Run once on page load too, in case product is loaded with tax_mode = 'none'
                    if ($('#tax_mode').val() === 'none') {
                        $('#tax').prop('readonly', true);
                    }
                    const idx = selectedFiles.push(file) - 1;
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        const wrapper = document.createElement('div');
                        wrapper.className = 'image-preview-wrapper new-image';
                        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);
                });
                this.value = '';
            });

            gallery.addEventListener('click', function (e) {
                if (!e.target.classList.contains('remove-img-btn')) return;

                const wrapper = e.target.closest('.image-preview-wrapper');

                if (wrapper.classList.contains('existing-image')) {
                    const path = wrapper.dataset.path;
                    removedImages.push(path);
                    document.getElementById('removed_images').value = JSON.stringify(removedImages);
                } else {
                    const idx = parseInt(wrapper.dataset.idx, 10);
                    selectedFiles.splice(idx, 1);
                    gallery.querySelectorAll('.new-image').forEach((el, i) => el.dataset.idx = i);
                }

                wrapper.remove();
            });


            function addVariantRow(data = null) {
                const clone = tmpl.content.cloneNode(true);

                if (data) {
                    clone.querySelector('.vf-unit-value').value = data.unit_value ?? '';
                    clone.querySelector('.vf-mrp').value = data.mrp ?? '';
                    clone.querySelector('.vf-price').value = data.price ?? '';
                    clone.querySelector('.vf-stock').value = data.stock ?? '';

                    const stockType = clone.querySelector('.vf-stock-type');

                    if (data.stock_type) {
                        stockType.value = data.stock_type;
                    }

                    const unitSel = clone.querySelector('.vf-unit');
                    [...unitSel.options].forEach(o => {
                        if (o.value === data.unit) o.selected = true;
                    });

                    const dispSel = clone.querySelector('.vf-display');
                    const dispVal = (data.display == 1) ? '1' : '0';

                    [...dispSel.options].forEach(o => {
                        o.selected = (o.value == dispVal);
                    });
                }

                variantRows.appendChild(clone);
                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();
                }
            });

            if (existingVariants.length > 0) {
                existingVariants.forEach(v => addVariantRow(v));
            } else {
                addVariantRow();
            }

            function clearErrors() {
                ['f_category', 'f_name', 'tax'].forEach(id => {
                    document.getElementById(id).classList.remove('is-invalid');
                });
                ['err_category', 'err_name', 'err_tax'].forEach(id => {
                    document.getElementById(id).textContent = '';
                });

                const 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(el => el.classList.remove('is-invalid'));
                variantRows.querySelectorAll('.invalid-feedback')
                    .forEach(el => el.textContent = '');
            }

            function applyErrors(errors) {
                const basicMap = {
                    'kitchen_category_id': ['f_category', 'err_category'],
                    'product_name': ['f_name', 'err_name'],
                    'tax': ['tax', 'err_tax'],
                    'product_code': ['product_code', 'err_code'],
                    'weight_machine_code': ['weight_machine_code', 'err_machine_code'],

                };

                Object.entries(errors).forEach(([key, msgs]) => {
                    const msg = Array.isArray(msgs) ? msgs[0] : msgs;

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

                    if (key === 'product_image' || key.startsWith('product_image.')) {
                        const imgErr = document.getElementById('err_images');
                        document.getElementById('imageGallery').classList.add('is-invalid');
                        imgErr.textContent = msg;
                        imgErr.style.display = 'block';
                        return;
                    }

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

            $('#submitBtn').on('click', function () {
                const $btn = $(this);
                clearErrors();

                const formData = new FormData(document.getElementById('editProductForm'));

                // Append new files
                selectedFiles.forEach(file => formData.append('product_image[]', file));

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

                $.ajax({
                    url: '{{ route('kitchen.kitchen_updateProduct') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },

                    success: function (res) {
                        if (res.status) {
                            showToast(res.message, 'success');
                            setTimeout(() => {
                                window.location.href =
                                    '{{ route('kitchen.product') }}';
                            }, 1500);
                        } else {
                            showToast(res.message ?? 'Something went wrong', 'error');
                            $btn.prop('disabled', false).html('Update');
                        }
                    },

                    error: function (xhr) {
                        if (xhr.status === 422) {
                            const data = xhr.responseJSON;
                            const errors = data.errors ?? {};
                            const first = Object.values(errors)[0];
                            showToast(Array.isArray(first) ? first[0] : first, 'error');
                            applyErrors(errors);
                        } else {
                            showToast('Server error. Please try again.', 'error');
                        }
                        $btn.prop('disabled', false).html('Update');
                    }
                });
            });

        });
    </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