@extends('layouts.app', ['title' => __tr('Create New Template')])
@section('content')
@include('users.partials.header', [
'title' => __tr('Create New Template'),
'description' => '',
'class' => 'col-lg-7'
])
<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 class="col-12" x-data="{
    headerType:'',
    header_text_body:'',
    footer_text_body:'',
    text_body:'',
    enableHeaderVariableExample:false,
    newBodyTextInputFields:[],
    buttonModels:{},
    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:{},
    }, 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--;
    }}">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-7">
                        <x-lw.form id="lwNewTemplateCreationForm"
                            :action="route('vendor.whatsapp_service.templates.write.create')">
                            <!-- Template Name -->
                            <x-lw.input-field type="text" id="lwTemplateNameField" data-form-group-class=""
                                :label="__tr('Template Name')" name="template_name" required="true" />
                          <script>
      document.addEventListener('DOMContentLoaded', function() {
        const templateNameField = document.getElementById('lwTemplateNameField');

        templateNameField.addEventListener('input', function() {
          let value = templateNameField.value;
          value = value.toLowerCase().replace(/\s+/g, '_');
          templateNameField.value = value;
        });
      });
    </script>
                            <!-- /Template Name -->
                            <!-- Template Language -->
                            <x-lw.input-field type="selectize" data-lw-plugin="lwSelectize" id="lwTemplateLanguageField"
                  data-form-group-class="" data-selected="" :label="__tr('Select language')" name="language_code" required="true">
    <x-slot name="selectOptions">
        <option value="en">{{ __tr('English') }}</option>
        <option value="af">{{ __tr('Afrikaans') }}</option>
        <option value="sq">{{ __tr('Albanian') }}</option>
        <option value="ar">{{ __tr('Arabic') }}</option>
        <option value="az">{{ __tr('Azerbaijani') }}</option>
        <option value="bn">{{ __tr('Bengali') }}</option>
        <option value="bg">{{ __tr('Bulgarian') }}</option>
        <option value="ca">{{ __tr('Catalan') }}</option>
        <option value="zh_CN">{{ __tr('Chinese (CHN)') }}</option>
        <option value="zh_HK">{{ __tr('Chinese (HKG)') }}</option>
        <option value="zh_TW">{{ __tr('Chinese (TAI)') }}</option>
        <option value="hr">{{ __tr('Croatian') }}</option>
        <option value="cs">{{ __tr('Czech') }}</option>
        <option value="da">{{ __tr('Danish') }}</option>
        <option value="nl">{{ __tr('Dutch') }}</option>
        <option value="en_GB">{{ __tr('English (UK)') }}</option>
        <option value="en_US">{{ __tr('English (US)') }}</option>
        <option value="et">{{ __tr('Estonian') }}</option>
        <option value="fil">{{ __tr('Filipino') }}</option>
        <option value="fi">{{ __tr('Finnish') }}</option>
        <option value="fr">{{ __tr('French') }}</option>
        <option value="ka">{{ __tr('Georgian') }}</option>
        <option value="de">{{ __tr('German') }}</option>
        <option value="el">{{ __tr('Greek') }}</option>
        <option value="gu">{{ __tr('Gujarati') }}</option>
        <option value="ha">{{ __tr('Hausa') }}</option>
        <option value="he">{{ __tr('Hebrew') }}</option>
        <option value="hi">{{ __tr('Hindi') }}</option>
        <option value="hu">{{ __tr('Hungarian') }}</option>
        <option value="id">{{ __tr('Indonesian') }}</option>
        <option value="ga">{{ __tr('Irish') }}</option>
        <option value="it">{{ __tr('Italian') }}</option>
        <option value="ja">{{ __tr('Japanese') }}</option>
        <option value="kn">{{ __tr('Kannada') }}</option>
        <option value="kk">{{ __tr('Kazakh') }}</option>
        <option value="rw_RW">{{ __tr('Kinyarwanda') }}</option>
        <option value="ko">{{ __tr('Korean') }}</option>
        <option value="ky_KG">{{ __tr('Kyrgyz (Kyrgyzstan)') }}</option>
        <option value="lo">{{ __tr('Lao') }}</option>
        <option value="lv">{{ __tr('Latvian') }}</option>
        <option value="lt">{{ __tr('Lithuanian') }}</option>
        <option value="mk">{{ __tr('Macedonian') }}</option>
        <option value="ms">{{ __tr('Malay') }}</option>
        <option value="ml">{{ __tr('Malayalam') }}</option>
        <option value="mr">{{ __tr('Marathi') }}</option>
        <option value="nb">{{ __tr('Norwegian') }}</option>
        <option value="fa">{{ __tr('Persian') }}</option>
        <option value="pl">{{ __tr('Polish') }}</option>
        <option value="pt_BR">{{ __tr('Portuguese (BR)') }}</option>
        <option value="pt_PT">{{ __tr('Portuguese (POR)') }}</option>
        <option value="pa">{{ __tr('Punjabi') }}</option>
        <option value="ro">{{ __tr('Romanian') }}</option>
        <option value="ru">{{ __tr('Russian') }}</option>
        <option value="sr">{{ __tr('Serbian') }}</option>
        <option value="sk">{{ __tr('Slovak') }}</option>
        <option value="sl">{{ __tr('Slovenian') }}</option>
        <option value="es">{{ __tr('Spanish') }}</option>
        <option value="es_AR">{{ __tr('Spanish (ARG)') }}</option>
        <option value="es_ES">{{ __tr('Spanish (SPA)') }}</option>
        <option value="es_MX">{{ __tr('Spanish (MEX)') }}</option>
        <option value="sw">{{ __tr('Swahili') }}</option>
        <option value="sv">{{ __tr('Swedish') }}</option>
        <option value="ta">{{ __tr('Tamil') }}</option>
        <option value="te">{{ __tr('Telugu') }}</option>
        <option value="th">{{ __tr('Thai') }}</option>
        <option value="tr">{{ __tr('Turkish') }}</option>
        <option value="uk">{{ __tr('Ukrainian') }}</option>
        <option value="ur">{{ __tr('Urdu') }}</option>
        <option value="uz">{{ __tr('Uzbek') }}</option>
        <option value="vi">{{ __tr('Vietnamese') }}</option>
        <option value="zu">{{ __tr('Zulu') }}</option>
       
        <!-- Add more language options as needed -->
    </x-slot>
</x-lw.input-field>
                            <!-- /Template Language -->
                            <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>
                          <span class="form-text text-muted text-xs">Marketing is used for promotions or information about your business, products or services</span>
                          <span class="form-text text-muted text-xs">Utility is used for transaction, account, order or customer request.</span>
                            <fieldset>
                                <input id="lwMediaFileName" type="hidden" value="" name="uploaded_media_file_name" />
                                <legend>{{ __tr('Header') }} <small>{{ __tr('(Optional)') }}</small></legend>
                                <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>
              
                                         <option value="text">{{ __tr('Text') }}</option>
                                      
                                       
                                            <option value="image">{{ __tr('Image') }}</option>
                                            <option value="video">{{ __tr('Video') }}</option>
                                            <option value="document">{{ __tr('Document') }}</option>
                                            <option value="location">{{ __tr('Location') }}</option>
                                        
                                    </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="