@extends('web.layouts.app')
@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">
                            <div class="modal-body">
                                <!-- Template Name -->
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="name" class="form-label">@lang('user.name')</label>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="text-danger" id="error-name"></span>
                                        <input type="text" class="form-control" value="{{ $template->name }}" placeholder="@lang('user.name')" name="name" pattern="[a-zA-Z0-9_]" readonly>
                                    </div>
                                </div>
            
                                <!-- Category -->
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="category" class="form-label">@lang('user.category')</label>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" value="{{ \App\Models\Template::$categories[$template->category] }}" readonly>
                                    </div>
                                </div>
            
                                <!-- Language -->
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="lang" class="form-label">@lang('user.language')</label>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" value="{{ $template->lang == 'en_US' ? __('English') : __('عربي') }}" readonly>
                                    </div>
                                </div>
                                
            
                                <!-- Media Type -->
                                <fieldset class="row mb-3 {{$template->category == 3?'d-none':''}}" readonly>
                                    <div class="col-md-6">
                                        <label class="col-form-label pt-0">@lang('user.media')</label>
                                    </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 }}" readonly>
                                                <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>
                                    </div>
                                </fieldset>
            
                                <!-- Header -->
                                <div id="header" class="row mb-3 {{$template->category == 3?'d-none':''}}" style="display:none;">
                                    <div class="col-md-6">
                                        <label for="name" class="form-label">@lang('user.header') (@lang('user.optional'))</label>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" value="{{ $template->title }}" class="form-control" name="title" readonly>
                                    </div>
                                </div>
            
                                <!-- Body Text -->
                                <div class="row mb-3 {{$template->category == 3?'d-none':''}}">
                                    <div class="col-md-6">
                                        <label for="body" class="form-label">@lang('user.body_text')</label>
                                        <p></p>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="hidden" name="body" readonly>
                                        <input type="hidden" name="body_sample" readonly>
                                        <textarea rows="7" class="form-control" readonly dir="auto">{{html_entity_decode($template->body)}}</textarea>
                                        <br>
                                    </div>
                                </div>
                              
                                <!-- Footer -->
                                <div class="row mb-3 {{$template->category == 3?'d-none':''}}">
                                    <div class="col-md-6">
                                        <label for="name" class="form-label">@lang('user.footer') (@lang('user.optional'))</label>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" value="{{ $template->footer }}" class="form-control" name="footer" readonly>
                                    </div>
                                </div>
            
                                <!-- Buttons -->
                                <div class="container row mb-3">
                                    <div class="col-md-6">
                                        <h2>@lang('user.buttons')</h2>
                                    </div>
                                    <div class="col-md-6">
                                        <!-- Add readonly attribute to buttons -->
                                        <ul class="nav nav-tabs" role="tablist" readonly>
                                            <li class="nav-item">
                                                <a class="nav-link {{$template->category != 3?'active':''}}" data-toggle="tab" href="#noButton">@lang('user.no_button')</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" href="#ctaButtons">@lang('user.CTA_buttons')</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" href="#quickReplies">@lang('user.Quick_replies')</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link {{$template->category == 3?'active':''}}" data-toggle="tab" href="#otp">OTP</a>
                                            </li>
                                        </ul>
            
                                        <!-- Tab panes -->
                                        <div class="tab-content" readonly>
                                            <div id="noButton" class="container tab-pane {{$template->category != 3?'active':''}}"><br>
                                                <p>@lang('user.no_button_selected')</p>
                                            </div>
                                            <div id="ctaButtons" class="container tab-pane fade"><br>
                                                <div id="ctaButtons-button-container" class="add-button mt-3"></div>
                                            </div>
                                            <div id="quickReplies" class="container tab-pane fade"><br>
                                                <div id="quickReplies-button-container" class="add-button mt-3"></div>
                                            </div>

                                            <div id="otp" class="container tab-pane fade {{$template->category == 3?'active show':''}}"><br>
                                                <div id="otp-button-container" class="add-button mt-3"></div>
                                            </div>
                                        </div>
                                    </div>
                                </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">
                                        <input type="text" class="form-control" value="{{ $template->status == 1 ? __('user.active') : __('user.Inactive') }}" readonly>
                                    </div>
                                </div>
                                <!-- Status -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="form-label">@lang('user.approval_status')</label>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="badge text-bg-{{ $template->approval_status == 1 ? 'success' : ($template->approval_status == 2 ? 'danger' : 'warning') }}">
                                            @if($template->approval_status == 0)
                                                @lang('user.PENDING')
                                            @elseif ($template->approval_status == 1)
                                                @lang('user.APPROVED')
                                            @elseif($template->approval_status == 2)
                                                @lang('user.REJECTED')
                                            @endif
                                        </span>
                                    </div>
                                </div>
                                @if($template->approval_status == 2 && !empty($template->reason))
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">@lang('user.rejection_reason')</label>
                                        </div>
                                        <div class="col-md-6">{{ $template->reason }}</div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    <div class="tab-form-pane main-chat-note fade show active" id="pills-note" role="tabpanel"
        aria-labelledby="pills-note-tab">
        <div class="px-4 ">
            <ul id="templates-view">
                <li class="template-result template-result-{{ $template->id }}" data-templateid="{{ $template->id }}" data-category="{{ $template->category_name }}" data-language="{{ $template->lang }}" data-body="{{ $template->body }}" data-media="{{ $template->media_type }}">
                    @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 class="media_type media_type_{{ $template->media_type_name }}">
                            <img style="width: 300px;height: 121px;" src="{{asset('storage/'.$template->file->path)}}">
                        </div>
                    @endif
                    <style>
                        #templates-results .media_type.media_type_image::after, #templates-view .media_type.media_type_image::after{
                            content: '';
                        }
                    </style>
                    <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
                </li>
            </ul>
            <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>
            <select class="form-control mb-2" name="buttons[type][]">
                <option value="">@lang('user.select')</option>
                <option value="phone_number">@lang('user.phone')</option>
                <option value="url">@lang('user.dynamic_link')</option>
            </select>
            <input type="text" class="form-control mb-2" name="buttons[phone_number][]"
                placeholder="@lang('user.phone')" style="display: none;">
            <input type="text" class="form-control mb-2" name="buttons[url][]" placeholder="Enter URL"
                style="display: none;">
            <input type="text" class="form-control mb-2" name="buttons[button_display_text][]"
                placeholder="Button display text">
            <button type="button" class="btn btn-danger remove-button">X</button>
        </div>
    </div>

    <div id="quickRepliesbuttonSetupTemplate" style="display: none;">
        <div class="quickReplies-button-setup">
            <label>Button 1</label>
            <input type="hidden" class="form-control mb-2" name="buttons[QUICK_REPLY][type][]" value="QUICK_REPLY"
                placeholder="Reply">

            <input type="text" class="form-control mb-2" name="buttons[QUICK_REPLY][button_display_text][]"
                placeholder="Button display text">
            <button type="button" class="btn btn-danger remove-button">X</button>

        </div>
    </div>
    <style>
        .bold-text {
            font-weight: bold;
        }
    </style>
    <!-- end  layout wrapper -->
    @endsection
    @section('script')
        <script type="text/javascript">
            $(document).ready(function() {
               
                var editor;
                editor = $("#whatsapp-editor-container").whatsappEditor({
                    content: `<b>{{ $template->body }}</b>`
                });

                var value = "{{ $template->media_type }}"
    
                if (value == 0) {
                    document.getElementById('header').style.display = 'flex';
                }
    
             
                $('input[name="media_type"][value="'+value+'"]').prop('checked', true);
               
                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'){
                        const buttonSetup = createButtonSetup(buttonData, index + 1);
                        buttonContainer.appendChild(buttonSetup);
                    }
                });

                 // Assuming you have a container where you want to append these button setups
                buttonContainer = document.getElementById('quickReplies-button-container');
    
                buttonDataArray.forEach((buttonData, index) => {
                    if(buttonData.type == 'QUICK_REPLY'){
                        const buttonSetup = createButtonSetup(buttonData, index + 1);
                        buttonContainer.appendChild(buttonSetup);
                    }
                });

                // Assuming you have a container where you want to append these button setups
                buttonContainer = document.getElementById('otp-button-container');
    
                buttonDataArray.forEach((buttonData, index) => {
                    if(buttonData.type == 'otp'){
                        const buttonSetup = createButtonSetup(buttonData, index + 1);
                        buttonContainer.appendChild(buttonSetup);
                    }
                });
    
                function createButtonSetup(buttonData, index) {
                    const buttonSetupDiv = document.createElement('div');
                    buttonSetupDiv.className = 'button-setup mb-3';
    
                    // Label
                    const label = document.createElement('label');
                    label.textContent = 'Button ' + index;
                    buttonSetupDiv.appendChild(label);
    
                   // Input Element
                    const input = document.createElement('input');
                    input.className = 'form-control mb-2';
                    input.name = 'buttons[type][]';
                    input.value = buttonData.type || '';
                    input.readOnly = true; // Set the readonly property
                    buttonSetupDiv.appendChild(input);

    
                    // Phone Number Input
                    const phoneNumberInput = document.createElement('input');
                    phoneNumberInput.type = 'text';
                    phoneNumberInput.className = 'form-control mb-2';
                    phoneNumberInput.name = 'buttons[phone_number][]';
                    phoneNumberInput.placeholder = 'Enter phone number';
                    phoneNumberInput.value = buttonData.phone_number || '';
                    phoneNumberInput.style.display = (input.value === 'phone_number' || phoneNumberInput.value) ? 'block' : 'none';
                    buttonSetupDiv.appendChild(phoneNumberInput);
    
                    // URL Input
                    const urlInput = document.createElement('input');
                    urlInput.type = 'text';
                    urlInput.className = 'form-control mb-2';
                    urlInput.name = 'buttons[url][]';
                    urlInput.placeholder = 'Enter URL';
                    urlInput.value = buttonData.url || '';
                    urlInput.style.display = (input.value === 'url' || urlInput.value) ? 'block' : 'none';
                    buttonSetupDiv.appendChild(urlInput);
    
                    // Button Display Text Input
                    const buttonTextDisplayInput = document.createElement('input');
                    buttonTextDisplayInput.type = 'text';
                    buttonTextDisplayInput.className = 'form-control mb-2';
                    buttonTextDisplayInput.name = 'buttons[button_display_text][]';
                    buttonTextDisplayInput.placeholder = 'Button display text';
                    buttonTextDisplayInput.value = buttonData.text || '';
                    buttonSetupDiv.appendChild(buttonTextDisplayInput);
    
                    // Add change event listener to the select element
                    input.addEventListener('change', function() {
                        phoneNumberInput.style.display = this.value === 'phone_number' ? 'block' : 'none';
                        urlInput.style.display = this.value === 'url' ? 'block' : 'none';
                    });
    
                    return buttonSetupDiv;
                }
                
                // document.getElementById('ctaButtons-add-button').addEventListener('click', function() {
                //     addNewButtonSetup('ctaButtons-button-container', 'buttonSetupTemplate');
                // });
    
                // document.getElementById('quickReplies-add-button').addEventListener('click', function() {
                //     addNewButtonSetup('quickReplies-button-container', 'buttonSetupTemplate');
                // });
    
                function addNewButtonSetup(containerId, templateId) {
                    const buttonContainer = document.getElementById(containerId);
                    const template = document.getElementById(templateId).children[0];
                    const newButtonSetup = template.cloneNode(true);
                    const newButtonIndex = buttonContainer.children.length + 1;
    
                    newButtonSetup.querySelector('label').textContent = 'Button ' + newButtonIndex;
    
                    resetAndHideInputs(newButtonSetup);
                    attachEventListenersToSelect(newButtonSetup);
                    attachRemoveButtonEventListener(newButtonSetup);
    
                    buttonContainer.appendChild(newButtonSetup);
                }
    
                function resetAndHideInputs(buttonSetup) {
                    buttonSetup.querySelectorAll('input').forEach(function(input) {
                        input.value = '';
                        input.style.display = 'none';
                    });
    
                    const buttonTextDisplayInput = buttonSetup.querySelector('input[name="buttons[button_display_text][]"]');
                    if (buttonTextDisplayInput) {
                        buttonTextDisplayInput.style.display = 'block';
                    }
                }
    
                function attachEventListenersToSelect(buttonSetup) {
                    const selectElements = buttonSetup.querySelectorAll('select[name="buttons[type][]"]');
                    selectElements.forEach(function(selectElement) {
                        selectElement.value = '';
                        selectElement.addEventListener('change', function() {
                            updateInputDisplay(this);
                        });
                    });
                }
    
                function updateInputDisplay(selectElement) {
                    const buttonSetup = selectElement.closest('.ctaButtons-button-setup, .quickReplies-button-setup');
                    const urlInput = buttonSetup.querySelector('input[name="buttons[url][]"]');
                    const phoneInput = buttonSetup.querySelector('input[name="buttons[phone_number][]"]');
    
                    if (urlInput) {
                        urlInput.style.display = 'none';
                    }
                    if (phoneInput) {
                        phoneInput.style.display = 'none';
                    }
    
                    if (selectElement.value === 'url') {
                        urlInput.style.display = 'block';
                    } else if (selectElement.value === 'phone_number') {
                        phoneInput.style.display = 'block';
                    }
                }
    
                function attachRemoveButtonEventListener(buttonSetup) {
                    const removeButton = buttonSetup.querySelector('.remove-button');
                    if (removeButton) {
                        removeButton.addEventListener('click', function() {
                            buttonSetup.remove();
                        });
                    }
                }
    
                // Initial setup for existing elements
                document.querySelectorAll('.ctaButtons-button-setup, .quickReplies-button-setup').forEach(function(buttonSetup) {
                    attachEventListenersToSelect(buttonSetup);
                    attachRemoveButtonEventListener(buttonSetup);
                });
    
    
                let previousPatterns = new Set();
    
                $(".whatsapp-editor").on('input', function() {
                    const currentValue = $(this)[0].innerText;
                    const regex = /\{\{(\d+)\}\}/g;
                    let currentPatterns = new Set();
                    let match;
    
                    while ((match = regex.exec(currentValue)) !== null) {
                        currentPatterns.add(match[1]);
                    }
    
                    // Check which previous patterns are not in the current text
                    previousPatterns.forEach(function(pattern) {
                        if (!currentPatterns.has(pattern)) {
                            console.log(pattern + " has been deleted");
                        }
                    });
    
                    // Update previous patterns
                    previousPatterns = currentPatterns;
                    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(); // Remove the form group if its number is not in the set
                        }
                    });
                });
    
                // var i = 1; // Initialize the counter outside the click event
                // $('#addVariable').click(function() {
                //     var currentText = $(".whatsapp-editor")[0].innerText; // Ensure this selector is correct
                //     var newText = currentText + '@{{' + i + '}}';
                //     $(".whatsapp-editor")[0].innerText = newText;
    
                //     // Create label and input elements
                //     var newInputGroup = $('<div class="form-group"></div>');
                //     var newLabel = $('<label for="variable' + i + '">@{{' + i + '}}</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'
                //     });
                //     // 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();
                // });
    
                $('#templateEditForm').find('input, textarea, button, select','checkbox').attr('disabled', 'disabled');
                // $('#templateEditForm').addClass('disabled');
    
                $('#templateEditForm').on('submit', function(e) {
                    e.preventDefault();
    
                    // 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);
                    formData.append('_method', 'PUT'); // Laravel uses this to simulate PUT
    
                    $.ajax({
                        url: $(this).attr('action'),
                        type: 'POST',
                        data: formData,
                        success: function(response) {
                            window.location.href = response.redirect;
                        },
                        error: function(response) {
                            console.log('Error:', response);
                            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]);
                                }
                            }
                        },
                        cache: false,
                        contentType: false,
                        processData: false
                    });
                });
            });
        </script>
    @endsection