@extends('layouts.app', ['title' => __tr('Greeting Engine Edit')])
@section('content')
@include('users.partials.header', [
'title' => __tr('Greeting Engine Edit'),
'description' => '',
'class' => 'col-lg-7'
])
<style>
    .sticky-top {
        position: sticky;
        top: 0;
        z-index: 1020;
        background-color: white;
        padding: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    #preview-overlay span {
        white-space: pre-wrap;
        word-break: break-word;
    }
</style>
<div class="container-fluid container-fluid-padding p-1">
    <div class="row">
        <!-- button -->
        <div class="col-xl-12 mb-3">
            <div class="float-right">
                <a class="lw-btn btn btn-secondary" href="{{ route('vendor.birthday.read.list_view') }}">{{
                        __tr('Back To Greeting Engine') }}</a>
            </div>
        </div>
        <!--/ button -->
    </div>
    <form id="birthday-form" action="{{ route('vendor.birthday.read.save') }}" method="post">
        @csrf
        <div class="card col-md-8 mb-3">
            <input type="hidden" name="template_id" id="template_id" value="{{$Template['id']}}">
            <input type="hidden" name="content_count" id="content_count" value="0">

            <div class="mb-3 mt-3">
                <label for="template_name" class="form-label">Template Name</label>
                <input type="text" class="form-control" id="template_name" name="template_name"
                    value="{{ $Template['name'] ?? '' }}" placeholder="Enter Template Name" required>
            </div>

            <div class="mb-3">
                <label for="contact" class="form-label">Contact</label>
                <select data-lw-plugin="lwSelectize" class="form-control" id="contact" name="contact[]" required multiple>
                    <option value="0" {{ in_array(0, explode(',', $Template['contact'] ?? '')) ? 'selected' : '' }}>All Send</option>
                    @foreach($Contact as $contact)
                    <option value="{{ $contact->id }}"
                        {{ in_array($contact->id, explode(',', str_replace(' ', '', $Template['contact'] ?? ''))) ? 'selected' : '' }}>
                        {{ $contact->name }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="mb-3">
                <label for="date_type" class="form-label">Date Type</label>
                <select data-lw-plugin="lwSelectize" class="form-control" id="date_type" name="date_type" required>
                    <option value="birth_day" {{ ($Template['schedule_type'] ?? '') == 'birth_day' ? 'selected' : '' }}>Birth Day</option>
                    <option value="anniversary_day" {{ ($Template['schedule_type'] ?? '') == 'anniversary_day' ? 'selected' : '' }}>Anniversary Day</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="template_list" class="form-label">Template</label>
                <select data-lw-plugin="lwSelectize" class="form-select" id="template_list" name="template_list" required>
                    <option value="">{{ __tr('Select & Configure Template') }}</option>
                    @foreach ($whatsAppTemplates as $whatsAppTemplate)
                    <option
                        value="{{ $whatsAppTemplate->_uid }}"
                        @if(isset($Template) && $Template->template_id == $whatsAppTemplate->_uid) selected @endif
                        >
                        {{ $whatsAppTemplate->template_name }} ({{ $whatsAppTemplate->language }})
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="mt-1" x-data="{scheduleNow:true}">
                <div class="form-group mb-0">
                    <label for="lwNowCampaign">
                            <input type="hidden" name="schedule_now" :value="scheduleNow ? 1 : 0">
                        <input x-model="scheduleNow" type="checkbox" id="lwNowCampaign" data-secondary-color="orange" data-lw-plugin="lwSwitchery" checked value="" >
                        <span x-show="scheduleNow">{{ __tr('Now') }}</span>
                        <span x-show="!scheduleNow">{{ __tr('Later') }}</span>
                    </label>
                </div>
                <template x-if="!scheduleNow">
                    <div x-show="!scheduleNow">
                        <x-lw.input-field type="datetime-local" id="template_schedule" data-jsx-set="datetimepicker" data-form-group-class="" min="{{ formatDateTime(now(), 'Y-m-d\TH:i:s') }}" :label="__tr('Schedule At')" name="template_schedule" required />
                    </div>
                </template>
            </div>
            <div class="mb-3">
                <label for="status" class="form-label">Status</label>
                <select data-lw-plugin="lwSelectize" class="form-control" id="status" name="status" required>
                    <option value="0" {{ ($Template['status'] ?? '') == 0 ? 'selected' : '' }}>Inactive</option>
                    <option value="1" {{ ($Template['status'] ?? '') == 1 ? 'selected' : '' }}>Active</option>
                </select>
            </div>
        </div>
        <div class="card">
            <div class="row col-12 p-3">
                <div class="col-6">



                    <div class="content-block mb-4" data-id="0">

                        <div class="mb-3">
                            <label class="form-label">Type</label>
                            <select name="new_type_0" class="form-control new_type">
                                <option value="" selected>Select Type</option>
                                <option value="image">Image</option>
                                <option value="text">Text</option>
                            </select>
                        </div>
                        <!-- Image inputs -->
                        <div class="mb-3 image-upload-section d-none">
                            <label class="form-label">Image Upload</label>
                            <input type="file" name="image_upload_0" class="form-control image_upload" accept="image/*">
                        </div>
                        <div class="mb-3 image-upload-section d-none">
                            <label class="form-label">Image Width (px)</label>
                            <input type="number" name="image_width_0" class="form-control image-width" value="100">
                        </div>
                        <div class="mb-3 image-upload-section d-none">
                            <label class="form-label">Image Height (px)</label>
                            <input type="number" name="image_height_0" class="form-control image-height" value="100">
                        </div>

                        <!-- Text inputs -->
                        <div class="mb-3 text-enter-section d-none">
                            <label class="form-label">Text Enter</label>
                            <input type="text" name="contant_text_0" class="form-control text_enter" placeholder="Enter your text here">
                        </div>
                        <div class="mb-3 text-enter-section d-none">
                            <label class="form-label">Font Family</label>
                            <select class="form-control font-text" name="contant_font_family_0">
                                <option value="arial">Arial</option>
                                <option value="times-new-roman">Times New Roman</option>
                                <option value="verdana">Verdana</option>
                                <option value="tahoma">Tahoma</option>
                                <option value="georgia">Georgia</option>
                                <option value="courier-new">Courier New</option>
                                <option value="impact">Impact</option>
                                <option value="comic-sans-ms">Comic Sans MS</option>
                                <option value="lucida-console">Lucida Console</option>
                                <option value="trebuchet-ms">Trebuchet MS</option>
                                <option value="palatino">Palatino</option>
                                <option value="garamond">Garamond</option>
                                <option value="bookman">Bookman</option>
                                <option value="candara">Candara</option>
                                <option value="calibri">Calibri</option>
                                <option value="cambria">Cambria</option>
                                <option value="franklin-gothic">Franklin Gothic</option>
                                <option value="corbel">Corbel</option>
                                <option value="segoe-ui">Segoe UI</option>
                                <option value="optima">Optima</option>
                                <option value="monaco">Monaco</option>
                                <option value="avenir">Avenir</option>
                                <option value="futura">Futura</option>
                                <option value="gill-sans">Gill Sans</option>
                                <option value="helvetica">Helvetica</option>
                                <option value="lucida-sans">Lucida Sans</option>
                                <option value="rockwell">Rockwell</option>
                                <option value="baskerville">Baskerville</option>
                                <option value="copperplate">Copperplate</option>
                                <option value="brush-script-mt">Brush Script MT</option>
                                <option value="perpetua">Perpetua</option>
                                <option value="didot">Didot</option>
                                <option value="raleway">Raleway</option>
                                <option value="roboto">Roboto</option>
                                <option value="open-sans">Open Sans</option>
                                <option value="lato">Lato</option>
                                <option value="montserrat">Montserrat</option>
                                <option value="merriweather">Merriweather</option>
                                <option value="playfair-display">Playfair Display</option>
                                <option value="pt-sans">PT Sans</option>
                                <option value="pt-serif">PT Serif</option>
                                <option value="source-sans-pro">Source Sans Pro</option>

                            </select>
                        </div>
                        <div class="mb-3 text-enter-section d-none">
                            <label class="form-label">Language</label>
                            <select class="form-control language" name="contant_language_0">
                                <option value="am">Amharic</option>
                                <option value="ar">Arabic</option>
                                <option value="bn">Bengali</option>
                                <option value="en">English</option>
                                <option value="el">Greek</option>
                                <option value="gu">Gujarati</option>
                                <option value="he">Hebrew</option>
                                <option value="iw">Hebrew</option> <!-- old ISO code for Hebrew -->
                                <option value="hi">Hindi</option>
                                <option value="kn">Kannada</option>
                                <option value="ml">Malayalam</option>
                                <option value="mr">Marathi</option>
                                <option value="ne">Nepali</option>
                                <option value="pa">Punjabi</option>
                                <option value="fa">Persian</option>
                                <option value="ru">Russian</option>
                                <option value="sa">Sanskrit</option>
                                <option value="sr">Serbian</option>
                                <option value="ta">Tamil</option>
                                <option value="te">Telugu</option>
                                <option value="ti">Tigrinya</option>
                                <option value="ur">Urdu</option>
                            </select>


                        </div>
                        <div class="mb-3 text-enter-section d-none">
                            <label class="form-label">Font Size (px)</label>
                            <input type="number" class="form-control font-size" value="24" name="contant_font_size_0">
                        </div>
                        <div class="mb-3 text-enter-section d-none">
                            <label class="form-label">Font Color</label>
                            <input type="color" class="form-control font-color" value="#000000" name="contant_font_color_0">
                        </div>

                        <!-- Position -->
                        <div class="mb-3">
                            <label class="form-label">Content X Position (px)</label>
                            <input type="number" class="form-control content-x-pos" value="0" name="content_x_pos_0">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Content Y Position (px)</label>
                            <input type="number" class="form-control content-y-pos" value="0" name="content_y_pos_0">
                        </div>
                    </div>
                    <div id="content-container">

                    </div>

                    <div class="d-flex justify-content-between mt-3">
                        <div class="mb-2">
                            <button type="button" class="btn btn-secondary" id="back">Back</button>
                            <button type="button" class="btn btn-secondary" id="next">Next</button>
                        </div>
                        <div class="mb-2">
                            <button type="button" class="btn btn-success" id="add_more">Add More Content</button>
                            <button type="button" class="btn btn-danger" id="reset">Reset</button>
                        </div>
                    </div>
                </div>

                <div class="col-6">
                    <h3 class="text-center">Preview Live</h3>
                    <div class=" sticky-top">
                        <div class="card">
                            <div class="card-body position-relative">
                                <h5 class="card-title">Image Preview</h5>
                                <div style="position: relative; display: inline-block;">
                                    <img id="image-preview" src="{{$Template['image'] }}" alt="Image Preview" class="img-fluid" style="width: 100%; height: auto;">
                                    <div id="preview-overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
                                </div>
                                <div class="text-right">
                                    <button type="submit" class="btn btn-primary mt-3" id="save_changes">Save Changes</button>
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="card-body" id="content-list">

                            </div>
                        </div>

                    </div>
                </div>
            </div>
    </form>
</div>
</div>
@push('js')
{!! __yesset([
'static-assets/packages/jqueryui-1.13.3/jquery-ui.min.js',
// 'static-assets/packages/others/jquery.mousewheel.min.js',
'static-assets/packages/others/jquery.panzoom.min.js',
'static-assets/packages/jquery.flowchart/jquery.flowchart.min.js'
]) !!}
@endpush
@push('appScripts')
<script>
    const isData = {{$is_data}};
    const birthdayTemplateDetail = @json($BirthdayTemplateDetail);

    let contentCount = 0;
    let currentBlockIndex = 0;

    document.addEventListener("DOMContentLoaded", function() {
        const container = document.getElementById("content-container");

        if (isData === 1 && birthdayTemplateDetail.length > 0) {
            $('#content_count').val(birthdayTemplateDetail.length - 1);

            birthdayTemplateDetail.forEach((item, index) => {
                if (index === 0) {
                    // Use existing .content-block for first item
                    const block = document.querySelector(".content-block");
                    block.setAttribute("data-id", "0");

                    const hiddenInput = document.createElement("input");
                    hiddenInput.type = "hidden";
                    hiddenInput.name = `edit_id_0`;
                    hiddenInput.value = item.id;
                    block.appendChild(hiddenInput);

                    if (item.type === "image") {
                        setImageBlockData(block, item);
                    } else if (item.type === "text") {
                        setTextBlockData(block, item);
                    }

                    bindEventsForBlock(block);
                } else {
                    contentCount++;
                    $('#content_count').val(contentCount);

                    const blockHTML = createContentBlock(contentCount);
                    const tempDiv = document.createElement("div");
                    tempDiv.innerHTML = blockHTML;
                    const block = tempDiv.firstElementChild;

                    const hiddenInput = document.createElement("input");
                    hiddenInput.type = "hidden";
                    hiddenInput.name = `edit_id_${contentCount}`;
                    hiddenInput.value = item.id;
                    block.appendChild(hiddenInput);

                    container.appendChild(block);

                    if (item.type === "image") {
                        setImageBlockData(block, item);
                    } else if (item.type === "text") {
                        setTextBlockData(block, item);
                    }

                    bindEventsForBlock(block);
                }
            });

            currentBlockIndex = 0;
            showBlockByIndex(currentBlockIndex);
            updateContentList();
        } else {
            // New mode - no edit
            contentCount = 0;
            $('#content_count').val(contentCount);

            const block = document.querySelector(".content-block");
            bindEventsForBlock(block);
            showBlockByIndex(currentBlockIndex);
            updateContentList();
        }

        // Add More Block
        document.getElementById("add_more").addEventListener("click", () => {
            contentCount++;
            $('#content_count').val(contentCount);

            const blockHTML = createContentBlock(contentCount);
            const tempDiv = document.createElement("div");
            tempDiv.innerHTML = blockHTML;
            const block = tempDiv.firstElementChild;

            document.getElementById("content-container").appendChild(block);
            bindEventsForBlock(block);

            currentBlockIndex = getBlocks().length - 1;
            showBlockByIndex(currentBlockIndex);
            updateContentList();
        });

        // Navigation
        document.getElementById("back").addEventListener("click", () => {
            if (currentBlockIndex > 0) {
                currentBlockIndex--;
                showBlockByIndex(currentBlockIndex);
            }
        });

        document.getElementById("next").addEventListener("click", () => {
            if (currentBlockIndex < getBlocks().length - 1) {
                currentBlockIndex++;
                showBlockByIndex(currentBlockIndex);
            }
        });

        document.getElementById("reset").addEventListener("click", () => {
            const blocks = getBlocks();
            if (blocks.length === 0) return;

            const currentBlock = blocks[currentBlockIndex]; // ✅ Use currently visible block
            const type = currentBlock.querySelector(".new_type").value;
            const id = currentBlock.dataset.id;

            if (type === "text") {
                currentBlock.querySelector(".text_enter").value = "";
                currentBlock.querySelector(".font-text").value = "arial";
                currentBlock.querySelector(".font-size").value = "24";
                currentBlock.querySelector(".font-color").value = "#000000";
                currentBlock.querySelector(".language").value = "en";

                const varibleDropdown = currentBlock.querySelector(".new_varible");
                if (varibleDropdown) varibleDropdown.value = "";

                const previewDiv = document.querySelector(`div[data-id="${id}"][contenteditable="true"]`);
                if (previewDiv) previewDiv.innerText = "";

                const overlay = document.getElementById(`overlay-${id}`);
                if (overlay) overlay.remove();

                updateTextOverlay(currentBlock); // ✅ re-render text overlay
            } else if (type === "image") {
                currentBlock.querySelector(".image_upload").value = "";
                currentBlock.querySelector(".image-width").value = "100";
                currentBlock.querySelector(".image-height").value = "100";

                const overlay = document.getElementById(`overlay-${id}`);
                if (overlay) overlay.remove();

                updateImageOverlay(currentBlock); // ✅ re-render image overlay
            }

            currentBlock.querySelector(".content-x-pos").value = "0";
            currentBlock.querySelector(".content-y-pos").value = "0";

            updateContentList();
        });


    });

    function createContentBlock(id) {
        const html = document.querySelector(".content-block").outerHTML;
        return html
            .replace(/data-id="0"/g, `data-id="${id}"`)
            .replace(/new_type_0/g, `new_type_${id}`)
            .replace(/image_upload_0/g, `image_upload_${id}`)
            .replace(/image_width_0/g, `image_width_${id}`)
            .replace(/image_height_0/g, `image_height_${id}`)
            .replace(/contant_text_0/g, `contant_text_${id}`)
            .replace(/contant_font_family_0/g, `contant_font_family_${id}`)
            .replace(/contant_language_0/g, `contant_language_${id}`)
            .replace(/contant_font_size_0/g, `contant_font_size_${id}`)
            .replace(/contant_font_color_0/g, `contant_font_color_${id}`)
            .replace(/content_x_pos_0/g, `content_x_pos_${id}`)
            .replace(/content_y_pos_0/g, `content_y_pos_${id}`)
            .replace(/varible_type_0/g, `varible_type_${id}`);
    }

    function getBlocks() {
        return Array.from(document.querySelectorAll(".content-block"));
    }

    function showBlockByIndex(index) {
        getBlocks().forEach((block, i) => {
            block.classList.toggle("d-none", i !== index);
        });
    }

    function setImageBlockData(block, item) {
        block.querySelector(".new_type").value = "image";
        block.querySelectorAll(".image-upload-section").forEach(el => el.classList.remove("d-none"));
        block.querySelectorAll(".text-enter-section").forEach(el => el.classList.add("d-none"));
        block.querySelector(".image-width").value = item.image_width || 100;
        block.querySelector(".image-height").value = item.image_height || 100;
        block.querySelector(".content-x-pos").value = item.content_x_position || 0;
        block.querySelector(".content-y-pos").value = item.content_y_position || 0;
        addOrUpdateOverlay(block.dataset.id, 'image');
        const overlay = document.getElementById(`overlay-${block.dataset.id}`);
        overlay.src = "{{ asset('') }}" + item.image_url;
        overlay.style.width = item.image_width + "px";
        overlay.style.height = item.image_height + "px";
        overlay.style.left = item.content_x_position + "px";
        overlay.style.top = item.content_y_position + "px";
    }

    var VribleTypeArry = {};
    let varibleQueue = [];

    function setTextBlockData(block, item) {
        block.querySelector(".new_type").value = "text";
        block.querySelectorAll(".image-upload-section").forEach(el => el.classList.add("d-none"));
        block.querySelectorAll(".text-enter-section").forEach(el => el.classList.remove("d-none"));

        const textField = block.querySelector(".text_enter");
        const fontField = block.querySelector(".font-text");
        const sizeField = block.querySelector(".font-size");
        const colorField = block.querySelector(".font-color");
        const langField = block.querySelector(".language");
        const xPosField = block.querySelector(".content-x-pos");
        const yPosField = block.querySelector(".content-y-pos");

        // Set base values
        textField.value = item.text || "";
        fontField.value = item.font_family || "arial";
        sizeField.value = item.font_size || 24;
        colorField.value = item.font_color || "#000000";
        langField.value = item.language || "en";
        xPosField.value = item.content_x_position || 0;
        yPosField.value = item.content_y_position || 0;

        const variableSelect = block.querySelector(".new_varible");
        const blockId = block.dataset.id;

        if (item.varible_name && variableSelect) {
            variableSelect.value = item.varible_name;
        }

        VribleTypeArry[blockId] = item.varible_name;
        varibleQueue.push({
            blockId,
            varibleName: item.varible_name
        });

        console.log(VribleTypeArry);

        addOrUpdateOverlay(blockId, 'text');

        const overlay = document.getElementById(`overlay-${blockId}`);
        overlay.innerText = item.text || "";
        overlay.style.fontFamily = `"${item.font_family || 'arial'}", sans-serif`;
        overlay.style.fontSize = (item.font_size || 24) + "px";
        overlay.style.color = item.font_color || "#000000";
        overlay.style.left = (item.content_x_position || 0) + "px";
        overlay.style.top = (item.content_y_position || 0) + "px";

        setTimeout(() => {
            if (item.text && item.language) {
                translateText(item.text, item.language).then(translated => {
                    if (translated) {
                        overlay.innerText = translated;
                    }
                });
            }
        }, 100);
    }

    function VaribleSet(blockId, varibleName) {
        const selector = $(`[name="varible_type_${blockId}"]`);
        selector.val(varibleName).trigger('change');
        VribleTypeArry[blockId] = varibleName; // ✅ Set it in the map
    }

    // Ensure queue runs once DOM is ready
    const interval = setInterval(() => {
        if (document.readyState === 'complete') {
            varibleQueue.forEach(({
                blockId,
                varibleName
            }) => {
                VaribleSet(blockId, varibleName);
            });
            clearInterval(interval); // ✅ Clear interval after setting
        }
    }, 1000);


    function bindEventsForBlock(block) {
        const typeSelect = block.querySelector(".new_type");
        const imageUpload = block.querySelector(".image_upload");
        const imageWidth = block.querySelector(".image-width");
        const imageHeight = block.querySelector(".image-height");
        const textEnter = block.querySelector(".text_enter");
        const language = block.querySelector(".language");
        const fontText = block.querySelector(".font-text");
        const fontSize = block.querySelector(".font-size");
        const fontColor = block.querySelector(".font-color");
        const xPos = block.querySelector(".content-x-pos");
        const yPos = block.querySelector(".content-y-pos");

        typeSelect.addEventListener("change", () => {
            const type = typeSelect.value;
            const imgSections = block.querySelectorAll(".image-upload-section");
            const textSections = block.querySelectorAll(".text-enter-section");
            if (type === "image") {
                imgSections.forEach(el => el.classList.remove("d-none"));
                textSections.forEach(el => el.classList.add("d-none"));
                addOrUpdateOverlay(block.dataset.id, 'image');
                updateImageOverlay(block);
            } else if (type === "text") {
                imgSections.forEach(el => el.classList.add("d-none"));
                textSections.forEach(el => el.classList.remove("d-none"));
                addOrUpdateOverlay(block.dataset.id, 'text');
                updateTextOverlay(block);
            } else {
                imgSections.forEach(el => el.classList.add("d-none"));
                textSections.forEach(el => el.classList.add("d-none"));
                removeOverlay(block.dataset.id);
            }
            updateContentList();
        });

        imageUpload.addEventListener("change", () => {
            updateImageOverlay(block);
            updateContentList();
        });
        imageWidth.addEventListener("input", () => {
            updateImageOverlay(block);
            updateContentList();
        });
        imageHeight.addEventListener("input", () => {
            updateImageOverlay(block);
            updateContentList();
        });
        xPos.addEventListener("input", () => {
            updateOverlayPosition(block);
            updateContentList();
        });
        yPos.addEventListener("input", () => {
            updateOverlayPosition(block);
            updateContentList();
        });

        textEnter.addEventListener("input", async () => {
            await updateTextOverlay(block);
            updateContentList();
        });
        fontText.addEventListener("input", async () => {
            await updateTextOverlay(block);
            updateContentList();
        });
        fontSize.addEventListener("input", async () => {
            await updateTextOverlay(block);
            updateContentList();
        });
        fontColor.addEventListener("input", async () => {
            await updateTextOverlay(block);
            updateContentList();
        });
        language.addEventListener("input", async () => {
            await updateTextOverlay(block);
            updateContentList();
        });
    }

    function addOrUpdateOverlay(id, type) {
        let overlay = document.getElementById(`overlay-${id}`);
        if (overlay) {
            const isImage = overlay.tagName.toLowerCase() === "img";
            if ((type === "image" && !isImage) || (type === "text" && isImage)) {
                overlay.remove();
                overlay = null;
            }
        }
        if (!overlay) {
            overlay = type === "image" ? document.createElement("img") : document.createElement("span");
            overlay.id = `overlay-${id}`;
            overlay.style.position = "absolute";
            overlay.style.display = "block";
            document.getElementById("preview-overlay").appendChild(overlay);
        }
        overlay.style.display = "block";
    }

    function removeOverlay(id) {
        const el = document.getElementById(`overlay-${id}`);
        if (el) el.remove();
    }

    function updateImageOverlay(block) {
        const id = block.dataset.id;
        const overlay = document.getElementById(`overlay-${id}`);
        if (!overlay) return;

        const fileInput = block.querySelector(".image_upload");
        const width = block.querySelector(".image-width").value;
        const height = block.querySelector(".image-height").value;
        const x = block.querySelector(".content-x-pos").value + "px";
        const y = block.querySelector(".content-y-pos").value + "px";

        if (fileInput.files[0]) {
            const url = URL.createObjectURL(fileInput.files[0]);
            overlay.src = url;
        }
        overlay.style.width = width + "px";
        overlay.style.height = height + "px";
        overlay.style.left = x;
        overlay.style.top = y;
    }

    const TRANSLATE_URL = "{{ route('vendor.birthday.read.translate.data') }}";
    const CSRF_TOKEN = "{{ csrf_token() }}";

    async function translateText(text, targetLang) {
        if (!text.trim()) return "";
        if (targetLang === "en") return text;
        try {
            const response = await fetch(TRANSLATE_URL, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": CSRF_TOKEN
                },
                body: JSON.stringify({
                    text,
                    target: targetLang
                })
            });

            const data = await response.json();
            return data.transliteratedText || text;
        } catch (e) {
            console.error("Translation error", e);
            return text;
        }
    }

    async function updateTextOverlay(block) {
        const id = block.dataset.id;
        const overlay = document.getElementById(`overlay-${id}`);
        if (!overlay) return;

        let text = block.querySelector(".text_enter").value || "Your text here";
        const font = block.querySelector(".font-text").value;
        const size = block.querySelector(".font-size").value;
        const color = block.querySelector(".font-color").value;
        const x = block.querySelector(".content-x-pos").value + "px";
        const y = block.querySelector(".content-y-pos").value + "px";
        const langValue = block.querySelector(".language").value;

        let translated = await translateText(text, langValue);

        overlay.innerText = translated;
        overlay.style.fontFamily = `"${font}", sans-serif`;
        overlay.style.fontSize = size + "px";
        overlay.style.color = color;
        overlay.style.left = x;
        overlay.style.top = y;
    }

    function updateOverlayPosition(block) {
        const id = block.dataset.id;
        const overlay = document.getElementById(`overlay-${id}`);
        if (!overlay) return;
        overlay.style.left = block.querySelector(".content-x-pos").value + "px";
        overlay.style.top = block.querySelector(".content-y-pos").value + "px";
    }

    function getBlocks() {
        return Array.from(document.querySelectorAll(".content-block"));
    }

    function showBlockByIndex(index) {
        getBlocks().forEach((block, i) => {
            block.classList.toggle("d-none", i !== index);
        });
    }

    function updateContentList() {
        const contentList = document.getElementById("content-list");
        contentList.innerHTML = "";

        getBlocks().forEach(block => {
            const id = block.dataset.id;
            const type = block.querySelector(".new_type").value;

            const div = document.createElement("div");
            div.classList.add("border", "p-1", "mb-1", "bg-light");
            div.dataset.id = id;

            const row = document.createElement("div");
            row.className = "row align-items-center";

            if (type === "text") {
                const text = block.querySelector(".text_enter").value;

                const textDiv = document.createElement("div");
                textDiv.classList.add("border", "p-2", "bg-light", "form-control");
                textDiv.dataset.id = id;
                textDiv.contentEditable = true;
                textDiv.innerText = text || `Text #${id}`;
                textDiv.style.cursor = "pointer";

                textDiv.addEventListener("input", () => {
                    block.querySelector(".text_enter").value = textDiv.innerText;
                    updateTextOverlay(block);
                });

                const textCol = document.createElement("div");
                textCol.className = "col-5";
                textCol.appendChild(textDiv);

                const select = document.createElement("select");
                select.name = `varible_type_${id}`;
                select.className = "form-control new_varible";

                ["name", "number", "email", "address"].forEach(opt => {
                    const option = document.createElement("option");
                    option.value = opt;
                    option.innerText = opt.charAt(0).toUpperCase() + opt.slice(1);
                    select.appendChild(option);
                });

                const selectedValue = block.querySelector(".new_varible")?.value;
                if (selectedValue) {
                    select.value = selectedValue;
                    VribleTypeArry[id] = selectedValue;
                }

                select.addEventListener("change", () => {
                    const newVal = select.value;
                    block.querySelector(".new_varible").value = newVal;
                    VribleTypeArry[id] = newVal;
                });

                const selectCol = document.createElement("div");
                selectCol.className = "col-5";
                selectCol.appendChild(select);

                const trashCol = document.createElement("div");
                trashCol.className = "col-2";

                const trashBtn = document.createElement("button");
                trashBtn.classList.add("btn", "btn-sm", "btn-danger", "float-right");
                trashBtn.innerHTML = '<i class="mdi mdi-trash-can fs-15 "></i>';
                trashBtn.title = "Delete Block";

                trashBtn.addEventListener("click", (e) => {
                    e.stopPropagation();
                    const blockToRemove = getBlocks().find(b => b.dataset.id === id);
                    if (blockToRemove) blockToRemove.remove();

                    const overlay = document.getElementById(`overlay-${id}`);
                    if (overlay) overlay.remove();

                    currentBlockIndex = 0;
                    showBlockByIndex(currentBlockIndex);
                    updateContentList();
                });

                trashCol.appendChild(trashBtn);

                row.appendChild(textCol);
                row.appendChild(selectCol);
                row.appendChild(trashCol);

                row.addEventListener("click", () => {
                    currentBlockIndex = getBlocks().findIndex(b => b.dataset.id === id);
                    showBlockByIndex(currentBlockIndex);
                });

                div.appendChild(row);
            } else if (type === "image") {
                const width = block.querySelector(".image-width").value;
                const height = block.querySelector(".image-height").value;

                const labelCol = document.createElement("div");
                labelCol.className = "col-10";
                labelCol.style.cursor = "pointer";

                labelCol.innerText = `Image #${id} (${width}x${height}px)`;

                labelCol.addEventListener("click", () => {
                    currentBlockIndex = getBlocks().findIndex(b => b.dataset.id === id);
                    showBlockByIndex(currentBlockIndex);
                });

                const trashCol = document.createElement("div");
                trashCol.className = "col-2";

                const trashBtn = document.createElement("button");
                trashBtn.classList.add("btn", "btn-sm", "btn-danger", "float-right");
                trashBtn.innerHTML = '<i class="mdi mdi-trash-can fs-15 "></i>';
                trashBtn.title = "Delete Block";

                trashBtn.addEventListener("click", (e) => {
                    e.stopPropagation();
                    const blockToRemove = getBlocks().find(b => b.dataset.id === id);
                    if (blockToRemove) blockToRemove.remove();

                    const overlay = document.getElementById(`overlay-${id}`);
                    if (overlay) overlay.remove();

                    currentBlockIndex = 0;
                    showBlockByIndex(currentBlockIndex);
                    updateContentList();
                });

                trashCol.appendChild(trashBtn);

                row.appendChild(labelCol);
                row.appendChild(trashCol);
                div.appendChild(row);
            }

            contentList.appendChild(div);
        });
    }


    $(document).ready(function() {
        $('#birthday-form').on('submit', function(e) {
            e.preventDefault();
            const form = $(this)[0];
            const formData = new FormData(form);

            // Track already appended keys
            const addedKeys = new Set();

            $('.content-block').each(function() {
                const blockId = $(this).data('id');
                const prefix = (key) => `${key}_${blockId}`;

                const appendUnique = (key, value) => {
                    const fullKey = prefix(key);
                    if (!addedKeys.has(fullKey) && value !== undefined && value !== null) {
                        formData.append(fullKey, value);
                        addedKeys.add(fullKey);
                    }
                };

                const type = $(this).find(`[name="new_type_${blockId}"]`).val();
                appendUnique('new_type', type);

                const editId = $(this).find(`[name="edit_id_${blockId}"]`).val();
                if (editId) appendUnique('edit_id', editId);

                if (type === 'image') {
                    const imageInput = $(this).find(`[name="image_upload_${blockId}"]`)[0];
                    const imageFile = imageInput?.files[0];
                    if (imageFile && !addedKeys.has(`image_upload_${blockId}`)) {
                        formData.append(`image_upload_${blockId}`, imageFile);
                        addedKeys.add(`image_upload_${blockId}`);
                    }

                    appendUnique('image_width', $(this).find(`[name="image_width_${blockId}"]`).val());
                    appendUnique('image_height', $(this).find(`[name="image_height_${blockId}"]`).val());
                } else if (type === 'text') {
                    appendUnique('contant_text', $(this).find(`[name="contant_text_${blockId}"]`).val());
                    appendUnique('contant_font_family', $(this).find(`[name="contant_font_family_${blockId}"]`).val());
                    appendUnique('contant_font_size', $(this).find(`[name="contant_font_size_${blockId}"]`).val());
                    appendUnique('contant_font_color', $(this).find(`[name="contant_font_color_${blockId}"]`).val());
                    appendUnique('contant_language', $(this).find(`[name="contant_language_${blockId}"]`).val());
                    appendUnique('varible_type', $(this).find(`[name="varible_type_${blockId}"]`).val());
                }

                appendUnique('content_x_pos', $(this).find(`[name="content_x_pos_${blockId}"]`).val());
                appendUnique('content_y_pos', $(this).find(`[name="content_y_pos_${blockId}"]`).val());
            });

            $.ajax({
                url: "{{ route('vendor.birthday.read.save') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $('#save_changes').prop('disabled', true).text('Saving...');
                },
                success: function(response) {
                    $('#save_changes').prop('disabled', false).text('Save Changes');
                    if (response.reaction_code == 1) {
                        showSuccessMessage(response.message);
                        window.location = "{{ route('vendor.birthday.read.list_view') }}";
                    } else {
                        showErrorMessage(response.message);
                    }
                },
                error: function(xhr) {
                    $('#save_changes').prop('disabled', false).text('Save Changes');
                    console.error(xhr.responseText);
                    showErrorMessage('Something went wrong while saving!');
                }
            });
        });
    });
</script>

@endpush
@endsection()