@extends('layouts.app', ['title' => $contact ? __tr('Send Greeting Engine Message') : __tr('Create New Greeting Engine')])
@section('content')
@include('users.partials.header', [
'title' => $contact ? __tr('Send Greeting Engine Message') : __tr('Create New Greeting Engine'),
'description' => '',
])

<style>
    :root {
        --primary-color: #5f72e4;
        --secondary-color: #6c757d;
        --success-color: #28a745;
        --danger-color: #dc3545;
        --warning-color: #ffc107;
        --info-color: #17a2b8;
        --light-color: #f8f9fa;
        --dark-color: #343a40;
        --border-radius: 12px;
        --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        --transition: all 0.3s ease;
    }

    /* Modern Card Design */
    .modern-card {
        background: #fff;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        border: 1px solid rgba(0, 0, 0, 0.08);
        transition: var(--transition);
        overflow: hidden;
    }



    .modern-card-header {
        background: linear-gradient(135deg, var(--primary-color), #4c63d2);
        color: white;
        padding: 20px;
        border-bottom: none;
    }

    .modern-card-body {
        padding: 40px;
    }

    /* Form Styling */
    .form-group {
        margin-bottom: 25px;
    }

    .form-label {
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--dark-color);
        font-size: 14px;
    }

    .form-control {
        border: 2px solid #e8ecef;
        border-radius: 8px;
        font-size: 14px;
        transition: var(--transition);
        background: #fff;
    }

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(95, 114, 228, 0.15);
        outline: none;
    }

    .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px 12px;
    }

    /* Button Styling */


    /* Template Selection */
    .template-selection {
        background: linear-gradient(135deg, #f8f9fc, #e8f2ff);
        border-radius: var(--border-radius);
        padding: 30px;
        margin-bottom: 30px;
        border: 2px dashed #d1ecf1;
    }

    /* Content Block Styling */
    .content-block {
        background: #fff;
        border: 2px solid #e8ecef;
        border-radius: var(--border-radius);
        padding: 15px;
        margin-bottom: 20px;
        transition: var(--transition);
    }

    .content-block.active {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(95, 114, 228, 0.15);
    }

    .content-navigation {
        background: #f8f9fa;
        border-radius: var(--border-radius);
        padding: 20px;
        margin: 15px 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
    }

    .navigation-info {
        font-weight: 600;
        color: var(--dark-color);
    }

    .navigation-buttons {
        display: flex;
        gap: 10px;
    }

    /* Preview Container */
    .preview-container-modern {
        position: relative;
        top: 20px;
        background: #fff;
        border-radius: var(--border-radius);
    }

    .preview-title {
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        color: var(--dark-color);
    }

    .upload-area-modern {
        border: 3px dashed #d1ecf1;
        border-radius: var(--border-radius);
        padding: 40px 20px;
        text-align: center;
        background: linear-gradient(135deg, #f8f9fc, #e8f2ff);
        cursor: pointer;
        transition: var(--transition);
        color: var(--secondary-color);
        position: relative;
        overflow: hidden;
    }

    .upload-area-modern:hover,
    .upload-area-modern.dragover {
        border-color: var(--primary-color);
        background: linear-gradient(135deg, #e8f2ff, #f0f8ff);
        color: var(--primary-color);
        transform: scale(1.02);
    }

    .upload-icon {
        font-size: 48px;
        margin-bottom: 15px;
        opacity: 0.7;
    }

    .preview-image {
        width: 100%;
        border-radius: var(--border-radius);
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        border: 2px solid #e8ecef;
        min-height: 400px;
    }

    .preview-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    /* Content List */
    .content-list-modern {
        background: #fff;
        border-radius: var(--border-radius);
        border: 1px solid #e8ecef;
        margin-top: 20px;
        overflow: hidden;
    }

    .content-list-header {
        padding: 15px 20px;
        border-bottom: 1px solid #e8ecef;
        font-weight: 600;
        color: var(--dark-color);
    }

    /* Container Modern Styling */
    #content-list {
        background: #fff;
        /* border: 1px solid #e8ecef; */
        /* border-radius: 8px; */
        padding: 15px;
        /* margin-top: 20px; */
        /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); */
    }

    /* Each block modern card look */
    #content-list>.border {
        border: 1px solid #dfe3e8 !important;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 12px;
        background-color: #f9fafa !important;
        transition: all 0.2s ease;
    }

    #content-list>.border:hover {
        background-color: #f1f3f5 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    /* Editable content area */
    #content-list .form-control[contenteditable="true"] {
        background-color: #ffffff !important;
        border: 1px solid #ced4da;
        border-radius: 6px;
        padding: 10px;
        font-size: 14px;
        min-height: 38px;
        line-height: 1.5;
        transition: border-color 0.2s;
    }

    #content-list .form-control[contenteditable="true"]:focus {
        outline: none;
        border-color: #4c9ffe;
        box-shadow: 0 0 0 2px rgba(76, 159, 254, 0.2);
    }

    /* Dropdown Styling */
    #content-list select.new_varible {
        background-color: #ffffff;
        border: 1px solid #ced4da;
        border-radius: 6px;
        padding: 8px;
        font-size: 14px;
        height: 38px;
        transition: border-color 0.2s;
    }

    #content-list select.new_varible:focus {
        border-color: #4c9ffe;
        box-shadow: 0 0 0 2px rgba(76, 159, 254, 0.2);
    }

    /* Delete Button Styling */
    #content-list .btn-danger {
        background-color: #f87171;
        border: none;
        padding: 6px 10px;
        font-size: 14px;
        border-radius: 6px;
        transition: background-color 0.2s;
    }

    #content-list .btn-danger:hover {
        background-color: #dc2626;
    }

    /* Optional: Add spacing between items in row */
    #content-list .row>div {
        padding: 4px 8px;
    }

    .content-item {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
        transition: var(--transition);
        cursor: pointer;
        background: #fff;
    }

    .content-item:hover {
        background: #f8f9fc;
        transform: translateX(5px);
    }

    .card-header {
        margin-bottom: 0;
        padding: 0.50rem 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, .05);
        background-color: #fff;
    }

    .content-item.active {
        background: linear-gradient(135deg, #e8f2ff, #f0f8ff);
        border-left: 4px solid var(--primary-color);
    }

    .content-item:last-child {
        border-bottom: none;
    }

    /* Progress Bar */
    .progress-modern {
        height: 8px;
        background: #e9ecef;
        border-radius: 4px;
        overflow: hidden;
        margin-top: 15px;
    }

    .progress-bar-modern {
        height: 100%;
        background: linear-gradient(90deg, var(--success-color), #20c997);
        border-radius: 4px;
        transition: width 0.3s ease;
    }

    /* Contact Info */
    .contact-info {
        background: linear-gradient(135deg, #e8f5e8, #f0fff0);
        border: 1px solid #c3e6cb;
        border-radius: var(--border-radius);
        padding: 20px;
        margin-bottom: 20px;
    }

    .contact-info h6 {
        margin-bottom: 10px;
        color: var(--success-color);
        font-weight: 700;
    }

    /* Alert Styling */
    .alert-modern {
        border-radius: var(--border-radius);
        border: none;
        padding: 20px;
        margin-bottom: 20px;
    }

    .alert-danger-modern {
        background: linear-gradient(135deg, #f8d7da, #f5c6cb);
        color: #721c24;
    }

    /* Responsive Design */
    @media (max-width: 1200px) {
        .preview-container-modern {
            position: relative;
            margin: 20px 0;
        }
    }

    @media (max-width: 768px) {
        .modern-card-body {
            padding: 20px;
        }

        .content-navigation {
            flex-direction: column;
            text-align: center;
        }

        .navigation-buttons {
            justify-content: center;
            flex-wrap: wrap;
        }
    }

    /* Animation */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fade-in-up {
        animation: fadeInUp 0.6s ease forwards;
    }

    /* Loading States */
    .loading {
        opacity: 0.7;
        pointer-events: none;
    }

    .spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        border-top-color: transparent;
        animation: spin 0.8s ease-in-out infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* Overlay elements styling */
    .overlay-element {
        position: absolute;
        cursor: move;
        border: 2px dashed transparent;
        transition: var(--transition);
    }

    .overlay-element:hover {
        border-color: var(--primary-color);
    }

    .overlay-element.selected {
        border-color: var(--success-color);
        box-shadow: 0 0 10px rgba(40, 167, 69, 0.3);
    }

    /* Type indicator badges */
    .type-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .type-badge.image {
        background: linear-gradient(135deg, #e3f2fd, #bbdefb);
        color: #1976d2;
    }

    .type-badge.text {
        background: linear-gradient(135deg, #f3e5f5, #e1bee7);
        color: #7b1fa2;
    }

    /* Custom scrollbar */
    .content-list-modern::-webkit-scrollbar {
        width: 6px;
    }

    .content-list-modern::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .content-list-modern::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }

    .content-list-modern::-webkit-scrollbar-thumb:hover {
        background: #4c63d2;
    }

    .lw-template-header-variables-container {
        display: none;
    }
</style>

<div class="container-fluid container-fluid-padding p-1">
    <!-- Back Button -->
    <div class="row mb-4">
        <div class="col-12 text-right">
            <a class="btn btn-secondary" href="{{ route('vendor.birthday.read.list_view') }}">
                <i class="mdi mdi-arrow-left-thick fs-15 "></i>
                {{ __tr('Back to Greeting Engine List') }}
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card fade-in-up">
                @if ($contact)
                <div class="modern-card-header">
                    <div class="contact-info">
                        <h6><i class="mdi mdi-account fs-15 "></i> Contact Information</h6>
                        <div class="row">
                            <div class="col-md-4">
                                <strong>{{ __tr('Name') }}:</strong> {{ $contact->full_name }}
                            </div>
                            <div class="col-md-4">
                                <strong>{{ __tr('Phone') }}:</strong> {{ $contact->wa_id }}
                            </div>
                            <div class="col-md-4">
                                <strong>{{ __tr('Country') }}:</strong> {{ $contact->country?->name }}
                            </div>
                        </div>
                    </div>
                </div>
                @else
                @if(!getVendorSettings('test_recipient_contact'))
                <div class="card-body">
                    <div class="alert-modern alert-danger-modern">
                        <i class="mdi mdi-information-slab-circle fs-15 "></i>
                        {{ __tr('Test Contact missing, You need to set the Test Contact first, do it under the WhatsApp Settings') }}
                    </div>
                </div>
                @endif
                @endif

                <div class="modern-card-body" x-data="{
                        selectedTemplate:'',
                        currentStep: 0,
                        goToStep(stepIndex) {
                            this.currentStep = stepIndex;
                            this.updateProgress();
                        },
                        nextStep() {
                            if (this.currentStep < 3) {
                                this.currentStep++;
                                this.updateProgress();
                            }
                        },
                        prevStep() {
                            if (this.currentStep > 0) {
                                this.currentStep--;
                                this.updateProgress();
                            }
                            },
                            updateProgress() {
                                const progress = document.getElementById('progress');
                                const steps = document.querySelectorAll('.step');
                                
                                const progressPercent = (this.currentStep / (steps.length - 1)) * 100;
                                progress.style.width = progressPercent + '%';
                                
                                steps.forEach((step, index) => {
                                    step.classList.remove('active', 'completed');
                                    
                                    if (index < this.currentStep) {
                                        step.classList.add('completed');
                                    } else if (index === this.currentStep) {
                                        step.classList.add('active');
                                    }
                                });
                            }
                        }">
                    <!-- Template Selection -->
                    <div class="template-selection" x-show="!selectedTemplate" x-cloak>
                        <div class="text-center mb-4">
                            <i class="fas fa-templates upload-icon"></i>
                            <h4>{{ __tr('Select Template') }}</h4>
                            <p class="text-muted">Choose a WhatsApp template to configure</p>
                        </div>

                        <x-lw.form lwSubmitOnChange data-event-callback="lwPrepareUploadPlugIn"
                            :action="route('vendor.birthday.template.view')" data-pre-callback="clearTemplateContainer">
                            <x-lw.input-field x-model="selectedTemplate"
                                placeholder="{!! __tr('Select & Configure Template') !!}" type="selectize"
                                data-lw-plugin="lwSelectize" data-selected=" " type="select"
                                id="lwField_templateSelection" name="template_selection" data-form-group-class=""
                                class="form-control" data-selected=" " :label="__tr('Select Template')">
                                <x-slot name="selectOptions">
                                    <option value="">{{ __tr('Select & Configure Template') }}</option>
                                    @foreach ($whatsAppTemplates as $whatsAppTemplate)
                                    @php
                                    $firstComponent = $whatsAppTemplate['__data']['template']['components'][0] ?? null;
                                    @endphp
                                    @if ($firstComponent && isset($firstComponent['format']) && $firstComponent['format'] == "IMAGE")
                                    <option value="{{ $whatsAppTemplate['_uid'] }}">
                                        {{ $whatsAppTemplate['template_name'] }} ({{ $whatsAppTemplate['language'] }})
                                    </option>
                                    @endif
                                    @endforeach
                                </x-slot>
                            </x-lw.input-field>
                        </x-lw.form>
                    </div>

                    <!-- Main Content Area -->
                    <div x-show="selectedTemplate" x-cloak class="fade-in-up">
                        @if ($contact)
                        <x-lw.form :action="route('vendor.template_message.contact.process', ['contactUid' => $contact->_uid])">
                            <input type="hidden" name="contact_uid" value="{{ $contact->_uid }}">
                            <div id="lwTemplateStructureContainer">
                                @if(isset($carouselTemplateData) && !empty($carouselTemplateData['cards']))
                                @include('whatsapp-service.message-preparation', [
                                'template' => $carouselTemplateData['template'],
                                'carouselTemplateData' => $carouselTemplateData,
                                'headerFormat' => null,
                                'headerParameters' => [],
                                'bodyParameters' => [],
                                'buttonParameters' => [],
                                'buttonItems' => [],
                                'bodyComponentText' => '',
                                'templateComponents' => [],
                                'onlyTemplatePreview' => false,
                                'contactDataMaps'=> $contactDataMaps
                                ])
                                @else
                                {!! $template !!}
                                @endif
                            </div>
                            @include('whatsapp.from-phone-number')
                            <div class="text-center mt-4">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="mdi mdi-send fs-15 "></i>
                                    {{ __tr('Send Message') }}
                                </button>
                            </div>
                        </x-lw.form>
                        @else
                        <!-- Campaign Creation Form -->
                        <x-lw.form id="birthdayTemplateForm" data-confirm="#lwScheduleMessageConfirmation">
                            @csrf
                            <input type="hidden" name="template_id" id="template_id" value="{{$Template['id'] ?? 0}}">
                            <input type="hidden" name="campaign_id" id="campaign_id" value="{{$campaign['_id'] ?? 0}}">
                            <input type="hidden" name="content_count" id="content_count" value="0">

                            <div class="row" style="height: 80vh; overflow: hidden;">
                                <!-- Left Column - Form Controls -->
                                <div class="col-lg-6" style="height: 100%; overflow: hidden;">
                                    <div class="scroll-column" style="height: 100%; overflow-y: auto; padding-right: 15px;">
                                        <div class="card">
                                            <div class="content-list-header">
                                                <h5 class="mb-0"><i class="mdi mdi-information-slab-circle fs-15 "></i> Basic Information</h5>
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="lwCampaignTitle" class="form-label">Template Name</label>
                                                            <input type="text" class="form-control" id="lwCampaignTitle" name="title"
                                                                value="{{ $Template['name'] ?? '' }}" placeholder="Enter Template Name" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <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>
                                                                @foreach ($CustomFieldModel as $CustomField)
                                                                <option value="{{ $CustomField['_id'] }}"
                                                                    @selected(($Template['schedule_type'] ?? '' )==$CustomField['_id'])>
                                                                    {{ $CustomField['input_name'] }}
                                                                </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Content Navigation -->
                                        <div class="content-navigation">
                                            <div class="navigation-info">
                                                <span id="current-block-info">Block 1 of 1</span>
                                                <span class="type-badge" id="current-type-badge">Select Type</span>
                                            </div>
                                            <div class="navigation-buttons">
                                                <button type="button" class="btn btn-secondary btn-sm" id="back">
                                                    <i class="mdi mdi-chevron-left"></i> Back
                                                </button>
                                                <button type="button" class="btn btn-secondary btn-sm" id="next">
                                                    Next <i class="mdi mdi-chevron-right"></i>
                                                </button>
                                                <button type="button" class="btn btn-success btn-sm" id="add_more">
                                                    <i class="mdi mdi-plus"></i> Add Content
                                                </button>
                                                <button type="button" class="btn btn-danger btn-sm" id="reset">
                                                    <i class="mdi mdi-undo"></i> Reset
                                                </button>
                                            </div>
                                        </div>

                                        <!-- Content Block -->
                                        <div class="content-block" data-id="0">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="form-label">Content Type</label>
                                                        <select name="new_type_0" class="form-control new_type">
                                                            <option value="">Select Type</option>
                                                            <option value="image">Image</option>
                                                            <option value="text">Text</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Image Section -->
                                            <div class="image-upload-section d-none">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label class="form-label">Image Upload</label>
                                                            <input type="file" name="image_upload_0" class="form-control image_upload" accept="image/*">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label class="form-label">Width (px)</label>
                                                            <input type="number" name="image_width_0" class="form-control image-width" value="100">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label class="form-label">Height (px)</label>
                                                            <input type="number" name="image_height_0" class="form-control image-height" value="100">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Text Section -->
                                            <div class="text-enter-section d-none">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label class="form-label">Text Content</label>
                                                            <input type="text" name="contant_text_0" class="form-control text_enter" placeholder="Enter your text here">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <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>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <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" selected>English</option>
                                                                <option value="el">Greek</option>
                                                                <option value="gu">Gujarati</option>
                                                                <option value="he">Hebrew</option>
                                                                <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="ta">Tamil</option>
                                                                <option value="te">Telugu</option>
                                                                <option value="ti">Tigrinya</option>
                                                                <option value="ur">Urdu</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <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>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label class="form-label">Font Color</label>
                                                            <input type="color" class="form-control font-color" value="#000000" name="contant_font_color_0">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Position Controls -->
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="form-label">X Position (px)</label>
                                                        <input type="number" class="form-control content-x-pos" value="0" name="content_x_pos_0">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="form-label">Y Position (px)</label>
                                                        <input type="number" class="form-control content-y-pos" value="0" name="content_y_pos_0">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Dynamic Content Container -->
                                        <div id="content-container"></div>

                                        <!-- Content List -->
                                        <div class="content-list-modern">
                                            <div class="content-list-header">
                                                <i class="mdi mdi-format-list-bulleted fs-15 "></i> Content Elements
                                            </div>
                                            <div id="content-list"></div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Right Column - Preview -->
                                <div class="col-lg-6" style="height: 100%; overflow: hidden;">
                                    <div class="scroll-column" style="height: 100%; overflow-y: auto;">
                                        <div class="preview-container-modern">
                                            <h5 class="preview-title">
                                                <i class="mdi mdi-eye fs-15 "></i>
                                                Live Preview
                                            </h5>
                                            <div class="row col-lg-12" style="justify-content: space-evenly;">
                                                <small class="text-muted mb-2" id="preview-title-show-access" style="{{ $is_data == 1 && $Template['image'] ? '' : 'display:none;' }}">You can drag & drop to replace the current image.</small>
                                            </div>


                                            <!-- Upload Area -->
                                            <div class="upload-container mb-3" id="upload-container" style="{{ $is_data == 1 && $Template['image'] ? 'display:none;' : '' }}">
                                                <div class="upload-area-modern" id="upload-area">
                                                    <div class="upload-icon">
                                                        <i class="mdi mdi-cloud-upload fs-15 "></i>
                                                    </div>
                                                    <p><strong>Drag & Drop or Click to Upload</strong></p>
                                                    <p class="text-muted">PNG, JPG supported</p>
                                                    <input type="file" name="main_image_upload" class="main_image_upload" accept="image/png, image/jpeg" style="display: none;">
                                                </div>
                                                <div class="progress-modern" id="progress-container" style="display: none;">
                                                    <div class="progress-bar-modern" id="progress-bar"></div>
                                                </div>
                                            </div>

                                            <!-- Preview Image -->
                                            <div id="image-preview-div" class="preview-image" style="{{ $is_data == 1 && $Template['image'] ? '' : 'display:none;' }}">
                                                <img id="image-preview"
                                                    src="{{ $is_data == 1 ? $Template['image'] : '' }}"
                                                    alt="Preview"
                                                    style="{{ $is_data == 1 ? 'display:block;' : 'display:none;' }}; max-width: 100%; height: auto; margin-top: 6px;">

                                                <div id="preview-overlay" class="preview-overlay"></div>

                                                <div id="placeholder" style="{{ $is_data == 1 ? 'display:none;' : '' }}justify-self: center;text-align: center;">
                                                    <i class="fas mdi mdi-image-size-select-actual fs-15 " style="font-size: 64px; color: #ccc;"></i>
                                                    <p class="text-muted mt-3">Upload an image to see preview</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Template Structure Container -->
                            <div id="lwTemplateStructureContainer" class="mt-4">
                                {!! $template !!}
                            </div>

                            <!-- Campaign Settings -->
                            <div class="mt-5">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="card shadow-sm">
                                            <div class="card-header bg-garay">
                                                <h4 class="mb-0 text-primary1">{{ __tr('Contacts and Schedule') }}</h4>
                                            </div>
                                            <div class="card-body">
                                                <!-- <div class="form-group">
                                                    <label class="form-label fw-bold">{{ __tr('Campaign Title') }}</label>
                                                    <div class="">
                                                        <input type="text" class="form-control" id="lwCampaignTitle" name="title" required="required" placeholder="{{ __tr('Enter campaign title') }}">
                                                    </div>
                                                </div> -->

                                                {{-- <div class="card mb-4"> --}}
                                                {{-- <div class="card-header bg-garay"> --}}
                                                {{-- <label class="form-label fw-bold">{{ __tr('Target Contacts') }}</label> --}}
                                                {{-- </div> --}}
                                                {{-- <div class="card-body"> --}}
                                                <div class="mt-3">
                                                    <div class="d-flex gap-2 mb-2">
                                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#lwAddNewContact">
                                                            <i class="mdi mdi-account-plus fs-15  me-2"></i>{{ __tr('Create New Contact') }}
                                                        </button>
                                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#lwAddNewGroup">
                                                            <i class="mdi mdi-account-group-outline fs-15  me-2"></i>{{ __tr('Create New Group') }}
                                                        </button>
                                                    </div>

                                                    <div class="form-group mb-2">
                                                        <x-lw.input-field type="selectize" data-lw-plugin="lwSelectize" id="lwSelectGroupsField"
                                                            data-form-group-class="" data-selected=" " :label="__tr('Groups/Contact')" name="contact_group">
                                                            <x-slot name="selectOptions">
                                                                <option value="">{{ __tr('Select Contacts Group') }}</option>
                                                                <option value="all_contacts">{{ __tr('All Contacts') }}</option>
                                                                @foreach($vendorContactGroups as $vendorContactGroup)
                                                                <option value="{{ $vendorContactGroup['_id'] }}">{{ $vendorContactGroup['title'] }}</option>
                                                                @endforeach
                                                            </x-slot>
                                                        </x-lw.input-field>
                                                    </div>

                                                    @if (isset($allLabels) && count($allLabels) > 0)
                                                    <div class="form-group mb-3">
                                                        <x-lw.input-field :label="__tr('Labels/Tags')" type="selectize" data-lw-plugin="lwSelectize" id="lwAssignLabelsField" data-form-group-class="" name="contact_labels[]" multiple>
                                                            <x-slot name="selectOptions">
                                                                <option value="">{{ __tr('Select Labels') }}</option>
                                                                @foreach($allLabels as $label)
                                                                <option value="{{ $label['_id'] }}">{{ $label['title'] }}</option>
                                                                @endforeach
                                                            </x-slot>
                                                        </x-lw.input-field>
                                                    </div>
                                                    @endif

                                                    <div class="form-check form-switch pl-0">
                                                        <label for="lwOnlyForTemplateLanguageMatchingContact">
                                                            <input type="checkbox" id="lwOnlyForTemplateLanguageMatchingContact" data-lw-plugin="lwSwitchery" data-color="#ff0000" name="restrict_by_templated_contact_language">
                                                            {!! __tr('Restrict by Language Code - Send only to the contacts whose language code matches with template language code.') !!}
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="mt-1 d-none" x-data="{scheduleNow:true}">
                                                    <div class="form-group mb-0">
                                                        <label for="lwNowCampaign">
                                                            <input x-model="scheduleNow" type="checkbox" id="lwNowCampaign" data-secondary-color="orange" data-lw-plugin="lwSwitchery" checked value="" name="schedule_now">
                                                            <span x-show="scheduleNow">{{ __tr('Now') }}</span>
                                                            <span x-show="!scheduleNow">{{ __tr('Later') }}</span>
                                                        </label>
                                                    </div>
                                                    <div x-show="!scheduleNow">
                                                        <x-lw.input-field type="selectize" data-form-group-class="" name="timezone" :label="__tr('Select your Timezone')" data-selected="{{ getVendorSettings('timezone') }}">
                                                            <x-slot name="selectOptions">
                                                                @foreach (getTimezonesArray() as $timezone)
                                                                <option value="{{ $timezone['value'] }}">{{ $timezone['text'] }}</option>
                                                                @endforeach
                                                            </x-slot>
                                                        </x-lw.input-field>
                                                    </div>
                                                    <template x-if="!scheduleNow">
                                                        <div x-show="!scheduleNow">
                                                            <x-lw.input-field type="datetime-local" data-jsx-set="datetimepicker" id="lwScheduleAt" data-form-group-class="" min="{{ formatDateTime(now(), 'Y-m-d\TH:i:s') }}" :label="__tr('Schedule At')" name="schedule_at" required />
                                                        </div>
                                                    </template>

                                                </div>
                                                {{-- </div> --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @include('whatsapp.from-phone-number')
                            <div class="mb-3 col-6 p-0">
                                <label for="status" class="form-label">Status</label>
                                <select data-lw-plugin="lwSelectize" class="form-control" id="status" name="status" required>
                                    <option value="0" {{ (($is_data == 1 && $Template['status']) ?? '') == 0 ? 'selected' : '' }}>Inactive</option>
                                    <option value="1" {{ (($is_data == 1 && $Template['status']) ?? '') == 1 ? 'selected' : '' }}>Active</option>
                                </select>
                            </div>
                            <!-- Action Buttons -->
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary btn-lg" id="submitCampaignBtn">
                                    <i class="mdi mdi-send fs-15 "></i>
                                    {{ __tr('Schedule Campaign') }}
                                </button>
                                <button type="submit" class="btn btn-success btn-lg" id="template_save">
                                    {{ __tr('Save') }}
                                </button>
                            </div>
                        </x-lw.form>

                        <!-- Confirmation Template -->
                        <template type="text/template" id="lwScheduleMessageConfirmation">
                            <div class="text-center p-4">
                                <i class="mdi mdi-help-circle fs-15  fa-3x text-warning mb-3"></i>
                                <h3>{{ __tr('Are you sure?') }}</h3>
                                <p class="text-muted">{{ __tr('You want to schedule a WhatsApp Template Message. Test message will be sent to your selected test contact immediately and on success it will get scheduled for the selected group contacts') }}</p>
                            </div>
                        </template>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add New Contact Modal -->
    <x-lw.modal id="lwAddNewContact" :header="__tr('Add New Contact')" :hasForm="true" data-pre-callback="appFuncs.clearContainer">
        <x-lw.form id="lwAddNewContactForm" :action="route('vendor.contact.write.create')"
            :data-callback-params="['modalId' => '#lwAddNewContact', 'datatableId' => '#lwContactList']"
            data-callback="reloadContactGroupsDropdown">
            <div class="lw-form-modal-body">
                <x-lw.input-field type="text" id="lwFirstNameField" data-form-group-class=""
                    :label="__tr('First Name')" name="first_name" />
                <x-lw.input-field type="text" id="lwLastNameField" data-form-group-class=""
                    :label="__tr('Last Name')" name="last_name" />
                <x-lw.input-field type="selectize" data-lw-plugin="lwSelectize" id="lwCountryField"
                    data-form-group-class="" data-selected=" " :label="__tr('Country')" name="country">
                    <x-slot name="selectOptions">
                        <option value="">{{ __tr('Country') }}</option>
                        @foreach(getCountryPhoneCodes() as $getCountryCode)
                        <option value="{{ $getCountryCode['_id'] }}">{{ $getCountryCode['name'] }}</option>
                        @endforeach
                    </x-slot>
                </x-lw.input-field>
                <x-lw.input-field type="number" id="lwPhoneNumberField" data-form-group-class=""
                    :label="__tr('Mobile Number')" name="phone_number" minlength="9"
                    :helpText="__tr('Number should be with country code without 0 or +')" required="true" />
                <x-lw.input-field type="text" id="lwLanguageCodeField" data-form-group-class=""
                    :label="__tr('Language Code')" name="language_code" />
                <x-lw.input-field type="email" id="lwEmailField" data-form-group-class="" :label="__tr('Email')"
                    name="email" />
                <x-lw.input-field type="selectize" data-lw-plugin="lwSelectize" id="lwSelectGroupsField"
                    data-form-group-class="" data-selected=" " :label="__tr('Groups')" name="contact_groups[]" multiple>
                    <x-slot name="selectOptions">
                        <option value="">{{ __tr('Select Groups') }}</option>
                    </x-slot>
                </x-lw.input-field>
                <div class="my-3">
                    <x-lw.checkbox id="lwPromotionalOpt" name="whatsapp_opt_out" data-color="#ff0000" data-size="small" value="1" data-lw-plugin="lwSwitchery" :label="__tr('Opt out Marketing Messages')" />
                </div>
                <div class="my-3">
                    @if(isAiBotAvailable())
                    <x-lw.checkbox id="lwAiBotEnable" :checked="getVendorSettings('default_enable_flowise_ai_bot_for_users')" name="enable_ai_bot" value="1" data-size="small"
                        data-lw-plugin="lwSwitchery" :label="__tr('Enable AI Bot')" />
                    @endif
                </div>
                <fieldset>
                    <legend>{{ __tr('Other Information') }}</legend>
                </fieldset>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">{{ __tr('Submit') }}</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __tr('Close') }}</button>
            </div>
        </x-lw.form>
    </x-lw.modal>

    <!-- Add New Group Modal -->
    <x-lw.modal id="lwAddNewGroup" :header="__tr('Add New Group')" :hasForm="true">
        <x-lw.form id="lwAddNewGroupForm" :action="route('vendor.contact.group.write.create')"
            :data-callback-params="['modalId' => '#lwAddNewGroup', 'datatableId' => '#lwGroupList']"
            data-callback="reloadContactGroupsDropdown">
            <div class="lw-form-modal-body">
                <x-lw.input-field type="text" id="lwTitleField" data-form-group-class="" :label="__tr('Title')" name="title" required="true" />
                <div class="form-group">
                    <label for="lwDescriptionField">{{ __tr('Description') }}</label>
                    <textarea cols="10" rows="3" id="lwDescriptionField" class="lw-form-field form-control"
                        placeholder="{{ __tr('Description') }}" name="description"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">{{ __tr('Submit') }}</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __tr('Close') }}</button>
            </div>
        </x-lw.form>
    </x-lw.modal>
</div>
@endsection()

@push('appScripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
    function reloadContactGroupsDropdown(response, params) {
        if (params.modalId) {
            $(params.modalId).modal('hide');
        }

        $.get("{{ route('contact.groups.options') }}", function(data) {
            if (data.reaction === 1 && data.data.vendorContactGroups) {
                const groups = data.data.vendorContactGroups;

                let optionsHtml = `
                        <option value="">Select Contacts Group</option>
                        <option value="all_contacts">All Contacts</option>
                    `;

                groups.forEach(group => {
                    optionsHtml += `<option value="${group._id}">${group.title}</option>`;
                });

                const $select = $('#lwSelectGroupsField');

                if ($select[0].selectize) {
                    let selectize = $select[0].selectize;
                    selectize.destroy(); // destroy existing selectize instance
                }

                $select.html(optionsHtml); // update options
                $select.selectize(); // reinitialize
            }
        });
    }

    const isData = {{$is_data}};
    const birthdayTemplateDetail = @json($BirthdayTemplateDetail);
    document.addEventListener("DOMContentLoaded", function() {
        const CampaignData = @json($campaign);
        $('#lwCampaignTitle').val(CampaignData['title']);

        const fieldSelector = '#lwField_templateSelection';
        const desiredValue = CampaignData?.whatsapp_templates_uid ?? CampaignData?._uid ?? '';

        // Nothing to do if no value
        if (!desiredValue) {
            return;
        }

        // Poll until Selectize exists
        const MAX_TRIES = 50;
        let tries = 0;

        function initSelect() {
            const el = document.querySelector(fieldSelector);
            if (!el) {
                if (++tries < MAX_TRIES) return requestAnimationFrame(initSelect);
                return;
            }
            const selInstance = el.selectize;
            if (!selInstance) {
                if (++tries < MAX_TRIES) return requestAnimationFrame(initSelect);
                return;
            }

            // Does the option exist? If not, add it.
            if (!selInstance.options[desiredValue]) {
                // Use a label fallback if you don't have template_name in CampaignData
                const label = CampaignData?.template_name ?
                    CampaignData.template_name + ' (' + (CampaignData.language ?? '') + ')' :
                    desiredValue;
                selInstance.addOption({
                    value: desiredValue,
                    text: label
                });
            }

            // Prevent premature submit: detach temporary
            const $form = $(el).closest('form');
            const originalOnChange = $form.attr('lwSubmitOnChange'); // or check plugin
            // If your lw plugin auto-binds, you may need a global flag; adjust to your framework.

            selInstance.setValue(desiredValue); // programmatic
            // Force change on underlying <select> so Alpine & lw plugin see it
            $(el).trigger('change');

            // Sync Alpine (if present)
            if (window.Alpine) {
                // Find the Alpine component that has selectedTemplate
                const root = el.closest('[x-data]');
                if (root && root.__x) {
                    // Alpine v3
                    const comp = root.__x.$data;
                    if (comp && 'selectedTemplate' in comp) {
                        comp.selectedTemplate = desiredValue;
                    }
                }
            }
        }

        initSelect();
        updateUI();
    });

    let contentCount = 0;
    let currentBlockIndex = 0;


    document.addEventListener("DOMContentLoaded", function() {
        const CampaignData = @json($campaign);

        if (CampaignData.__data && CampaignData.__data.selected_groups) {
            const selectedGroups = CampaignData.__data.selected_groups;

            // Get the first group's _id
            const firstGroup = Object.values(selectedGroups)[0];
            if (firstGroup && firstGroup._id) {
                let selectizeControl = $('#lwSelectGroupsField')[0].selectize;

                if (selectizeControl) {
                    selectizeControl.setValue(firstGroup._id); // ✅ Use _id for value
                }
            }
        }
    });


    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();
            updateUI();

        } 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();
            updateUI();
        });

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

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

        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();
            updateUI();
        });


    });

    function createContentBlock(id) {
        let htmlBlock = "";
        const existingBlock = document.querySelector(".content-block");

        if (existingBlock) {
            htmlBlock = existingBlock.outerHTML;
        } else {
            // Manually fallback to default content block HTML
            htmlBlock = `
            <div class="content-block" data-id="0">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">Content Type</label>
                            <select name="new_type_0" class="form-control new_type">
                                <option value="">Select Type</option>
                                <option value="image">Image</option>
                                <option value="text">Text</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Image Section -->
                <div class="image-upload-section d-none">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Image Upload</label>
                                <input type="file" name="image_upload_0" class="form-control image_upload" accept="image/*">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">Width (px)</label>
                                <input type="number" name="image_width_0" class="form-control image-width" value="100">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">Height (px)</label>
                                <input type="number" name="image_height_0" class="form-control image-height" value="100">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Text Section -->
                <div class="text-enter-section d-none">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Text Content</label>
                                <input type="text" name="contant_text_0" class="form-control text_enter" placeholder="Enter your text here">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <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>
                        <div class="col-md-6">
                            <div class="form-group">
                                <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" selected>English</option>
                                        <option value="el">Greek</option>
                                        <option value="gu">Gujarati</option>
                                        <option value="he">Hebrew</option>
                                        <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="ta">Tamil</option>
                                        <option value="te">Telugu</option>
                                        <option value="ti">Tigrinya</option>
                                        <option value="ur">Urdu</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <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>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">Font Color</label>
                                <input type="color" class="form-control font-color" value="#000000" name="contant_font_color_0">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Position Controls -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">X Position (px)</label>
                            <input type="number" class="form-control content-x-pos" value="0" name="content_x_pos_0">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">Y Position (px)</label>
                            <input type="number" class="form-control content-y-pos" value="0" name="content_y_pos_0">
                        </div>
                    </div>
                </div>
            </div>`;
        }

        // Replace IDs in all fields
        return htmlBlock
            .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);
        });
        updateUI();
    }

    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";
        updateUI();

    }

    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);
        updateUI();
    }

    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 = "";

        // Define once outside the loop
        const contactDataMaps = @json($contactDataMaps);

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

            Object.entries(contactDataMaps).forEach(([key, value]) => {
                const option = document.createElement("option");
                option.value = key;
                option.innerText = value;
                if (key === selectedValue) option.selected = true;
                select.appendChild(option);
            });

            return select;
        }

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

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

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

            if (type === "text") {
                // TEXT AREA
                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);

                // SELECT DROPDOWN
                const selectedValue = block.querySelector(".new_varible")?.value || "";
                const select = createSelect(id, selectedValue);

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

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

                // DELETE BUTTON
                const trashCol = document.createElement("div");
                trashCol.className = "col-1";

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

                // Append all to row
                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") {
                // IMAGE TYPE
                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-1";

                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.getElementById('submitCampaignBtn').addEventListener('click', function(e) {
        handleTemplateSubmit(0, e.target); // Schedule
    });

    document.getElementById('template_save').addEventListener('click', function(e) {
        handleTemplateSubmit(1, e.target); // Save Only
    });

    function handleTemplateSubmit(isNormalSave = 0, clickedButton = null) {
        const form = document.getElementById('birthdayTemplateForm');
        const formData = new FormData(form);
        const addedKeys = new Set();

        const resizedBlob = document.querySelector('.main_image_upload')?.resizedBlob;
        if (resizedBlob) {
            formData.set('main_image_upload', resizedBlob, 'main_image.jpg');
        }

        formData.set('is_normal_save', isNormalSave);

        $('.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());
        });

        // Set loading text only for the clicked button
        const originalText = clickedButton?.innerHTML;
        if (clickedButton) {
            clickedButton.disabled = true;
            clickedButton.innerHTML = '<i class="mdi mdi-loading fs-15  fa-spin"></i> Saving...';
        }

        $.ajax({
            url: "{{ route('vendor.campaign.schedule.process') }}",
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (clickedButton) {
                    clickedButton.disabled = false;
                    clickedButton.innerHTML = originalText;
                }
                if (response.reaction == 1) {
                    showSuccessMessage(response.data.message);
                    window.location = "{{ route('vendor.birthday.read.list_view') }}";
                } else {
                    showErrorMessage(response.message);
                }
            },
            error: function(xhr) {
                if (clickedButton) {
                    clickedButton.disabled = false;
                    clickedButton.innerHTML = originalText;
                }
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    let errorMsg = '';
                    $.each(errors, function(key, value) {
                        errorMsg += value[0] + '<br>';
                    });
                    showErrorMessage(errorMsg);
                } else {
                    showErrorMessage("Something went wrong. Please try again.");
                }
            }
        });
    }



    const uploadArea = document.getElementById('upload-area');
    const ImagePreviewDiv = document.getElementById('image-preview-div');
    const uploadContainer = document.getElementById('upload-container');
    const PreviewTitleShowAccess = document.getElementById('preview-title-show-access');
    const fileInput = document.querySelector('.main_image_upload');
    const imagePreview = document.getElementById('image-preview');
    const previewOverlay = document.getElementById('preview-overlay');
    const progressContainer = document.getElementById('progress-container');
    const progressBar = document.getElementById('progress-bar');
    const placeholder = document.getElementById('placeholder');

    // 1. Click to open file picker
    uploadArea.addEventListener('click', () => fileInput.click());

    // 2. Handle file selection
    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) handleFileUpload(e.target.files[0]);
    });

    // 3. Drag over styling
    ['dragenter', 'dragover'].forEach(eventName => {
        uploadArea.addEventListener(eventName, (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });
        ImagePreviewDiv.addEventListener(eventName, (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });
    });

    // 4. Remove drag styling
    ['dragleave', 'drop'].forEach(eventName => {
        uploadArea.addEventListener(eventName, (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
        });
        ImagePreviewDiv.addEventListener(eventName, (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
        });
    });

    // 5. Handle file drop
    uploadArea.addEventListener('drop', (e) => {
        if (e.dataTransfer.files.length > 0) handleFileUpload(e.dataTransfer.files[0]);
    });
    ImagePreviewDiv.addEventListener('drop', (e) => {
        if (e.dataTransfer.files.length > 0) handleFileUpload(e.dataTransfer.files[0]);
    });

    // 6. Upload progress simulation
    function simulateUpload(callback) {
        progressContainer.style.display = 'block';
        progressBar.style.width = '0%';
        let progress = 0;
        const interval = setInterval(() => {
            progress += 3;
            progressBar.style.width = progress + '%';
            if (progress >= 100) {
                clearInterval(interval);
                setTimeout(() => {
                    progressContainer.style.display = 'none';
                    callback();
                }, 300);
            }
        }, 20);
    }

    // 7. File validation + processing
    function handleFileUpload(file) {
        if (!file.type.match('image/png') && !file.type.match('image/jpeg')) {
            alert('Only PNG and JPG images are allowed.');
            return;
        }
        simulateUpload(() => handleFile(file));
    }

    // 8. Image processing + preview
    function handleFile(file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = new Image();
            img.onload = function() {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');

                const width = 760;
                const height = 1074;
                canvas.width = width;
                canvas.height = height;

                ctx.fillStyle = '#ffffff';
                ctx.fillRect(0, 0, width, height);

                const ratio = Math.min(width / img.width, height / img.height);
                const newWidth = img.width * ratio;
                const newHeight = img.height * ratio;
                const x = (width - newWidth) / 2;
                const y = (height - newHeight) / 2;

                ctx.drawImage(img, x, y, newWidth, newHeight);

                // Set preview
                imagePreview.src = canvas.toDataURL('image/jpeg', 0.9);
                imagePreview.style.display = 'block';
                uploadContainer.style.display = 'none';
                PreviewTitleShowAccess.style.display = 'block';
                ImagePreviewDiv.style.display = 'block';
                previewOverlay.style.display = 'block';
                placeholder.style.display = 'none';

                // Store resized blob for backend upload
                canvas.toBlob(function(blob) {
                    fileInput.resizedBlob = blob;
                }, 'image/jpeg', 0.9);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }

    // document.getElementById('Save_iamge').addEventListener('click', function(e) {
    //     e.preventDefault();

    //     let saveBtn = document.getElementById('Save_iamge');
    //     let originalText = saveBtn.innerHTML;
    //     let previewDiv = document.getElementById('image-preview-div');
    //     let templateName = document.getElementById('template_name').value || 'preview_image';

    //     templateName = templateName.replace(/[^a-z0-9_\-]/gi, '_');

    //     saveBtn.disabled = true;
    //     saveBtn.innerHTML = '<i class="mdi mdi-loading fs-15  fa-spin me-2"></i> Saving...';

    //     html2canvas(previewDiv, {
    //             useCORS: true
    //         })
    //         .then(function(canvas) {
    //             let imageData = canvas.toDataURL("image/png");

    //             let link = document.createElement('a');
    //             link.href = imageData;
    //             link.download = templateName + '.png';
    //             document.body.appendChild(link);
    //             link.click();
    //             document.body.removeChild(link);

    //             saveBtn.innerHTML = originalText;
    //             saveBtn.disabled = false;

    //             setTimeout(() => {
    //                 window.location.href = "{{ route('vendor.birthday.read.list_view') }}";
    //             }, 1000);
    //         })
    //         .catch(function(error) {
    //             console.error(error);
    //             saveBtn.innerHTML = originalText;
    //             saveBtn.disabled = false;
    //         });
    // });

    function updateUI() {
        const blocks = getBlocks();
        const totalBlocks = blocks.length;

        if (totalBlocks === 0) {
            document.getElementById('current-block-info').textContent = "No blocks";
            document.getElementById('current-type-badge').textContent = "None";
            document.getElementById('current-type-badge').className = "type-badge";
            document.getElementById('back').disabled = true;
            document.getElementById('next').disabled = true;
            return;
        }

        // Clamp index within bounds
        if (currentBlockIndex >= totalBlocks) currentBlockIndex = totalBlocks - 1;
        if (currentBlockIndex < 0) currentBlockIndex = 0;

        const currentBlock = blocks[currentBlockIndex];

        // Update navigation info
        document.getElementById('current-block-info').textContent =
            `Block ${currentBlockIndex + 1} of ${totalBlocks}`;

        // Update type badge
        const typeBadge = document.getElementById('current-type-badge');
        if (currentBlock) {
            const type = currentBlock.querySelector('.new_type')?.value || 'Select Type';
            typeBadge.textContent = type;
            typeBadge.className = `type-badge ${type}`;
        }
    }
</script>
@endpush