@extends('web.layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('web/assets/css/whatsapp-editor.css')}}">
    <style>
        .error {
            color: rgb(239, 71, 111);
            font-weight: normal;
        }
        .bold-text {
            font-weight: bold;
        }
    </style>
    @if (env('APP_PROJECT') == 'Rouaa')
        <style>
            .main-chat-note {
                display: block !important;
            }
        </style>
    @elseif (env('APP_PROJECT') == 'Mora')
        <style>
            .main-chat-note {
                display: block !important;
            }
            .media-upload {
                display: none;
                margin-top: 10px;
            }
            .media-type-options input[type="radio"] {
                display: none;
            }
            .media-type-options label {
                display: inline-block;
                margin: 5px;
                padding: 18px;
                border: 1px solid #ccc;
                border-radius: 5px;
                background-color: #fff;
                cursor: pointer;
                transition: all 0.3s;
            }
            .media-type-options label:hover, .media-type-options input[type="radio"]:checked+label {
                border-color: #d9534f;
            }
            .main-chat-container {
                max-height: calc(100vh - 165px);
                overflow-y: auto !important;
            }
        </style>
    @endif

    <style>
        #cards .nav-tabs .nav-link {
            color: #fff;
        }
        #cards .nav-tabs {
            background: #6e03e7;
            border: 0;
        }
        #cards .nav-tabs .nav-link.active {
            color: #1d212f !important;
        }
        #cards .tab-content {
            border: 2px solid #6e03e7;
        }
        #cards-setup {
            background: #ccc;
        }
        #cards-setup label {
            font-weight: bold;
        }
        #preview-cards {
            min-height: 50px;
        }
        .preview-card {
            display: none; /* Hide all items by default */
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
            min-height: 50px;
        }
        .preview-card.active {
            display: block; /* Show the active item */
        }
        #prevBtn {
            position: absolute;
            top: 55%;
            left: 0;
        }
        #nextBtn {
            position: absolute;
            top: 55%;
            right: 0;
        }
        #prevBtn img, #nextBtn img {
            background: #fff;
        }
        #prevBtn:hover img, #nextBtn:hover img {
            background: #ccc;
            border: none;
            border-radius: 50%;
        }
    </style>
@endpush

@section('content')
@if (env('APP_PROJECT') == 'Mora')
  <div class="row">
@endif
    <div class="main-chat-container {{ env('APP_PROJECT') == 'Mora' ? 'col-lg-9' : '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.storeCarousel') }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                <div class="modal-body">
                                    <!-- Template Name -->
                                    <input type="hidden" name="user_id" value="{{auth()->user()->id}}">
                                    <input type="hidden" name="category" value="2">
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="name" class="form-label"><h4>@lang('user.template_details')</h4></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>
                                            <!-- 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>
                                    <!-- Status -->
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label mt-2"><h4>@lang('user.status')</h4></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>
                                    <hr>
                                    <!-- 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>
                                    <hr>
                                    <div class="no-auth">
                                        <!-- Media -->
                                        <fieldset class="row mb-3 py-2" id="cards-setup">
                                            <div class="col-md-3">
                                                <label class="col-form-label pt-0">@lang('user.cards')</label>
                                                <select name="cards_count" id="cards_count" class="form-control">
                                                    @for($i=2; $i<=10; $i++)
                                                        <option value="{{ $i }}">{{ $i }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label class="col-form-label pt-0">@lang('user.header')</label>
                                                <select name="media_type" id="media_type" class="form-control">
                                                    <option value="1">@lang('user.image')</option>
                                                    <option value="2">@lang('user.video')</option>
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label class="col-form-label pt-0">@lang('user.button') 1</label>
                                                <select name="button1_type" id="button1_type" class="form-control" required>
                                                    <option value="">@lang('user.none')</option>
                                                    <option value="QUICK_REPLY">@lang('user.quick_reply')</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>
                                            <div class="col-md-3">
                                                <label class="col-form-label pt-0">@lang('user.button') 2</label>
                                                <select name="button2_type" id="button2_type" class="form-control">
                                                    <option value="">@lang('user.none')</option>
                                                    <option value="QUICK_REPLY">@lang('user.quick_reply')</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>
                                        </fieldset>
                                    </div>
                                     <!-- buttons -->
                                    <div class="row mt-3" id="cards">
                                        <ul class="nav nav-tabs p-2" role="tablist">
                                            {{-- @for($i=1; $i<=2; $i++)
                                                <li class="nav-item no-auth">
                                                    <a class="nav-link @if($i==1) active @endif" id="card-btn-{{ $i }}" data-toggle="tab" data-bs-toggle="tab" data-bs-target="#card-{{ $i }}" href="#card-{{ $i }}">Card {{ $i }}</a>
                                                </li>
                                            @endfor --}}
                                        </ul>
                                        <!-- Tab panes -->                                     
                                        <div class="tab-content">
                                            {{-- @for($i=1; $i<=2; $i++)
                                                <div id="card-{{ $i }}" class="container tab-pane @if($i==1) active @endif">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <label class="form-label"><h5>@lang('user.media')</h5></label>
                                                            <p>@lang('user.media_note')</p>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <input type="file" name="media_image[]" class="uploadImage" rel="{{ $i }}" accept="image/png, image/jpeg" required>
                                                            <input type="file" name="media_video[]" class="uploadVideo" rel="{{ $i }}" accept="video/mp4, video/3gpp" style="display: none">
                                                        </div>
                                                    </div>
                                                    <hr>
                                                    <div class="row mt-3">
                                                        <div class="col-md-6">
                                                            <label for="body" class="form-label"><h5>@lang('user.body_text')</h5></label>
                                                            @lang('user.body_text_note')
                                                        </div>
                                                        <div class="col-md-6">
                                                            <span class="text-danger" id="error-body"></span>
                                                            <div class="whatsapp-editor-container"></div>
                                                            <br />
                                                            <button type="button" class="btn btn-info addVariable" rel="{{ $i }}">
                                                                @lang('user.add_Variable')
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="row mb-3 Variables" 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 class="dynamic-inputs-container"></div>
                                                        </div>
                                                    </div>
                                                    <div class="row button1_container" style="display: none">
                                                        <hr>
                                                        <div class="col-md-6">
                                                            <label class="form-label"><h5>@lang('user.button') 1</h5></label>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="button1"></div>
                                                        </div>
                                                    </div>
                                                    <div class="row button2_container" style="display: none">
                                                        <hr>
                                                        <div class="col-md-6">
                                                            <label class="form-label"><h5>@lang('user.button') 2</h5></label>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="button2"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endfor --}}
                                        </div>
                                    </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 class="tab-form-pane main-chat-note fade show {{ env('APP_PROJECT') == 'Mora' ? 'col-lg-3  mt-5 pt-3' : '' }}">
        <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="preview-cards" class="w-100">
                    <a id="prevBtn" href="javascript:void(0)" onclick="goToPrevious()">
                        <img src="{{ asset('web/assets/images/left-arrow-circle.png') }}" width="22" />
                    </a>
                    <a id="nextBtn" href="javascript:void(0)" onclick="goToNext()">
                        <img src="{{ asset('web/assets/images/right-arrow-circle.png') }}" width="22" />
                    </a>
                </div>
                {{-- <button id="prevBtn" onclick="goToPrevious()">Previous</button>
                <button id="nextBtn" onclick="goToNext()">Next</button> --}}
            </div>
        </div>

        @if (env('APP_PROJECT') != 'Rouaa' && env('APP_PROJECT') != 'Mora')
            <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">
            <div class="input-group mb-2">
                <span class="codeContainer" style="display: none;width: 40%;"></span>
                <input type="text" class="form-control phone"
                    name="buttons[phone_number][numbers][]" placeholder="@lang('user.phone')"
                    style="display: none;">
                <span class="text-danger" id="error-mobile"></span>
            </div>
            <input type="text" class="form-control mb-2 button_url" 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">
            <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>
    <!-- end  layout wrapper -->
@if (env('APP_PROJECT') == 'Mora')
  </div>
@endif
@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" src="{{ asset('web/assets/js/whatsapp-editor.js') . '?v=' . env('APP_VERSION') }}"></script>
    <script type="text/javascript">
        function updateCardsButtonsPreview()
        {
            let j;
            for(j=1; j<=$('#cards_count').val(); j++) {
                $('#preview-card-' + j + ' .preview-buttons').html('');
                $('#card-' + j + ' .button_display_text').each(function(index, item) {
                    if ($(item).val() != '') {
                        $('#preview-card-' + j + ' .preview-buttons').append('<button class="btn btn-primary w-100 mb-2">' + $(item).val() + '</button');
                    }
                });
            };
        }

        // Preview
        var currentIndex = 0;
        function showItem(index) {
            let l = 0;
            $('#preview-cards .preview-card').each(function() {
                if (l === index) {
                    $(this).addClass('active');
                } else {
                    $(this).removeClass('active');
                }

                l += 1;
            });
        }

        function goToPrevious() {
            currentIndex = (currentIndex - 1 + $('#cards_count').val()) % $('#cards_count').val();
            showItem(currentIndex);
        }

        function goToNext() {
            currentIndex = (currentIndex + 1) % $('#cards_count').val();
            showItem(currentIndex);
        }
        // Preview - end
        
        $(document).ready(function() {
            $("#templateAddForm").validate();
            $(document).on('change', 'input[type=file]', handleFileUpload);
            
            function handleFileUpload(event) {
                let cardInd = $(this).attr('rel');
                var file = event.target.files[0];
                var reader = new FileReader();

                reader.onload = function(e) {
                    var mediaDiv = $('#preview-card-' + cardInd + ' .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;
            var editors = [];
            editor = $("#whatsapp-editor-container").whatsappEditor({
                content: ''
            });

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

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

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

                    cardNumber += 1;
                });
            }

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

            // Listen for changes on any radio buttons named "media_type"
            var mediaOptions = document.querySelectorAll('input[name="media_type"]');

            var buttonsindex = 0;
            function addNewButtonSetup(buttonNum, templateId) {
                const template = document.getElementById(templateId).children[0];
                const newButtonSetup = template.cloneNode(true);
                
                resetAndHideInputs(newButtonSetup);

                let clonedHtml = newButtonSetup.innerHTML.replaceAll('buttons[', 'button' + buttonNum + '[');
                $('.button' + buttonNum).html(clonedHtml);
            }

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

            $(document).on('change', '#button1_type', function() {
                $('.button1').html('');
                if ($(this).val() == '') {
                    $('.button1_container').hide();
                } else {
                    $('.button1_container').show();
                    if ($(this).val() == 'QUICK_REPLY') {
                        addNewButtonSetup(1, 'quickRepliesbuttonSetupTemplate');
                    } else {
                        addNewButtonSetup(1, 'ctaButtonsbuttonSetupTemplate');
                    }
                    updateInputDisplay(this, 1);
                }
            });
            $(document).on('change', '#button2_type', function() {
                $('.button2').html('');
                if ($(this).val() == '') {
                    $('.button2_container').hide();
                } else {
                    $('.button2_container').show();
                    if ($(this).val() == 'QUICK_REPLY') {
                        addNewButtonSetup(2, 'quickRepliesbuttonSetupTemplate');
                    } else {
                        addNewButtonSetup(2, 'ctaButtonsbuttonSetupTemplate');
                    }
                    updateInputDisplay(this, 2);
                }
            });

            function updateInputDisplay(selectElement, buttonNum) {
                $('.button' + buttonNum + ' .button_url').hide();
                $('.button' + buttonNum + ' .phone').hide();

                if (selectElement.value === 'phone_number') {
                    $('.button' + buttonNum + ' .button_url').remove();
                    $('.button' + buttonNum + ' .phone').show();
                    $('.button' + buttonNum + ' .codeContainer').show();
                    $('.button' + buttonNum + ' .dynamic_url_variable').remove();
                    $('.button' + buttonNum + ' .dynamic_url_hint').remove();
                } else if (selectElement.value === 'url') {
                    $('.button' + buttonNum + ' .button_url').show();
                    $('.button' + buttonNum + ' .phone').remove();
                    $('.button' + buttonNum + ' .codeContainer').remove();
                    $('.button' + buttonNum + ' .dynamic_url_variable').remove();
                    $('.button' + buttonNum + ' .dynamic_url_hint').remove();
                } else if (selectElement.value === 'dynamic_url') {
                    $('.button' + buttonNum + ' .button_url').show();
                    $('.button' + buttonNum + ' .phone').remove();
                    $('.button' + buttonNum + ' .codeContainer').remove();
                    $('.button' + buttonNum + ' .dynamic_url_variable').show();
                    $('.button' + buttonNum + ' .dynamic_url_hint').show();
                }
            }

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

            $(document).on('click', '.addVariable', function () {
                let cardNum = parseInt($(this).attr('rel'));
                let j = parseInt($('#card-' + cardNum + ' .dynamic-inputs-container div.form-group').length) + 1;
                let editor = $(".whatsapp-editor")[cardNum + 1];
                let selection = window.getSelection();
                if (!selection.rangeCount) return; // Exit if no range is selected
                let range = selection.getRangeAt(0);

                let placeholder = '@{{' + j + '}}';

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

                // Create label and input elements
                let newInputGroup = $('<div class="form-group"></div>');
                let newLabel = $('<label for="variable' + j + '">' + placeholder + '</label>');
                let newInput = $('<input>').attr({
                    type: 'text',
                    id: 'card-' + cardNum + 'variable' + j,
                    name: 'cards_variables_sample[' + cardNum + '][]', // Set name as an array
                    'data-variable-number': j, // 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);
                $('#card-' + cardNum + ' .dynamic-inputs-container').append(newInputGroup);

                i++; // Increment the counter
                $('#card-' + cardNum + ' .Variables').show();
                updateCardsPreviewWithVariables();
            });
            
            // 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-container .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 formData = new FormData(this);

                editors.forEach((value) => {
                    formData.append('cardsBody[]', value.getFormattedContent());
                });

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

            $(document).on('keyup', '.button_display_text', function() {
                updateCardsButtonsPreview();
            });

            $('.whatsapp-editor-container').each(function(index, element) {
                editors[index] = $(this).whatsappEditor({
                    content: ''
                });
            });

            $(document).on('change', '#media_type', function() {
                if ($(this).val() == '1') {
                    $('.uploadImage').show();
                    $('.uploadImage').prop('required', true);
                    $('.uploadVideo').hide();
                    $('.uploadVideo').removeAttr('required');
                } else {
                    $('.uploadImage').hide();
                    $('.uploadImage').removeAttr('required');
                    $('.uploadVideo').show();
                    $('.uploadVideo').prop('required', true);
                }
            });

            $(document).on('change', '#cards_count', function() {
                let k;
                let cardsCount = parseInt($(this).val());
                let activeClass = '';
                for(k=1; k<=cardsCount; k++) {
                    if ($('#card-btn-' + k).length) {
                        continue;
                    }
                    if (k == 1) {
                        activeClass = ' active';
                    } else {
                        activeClass = '';
                    }

                    $('#cards ul').append(`<li class="nav-item no-auth">
                                                <a class="nav-link${activeClass}" id="card-btn-${k}" data-toggle="tab" data-bs-toggle="tab" data-bs-target="#card-${k}" href="#card-${k}">Card ${k}</a>
                                            </li>`);
                    $('#cards .tab-content').append(`<div id="card-${k}" class="container tab-pane${activeClass}">
                                                        <div class="row mb-3">
                                                            <div class="col-md-6">
                                                                <label class="form-label"><h5>@lang('user.media')</h5></label>
                                                                <p>@lang('user.media_note')</p>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <input type="file" name="media_image[]" class="uploadImage" rel="${k}" accept="image/png, image/jpeg">
                                                                <input type="file" name="media_video[]" class="uploadVideo" rel="${k}" accept="video/mp4, video/3gpp">
                                                            </div>
                                                        </div>
                                                        <hr>
                                                        <div class="row mt-3">
                                                            <div class="col-md-6">
                                                                <label for="body" class="form-label"><h5>@lang('user.body_text')</h5></label>
                                                                @lang('user.body_text_note')
                                                            </div>
                                                            <div class="col-md-6">
                                                                <span class="text-danger" id="error-body"></span>
                                                                <div class="whatsapp-editor-container"></div>
                                                                <br />
                                                                <button type="button" class="btn btn-info addVariable" rel="${k}">
                                                                    @lang('user.add_Variable')
                                                                </button>
                                                            </div>
                                                        </div>
                                                        <div class="row mb-3 Variables" 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 class="dynamic-inputs-container"></div>
                                                            </div>
                                                        </div>
                                                        <div class="row button1_container" style="display:none">
                                                            <hr>
                                                            <div class="col-md-6">
                                                                <label class="form-label"><h5>@lang('user.button') 1</h5></label>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="button1"></div>
                                                            </div>
                                                        </div>
                                                        <div class="row button2_container" style="display:none">
                                                            <hr>
                                                            <div class="col-md-6">
                                                                <label class="form-label"><h5>@lang('user.button') 2</h5></label>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="button2"></div>
                                                            </div>
                                                        </div>
                                                    </div>`);
                    editors[k] = $("#card-" + k + " .whatsapp-editor-container").whatsappEditor({
                        content: ''
                    });

                    if ($('#card-1 .button1').html() != '') {
                        $('#card-' + k + ' .button1').html($('#card-1 .button1').html());
                        $('#card-' + k + ' .button1_container').show();
                    }
                    if ($('#card-1 .button2').html() != '') {
                        $('#card-' + k + ' .button2').html($('#card-1 .button2').html());
                        $('#card-' + k + ' .button2_container').show();
                    }

                    $('#preview-cards').append(`<div id="preview-card-${k}" class="preview-card w-100">
                            <div class="preview-media"></div>
                            <div class="preview-text">@lang('user.body_text') ...</div>
                            <div class="preview-buttons"></div>
                        </div>`);
                }

                if (cardsCount < 10) {
                    for(k=(cardsCount + 1); k<=10; k++) {
                        $('#card-btn-' + k).parent().remove();
                        $('#card-' + k).remove();
                        $('#preview-card-' + k).remove();
                    }
                }

                $('#media_type').trigger('change');
            });

            $('#cards_count').trigger('change');
            showItem(0);

            fetch(`{{ url('get-web-mobile') }}`)
                .then(response => response.text())
                .then(html => {
                    $('.codeContainer').html(html);
                })
                .catch(error => console.error('Error fetching mobile:', error));
        });
    </script>
@endpush