@extends('layouts.app', ['title' => __tr('Create New Template')])
@section('content')
@include('users.partials.header', [
'title' => __tr('Create New Template'),
'description' => '',
'class' => 'col-lg-7'
])
<style>
    html>body {
        padding-bottom: 20px !important;
    }
    .selectize-dropdown, .selectize-dropdown.form-control {
        height: 0px;
    }
    .selectize-dropdown-content {
        background: #fff;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: 0.25rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    .selectize-dropdown, .selectize-dropdown.form-control {
        border:0;
    }
    .card {
        backdrop-filter: none;
    }
    .card-header {
        padding: 5px 1.5rem;
    }
</style>
<div class="container-fluid mt-lg--6">
    <div class="row">
        <div class="col-12 mb-3">
            <div class="float-right">
                <a class="lw-btn btn btn-secondary" href="{{ route('vendor.whatsapp_service.templates.read.list_view') }}">{{
                    __tr('Back to Templates') }}</a>
                    <a href="https://business.facebook.com/business/help/2055875911147364" target="_blank" class="btn btn-default">{{  __tr('Help') }}</a>
            </div>
        </div>
    </div>
    <div x-ref="template-data" id="lwNewTemplateData" class="col-12 p-0 mt-4" x-data="{
    currentStep: 0,
    templateType: 'header',
    carousel_body_text: '',
    carouselBodyTextVariables: [],
    carouselTemplateContainer: [
        {
            headerType: '',
            bodyText: '',
            bodyTextVariables: [],
            cardButtons: {
                totalAllowedButtons:2,
                totalButtonsUsed:0,
                buttonUsesByTypes:{
                    QUICK_REPLY:0,
                    QUICK_REPLY_LIMIT:1,
                    URL:0,
                    URL_BUTTON_LIMIT:1,
                    PHONE_NUMBER:0,
                    PHONE_NUMBER_LIMIT:1
                },
                data:[],
                buttonModels: []
            }
        }
    ],
    totalAllowCards: 10,
    totalUsedCards: 1,

    headerType:'',
    header_text_body:'',
    footer_text_body:'',
    text_body:'',
    enableHeaderVariableExample:false,
    newBodyTextInputFields:[],
    buttonModels:{},
    templateName: '',
    error: '',
    customButtons:{
        totalAllowedButtons:10,
        totalButtonsUsed:0,
        buttonUsesByTypes:{
            URL_BUTTON:0,
            URL_BUTTON_LIMIT:2,
            COPY_CODE:0,
            COPY_CODE_LIMIT:1,
            VOICE_CALL:0,
            VOICE_CALL_LIMIT:1,
            PHONE_NUMBER:0,
            PHONE_NUMBER_LIMIT:1
        },
        totalUrlButtonUsed:0,
        data:{},
    },
    goToStep(stepIndex) {
        this.currentStep = stepIndex;
        this.updateProgress();
    },
    nextStep() {
        if (this.currentStep < 3) {
            this.currentStep++;
            this.updateProgress();
        }
    },
    prevStep() {
        if (this.currentStep > 0) {
            this.currentStep--;
            this.updateProgress();
        }
    },
    updateProgress() {
        const progress = document.getElementById('progress');
        const steps = document.querySelectorAll('.step');
        
        const progressPercent = (this.currentStep / (steps.length - 1)) * 100;
        progress.style.width = progressPercent + '%';
        
        steps.forEach((step, index) => {
            step.classList.remove('active', 'completed');
            
            if (index < this.currentStep) {
                step.classList.add('completed');
            } else if (index === this.currentStep) {
                step.classList.add('active');
            }
        });
    },
    addWhatsAppButtonOption : function(buttonType) {
        let uniqueBtnId = _.uniqueId();
        this.customButtons.data[uniqueBtnId] = {
            buttonType : buttonType,
            buttonIndex : uniqueBtnId
        };
        this.customButtons.totalButtonsUsed++;
        if((buttonType == 'URL_BUTTON') || (buttonType == 'DYNAMIC_URL_BUTTON')) {
            this.customButtons.buttonUsesByTypes['URL_BUTTON']++;
        } else if((buttonType == 'COPY_CODE')) {
            this.customButtons.buttonUsesByTypes['COPY_CODE']++;
        } else if((buttonType == 'VOICE_CALL')) {
            this.customButtons.buttonUsesByTypes['VOICE_CALL']++;
        } else if((buttonType == 'PHONE_NUMBER')) {
            this.customButtons.buttonUsesByTypes['PHONE_NUMBER']++;
        }
    }, deleteWhatsAppButtonOption : function(buttonIndex) {
        let buttonType = this.customButtons.data[buttonIndex]['buttonType'];
        if((buttonType == 'URL_BUTTON') || (buttonType == 'DYNAMIC_URL_BUTTON')) {
            this.customButtons.buttonUsesByTypes['URL_BUTTON']--;
        } else if((buttonType == 'COPY_CODE')) {
            this.customButtons.buttonUsesByTypes['COPY_CODE']-- ;
        } else if((buttonType == 'VOICE_CALL')) {
            this.customButtons.buttonUsesByTypes['VOICE_CALL']-- ;
        } else if((buttonType == 'PHONE_NUMBER')) {
            this.customButtons.buttonUsesByTypes['PHONE_NUMBER']-- ;
        }
        delete this.customButtons.data[buttonIndex];
        delete this.buttonModels[buttonIndex];
        this.customButtons.totalButtonsUsed--;
    }, sanitizeInput() {
        // Remove invalid characters on paste or fast typing
        this.templateName = this.templateName.replace(/[^a-z0-9_]/g, '');
    }, isValidKey(e) {
        const key = e.key;

        const allowedKeys = [
            'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'
        ];

        const isLetter = key >= 'a' && key <= 'z';
        const isNumber = key >= '0' && key <= '9';
        const isUnderscore = key === '_';
        const isAllowed = isLetter || isNumber || isUnderscore || allowedKeys.includes(key);

        if (!isAllowed) {
            e.preventDefault();
        }
    }, addNewCard : function() {
        this.carouselTemplateContainer.push({
            headerType: 'image',
            bodyText: '',
            bodyTextVariables: [],
            cardButtons: {
                totalAllowedButtons:2,
                totalButtonsUsed:0,
                buttonUsesByTypes:{
                    QUICK_REPLY:0,
                    QUICK_REPLY_LIMIT:1,
                    URL:0,
                    URL_BUTTON_LIMIT:1,
                    PHONE_NUMBER:0,
                    PHONE_NUMBER_LIMIT:1
                },
                totalUrlButtonUsed:0,
                data:[],
                buttonModels: []
            }
        });
        this.totalUsedCards++;

        if (this.carouselTemplateContainer.length > 1)  {
            let templateBtnData = this.carouselTemplateContainer[0]['cardButtons']['data'];
            _.forEach(this.carouselTemplateContainer, function(item, key) {
                if (key >= 1) {
                    item.cardButtons.data = templateBtnData;
                }            
            });
        }
        
        _.defer(function() {
            window.lwPluginsInit();
        });
    }, deleteCard: function(index) {
        this.carouselTemplateContainer.splice(index, 1);
        this.totalUsedCards--;
    }, loadPlugin: function() {
        window.lwPluginsInit();
    }, addNewVariable: function(targetId, templateType) {
        addNewPlaceholder(targetId, templateType);
        this.$nextTick(() => {
            this.$refs.lwCardBodyTextarea.dispatchEvent(new Event('input'));
        });
    }, addCardButtonOptions: function(index, buttonType) {
        
        let templateButtonData = {
            buttonType : buttonType,
            buttonIndex : _.uniqueId()
        };
        this.carouselTemplateContainer[index]['cardButtons']['data'].push(templateButtonData);
        let cardBtnData = this.carouselTemplateContainer[index]['cardButtons']['data'];
        
        _.forEach(this.carouselTemplateContainer, function(item, key) {
            if (key >= 1) {
                item.cardButtons.data = cardBtnData;
            }            
        });

        this.totalButtonsUsed++;
        if (_.has(this.carouselTemplateContainer[index]['cardButtons']['buttonUsesByTypes'], buttonType)) {
            this.carouselTemplateContainer[index]['cardButtons']['buttonUsesByTypes'][buttonType]++;
            this.carouselTemplateContainer[index]['cardButtons']['totalButtonsUsed']++;
        }
    }, deleteCardButtonOption: function(index, buttonIndex, buttonType) {
        this.carouselTemplateContainer[index]['cardButtons']['data'].splice(buttonIndex, 1);
        this.carouselTemplateContainer[index]['cardButtons']['buttonModels'].splice(buttonIndex, 1);
        let afterDeleteBtnData = this.carouselTemplateContainer[index]['cardButtons']['data'];
        
        _.forEach(this.carouselTemplateContainer, function(item, key) {
            if (key >= 1) {
                item.cardButtons.data = afterDeleteBtnData;
                item.cardButtons.buttonModels.splice(buttonIndex, 1);
            }            
        });
        this.carouselTemplateContainer[index]['cardButtons']['buttonUsesByTypes'][buttonType]--;
        this.carouselTemplateContainer[index]['cardButtons']['totalButtonsUsed']--;
    }, changeTemplateType: function(templateType) {
        var categorySelectizeInstance = $('#lwSelectCategoryField')[0].selectize;
        if (templateType == 'carousel') {
            this.carousel_body_text = '';
            this.carouselBodyTextVariables = [];
            this.carouselTemplateContainer = [
                {
                    headerType: 'image',
                    bodyText: '',
                    bodyTextVariables: [],
                    cardButtons: {
                        totalAllowedButtons:2,
                        totalButtonsUsed:0,
                        buttonUsesByTypes:{
                            QUICK_REPLY:0,
                            QUICK_REPLY_LIMIT:1,
                            URL:0,
                            URL_BUTTON_LIMIT:1,
                            PHONE_NUMBER:0,
                            PHONE_NUMBER_LIMIT:1
                        },
                        data:[],
                        buttonModels: []
                    }
                }
            ];
            this.totalAllowCards = 10;
            this.totalUsedCards = 1;
            this.loadPlugin();
            categorySelectizeInstance.removeOption('UTILITY');
            categorySelectizeInstance.setValue('MARKETING', true);
        } else if (templateType == 'header') {
            this.headerType = '';
            this.header_text_body = '';
            this.footer_text_body = '';
            this.text_body = '';
            this.enableHeaderVariableExample = false;
            this.newBodyTextInputFields = [];
            this.buttonModels = {};
            this.templateName =  '';
            this.error =  '';
            this.customButtons = {
                totalAllowedButtons:10,
                totalButtonsUsed:0,
                buttonUsesByTypes:{
                    URL_BUTTON:0,
                    URL_BUTTON_LIMIT:2,
                    COPY_CODE:0,
                    COPY_CODE_LIMIT:1,
                    VOICE_CALL:0,
                    VOICE_CALL_LIMIT:1,
                    PHONE_NUMBER:0,
                    PHONE_NUMBER_LIMIT:1
                },
                totalUrlButtonUsed:0,
                data:{},
            };
            
            categorySelectizeInstance.addOption({ value: 'UTILITY', text: 'UTILITY' });
            categorySelectizeInstance.refreshOptions(false);
        }
    }
    }">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-7">
                        <div class="progress-container">
                            <div class="progress" id="progress"></div>
                            <div class="step active" data-label="Details" @click="goToStep(0)">1</div>
                            <div class="step" data-label="Template Type" @click="goToStep(1)">2</div>
                            <div class="step" data-label="Body" @click="goToStep(2)">3</div>
                            {{-- <div class="step" data-label="Footer/Buttons" @click="goToStep(3)">4</div> --}}
                        </div>
                        <x-lw.form id="lwNewTemplateCreationForm" :action="route('vendor.whatsapp_service.templates.write.create')">

                            <!-- Step 1: Template Details -->
                            <div class="form-step" :class="{ 'active': currentStep === 0 }">
                                <div class="d-flex justify-content-between">
                                    <h4 class="mb-2 pt-3 fw-medium">
                                        <i class="mdi mdi-information-slab-circle fs-15  text-primary-custom mr-2"></i> 
                                        {{ __tr('Template Details') }}
                                    </h4>
                                    <span class="form-text text-muted mt-3 text-sm"><a target="_blank"
                                        href="https://developers.facebook.com/docs/whatsapp/message-templates/guidelines/">{{
                                        __tr('Template Formatting Help') }}</a></span>
                                </div>
                                <div class="row">
                                <x-lw.input-field type="text" id="lwTemplateNameField" data-form-group-class="col-md-6" 
                                    :label="__tr('Template Name')" name="template_name" x-model="templateName" required="true"
                                     @input="sanitizeInput();" @keydown="isValidKey($event)" />
                                
                                {{-- <x-lw.input-field type="text" id="lwTemplateLanguageField" data-form-group-class="col-md-6"
                                    :label="__tr('Template Language Code')" name="language_code" required="true" /> --}}
                                    
                                    <!-- Template Language -->
                                    <x-lw.input-field id="lwTemplateLanguageField" type="selectize" data-lw-plugin="lwSelectize" 
                                       data-form-group-class="col-md-6" data-selected=" " :label="__tr('Template Language Code')"  name="language_code" required>
                                       <x-slot name="selectOptions"> 
                                       @if(!__isEmpty($languages))
                                            <option value="">{{ __tr('Select Template Language ...') }}</option>
                                            @foreach($languages as $key => $language)
                                            <option value="" required> ()</option>
                                            @endforeach
                                        @endif
                                       </x-slot>
                                    </x-lw.input-field>
                                    <!-- /Template Language -->
                                    
                                </div>
                                <x-lw.input-field type="selectize" data-lw-plugin="lwSelectize" id="lwSelectCategoryField"
                                    data-form-group-class="" data-selected=" " :label="__tr('Category')" name="category">
                                    <x-slot name="selectOptions">
                                        <option value="MARKETING">{{ __tr('MARKETING') }}</option>
                                        <option value="UTILITY">{{ __tr('UTILITY') }}</option>
                                        {{-- <option value="AUTHENTICATION">{{ __tr('AUTHENTICATION') }}</option> --}}
                                    </x-slot>
                                </x-lw.input-field>
                                <div class="alert alert-second-custom my-3 d-flex">
                                    {{  __tr('While Authentication and Flow templates are supported for sending however you need to create/edit those templates on Meta.') }} 
                                    <a class="lw-btn btn btn-sm btn-primary float-right place-content-center" target="_blank" href="https://business.facebook.com/wa/manage/message-templates/?waba_id={{ getVendorSettings('whatsapp_business_account_id') }}" > {{ __tr('Manage Templates on Meta') }} <i class="mdi mdi-open-in-new fs-15 "></i></a>
                                </div>
                            </div>

                            <!-- Step 2: Header -->
                            <div class="form-step" :class="{ 'active': currentStep === 1 }">
                                <div class="d-flex justify-content-between">
                                    <h4 class="mb-2 pt-3 fw-medium">
                                        <i class="mdi mdi-information-slab-circle fs-15  text-primary-custom mr-2"></i> 
                                        {{ __tr('Template Type') }}
                                    </h4>
                                </div>
                                <!-- Select Template Type -->
                                <fieldset class="shadow-0 border-0 mt-0 p-0 my-2">
                                    <label class="form-label w-100">Select Template Type</label>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="template_type" x-model="templateType" @change="changeTemplateType(templateType)" id="lwHeaderRadio" value="header">
                                        <label class="form-check-label" for="lwHeaderRadio">{{ __tr('Header') }}</label>
                                    </div>

                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="template_type" x-model="templateType" @change="changeTemplateType(templateType)" id="lwCarouselRadio" value="carousel">
                                        <label class="form-check-label" for="lwCarouselRadio">{{ __tr('Carousel') }}</label>
                                    </div>
                                </fieldset>
                                <!-- /Select Template Type -->
                            </div>
                             <!-- Step 3: Body -->
                            <div class="form-step" :class="{ 'active': currentStep === 2 }">
                                <!-- Header Template Start from here -->
                                <div x-show="templateType == 'header'">
                                    <fieldset class="shadow-0 border-0 p-0">
                                        <input id="lwMediaFileName" type="hidden" value="" name="uploaded_media_file_name" />
                                        <h4 class="mb-2 pt-3 fw-medium"><i class="fas fa-heading text-primary-custom mr-2"></i> {{ __tr('Header Configuration') }}
                                        <small class="text-muted">({{ __tr('Optional') }})</small></h4>
                                        <x-lw.input-field x-model="headerType" type="selectize" id="lwMediaHeaderType"
                                            data-form-group-class="" data-selected=" " :label="__tr('Header Type')"
                                            name="media_header_type">
                                            <x-slot name="selectOptions">
                                                <option value="0">{{ __tr('None') }}</option>
                                                <optgroup label="{{ __tr('Text') }}">
                                                    <option value="text">{{ __tr('Text') }}</option>
                                                </optgroup>
                                                <optgroup label="{{ __tr('Media') }}">
                                                    <option value="image">{{ __tr('Image') }}</option>
                                                    <option value="video">{{ __tr('Video') }}</option>
                                                    <option value="document">{{ __tr('Document') }}</option>
                                                    <option value="location">{{ __tr('Location') }}</option>
                                                </optgroup>
                                            </x-slot>
                                        </x-lw.input-field>
                                        <div class="my-3">
                                            {{-- text --}}
                                            <div x-show="headerType == 'text'" class="form-group col-sm-12">
                                                <x-lw.input-field type="text" id="lwHeaderTextBody" data-form-group-class=""
                                                    :label="__tr('Header Text')" x-model="header_text_body" name="header_text_body" />
                                                <div class="form-group text-right">
                                                    <button :disabled="enableHeaderVariableExample" id="lwAddSinglePlaceHolder" class="btn btn-dark btn-sm" type="button">
                                                        <i class="fa fa-plus"></i> {{ __tr('Add Variable') }}</button>
                                                </div>
                                                <template x-if="enableHeaderVariableExample">
                                                    <x-lw.input-field type="text" id="lwHeaderTextBodyExample"
                                                        data-form-group-class="" :label="__tr('Header Text Variable Example')"
                                                        name="example_header_fields" />
                                                </template>
                                            </div>
                                            {{-- document --}}
                                            <div x-show="headerType == 'document'" class="form-group col-sm-12">
                                                <input id="lwDocumentMediaFilepond" type="file" data-allow-revert="true"
                                                    data-label-idle="{{ __tr('Select Document') }}" class="lw-file-uploader"
                                                    data-instant-upload="true"
                                                    data-action="