@extends('web.layouts.app')

@push('styles')
  <style>
    .error {
      color: rgb(239, 71, 111);
      font-weight: normal;
    }
    #templates-results .media_type.media_type_image::after, #templates-view .media_type.media_type_image::after{
        content: '';
    }
    #preview-media {
        background: transparent !important;
    }
  </style>
@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.update',['template'=>$template]) }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                @method('PUT')
                                <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" name="name" value="{{$template->name}}" readonly>
                                                <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, $template->category, ['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>
                                                <input type="hidden" class="form-control" name="lang" value="{{ $template->lang}}">
                                                <input type="text" class="form-control" value="{{ $template->lang == 'en_US' ? __('English') : __('عربي') }}" readonly>
                                            </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}}" @if($value == $template->media_type) checked @endif>
                                                        <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" name="title" value="{{ $template->header }}">
                                                <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" dir="auto"></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" @if (!isset($variables)) style="display:none" @endif>
                                            <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">
                                                    @if (isset($variables))
                                                        @foreach ($variables as $i => $variable)
                                                            <div class="form-group mb-2">
                                                                <label for="variable{{$i + 1}}">{!! '{' . '{' . ($i + 1) . '}' . '}' !!}</label>
                                                                <input type="text" id="variable{{$i + 1}}" name="body_sample[]" data-variable-number="{{$i + 1}}" placeholder="Type Something..." class="form-control" value="{{$variable}}">
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                </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" value="{{ $template->footer }}">
                                                <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" id="otp_type" 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>
                                                </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" @if($template->status == '1') selected @endif>
                                                    @lang('user.active')</option>
                                                <option value="0" @if($template->status == '0') selected @endif>
                                                    @lang('user.Inactive')</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-primary">@lang('user.edit')</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">
                    @if(!empty($template->title))
                        <p style="text-align: center;padding-top: 10px;">{{ $template->title }}</p>
                    @endif
                    <h3 class="template-name">{{ $template->name }}</h3>                    
                    <span class="template-title">{{ $template->title }}</span>
                    @if ($template->media_type == 1)
                        <div id="preview-media" class="media_type media_type_{{ $template->media_type_name }}">
                            <img style="width: 300px;height: 121px;" src="{{asset('storage/'.$template->file->path)}}">
                        </div>
                    @endif
                    <p id="preview-text" class="template-body" dir="auto">{!! nl2br(html_entity_decode($template->body)) !!}</p>
                    @if ($template->buttons)
                        <div class="buttons-container">
                            @foreach (json_decode($template->buttons) as $button)
                                @if ($button)
                                    @if ($button->type === 'PHONE_NUMBER')
                                        <button class="btn btn-primary btn-PHONE_NUMBER">{{ $button->text }}</button>
                                    @elseif ($button->type === 'URL')
                                        <a href="javascript:void(0)" class="btn btn-primary btn-URL">{{ $button->text ?? 'Visit' }}</a>
                                    @elseif ($button->type === 'QUICK_REPLY')
                                        <a href="javascript:void(0)" class="btn btn-primary btn-URL">{{ $button->text ?? 'Visit' }}</a>
                                    @elseif ($button->type === 'otp')
                                        <a href="javascript:void(0)" class="btn btn-primary btn-URL">{{ $button->text ?? 'Visit' }}</a>
                                    @endif
                                @endif
                            @endforeach
                        </div>
                    @endif
                    @if(!empty($template->footer))
                    <p style="text-align: center;padding-top: 10px;">{{ $template->footer }}</p>
                @endif
                </div>
            </div>
        </div>

        <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>
    </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 phone_number"
                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 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">
            <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 quick_reply_type"
                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[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">
        var countriesOptions = `<option value="">Select Country Code</option>
                @foreach (__('countries') as $code => $country)
                    <option value="{{ $code }}">{{ $country }}</option>
                @endforeach`;
        var countryCodes = ["{!! implode('", "', array_keys(__('countries'))) !!}"];

        $(document).ready(function() {
            $("#templateAddForm").validate();
            $(document).on('change', 'input[type=file]', handleFileUpload);
            
            const jsonString = @json($template->buttons);
            const buttonDataArray = JSON.parse(jsonString);
            
            // Assuming you have a container where you want to append these button setups
            var buttonContainer = document.getElementById('ctaButtons-button-container');
    
            buttonDataArray.forEach((buttonData, index) => {
                if(buttonData.type == 'PHONE_NUMBER' || buttonData.type == 'URL'){
                    addNewButtonSetup('ctaButtons-button-container', 'ctaButtonsbuttonSetupTemplate', buttonData);
                } else if(buttonData.type == 'QUICK_REPLY'){
                    addNewButtonSetup('quickReplies-button-container', 'quickRepliesbuttonSetupTemplate', buttonData);
                } else if(buttonData.type == 'otp'){
                    $('#otp_type').val(buttonData.otp_type).change();
                    $('#button_display_text').val(buttonData.text);
                    if (buttonData.otp_type == 'ONE_TAP') {
                        $('#package_name').val(buttonData.package_name);
                        $('#signature_hash').val(buttonData.signature_hash);
                    }
                }
            });

            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: `{!! nl2br($template->body) !!}`
            });


            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")[0].innerText;
                $("#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').text(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('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');
            });

            var buttonsindex = 0;
            function addNewButtonSetup(containerId, templateId, buttonData = {}) {
                const buttonContainer = document.getElementById(containerId);
                const template = document.getElementById(templateId).children[0];
                let newButtonSetup = template.cloneNode(true);
                const newButtonIndex = buttonContainer.children.length + 1;
                
                newButtonSetup.querySelector('label').textContent = 'Button ' + newButtonIndex;
                if (newButtonSetup.querySelector('span')) {
                    newButtonSetup.querySelector('span').innerHTML = `<select class="form-select countryCode" id="countryCode_${newButtonIndex}" name="buttons[phone_number][countryCode][]">${countriesOptions}</select>`;
                }
                
                let createdNodeId = "button-" + newButtonIndex;
                if ($('#createdNodeId').length) {
                    createdNodeId += '-';
                }
                newButtonSetup.setAttribute("id", createdNodeId);

                resetAndHideInputs(newButtonSetup);

                if (buttonData.type) {
                    if (buttonData.type == 'PHONE_NUMBER') {
                        let found = false;
                        let cnt = 1;
                        do {
                            if (cnt >= buttonData.length) {
                                found = true;
                            } else if (countryCodes.indexOf(buttonData.phone_number.substr(0, cnt)) !== -1) {
                                newButtonSetup.querySelector('.countryCode').value = buttonData.phone_number.substr(0, cnt);
                                newButtonSetup.querySelector('.phone_number').value = buttonData.phone_number.substr(cnt);
                                found = true;
                            }

                            cnt += 1;
                        } while (!found);
                    } else if (buttonData.type == 'URL') {
                        if (buttonData.example != undefined) {
                            buttonData.type = 'dynamic_url';
                            newButtonSetup.querySelector('.dynamic_url_variable').value = buttonData.example[0];
                            newButtonSetup.querySelector('.url').value = buttonData.url.substr('0', buttonData.url.length - 5);
                        } else {
                            newButtonSetup.querySelector('.url').value = buttonData.url;
                        }
                    } else if (buttonData.type == 'QUICK_REPLY') {
                        newButtonSetup.querySelector('.quick_reply_type').value = buttonData.type;
                    }

                    newButtonSetup.querySelector('.button_display_text').value = buttonData.text;

                    if (newButtonSetup.querySelector('.button_type')) {
                        newButtonSetup.querySelector('.button_type').value = buttonData.type.toLowerCase();
                        updateInputDisplay(newButtonSetup.querySelector('.button_type'));
                    }
                }

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

                return createdNodeId;
            }

            function resetAndHideInputs(buttonSetup) {
                const buttonTextDisplayInput = buttonSetup.querySelector('.button_display_text');
                if (buttonTextDisplayInput) {
                    buttonTextDisplayInput.style.display = 'block';
                }
            }

            $(document).on('change', '.button_type', function($q) {
                updateInputDisplay(this);
            });

           
            function updateInputDisplay(selectElement) {
                const buttonSetup = selectElement.closest('.ctaButtons-button-setup, .quickReplies-button-setup');
                const urlInput = buttonSetup.querySelector('.url');
                const phoneInput = buttonSetup.querySelector('.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';
                }
            }

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

            var i = {{ isset($variables) ? (count($variables) + 1) : 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 mb-2"></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 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() {
                // 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();
                    $(".tab-pane").removeAttr('style');
                    $("#noButton").addClass("active show");
                    // Add 'active' class to the last <li> element
                    $("#otp").removeClass("active");
                }
            });

            toggleUploadInputs({{ $template->media_type }});
            $("#category-select").trigger('change');
        });

        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