@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">
                            <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_]+" value="{{$template->name}}" readonly>
                                            <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>
                                            <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>
                                <!-- 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" @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>
                                <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 />
                                    </div>
                                </div>
                                <div id="Variables" class="row mb-3" @if (!isset($carousel['body_sample'])) 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($carousel['body_sample']))
                                                @foreach ($carousel['body_sample'] 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>
                                <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" disabled>
                                                @for($i=2; $i<=10; $i++)
                                                    <option value="{{ $i }}" @if($carousel['cards_count'] == $i) selected @endif>{{ $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" disabled>
                                                <option value="1" @if($template->media_type == '1') selected @endif>@lang('user.image')</option>
                                                <option value="2" @if($template->media_type == '2') selected @endif>@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 disabled>
                                                <option value="">@lang('user.none')</option>
                                                <option value="QUICK_REPLY" @if($carousel['button1_type'] == 'QUICK_REPLY') selected @endif>@lang('user.quick_reply')</option>
                                                <option value="phone_number" @if($carousel['button1_type'] == 'phone_number') selected @endif>@lang('user.phone')</option>
                                                <option value="url" @if($carousel['button1_type'] == 'url') selected @endif>@lang('user.static_link')</option>
                                                <option value="dynamic_url" @if($carousel['button1_type'] == 'dynamic_url') selected @endif>@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" disabled>
                                                <option value="">@lang('user.none')</option>
                                                <option value="QUICK_REPLY" @if($carousel['button2_type'] == 'QUICK_REPLY') selected @endif>@lang('user.quick_reply')</option>
                                                <option value="phone_number" @if($carousel['button2_type'] == 'phone_number') selected @endif>@lang('user.phone')</option>
                                                <option value="url" @if($carousel['button2_type'] == 'url') selected @endif>@lang('user.static_link')</option>
                                                <option value="dynamic_url" @if($carousel['button2_type'] == 'dynamic_url') selected @endif>@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<=$carousel['cards_count']; $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<=$carousel['cards_count']; $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">
                                                        @if ($template->media_type == '1')
                                                            <img src="{{ asset('assets/icons/feather/image.svg') }}" height="80" />
                                                        @elseif ($template->media_type == '2' && !empty($carousel['files'][$i-1]))
                                                            <img src="{{ asset('assets/icons/feather/video.svg') }}" height="80" />
                                                        @endif
                                                    </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 />
                                                    </div>
                                                </div>
                                                <div class="row mb-3 Variables" @if (!isset($carousel['cards_variables_sample'][$i])) 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 class="dynamic-inputs-container">
                                                            @if (isset($carousel['cards_variables_sample'][$i]))
                                                                @foreach ($carousel['cards_variables_sample'][$i] as $ii => $variable)
                                                                    <div class="form-group">
                                                                        <label for="variable{{$ii + 1}}">{!! '{' . '{' . ($ii + 1) . '}' . '}' !!}</label>
                                                                        <input type="text" id="card-{{$i}}variable{{$ii + 1}}" name="cards_variables_sample[{{$i}}][]" data-variable-number="{{$ii+1}}" placeholder="Type Something..." class="form-control" required="required" value="{{ $variable }}">
                                                                    </div>
                                                                @endforeach
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row button1_container" @if(empty($carousel['button1_type'])) style="display: none" @endif>
                                                    <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">
                                                            @include('web.partials.template-button', ['buttonIndex' => 1, 'cardIndex' => ($i - 1), 'carousel' => $carousel])
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row button2_container" @if(empty($carousel['button2_type'])) style="display: none" @endif>
                                                    <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">
                                                            @include('web.partials.template-button', ['buttonIndex' => 2, 'cardIndex' => ($i - 1), 'carousel' => $carousel])
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">@lang('user.create')</button>
                            </div>
                        </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>
                    @for($i=1; $i<=$carousel['cards_count']; $i++)                    
                        <div id="preview-card-{{ $i }}" class="preview-card w-100">
                            <div class="preview-media media-preview">
                                @if ($template->media_type == '1')
                                    <img src="{{ asset('assets/icons/feather/image.svg') }}" style="width: 100%;height: 100%;" />
                                @elseif ($template->media_type == '2')
                                    <img src="{{ asset('assets/icons/feather/video.svg') }}" style="width: 100%;height: 100%;" />
                                @endif
                            </div>
                            <div class="preview-text"></div>
                            <div class="preview-buttons"></div>
                        </div>
                    @endfor
                </div>
            </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%;">
                    <select class="form-select countryCode"  name="buttons[phone_number][countryCode][]">
                        <option value="">Select Country Code</option>
                        @foreach (__('countries') as $code => $country)
                            <option value="{{ $code }}">{{ $country }}</option>
                        @endforeach
                    </select>
                </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() {
            var editor;
            var editors = [];
            editor = $("#whatsapp-editor-container").whatsappEditor({
                content: `{!! nl2br($template->body) !!}`
            });

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

            // 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';
                }
            }

            // 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, '\\$&');
            }            

            var cardsBody = [`{!! nl2br(implode('`, `', $carousel['cardsBody'])) !!}`]
            $('.whatsapp-editor-container').each(function(index, element) {
                editors[index] = $(this).whatsappEditor({
                    content: cardsBody[index]
                });
            });

            updatePreviewWithVariables();
            updateCardsButtonsPreview();
            updateCardsPreviewWithVariables();
            showItem(0);
        });
    </script>
@endpush