@extends('layouts.app', ['title' => __tr('Create New Template')])

@section('page-style')
<style>
/* Carousel Template Styles */
.carousel-card {
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.carousel-card:hover {
    border-color: #269C4C;
    box-shadow: 0 4px 12px rgba(38, 156, 76, 0.15);
}

.carousel-cards-container {
    max-height: 600px;
    overflow-y: auto;
}

.carousel-card-preview {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}

.carousel-cards-preview {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.carousel-cards-preview::-webkit-scrollbar {
    height: 6px;
}

.carousel-cards-preview::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.carousel-cards-preview::-webkit-scrollbar-thumb {
    background: #269C4C;
    border-radius: 3px;
}

.carousel-cards-preview::-webkit-scrollbar-thumb:hover {
    background: #1e7a3e;
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 0.2rem;
}

.modern-format-btn:hover {
    background-color: #269C4C;
    color: white;
    border-color: #269C4C;
}

.variables-container {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-top: 15px;
}

.variables-title {
    color: #269C4C;
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.modern-input-group .input-group-text {
    background-color: #269C4C;
    color: white;
    border-color: #269C4C;
}

.carousel-preview {
    max-width: 100%;
}

@media (max-width: 768px) {
    .carousel-card-preview {
        min-width: 160px;
        max-width: 160px;
    }
}
</style>
@endsection

@section('content')
@include('users.partials.header', [
'description' => '',
'class' => 'col-lg-7'
])
<div class="container-fluid mt-lg--6">
    <div class="row mt-3">
        <div class="col-12 mb-3">
            <div class="mt-5 d-flex justify-content-between align-items-center">
                <h1 class="page-title mb-0" style="color: #22A755;">
                    <i class="fas fa-clipboard-list me-2"></i>{{ __tr(' Create New Template') }}
                </h1>
                <div class="d-flex gap-2">
                    <a class="lw-btn btn btn-primary me-2" href="{{ route('vendor.whatsapp_service.templates.read.list_view') }}"><i class="fas fa-arrow-left me-2"></i>{{
                    __tr(' Back to Templates') }}</a>
                    <a href="https://business.facebook.com/business/help/2055875911147364" target="_blank" class="btn btn-modern-blue animate__animated animate__fadeIn">{{ __tr('Help') }}</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12" x-data="{
    headerType:'',
    header_text_body:'',
    footer_text_body:'',
    text_body:'',
    enableHeaderVariableExample:false,
    newBodyTextInputFields:[],
    buttonModels:{},
    carouselCards:[],
    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:{},
    },
    addCarouselCard: function() {
        if(this.carouselCards.length < 10) {
            this.carouselCards.push({
                id: _.uniqueId('card_'),
                header_type: 'image', // Default to image
                body_text: 'Card ' + (this.carouselCards.length + 1) + ' description', // Default body text for each card
                buttons: [{
                    id: _.uniqueId('btn_'),
                    type: 'URL_BUTTON',
                    text: 'Visit',
                    url: 'https://example.com'
                }], // Default URL button for carousel
                uploaded_media_file_name: ''
            });

            // Set default body text for carousel if empty
            if(!this.text_body && this.headerType === 'carousel') {
                this.text_body = 'Check out our amazing products!';
            }

            // Initialize FilePond for new card after DOM update
            this.$nextTick(() => {
                this.initializeCarouselFilePonds();
            });
        }
    },
    initializeCarouselFilePonds: function() {
        // Re-initialize FilePond for all carousel file uploaders
        setTimeout(() => {
            if (window.initUploader) {
                window.initUploader();
            }
        }, 100);
    },
    removeCarouselCard: function(cardId) {
        this.carouselCards = this.carouselCards.filter(card => card.id !== cardId);
    },
    addCarouselCardButton: function(cardId, buttonType) {
        let card = this.carouselCards.find(c => c.id === cardId);
        if(card && card.buttons.length < 1) { // Limit to 1 button per card
            // Only URL_BUTTON type is supported now
            if(buttonType === 'URL_BUTTON') {
                let buttonData = {
                    id: _.uniqueId('btn_'),
                    type: 'URL_BUTTON',
                    text: 'Visit',
                    url: 'https://example.com'
                };
                card.buttons.push(buttonData);
            }
        }
    },
    removeCarouselCardButton: function(cardId, buttonId) {
        let card = this.carouselCards.find(c => c.id === cardId);
        if(card) {
            card.buttons = card.buttons.filter(btn => btn.id !== buttonId);
        }
    },
    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 shadow-lg border-0 rounded-lg animate__animated animate__fadeIn">
            <div class="card-header bg-gradient-primary text-white py-3">
                <h4 class="mb-0"><i class="fas fa-clipboard-list me-2"></i>{{ __tr(' Template Configuration') }}</h4>
            </div>
            <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="animate__animated animate__fadeInUp"
                                class="green-shadow-input"
                                :label="__tr('Template Name') . ' <i class=\'fas fa-question-circle text-info\' data-toggle=\'tooltip\' title=\'Template names must be lowercase with underscores instead of spaces\'></i>'"
                                name="template_name"
                                required="true"
                                oninput="this.value = this.value.replace(/\s+/g, '_').toLowerCase();" />
                            <span class="form-text text-muted mt-3 text-sm animate__animated animate__fadeIn animate__delay-1s">
                                <a class="alert alert-blue" target="_blank" href="https://developers.facebook.com/docs/whatsapp/message-templates/guidelines/">
                                    <i class="fas fa-lightbulb me-2 text-warning"></i>{{ __tr(' Template Formatting Help') }}
                                </a>
                            </span>
                            <!-- /Template Name -->
                            <!-- Template Language -->
                            <x-lw.input-field type="selectize" data-lw-plugin="lwSelectize" id="lwTemplateLanguageField"
                                data-form-group-class="animate__animated animate__fadeInUp animate__delay-1s" :label="__tr('Template Language Code')" name="language_code" required="true">
                                <x-slot name="selectOptions">
                                    <option value="af">Afrikaans</option>
                                    <option value="sq">Albanian</option>
                                    <option value="ar">Arabic</option>
                                    <option value="ar_EG">Arabic (EGY)</option>
                                    <option value="ar_AE">Arabic (UAE)</option>
                                    <option value="ar_LB">Arabic (LBN)</option>
                                    <option value="ar_MA">Arabic (MAR)</option>
                                    <option value="ar_QA">Arabic (QAT)</option>
                                    <option value="az">Azerbaijani</option>
                                    <option value="be_BY">Belarusian</option>
                                    <option value="bn">Bengali</option>
                                    <option value="bn_IN">Bengali (IND)</option>
                                    <option value="bg">Bulgarian</option>
                                    <option value="ca">Catalan</option>
                                    <option value="zh_CN">Chinese (CHN)</option>
                                    <option value="zh_HK">Chinese (HKG)</option>
                                    <option value="zh_TW">Chinese (TAI)</option>
                                    <option value="hr">Croatian</option>
                                    <option value="cs">Czech</option>
                                    <option value="da">Danish</option>
                                    <option value="prs_AF">Dari</option>
                                    <option value="nl">Dutch</option>
                                    <option value="nl_BE">Dutch (BEL)</option>
                                    <option value="en" selected>English</option>
                                    <option value="en_GB">English (UK)</option>
                                    <option value="en_US">English (US)</option>
                                    <option value="en_AE">English (UAE)</option>
                                    <option value="en_AU">English (AUS)</option>
                                    <option value="en_CA">English (CAN)</option>
                                    <option value="en_GHA">English (GHA)</option>
                                    <option value="en_IE">English (IRL)</option>
                                    <option value="en_IN">English (IND)</option>
                                    <option value="en_JM">English (JAM)</option>
                                    <option value="en_MY">English (MYS)</option>
                                    <option value="en_NZ">English (NZL)</option>
                                    <option value="en_QA">English (QAT)</option>
                                    <option value="en_SGP">English (SGP)</option>
                                    <option value="en_UG">English (UGA)</option>
                                    <option value="en_ZA">English (ZAF)</option>
                                    <option value="et">Estonian</option>
                                    <option value="fil">Filipino</option>
                                    <option value="fi">Finnish</option>
                                    <option value="fr">French</option>
                                    <option value="fr_BE">French (BEL)</option>
                                    <option value="fr_CA">French (CAN)</option>
                                    <option value="fr_CH">French (CHE)</option>
                                    <option value="fr_CI">French (CIV)</option>
                                    <option value="fr_MA">French (MAR)</option>
                                    <option value="ka">Georgian</option>
                                    <option value="de">German</option>
                                    <option value="de_AT">German (AUT)</option>
                                    <option value="de_CH">German (CHE)</option>
                                    <option value="el">Greek</option>
                                    <option value="gu">Gujarati</option>
                                    <option value="ha">Hausa</option>
                                    <option value="he">Hebrew</option>
                                    <option value="hi">Hindi</option>
                                    <option value="hu">Hungarian</option>
                                    <option value="id">Indonesian</option>
                                    <option value="ga">Irish</option>
                                    <option value="it">Italian</option>
                                    <option value="ja">Japanese</option>
                                    <option value="kn">Kannada</option>
                                    <option value="kk">Kazakh</option>
                                    <option value="rw_RW">Kinyarwanda</option>
                                    <option value="ko">Korean</option>
                                    <option value="ky_KG">Kyrgyz (Kyrgyzstan)</option>
                                    <option value="lo">Lao</option>
                                    <option value="lv">Latvian</option>
                                    <option value="lt">Lithuanian</option>
                                    <option value="mk">Macedonian</option>
                                    <option value="ms">Malay</option>
                                    <option value="ml">Malayalam</option>
                                    <option value="mr">Marathi</option>
                                    <option value="nb">Norwegian</option>
                                    <option value="ps_AF">Pashto</option>
                                    <option value="fa">Persian</option>
                                    <option value="pl">Polish</option>
                                    <option value="pt_BR">Portuguese (BR)</option>
                                    <option value="pt_PT">Portuguese (POR)</option>
                                    <option value="pa">Punjabi</option>
                                    <option value="ro">Romanian</option>
                                    <option value="ru">Russian</option>
                                    <option value="sr">Serbian</option>
                                    <option value="si_LK">Sinhala</option>
                                    <option value="sk">Slovak</option>
                                    <option value="sl">Slovenian</option>
                                    <option value="es">Spanish</option>
                                    <option value="es_AR">Spanish (ARG)</option>
                                    <option value="es_CL">Spanish (CHL)</option>
                                    <option value="es_CO">Spanish (COL)</option>
                                    <option value="es_CR">Spanish (CRI)</option>
                                    <option value="es_DO">Spanish (DOM)</option>
                                    <option value="es_EC">Spanish (ECU)</option>
                                    <option value="es_HN">Spanish (HND)</option>
                                    <option value="es_MX">Spanish (MEX)</option>
                                    <option value="es_PA">Spanish (PAN)</option>
                                    <option value="es_PE">Spanish (PER)</option>
                                    <option value="es_ES">Spanish (SPA)</option>
                                    <option value="es_UY">Spanish (URY)</option>
                                    <option value="sw">Swahili</option>
                                    <option value="sv">Swedish</option>
                                    <option value="ta">Tamil</option>
                                    <option value="te">Telugu</option>
                                    <option value="th">Thai</option>
                                    <option value="tr">Turkish</option>
                                    <option value="uk">Ukrainian</option>
                                    <option value="ur">Urdu</option>
                                    <option value="uz">Uzbek</option>
                                    <option value="vi">Vietnamese</option>
                                    <option value="zu">Zulu</option>
                                </x-slot>
                            </x-lw.input-field>
                            <div class="alert alert-blue my-3 animate__animated animate__fadeIn animate__delay-2s"
                                style="background-color: #269C4C; color: white;">
                                {{ __tr('While Authentication and Flow templates are supported for sending however you need to create/edit those templates on Meta.') }}
                                <a class="btn btn-sm float-right animate__animated animate__pulse animate__infinite animate__slower hover-effect"
                                    style="background-color: #103529; color: white; transition: all 0.3s ease;"
                                    target="_blank"
                                    href="https://business.facebook.com/wa/manage/message-templates/?waba_id={{ getVendorSettings('whatsapp_business_account_id') }}">
                                    <i class="fas fa-external-link-alt me-1"></i>{{ __tr(' Manage on Meta') }}
                                </a>
                            </div>
                            <!-- /Template Language -->
                            <x-lw.input-field type="selectize" data-lw-plugin="lwSelectize" id="lwSelectCategoryField"
                                data-form-group-class="animate__animated animate__fadeInUp animate__delay-2s" 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>
                            <fieldset class="modern-fieldset animate__animated animate__fadeIn animate__delay-3s"
                                style="background: #fff; padding: 20px; border-radius: 10px; border: 1px solid #ddd;">

                                <input id="lwMediaFileName" type="hidden" value="" name="uploaded_media_file_name" />

                                <legend class="modern-legend" style="color: #269C4C;">
                                    {{ __tr('Header') }} <small>{{ __tr('(Optional)') }}</small>
                                </legend>

                                <x-lw.input-field x-model="headerType" type="selectize" id="lwMediaHeaderType"
                                    data-form-group-class="animate__animated animate__fadeInUp"
                                    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>
                                        <optgroup label="{{ __tr('Interactive') }}">
                                            <option value="carousel">{{ __tr('Media Card Carousel') }}</option>
                                        </optgroup>
                                    </x-slot>
                                </x-lw.input-field>

                                <div class="my-3">
                                    {{-- text --}}
                                    <div x-show="headerType == 'text'" class="form-group col-sm-12 animate__animated"
                                        :class="headerType == 'text' ? 'animate__fadeIn' : ''">
                                        <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"
                                            style="box-shadow: 0 0 6px rgba(38, 156, 76, 0.3); transition: box-shadow 0.4s ease;"
                                            onfocus="this.style.boxShadow='0 0 10px 2px rgba(38,156,76,0.6)'"
                                            onblur="this.style.boxShadow='0 0 6px rgba(38,156,76,0.3)'" />
                                        <div class="form-group text-right">
                                            <button :disabled="enableHeaderVariableExample" id="lwAddSinglePlaceHolder"
                                                class="btn btn-primary btn-sm modern-btn" 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="animate__animated animate__fadeIn"
                                                :label="__tr('Header Text Variable Example')" name="example_header_fields"
                                                style="box-shadow: 0 0 6px rgba(38, 156, 76, 0.3); transition: box-shadow 0.4s ease;"
                                                onfocus="this.style.boxShadow='0 0 10px 2px rgba(38,156,76,0.6)'"
                                                onblur="this.style.boxShadow='0 0 6px rgba(38,156,76,0.3)'" />
                                        </template>
                                    </div>

                                    {{-- document --}}
                                    <div x-show="headerType == 'document'" class="form-group col-sm-12 animate__animated"
                                        :class="headerType == 'document' ? 'animate__fadeIn' : ''">
                                        <input id="lwDocumentMediaFilepond" type="file" data-allow-revert="true"
                                            data-label-idle="{{ __tr('Select Document') }}"
                                            class="lw-file-uploader modern-file-uploader"
                                            data-instant-upload="true"
                                            data-action="