@extends('layouts.app', ['title' => __tr('Create New Template')])
@section('content')
@include('users.partials.header', [
'title' => __tr('Create New Carousel Template'),
'description' => '',
'class' => 'col-lg-7'
])
<div class="container-fluid container-fluid-padding p-1">
    <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>
    <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="col-12 p-0" x-data="{
    currentStep: 0,
    headerType:'',
    header_text_body:'',
    footer_text_body:'',
    text_body:'',
    enableHeaderVariableExample:false,
    newBodyTextInputFields:[],
    buttonModels:{},
    cards: [],
    maxCards: 10,
    cardIdCounter: 0,
    addCard() {
        if (this.cards.length >= this.maxCards) {
            alert('{{ __tr("Maximum of 10 cards allowed in a carousel template") }}');
            return;
        }
        
        const cardId = this.cardIdCounter++;
        const newCard = {
            id: cardId,
            mediaType: 'image',
            image: '',
            imagePreview: '',
            video: '',
            videoPreview: '',
            body: '',
            bodyVariables: [],
            bodyVariableSamples: [],
            buttonModels: {},
            customButtons: {
                totalAllowedButtons: 2,
                totalButtonsUsed: 0,
                buttonUsesByTypes: {
                    URL_BUTTON: 0,
                    URL_BUTTON_LIMIT: 1,
                    QUICK_REPLY: 0,
                    QUICK_REPLY_LIMIT: 1,
                    PHONE_NUMBER: 0,
                    PHONE_NUMBER_LIMIT: 1
                },
                data: {}
            }
        };
        
        // Use spread operator to ensure reactivity
        this.cards = [...this.cards, newCard];
    },
    removeCard(index) {
        // Use spread operator to ensure reactivity
        this.cards = this.cards.filter((_, i) => i !== index);
    },
    addButton(cardIndex) {
        this.cards[cardIndex].buttons.push({ text: '', type: 'url', value: '' });
    },
    removeButton(cardIndex, btnIndex) {
        this.cards[cardIndex].buttons.splice(btnIndex, 1);
    },
    serializeCards() {
        return JSON.stringify(this.cards);
    },
    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');
            }
        });
    },
    allCardsSameMediaType() {
        if (this.cards.length === 0) return true;
        const type = this.cards[0].mediaType;
        return this.cards.every(card => card.mediaType === type);
    },
    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--;
    },
    addCardButton(cardIndex, buttonType) {
        let uniqueBtnId = _.uniqueId();
        let card = this.cards[cardIndex];
        card.customButtons.data[uniqueBtnId] = {
            buttonType: buttonType,
            buttonIndex: uniqueBtnId
        };
        card.buttonModels[uniqueBtnId] = '';
        if (buttonType === 'URL_BUTTON') {
            card.buttonModels[uniqueBtnId + '_url'] = '';
        }
        if (buttonType === 'PHONE_NUMBER') {
            card.buttonModels[uniqueBtnId + '_phone'] = '';
        }
        card.customButtons.totalButtonsUsed++;
        if(buttonType === 'URL_BUTTON') {
            card.customButtons.buttonUsesByTypes.URL_BUTTON++;
        } else if(buttonType === 'QUICK_REPLY') {
            card.customButtons.buttonUsesByTypes.QUICK_REPLY++;
        } else if(buttonType === 'PHONE_NUMBER') {
            card.customButtons.buttonUsesByTypes.PHONE_NUMBER++;
        }
    },
    deleteCardButton(cardIndex, buttonIndex) {
        let card = this.cards[cardIndex];
        let buttonType = card.customButtons.data[buttonIndex].buttonType;
        if(buttonType === 'URL_BUTTON') {
            card.customButtons.buttonUsesByTypes.URL_BUTTON--;
        } else if(buttonType === 'QUICK_REPLY') {
            card.customButtons.buttonUsesByTypes.QUICK_REPLY--;
        } else if(buttonType === 'PHONE_NUMBER') {
            card.customButtons.buttonUsesByTypes.PHONE_NUMBER--;
        }
        delete card.customButtons.data[buttonIndex];
        delete card.buttonModels[buttonIndex];
        delete card.buttonModels[buttonIndex + '_url'];
        delete card.buttonModels[buttonIndex + '_phone'];
        card.customButtons.totalButtonsUsed--;
    }}">
        <div class="card">
            <div class="card-body" style="overflow: auto;">
                <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="Body" @click="goToStep(1)">2</div>
                            <div class="step" data-label="Cards" @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_carousel')">

                            <!-- 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" required="true" />
                                
                                
                                {{-- <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" /> --}}

                                <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>
                                </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 }">
                                <h4 class="mb-2 pt-3 fw-medium"><i class="fas fa-align-left text-primary-custom mr-2"></i> {{ __tr('Message Body') }}</h4>
                                
                                <div class="form-group">
                                    <label for="lwTemplateBody">{{ __tr('Body Text') }} <span class="text-danger">*</span></label>
                                    <textarea name="template_body" id="lwTemplateBody" class="form-control" x-model="text_body" rows="10" required></textarea>
                                    <small class="form-text text-muted">{{ __tr('This is the main message body shown above the carousel cards. Supports variables.') }}</small>
                                </div>
                                
                                <div class="form-group text-right">
                                    <button id="lwBoldBtn" class="btn btn-light btn-sm" type="button"> <i
                                            class="fa fa-bold"></i></button>
                                    <button id="lwItalicBtn" class="btn btn-light btn-sm" type="button"> <i
                                            class="fa fa-italic"></i></button>
                                    <button id="lwStrikeThroughBtn" class="btn btn-light btn-sm" type="button"> <i
                                            class="fa fa-strikethrough"></i></button>
                                    <button id="lwCodeBtn" class="btn btn-light btn-sm" type="button"> <i
                                            class="fa fa-code"></i></button>
                                    <button id="lwAddPlaceHolder" class="btn btn-dark btn-sm" type="button"> <i
                                            class="mdi mdi-plus fs-15 "></i> {{ __tr('Add Variables') }}</button>
                                </div>
                                <div>
                                    <template x-if="_.size(newBodyTextInputFields)">
                                        <div>
                                            <h4>{{ __tr('Samples Text') }}</h4>
                                            <template x-for="(item, index) in newBodyTextInputFields" :key="index">
                                                <div class="form-group">
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">
                                                                <span x-text="item.text_variable"></span>
                                                            </span>
                                                        </div>
                                                        <input type="text" class="form-control"
                                                            x-bind:name="'example_body_fields[' + index + ']'"
                                                            required="required" />
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </template>
                                </div>
                            </div>

                           <!-- Step 3: Cards -->
                            <div class="form-step" :class="{ 'active': currentStep === 2 }">
                                <h4 class="mb-2 pt-3 fw-medium"><i class="fas fa-align-left text-primary-custom mr-2"></i> {{ __tr('Carousel Cards') }}
                                    <small class="text-muted">(<span x-text="cards.length"></span>/10)</small>
                                </h4>
                                <div class="mb-3">
                                    <div class="alert alert-second-custom my-1" role="alert">
                                        <i class="mdi mdi-information-slab-circle fs-15 "></i> {{ __tr('You can add up to 10 cards in a carousel template') }}
                                    </div>
                                </div>
                                <template x-for="(card, cardIndex) in cards" :key="card.id">
                                    <div class="card border mb-4">
                                        <div class="card-header d-flex justify-content-between align-items-center bg-light-custom">
                                            <h5 class="mb-0 fw-black fw-semibold">{{ __tr('Card') }} <span x-text="cardIndex + 1"></span></h5>
                                            <button type="button" class="btn btn-danger btn-sm mb-0"
                                              @click="showConfirmation('{{ __tr('Are you sure you want to delete this card?') }}', function() { removeCard(cardIndex) })">
                                                <i class="mdi mdi-trash-can fs-15 "></i>
                                            </button>
                                        </div>
                                        <div class="card-body py-2">
                                            <div class="form-group mb-2"
                                                x-data="{
                                                    formatText(type) {
                                                        const textarea = this.$refs.cardBody;
                                                        const start = textarea.selectionStart;
                                                        const end = textarea.selectionEnd;
                                                        let selected = textarea.value.substring(start, end);
                                                        let before = textarea.value.substring(0, start);
                                                        let after = textarea.value.substring(end);
                                                        let wrap;
                                                        if (type === 'bold') wrap = '*';
                                                        if (type === 'italic') wrap = '_';
                                                        if (type === 'strike') wrap = '~';
                                                        if (type === 'code') wrap = '`';
                                                        if (selected.length) {
                                                            textarea.value = before + wrap + selected + wrap + after;
                                                            this.card.body = textarea.value;
                                                        } else {
                                                            textarea.value = before + wrap + wrap + after;
                                                            this.card.body = textarea.value;
                                                            textarea.selectionStart = textarea.selectionEnd = start + wrap.length;
                                                        }
                                                        textarea.dispatchEvent(new Event('input'));
                                                        textarea.focus();
                                                    }
                                                }">
                                                <label>{{ __tr('Card Body') }}</label>
                                                {{-- <textarea class="form-control" rows="3" x-model="card.body" 
                                                :name="'cards[' + cardIndex + '][body]'" placeholder="{{ __tr('Card Body') }}"></textarea> --}}
                                                 <textarea class="form-control" rows="3"
                                                 x-model="card.body" :name="'cards[' + cardIndex + '][body]'" 
                                                 placeholder="{{ __tr('Card Body') }}" x-ref="cardBody" maxlength="160" required></textarea>
                                                 <div class="text-right text-muted small">
                                                    <span x-text="card.body.length"></span>/160
                                                </div>
                                            <div class="mt-2 text-right">
                                                 <button id="lwBoldBtn" class="btn btn-light btn-sm" @click="formatText('bold')" type="button"> <i
                                                        class="fa fa-bold"></i></button>
                                                <button id="lwItalicBtn" class="btn btn-light btn-sm" @click="formatText('italic')" type="button"> <i
                                                        class="fa fa-italic"></i></button>
                                                <button id="lwStrikeThroughBtn" class="btn btn-light btn-sm" @click="formatText('strike')" type="button"> <i
                                                        class="fa fa-strikethrough"></i></button>
                                                <button id="lwCodeBtn" class="btn btn-light btn-sm" @click="formatText('code')" type="button"> <i
                                                        class="fa fa-code"></i></button>
                                                <button type="button" class="btn btn-dark btn-sm"
                                                    @click="
                                                        let idx = card.bodyVariables.length + 1;
                                                        let variable = `@{{${idx}}}`;
                                                        card.body += ' ' + variable;
                                                        card.bodyVariables.push({ text_variable: variable });
                                                        card.bodyVariableSamples.push('');
                                                    ">
                                                    <i class="mdi mdi-plus fs-15 "></i> {{ __tr('Add Variable') }}
                                                </button>
                                            </div>
                                            <template x-if="card.bodyVariables.length">
                                                <div class="mt-2">
                                                    <h5>{{ __tr('Sample Values') }}</h5>
                                                    <template x-for="(varObj, varIdx) in card.bodyVariables" :key="varIdx">
                                                        <div class="input-group mb-1">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <span x-text="varObj.text_variable"></span>
                                                                </span>
                                                            </div>
                                                            <input type="text" class="form-control"
                                                                :name="'cards[' + cardIndex + '][body_variable_samples][' + varIdx + ']'"
                                                                x-model="card.bodyVariableSamples[varIdx]"
                                                                required>
                                                        </div>
                                                    </template>
                                                </div>
                                            </template>
                                            </div>
                                            <div class="form-group mb-2">
                                                <label>{{ __tr('Media Type') }}</label>
                                                <select class="form-control" x-model="card.mediaType">
                                                    <option value="image">{{ __tr('Image') }}</option>
                                                    <option value="video">{{ __tr('Video') }}</option>
                                                </select>
                                            </div>
                                            <div class="form-group mb-2" x-show="card.mediaType === 'image'">
                                                <label>{{ __tr('Image') }}</label>
                                                {{-- <input type="file" accept="image/*" @change="handleCardImageUpload($event, cardIndex, 'image')"> --}}
                                                <input
                                                    type="file"
                                                    :id="'lwImageMediaFilepond_' + card.id"
                                                    class="lw-file-uploader"
                                                    accept="image/*"
                                                    :data-action="'{{ route('media.upload_temp_media', 'whatsapp_image') }}'"
                                                    x-init="
                                                        FilePond.create($el, {
                                                            server: {
                                                                process: {
                                                                    url: $el.getAttribute('data-action'),
                                                                    method: 'POST',
                                                                    headers: {
                                                                        'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').getAttribute('content')
                                                                    },
                                                                    onload: (response) => {
                                                                        const data = JSON.parse(response);
                                                                        if (data.data && data.data.path) {
                                                                            // Extract file name from path
                                                                            const fileName = data.data.path.split('/').pop();
                                                                            card.image = fileName;
                                                                            card.imagePreview = data.data.path; // For preview, keep full path
                                                                            cards = [...cards];
                                                                        }
                                                                        return data.data && data.data.path ? data.data.path : '';
                                                                    }
                                                                }
                                                            },
                                                            allowRevert: true,
                                                            instantUpload: true,
                                                            allowImagePreview: false,
                                                            labelIdle: '{{ __tr('Select Image') }}'
                                                        })
                                                    "
                                                />
                                                    <input type="hidden" :name="'cards[' + cardIndex + '][image]'" x-model="card.image">
                                                {{-- <div x-show="card.imagePreview" class="mt-2">
                                                    <img :src="card.imagePreview" style="max-width: 200px; max-height: 150px; object-fit: contain;">
                                                </div> --}}
                                                <template x-if="!card.image">
                                                    <div class="text-danger mt-1">{{ __tr('Image is required for this card.') }}</div>
                                                </template>
                                            </div>
                                            <div class="form-group mb-2" x-show="card.mediaType === 'video'">
                                                <label>{{ __tr('Video') }}</label>
                                                {{-- <input type="file" accept="video/*" @change="handleCardImageUpload($event, cardIndex, 'video')"> --}}
                                                <input
                                                    type="file"
                                                    :id="'lwVideoMediaFilepond_' + card.id"
                                                    class="lw-file-uploader"
                                                    accept="video/*"
                                                    :data-action="'{{ route('media.upload_temp_media', 'whatsapp_video') }}'"
                                                    x-init="
                                                        FilePond.create($el, {
                                                            server: {
                                                                process: {
                                                                    url: $el.getAttribute('data-action'),
                                                                    method: 'POST',
                                                                    headers: {
                                                                        'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').getAttribute('content')
                                                                    },
                                                                    onload: (response) => {
                                                                        const data = JSON.parse(response);
                                                                        if (data.data && data.data.path) {
                                                                            // Extract file name from path
                                                                            const fileName = data.data.path.split('/').pop();
                                                                            card.video = fileName;
                                                                            card.videoPreview = data.data.path; // For preview, keep full path
                                                                            cards = [...cards];
                                                                        }
                                                                        return data.data && data.data.path ? data.data.path : '';
                                                                    }
                                                                }
                                                            },
                                                            allowRevert: true,
                                                            instantUpload: true,
                                                            allowVideoPreview: false, // <-- disables video preview
                                                            labelIdle: '{{ __tr('Select Video') }}'
                                                        })
                                                    "
                                                />
                                                    <input type="hidden" :name="'cards[' + cardIndex + '][video]'" x-model="card.video">
                                                {{-- <div x-show="card.videoPreview" class="mt-2">
                                                    <video :src="card.videoPreview" style="max-width: 200px; max-height: 150px;" controls></video>
                                                </div> --}}
                                                <template x-if="!card.video">
                                                    <div class="text-danger mt-1">{{ __tr('Video is required for this card.') }}</div>
                                                </template>
                                            </div>
                                            <div class="form-group mb-2">
                                                <label>{{ __tr('Buttons') }}</label>
                                                <div class="lw-buttons-container">
                                                    <div>
                                                        <template x-for="(customButtonData, btnIndex) in card.customButtons.data" :key="btnIndex">
                                                            <div class="card shadow-none mb-2">
                                                                <h3 class="card-header">
                                                                    <template x-if="customButtonData.buttonType == 'QUICK_REPLY'">
                                                                        <span>{{ __tr('Quick Reply Button') }}</span>
                                                                    </template>
                                                                    <template x-if="customButtonData.buttonType == 'PHONE_NUMBER'">
                                                                        <span>{{ __tr('Phone Number Button') }}</span>
                                                                    </template>
                                                                    <template x-if="customButtonData.buttonType == 'URL_BUTTON'">
                                                                        <span>{{ __tr('URL Button') }}</span>
                                                                    </template>
                                                                    <button
                                                                        @click.prevent="deleteCardButton(cardIndex, customButtonData.buttonIndex)"
                                                                        class="btn btn-link float-right p-1" type="button"><i class="mdi mdi-close-thick fs-15  text-danger"></i></button>
                                                                </h3>
                                                                <div class="card-body">
                                                                    <input type="hidden"
                                                                        :name="'cards['+cardIndex+'][buttons]['+customButtonData.buttonIndex+'][type]'"
                                                                        :value="customButtonData.buttonType">
                                                                    <div class="form-group mt-0">
                                                                        <label>{{ __tr('Button Text') }}</label>
                                                                        <input
                                                                            type="text"
                                                                            class="form-control"
                                                                            :id="'card-btn-' + cardIndex + '-' + customButtonData.buttonIndex"
                                                                            x-model="card.buttonModels[customButtonData.buttonIndex]"
                                                                            :name="'cards['+cardIndex+'][buttons]['+customButtonData.buttonIndex+'][text]'"
                                                                        >
                                                                    </div>
                                                                    <div class="form-group mt-0" x-show="customButtonData.buttonType == 'URL_BUTTON'">
                                                                        <label>{{ __tr('Website URL') }}</label>
                                                                        <input
                                                                            type="url"
                                                                            class="form-control"
                                                                            :id="'card-btn-url-' + cardIndex + '-' + customButtonData.buttonIndex"
                                                                            x-model="card.buttonModels[customButtonData.buttonIndex + '_url']"
                                                                            :name="'cards['+cardIndex+'][buttons]['+customButtonData.buttonIndex+'][url]'"
                                                                        >
                                                                    </div>
                                                                    <div class="form-group" x-show="customButtonData.buttonType == 'PHONE_NUMBER'">
                                                                        <label>{{ __tr('Phone Number') }}</label>
                                                                        <input
                                                                            type="number"
                                                                            class="form-control"
                                                                            :id="'card-btn-phone-' + cardIndex + '-' + customButtonData.buttonIndex"
                                                                            x-model="card.buttonModels[customButtonData.buttonIndex + '_phone']"
                                                                            :name="'cards['+cardIndex+'][buttons]['+customButtonData.buttonIndex+'][phone_number]'"
                                                                        >
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </template>
                                                    </div>
                                                    <div class="mt-2">
                                                        <button
                                                            :disabled="card.customButtons.totalButtonsUsed >= card.customButtons.totalAllowedButtons"
                                                            class="btn btn-dark btn-sm" type="button"
                                                            @click.prevent="addCardButton(cardIndex, 'QUICK_REPLY')"><i class="mdi mdi-reply fs-15 "></i> {{ __tr('Quick Reply Button') }}</button>
                                                        <button
                                                            :disabled="(card.customButtons.totalButtonsUsed >= card.customButtons.totalAllowedButtons) || (card.customButtons.buttonUsesByTypes.PHONE_NUMBER >= card.customButtons.buttonUsesByTypes.PHONE_NUMBER_LIMIT)"
                                                            class="btn btn-dark btn-sm" type="button"
                                                            @click.prevent="addCardButton(cardIndex, 'PHONE_NUMBER')"><i class="mdi mdi-phone fs-15 "></i> {{ __tr('Phone Number Button') }}</button>
                                                        <button
                                                            :disabled="(card.customButtons.totalButtonsUsed >= card.customButtons.totalAllowedButtons) || (card.customButtons.buttonUsesByTypes.URL_BUTTON >= card.customButtons.buttonUsesByTypes.URL_BUTTON_LIMIT)"
                                                            class="btn btn-dark btn-sm" type="button"
                                                            @click.prevent="addCardButton(cardIndex, 'URL_BUTTON')"> <i class="mdi mdi-link-variant fs-15 "></i> {{ __tr('URL Button') }}</button>
                                                        <template x-if="card.customButtons.totalButtonsUsed >= card.customButtons.totalAllowedButtons">
                                                            <div class="alert alert-danger mt-4">
                                                                {{ __tr('You have reached maximum buttons allowed by Meta for template') }}
                                                            </div>
                                                        </template>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <div>
                                        <button type="button" class="btn btn-dark" @click="addCard" x-bind:disabled="cards.length >= 10">
                                            <i class="mdi mdi-plus fs-15 "></i> {{ __tr('Add Card') }}
                                            <span x-show="cards.length >= 10" class="text-warning ml-2">({{ __tr('Maximum limit reached') }})</span>
                                        </button>
                                    </div>
                                <input type="hidden" name="cards_json" :value="serializeCards()">
                                {{-- <div class="form-group">
                                    <button type="submit" class="btn btn-primary">{{ __tr('Submit') }}</button>
                                </div> --}}
                            {{-- <div class="form-group">
                                <button
                                    type="submit"
                                    class="btn btn-primary"
                                    :disabled="cards.length < 2 || cards.some(card => !card.mediaType || (card.mediaType === 'image' && !card.image) || (card.mediaType === 'video' && !card.video))"
                                    :title="cards.length < 2 ? '{{ __tr('At least 2 cards are required in a carousel template.') }}' :
                                        (cards.some(card => !card.mediaType) ? '{{ __tr('Media type is required for each card.') }}' :
                                        (cards.some(card => (card.mediaType === 'image' && !card.image) || (card.mediaType === 'video' && !card.video)) ? '{{ __tr('Media file is required for each card.') }}' : ''))"
                                >{{ __tr('Submit') }}</button>
                                <template x-if="cards.some(card => (card.mediaType === 'image' && !card.image) || (card.mediaType === 'video' && !card.video))">
                                    <div class="text-danger mt-2">
                                        {{ __tr('Media file is required for each card.') }}
                                    </div>
                                </template>
                                <template x-if="cards.length < 2">
                                    <div class="text-danger mt-2">
                                        {{ __tr('At least 2 cards are required in a carousel template.') }}
                                    </div>
                                </template>
                            </div> --}}
                            </div>     
                            <!-- Step Navigation -->
                            <div class="step-navigation">
                                <button type="button" class="btn-step btn-prev" 
                                    :disabled="currentStep === 0" 
                                    @click="prevStep()">
                                    <i class="mdi mdi-arrow-left-thick fs-15 "></i> {{ __tr('Previous') }}
                                </button>
                                
                                <button type="button" class="btn-step btn-next" 
                                    x-show="currentStep < 2"
                                    @click="nextStep()">
                                    {{ __tr('Next') }} <i class="mdi mdi-arrow-right-thick fs-15 "></i>
                                </button>
                                
                                <button type="submit" class="btn btn-sm btn-primary" 
                                    x-show="currentStep === 2">
                                    <i class="mdi mdi-content-save fs-15 "></i> {{ __tr('Create Carousel Template') }}
                                </button>
                            </div>                       
                        </x-lw.form>
                    </div>
                    <div class="col-md-1"></div>
                    <div class="col-md-4">
                        <div class="lw-whatsapp-template-create-preview">
                            <h3>{{  __tr('Template Preview') }}</h3>
                            <div class="lw-whatsapp-preview-container">
                                <img class="lw-whatsapp-preview-bg" src="{{ asset('imgs/wa-message-bg.png') }}" alt="">
                                <div class="lw-whatsapp-preview">
                                    <div class="card">
                                        <div class="lw-whatsapp-body lw-ws-pre-line" x-text="text_body" x-html="appFuncs.formatWhatsAppText(text_body)"></div>
                                        <template x-if="cards.length">
                                            <div class="d-flex overflow-auto mt-3 gap-3">
                                                <template x-for="card in cards" :key="card.id">
                                                    <div class="card border" style="min-width: 250px; max-width: 250px; flex-shrink: 0;">
                                                        <img x-show="card.mediaType === 'image' && card.imagePreview" 
                                                             :src="card.imagePreview" 
                                                             class="card-img-top" 
                                                             style="height: 150px; object-fit: cover;">
                                                        <video x-show="card.mediaType === 'video' && card.videoPreview" 
                                                               :src="card.videoPreview" 
                                                               class="card-img-top" 
                                                               style="height: 150px; object-fit: cover;" 
                                                               controls></video>
                                                        <div class="card-body p-2">
                                                             <!-- <div class="mb-2" x-text="card.body"></div> -->
                                                            <div class="mb-2" x-html="window.markdownToHtml(card.body)"></div>
                                                            <div>
                                                            <template x-if="card.customButtons && Object.keys(card.customButtons.data).length">
                                                                <div class="list-group list-group-flush lw-whatsapp-buttons">
                                                                    <template x-for="customButtonData in Object.values(card.customButtons.data)" 
                                                                    :key="customButtonData.buttonIndex">
                                                                        <div class="list-group-item d-flex align-items-center justify-content-center">
                                                                            <template x-if="customButtonData.buttonType == 'QUICK_REPLY'">
                                                                                <i class="mdi mdi-reply fs-15  mr-2"></i>
                                                                            </template>
                                                                            <template x-if="customButtonData.buttonType == 'PHONE_NUMBER' || customButtonData.buttonType == 'VOICE_CALL'">
                                                                                <i class="mdi mdi-phone fs-15  mr-2"></i>
                                                                            </template>
                                                                            <template x-if="customButtonData.buttonType == 'URL_BUTTON' || customButtonData.buttonType == 'URL'">
                                                                                <i class="mdi mdi-open-in-new fs-15  mr-2"></i>
                                                                            </template>
                                                                            <span x-text="card.buttonModels[customButtonData.buttonIndex]"></span>
                                                                        </div>
                                                                    </template>
                                                                </div>
                                                            </template>
                                                        </div>
                                                            {{-- <div class="d-flex flex-wrap gap-2">
                                                                <template x-for="customButtonData in Object.values(card.customButtons.data)" 
                                                                          :key="customButtonData.buttonIndex">
                                                                    <button class="btn btn-outline-primary btn-sm"
                                                                            x-text="card.buttonModels[customButtonData.buttonIndex]"></button>
                                                                </template>
                                                            </div> --}}
                                                        </div>
                                                    </div>
                                                </template>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection()
@push('appScripts')