@extends('web.layouts.app')

@push('styles')
    <style>
        .error {
            color: rgb(239, 71, 111);
            font-weight: normal;
        }
    </style>
    @if (env('APP_PROJECT') == 'Rouaa')
        <style>
            .main-chat-note {
                display: block !important;
            }
        </style>
    @endif
@endpush

@section('content')
    <div class="main-chat-container w-100 ml-md-5 overflow-hidden">
        <div class="p-3 p-lg-4 border-top mb-0 main-chat-container-in">
            <a class="nav-link" style="margin-bottom: 15px;font-size: larger;" href="{{ route('web.templates.index') }}">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div class="row">
                <div class="col-xl-12 col-lg-12">
                    <div class="card">
                        <div class="card-header" style="display: flex;justify-content: space-between;">
                            <h4 class="card-title">@lang('user.create_template')</h4>
                        </div>
                        <div class="card-body">
                            <form id="templateAddForm" action="{{ route('web.templates.store') }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                <div class="modal-body">
                                    <!-- Template Name -->
                                    <input type="hidden" name="user_id" value="{{auth()->user()->id}}">
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="name" class="form-label">@lang('user.template_details')</label>
                                            <p>@lang('user.template_details_note')</p>
                                        </div>
                                        <div class="col-md-6">
                                            <!-- Name -->
                                            <div class="mb-3">
                                                <label for="name" class="form-label">@lang('user.template_id')  @lang('user.allowed') [a-z0-9_]+</label>
                                                <input type="text" class="form-control" placeholder="@lang('user.allowed') [a-z0-9_]+"
                                                name="name" pattern="[a-z0-9_]+" required>
                                                <span class="text-danger" id="error-name"></span>
                                            </div>
                                            <!-- Category -->
                                            <div class="mb-3">
                                                <label for="category" class="form-label">@lang('user.category')</label>
                                                    {!! Form::select('category',\App\Models\Template::$categories, null, ['id'=>'category-select','class' => 'form-control']) !!}
                                                <span class="text-danger" id="error-category"></span>
                                            </div>
                                            <!-- Language -->
                                            <div class="mb-3">
                                                <label for="lang" class="form-label">@lang('user.language')</label>
                                                <span class="text-danger" id="error-lang"></span>
                                                <select class="form-control" name="lang">
                                                    <option value="en_US">
                                                        English
                                                    </option>
                                                    <option value="ar">
                                                        عربي
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="no-auth">
                                        <!-- Media -->
                                        <fieldset class="row mb-3">
                                            <div class="col-md-6">
                                                <label class="col-form-label pt-0">@lang('user.media')</label>
                                                <p>@lang('user.media_note')</p>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="media-type-options">
                                                    @foreach (\App\Models\Template::$mediaTypes as $value => $label)
                                                        <input type="radio" id="{{$label}}" name="media_type" value="{{$value}}">
                                                        <label for="{{$label}}" class="media-option">
                                                        
                                                            @if($label == 'none')
                                                                <i class="fas fa-ban"></i>
                                                            @elseif($label == 'image')
                                                                <i class="fas fa-image"></i>
                                                            @elseif($label == 'video')
                                                                <i class="fas fa-video"></i>
                                                            @elseif($label == 'document')
                                                                <i class="fas fa-file-alt"></i>
                                                            @endif
                                                            {{ ucfirst(__('user.' . $label)) }}
                                                        </label>
                                                    @endforeach
                                                </div>
                                                <!-- File Inputs Below Buttons -->
                                                <div id="media-upload-container">
                                                    <input type="file" id="uploadImage" name="media_image"
                                                        class="media-upload" accept="image/png, image/jpeg">
                                                    <input type="file" id="uploadVideo" name="media_video"
                                                        class="media-upload" accept="video/mp4, video/3gpp">
                                                    <input type="file" id="uploadDoc" name="media_doc" class="media-upload"
                                                        accept="text/plain, application/pdf, application/vnd.ms-powerpoint, application/msword, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                                                </div>
                                            </div>
                                        </fieldset>
                                        <hr>
                                        <!-- Header -->
                                        <div id="header" class="row mb-3" style="display:none;">
                                            <div class="col-md-6">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="name" class="form-label">@lang('user.header') (@lang('user.optional'))</label>
                                                <input type="text" class="form-control" id="header-input" name="title">
                                                <span class="text-danger" id="error-title"></span>
                                            </div>
                                        </div>
                                        
                                        <!-- Body Text -->
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="body" class="form-label"><h4>@lang('user.body_text')</h4></label>
                                            @lang('user.body_text_note')
                                            </div>
                                            <div class="col-md-6">
                                                <span class="text-danger" id="error-body"></span>
                                                <input type="hidden" name="body">
                                                <input type="hidden" name="body_sample">
                                                <div id="whatsapp-editor-container"></div>
                                                <br />
                                                <button type="button" id="addVariable" class="btn btn-info">
                                                    @lang('user.add_Variable')
                                                </button>
                                            </div>
                                        </div>
                                        <div id="Variables" class="row mb-3" style="display:none">
                                            <div class="col-md-6">
                                                <label for="Variables" class="form-label">@lang('user.VariableTitle')</label>
                                                <p>@lang('user.VariableDescription')</p>
                                            </div>
                                            <div class="col-md-6">
                                                <div id="dynamic-inputs-container"></div>
                                            </div>
                                        </div>

                                        <!-- footer -->
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="name" class="form-label">@lang('user.footer') (@lang('user.optional'))</label>
                                                <input type="text" class="form-control" name="footer" id="footer-input">
                                                <span class="text-danger" id="error-footer"></span>
                                            </div>
                                        </div>
                                        <hr>
                                    </div>
                                     <!-- buttons -->
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="name" class="form-label"><h4>@lang('user.buttons')</h4></label>
                                            <p>@lang('user.button_note')</p>
                                            {{-- <p class="phone_note" style="display: none; color:red">@lang('user.phone_note')</p> --}}
                                        </div>
                                        <div class="col-md-6">
                                            <ul class="nav nav-tabs" role="tablist">
                                                    <li class="nav-item no-auth">
                                                        <a class="nav-link active" data-toggle="tab" href="#noButton">
                                                            @lang('user.no_button')</a>
                                                    </li>
                                                    <li class="nav-item no-auth">
                                                        <a class="nav-link" data-toggle="tab" href="#ctaButtons">
                                                            @lang('user.CTA_buttons')</a>
                                                    </li>
                                                    <li class="nav-item no-auth">
                                                        <a class="nav-link" data-toggle="tab" href="#quickReplies">
                                                            @lang('user.Quick_replies')
                                                        </a>
                                                    </li>
                                                <li id="otp-link" class="nav-item" style="display: none">
                                                    <a class="nav-link" data-toggle="tab" href="#otp">
                                                        OTP
                                                    </a>
                                                </li>
                                            </ul>

                                            <!-- Tab panes -->                                     
                                            <div class="tab-content">
                                                <div id="noButton" class="container tab-pane active"><br>
                                                    <p>@lang('user.no_button_selected')</p>
                                                </div>
                                                <div id="ctaButtons" class="container tab-pane fade no-auth"><br>
                                                    <div id="ctaButtons-button-container" class="add-button mt-3"></div>
                                                    <button type="button" id="ctaButtons-add-button"
                                                        class="btn btn-primary">@lang('user.add_button')</button>
                                                </div>
                                                <div id="quickReplies" class="container tab-pane fade no-auth"><br>
                                                    <div id="quickReplies-button-container" class="add-button mt-3">
                                                    </div>
                                                    <button type="button" id="quickReplies-add-button"
                                                        class="btn btn-primary">@lang('user.add_button')</button>
                                                </div>

                                                <div id="otp" class="container tab-pane fade"><br>
                                                    <div id="otp-button-container" class="add-button mt-3">
                                                        <div class="otp-button-setup">
                                                            <select class="form-control mb-2" name="otp_button[otp_type]" onchange="toggleInput(this)">
                                                                <option value="ONE_TAP">ONE_TAP</option>
                                                                <option value="COPY_CODE" selected>COPY_CODE</option>
                                                            </select>
                                                            <input type="text" class="form-control mb-2" name="otp_button[package_name]" id="package_name" placeholder="package_name" style="display: none;">
                                                            <input type="text" class="form-control mb-2" name="otp_button[signature_hash]" id="signature_hash" placeholder="signature_hash" style="display: none;">
                                                            <input type="text" class="form-control mb-2" name="otp_button[button_display_text]" id="button_display_text" placeholder="Button display text" maxlength="25">
                                                        </div>
                                                    </div>
                                                    {{-- <button type="button" id="otp-add-button"
                                                        class="btn btn-primary">@lang('user.add_button')</button> --}}
                                                </div>

                                            </div>
                                        </div>
                                        <hr>
                                    </div>

                                     <!-- Status -->
                                     <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label class="form-label">@lang('user.status')</label>
                                        </div>
                                        <div class="col-md-6">
                                            <span class="text-danger" id="error-status"></span>
                                            <select class="form-control" name="status">
                                                <option value="1">
                                                    @lang('user.active')</option>
                                                <option value="0">
                                                    @lang('user.Inactive')</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-primary">@lang('user.create')</button>
                                    </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="tab-form-pane main-chat-note fade show">
        <div class="card" style="padding-top: 17px;">
            <div class="container">
                <div id="preview" class="preview-container">
                    <div id="preview-media"></div>
                    <div id="preview-header" class="fw-bold"></div>
                    <div id="preview-text" class="px-0">@lang('user.body_text') ...</div>
                    <div id="preview-footer"></div>
                </div>
                <div id="buttons_preview" class="w-100"></div>
            </div>
        </div>

        @if (env('APP_PROJECT') != 'Rouaa')
            <div class="px-4 ">
                <div class="note-sidebar">
                    <div class="note-title">
                        <h4>@lang('user.note')</h4>
                    </div>
                    <div class="note-content">
                        <p>
                            @lang('notes.templates_note')
                        </p>
                    </div>
                </div>
            </div>
        @endif
    </div>

    <div id="ctaButtonsbuttonSetupTemplate" style="display: none;">
        <div class="ctaButtons-button-setup">
            <label>@lang('user.button_1')</label>
            <button style="float: right;margin-bottom: 15px;" type="button" class="btn btn-danger remove-button">X</button>
            <select class="form-control mb-2 button_type" name="buttons[type][]">
                <option value="">@lang('user.select')</option>
                <option value="phone_number">@lang('user.phone')</option>
                <option value="url">@lang('user.static_link')</option>
                <option value="dynamic_url">@lang('user.dynamic_link')</option>
            </select>
            <div class="input-group mb-2">
            <span class="codeContainer" style="display: none;width: 40%;"></span>
            <input type="text" class="form-control"
                name="buttons[phone_number][]" placeholder="@lang('user.phone')"
                style="display: none;">
                <span class="text-danger" id="error-mobile"></span>
            </div>
            <input type="text" class="form-control mb-2" name="buttons[url][]"
                placeholder="Enter URL" style="display: none;">
            <input type="text" class="form-control mb-2 dynamic_url_variable" name="buttons[url_variable][]"
                placeholder="Sample of the variable" style="display: none;">
            <div class="alert alert-info dynamic_url_hint" style="display: none;">{!! __('user.dynamic_link_hint') !!}</div>
            <input type="text" class="form-control mb-2 button_display_text"
                name="buttons[button_display_text][]"
                placeholder="Button display text" maxlength="25">
                <span class="text-danger" id="error-text"></span>
            
        </div>
    </div>

    <div id="quickRepliesbuttonSetupTemplate" style="display: none;">
        <div class="quickReplies-button-setup">
            <label>Button 1</label>
            <button style="float: right;margin-bottom: 15px;" type="button" class="btn btn-danger remove-button">X</button>
            <input type="hidden" class="form-control mb-2"
                name="buttons[QUICK_REPLY][type][]" value="QUICK_REPLY" placeholder="Reply">
            <input type="text" class="form-control mb-2 button_display_text"
                name="buttons[QUICK_REPLY][button_display_text][]"
                placeholder="Button display text" maxlength="25">
        </div>
    </div>

    <div id="otpbuttonSetupTemplate" style="display: none;">
        <div class="otp-button-setup">
            <label>@lang('user.button_1')</label>
            <button style="float: right;margin-bottom: 15px;" type="button" class="btn btn-danger remove-button">X</button>
            <input type="hidden" class="form-control mb-2" name="buttons[otp][type][]" value="otp" placeholder="otp">
            <select class="form-control mb-2" name="buttons[otp][otp_type][]" onchange="toggleInput(this)">
                <option value="">@lang('user.select')</option>
                <option value="ONE_TAP">ONE_TAP</option>
                <option value="COPY_CODE">COPY_CODE</option>
            </select>

            <input type="text" class="form-control mb-2" name="buttons[ONE_TAP][package_name][]" placeholder="package_name" style="display: none;">
            <input type="text" class="form-control mb-2" name="buttons[ONE_TAP][signature_hash][]" placeholder="signature_hash" style="display: none;">
            {{-- <input type="text" class="form-control mb-2" name="buttons[COPY_CODE][]" placeholder="COPY_CODE" style="display: none;"> --}}
            <input type="text" class="form-control mb-2" name="buttons[otp][button_display_text][]" placeholder="Button display text" maxlength="25">
        </div>
    </div>

    <style>
        .bold-text {
            font-weight: bold;
        }
    </style>
    <!-- end  layout wrapper -->
@endsection
@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <script type="text/javascript">
        function updateButtonsPreview()
        {
            $('#buttons_preview').html('');
            if ($('#category-select').val() == '3') {
                if ($('#button_display_text').val() != '') {
                    $('#buttons_preview').append('<button class="btn btn-primary w-100 mb-2">' + $('#button_display_text').val() + '</button');
                }
            } else {
                $('.button_display_text').each(function(index, item) {
                    if ($(item).val() != '') {
                        $('#buttons_preview').append('<button class="btn btn-primary w-100 mb-2">' + $(item).val() + '</button');
                    }
                });
            }
        }
        $(document).ready(function() {
            $("#templateAddForm").validate();
            $(document).on('change', 'input[type=file]', handleFileUpload);
            
            function handleFileUpload(event) {
                var file = event.target.files[0];
                var reader = new FileReader();

                reader.onload = function(e) {
                    var mediaDiv = $('#preview-media');
                    var mediaType = getFileType(file.type); // Determine the type of media
                    // Clear previous content in the media div
                    mediaDiv.empty();

                    // Display the uploaded media based on its type
                    if (mediaType === 'image') {
                        var image = $('<img style="width: 100%;height: 100%;">').attr('src', e.target.result);
                        // image.css({'width': '200px', 'height': '200px'}); // Set size to 200px by 200px
                        mediaDiv.append(image);
                    } else if (mediaType === 'video') {
                        var video = $('<video style="width: 100%;height: 100%;">').attr('controls', '').append(
                            $('<source style="width: 100%;height: 100%;">').attr('src', e.target.result).attr('type', file.type));
                        video.css({
                            'width': '100$',
                            'height': '121px'
                        }); // Set size to 200px by 200px
                        mediaDiv.append(video);
                    }
                   
                    mediaDiv.removeClass('media_type_' + mediaType).removeClass('media_type').addClass(
                        'media-preview');
                };

                reader.readAsDataURL(file);
            }

            function getFileType(mimeType) {
                if (mimeType.startsWith('image/')) {
                    return 'image';
                } else if (mimeType.startsWith('video/')) {
                    return 'video';
                } else {
                    return 'other';
                }
            }

            var editor;
            editor = $("#whatsapp-editor-container").whatsappEditor({
                content: ''
            });


            function updatePreviewText() {
                var currentText = $(".whatsapp-editor")[0].innerText; // Assuming this is your editor
                $('#preview-text').text(currentText);
            }

            // Function to update the preview media
            function updatePreviewMedia(mediaType) {
                let mediaContent = '';
                if (mediaType == 1) {
                    mediaContent =
                        '<img id="edit-preview-image-before-upload" style="width: 50px;height: 50px;" src="{{ asset('dummy-image.png') }}" alt="Image Preview">'; // Placeholder image
                    $('#preview-media').css('padding', '10');
                } else if (mediaType == 2) {
                    mediaContent =
                        '<img id="edit-preview-image-before-upload" style="width: 50px;height: 50px;" src="{{ asset('dummy-video.png') }}" alt="Video Preview">'; // Placeholder icon for video
                    $('#preview-media').css('padding', '10');
                } else if (mediaType == 3) {
                    mediaContent =
                        '<img id="edit-preview-image-before-upload" style="width: 50px;height: 50px;" src="{{ asset('dummy-doc.png') }}" alt="Document Preview">'; // Placeholder icon for document
                    $('#preview-media').css('padding', '10');
                } else {
                    $('#preview-media').css('padding', '0');
                }

                $('#preview-media').html(mediaContent);
            }

            // Event listener for changes in the editor
            $("#whatsapp-editor-container").on('input', function() {
                // updatePreviewText();
                updatePreviewWithVariables();
            });


            function updatePreviewWithVariables() {
                let previewText = $('.whatsapp-editor').html();
                $("#dynamic-inputs-container .form-group").each(function() {
                    let variableNumber = $(this).find('input').data('variable-number');
                    let variableValue = $(this).find('input').val();
                    let placeholder = `@{{${variableNumber}}}`;
                    previewText = previewText.replace(placeholder, variableValue);
                });
                $('#preview-text').html(previewText);
            }


            // Event listener for changes in media type
            $('input[name="media_type"]').on('change', function() {
                updatePreviewMedia(this.value);
            });

            $('#dynamic-inputs-container').on('input', 'input', function() {
                updatePreviewWithVariables();
            });

            document.getElementById('none').checked = true;
            document.getElementById('header').style.display = 'flex';

            // Function to show or hide upload inputs
            function toggleUploadInputs(value) {
                // Hide all inputs
                $('.media-upload').removeAttr('required');
                $('.media-upload').hide();
                // Show selected input
                if (value == 1) {
                    $('#uploadImage').prop('required', true);
                    $('#uploadImage').show();
                } else if (value == 2) {
                    $('#uploadVideo').prop('required', true);
                    $('#uploadVideo').show();
                } else if (value == 3) {
                    $('#uploadDoc').prop('required', true);
                    $('#uploadDoc').show();
                }

                if (value == 0) {
                    document.getElementById('header').style.display = 'flex';
                } else {
                    document.getElementById('header').style.display = 'none';
                }
            }

            // Listen for changes on any radio buttons named "media_type"
            var mediaOptions = document.querySelectorAll('input[name="media_type"]');
            mediaOptions.forEach(option => option.addEventListener('change', function() {
                toggleUploadInputs(this.value);
            }));


            document.getElementById('ctaButtons-add-button').addEventListener('click', function() {
                addNewButtonSetup('ctaButtons-button-container', 'ctaButtonsbuttonSetupTemplate');
                if (($('.button_type').length - 1) == 3) {
                    $(this).attr('disabled', true);
                }
            });

            document.getElementById('quickReplies-add-button').addEventListener('click', function() {
                addNewButtonSetup('quickReplies-button-container', 'quickRepliesbuttonSetupTemplate');
            });

            /*document.getElementById('otp-add-button').addEventListener('click', function() {
                addNewButtonSetup('otp-button-container', 'otpbuttonSetupTemplate');
            });*/
            var buttonsindex = 0;
            function addNewButtonSetup(containerId, templateId) {
                const buttonContainer = document.getElementById(containerId);
                const template = document.getElementById(templateId).children[0];
                const newButtonSetup = template.cloneNode(true);
                const newButtonIndex = buttonContainer.children.length + 1;

                newButtonSetup.querySelector('label').textContent = 'Button ' + newButtonIndex;
                
                fetch(`{{ url('get-web-mobile') }}/${newButtonIndex}`)
                    .then(response => response.text())
                    .then(html => {
                        newButtonSetup.querySelector('span').innerHTML = html;

                    })
                    .catch(error => console.error('Error fetching mobile:', error));                
                    
                // newButtonSetup.querySelector('p').innerHTML = `<input id="mobile_`+newButtonIndex+`" type="text" class="form-control"
                // name="buttons[phone_number][]" placeholder="@lang('user.phone')"
                // style="display: none;">`;
                resetAndHideInputs(newButtonSetup);
                // attachEventListenersToSelect(newButtonSetup);
                // attachRemoveButtonEventListener(newButtonSetup);

                buttonContainer.appendChild(newButtonSetup);
                buttonsindex = buttonsindex + newButtonIndex;
            }

            function resetAndHideInputs(buttonSetup) {
                const buttonTextDisplayInput = buttonSetup.querySelector(
                    'input[name="buttons[button_display_text][]"]');
                if (buttonTextDisplayInput) {
                    buttonTextDisplayInput.style.display = 'block';
                }
            }

            $(document).on('change', 'select[name="buttons[type][]"]', function() {
                updateInputDisplay(this);
            });

            /*function attachEventListenersToSelect(buttonSetup) {
                const selectElements = buttonSetup.querySelectorAll('select[name="buttons[type][]"]');
                selectElements.forEach(function(selectElement) {
                    selectElement.value = '';
                    selectElement.addEventListener('change', function() {
                        
                    });
                });
            }*/

           
            function updateInputDisplay(selectElement) {
                const buttonSetup = selectElement.closest('.ctaButtons-button-setup, .quickReplies-button-setup');
                const urlInput = buttonSetup.querySelector('input[name="buttons[url][]"]');
                const phoneInput = buttonSetup.querySelector('input[name="buttons[phone_number][]"]');
                const countryCode = buttonSetup.querySelector('.codeContainer');

                if (urlInput) {
                    urlInput.style.display = 'none';
                }
                if (phoneInput) {
                    phoneInput.style.display = 'none';
                   
                }

                if (selectElement.value === 'phone_number') {
                    phoneInput.style.display = 'block';
                    countryCode.style.display = 'block';
                    buttonSetup.querySelector('.dynamic_url_variable').style.display = 'none';
                    buttonSetup.querySelector('.dynamic_url_hint').style.display = 'none';
                    // $('.phone_note').css('display', 'block');
                } else if (selectElement.value === 'url') {
                    urlInput.style.display = 'block';
                    countryCode.style.display = 'none';
                    buttonSetup.querySelector('.dynamic_url_variable').style.display = 'none';
                    buttonSetup.querySelector('.dynamic_url_hint').style.display = 'none';
                } else if (selectElement.value === 'dynamic_url') {
                    urlInput.style.display = 'block';
                    countryCode.style.display = 'none';
                    buttonSetup.querySelector('.dynamic_url_variable').style.display = 'block';
                    buttonSetup.querySelector('.dynamic_url_hint').style.display = 'block';
                }
            }

            /*function attachRemoveButtonEventListener(buttonSetup) {
                const removeButton = buttonSetup.querySelector('.remove-button');
                if (removeButton) {
                    removeButton.addEventListener('click', function() {
                        buttonSetup.remove();
                        $('#ctaButtons-add-button').attr('disabled', false);
                    });
                }
            }*/

            $(document).on('click', '.remove-button', function() {
                $(this).parent().remove();
                $('#ctaButtons-add-button').attr('disabled', false);
            });

            // Initial setup for existing elements
            document.querySelectorAll('.ctaButtons-button-setup, .quickReplies-button-setup,.otp-button-setup').forEach(function(
                buttonSetup) {
                // attachEventListenersToSelect(buttonSetup);
                // attachRemoveButtonEventListener(buttonSetup);
            });

            var i = 1; // Initialize the counter outside the click event
            $('#addVariable').click(function () {
                var editor = $(".whatsapp-editor")[0];
                var selection = window.getSelection();
                if (!selection.rangeCount) return; // Exit if no range is selected
                var range = selection.getRangeAt(0);

                var placeholder = '@{{' + i + '}}';

                // Insert placeholder at the current cursor position
                var placeholderNode = document.createTextNode(placeholder);
                range.insertNode(placeholderNode);
                range.setStartAfter(placeholderNode);
                range.setEndAfter(placeholderNode);
                selection.removeAllRanges();
                selection.addRange(range);

                // Create label and input elements
                var newInputGroup = $('<div class="form-group"></div>');
                var newLabel = $('<label for="variable' + i + '">' + placeholder + '</label>');
                var newInput = $('<input>').attr({
                    type: 'text',
                    id: 'variable' + i,
                    name: 'body_sample[]', // Set name as an array
                    'data-variable-number': i, // Custom attribute to hold the variable number
                    placeholder: 'Type Something...',
                    class: 'form-control',
                    required: true
                });

                // Append the new elements to the input group and then add the input group to the container
                newInputGroup.append(newLabel).append(newInput);
                $('#dynamic-inputs-container').append(newInputGroup);

                i++; // Increment the counter
                $('#Variables').show();
                updatePreviewWithVariables();
            });
            
            // Function to replace elements based on the sets
            function replaceElements(originalStr, originalSet, newSet) {
                const originalArray = Array.from(originalSet);
                originalArray.forEach((originalValue, originalIndex) => {
                    const regex = new RegExp(escapeRegExp(originalValue), 'g');
                    const newIndex = originalArray.indexOf(originalValue);
                    const newValue = Array.from(newSet)[newIndex];
                    originalStr = originalStr.replace(regex, newValue);
                });
                i = newSet.size + 1;
                return originalStr;
            }

            // Function to escape special characters in a string for use in a regular expression
            function escapeRegExp(string) {
                return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            }

        

            let previousPatterns = new Set();
            $(".whatsapp-editor").on('input', function () {
                const editor = $(this)[0];
                const currentValue = editor.textContent;  // Changed to textContent
                if (currentValue.length === 0) {
                    return;
                }

                const regex = /\{\{(\d+)\}\}/g;
                let currentPatterns = new Set();
                let match;

                while ((match = regex.exec(currentValue)) !== null) {
                    currentPatterns.add(match[1]);
                }

                const arrayFromSet = Array.from(currentPatterns);
                const modifiedArray = arrayFromSet.map((element, index) => (index + 1).toString());
                const newSet = new Set(modifiedArray);

                const originalString = editor.textContent;  // Changed to textContent

                const selection = window.getSelection();
                let previousCursorPosition = selection.focusOffset;
                const modifiedString = replaceElements(originalString, currentPatterns, newSet);

                if (originalString !== modifiedString) {  // Check if modification is necessary
                    editor.textContent = modifiedString;  // Changed to textContent

                    // Restore the cursor position, adjust if out of bounds
                    const safePosition = Math.min(previousCursorPosition, editor.textContent.length);
                    const updatedRange = document.createRange();
                    updatedRange.setStart(editor.childNodes[0], safePosition);
                    updatedRange.collapse(true);
                    selection.removeAllRanges();
                    selection.addRange(updatedRange);
                }

                previousPatterns.forEach(function (pattern) {
                    if (!newSet.has(pattern)) {
                        console.log(pattern + " has been deleted");
                    }
                });

                previousPatterns = newSet;

                let validNumbers = new Set(previousPatterns);
                $("#dynamic-inputs-container .form-group").each(function () {
                    let variableNumber = $(this).find('input').data('variable-number').toString();
                    if (!validNumbers.has(variableNumber)) {
                        $(this).remove();
                    }
                });
            });

            $('#templateAddForm').on('submit', function(e) {
                if (!$("#templateAddForm").valid()) {
                    return false;
                }
        
                e.preventDefault();
               
                // Show loader
                document.querySelector('.loader').style.display = 'inline-block';
                document.querySelector('#loader-overlay').style.display = 'block';

                // Clear previous errors
                $('.form-control').removeClass('is-invalid');
                $('.text-danger').text('');

                var currentText = $(".whatsapp-editor")[0].innerText; // Ensure this selector is correct

                var formatedText = editor.getFormattedContent()
                $('input[name="body"]').val(formatedText);


                // var inputText = $('input[name="buttons[button_display_text][]"]').val();
                // if (inputText.trim() === '') {
                //     $('#error-text').addClass('is-invalid');
                //     $('#error-text').text('Please enter button display text').show();
                //     document.querySelector('.loader').style.display = 'none';
                //     document.querySelector('#loader-overlay').style.display = 'none';
                //     return;
                // } 
                // else {
                //     $('error-text').removeClass('is-invalid');
                //     $('#error-text').text('').hide();
                // }
                var formData = new FormData(this);

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if(response.message){

                            toastr.error(response.message);
                        }
                        window.location.href = response.redirect;
                    },
                    error: function(response) {
                        document.querySelector('.loader').style.display = 'none';
                        document.querySelector('#loader-overlay').style.display = 'none';
                        if (response.status === 422) {
                            let errors = response.responseJSON.errors;
                            for (const [key, value] of Object.entries(errors)) {
                                // Add red border and show error message
                                $('[name="' + key + '"]').addClass(
                                    'is-invalid');
                                $('#error-' + key).text(value[0]);
                                toastr.error(value[0]);
                            }
                        }
                        console.log(response.responseJSON.errors);
                    },
                     complete: function() {
                        document.querySelector('.loader').style.display = 'none';
                        document.querySelector('#loader-overlay').style.display = 'none';
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });

             // Get a reference to the select element
            var $categorySelect = $("#category-select");

            // Add event listener for the change event
            $categorySelect.on("change", function() {
                updateButtonsPreview();
                // Get the selected value
                var selectedValue = $(this).val();

                // Check if the selected value is "Authentication"
                if (selectedValue == 3) {
                    // If selected value is "Authentication", hide the container
                    $('#button_display_text').prop('required', true);
                    $(".no-auth").hide();
                    $("#otp-link").show();
                    
                     // Remove 'active' class from the first <li> element
                    $(".nav-link:first-child").removeClass("active");
                    // Add 'active' class to the second <li> element
                    $(".nav-link:nth-child(4)").addClass("active");
                    // Remove 'active' class from the first <li> element with class 'no-auth'
                    $("#noButton").removeClass("active");
                    // Add 'active' class to the last <li> element
                    $("#otp").addClass("active show");
                } else {
                    $('#button_display_text').prop('required', false);
                    // Otherwise, show the container
                    $(".no-auth").show();
                    $("#otp-link").hide();
                    // $(".auth").hide();
                    $("#noButton").addClass("active show");
                    // Add 'active' class to the last <li> element
                    $("#otp").removeClass("active");
                }
            });

            $(document).on('keyup', '.button_display_text', function() {
                updateButtonsPreview();
            });
            $(document).on('keyup', '#button_display_text', function() {
                updateButtonsPreview();
            });
            $(document).on('keyup', '#header-input', function() {
                $('#preview-header').text($('#header-input').val());
            });
            $(document).on('keyup', '#footer-input', function() {
                $('#preview-footer').html('<small class="text-muted">' + $('#footer-input').val() + '</small>');
            });
        });

        function toggleInput(select) {
            if (select.value === "ONE_TAP") {
                $("#package_name").prop('required', true);
                $("#signature_hash").prop('required', true);
                $('#package_name').show();
                $('#signature_hash').show();
            } else if (select.value === "COPY_CODE") {
                $("#package_name").prop('required', false);
                $("#signature_hash").prop('required', false);
                $('#package_name').hide();
                $('#signature_hash').hide();
            }
        }
    </script>
@endpush