@php
$onlyTemplatePreview = request()->has('only-preview');
@endphp
<div class="row" x-cloak>
    @if(!$onlyTemplatePreview)
    <div class="col-sm-12 col-lg-6 lw-template-structure-form">
        <input type="hidden" name="template_uid" value="{{ $template->_uid }}">
        <div class="mt-4">
            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm">
                        <div class="card-header bg-garay d-flex justify-content-between align-items-center">
                            <h4 class="mb-0 text-primary1">{{ __tr('Template') }}</h4>
                            
                            <template x-if="selectedTemplate">
                                <button class="btn btn-dark btn-sm" @click.prevent="selectedTemplate = ''">
                                    {{ __tr('Change') }}
                                </button>
                            </template>
                        </div>
                        <div class="card-body">
                            <h3><strong>{{ $template->template_name }}</strong></h3>
            <h4>{{ __tr('Language Code') }}: <strong>{{ $template->language }}</strong></h4>
            <h4>{{ __tr('Category') }}: <strong>{{ $template->category }}</strong></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
         {{-- Carousel Cards Section --}}
        @if(isset($carouselTemplateData) && !empty($carouselTemplateData['cards']))
            @php
                $mainBodyText =  $carouselTemplateData['template']->__data['template']['components'][0]['text'] ?? '';
                preg_match_all('/{{(\d+)}}/', $mainBodyText, $mainBodyVars);
                // $mainBodyVarList = $mainBodyVars[0] ?? [];
                $mainBodyVarList = [];
                foreach ($mainBodyVars[1] ?? [] as $varNum) {
                    $mainBodyVarList[] = 'field_' . $varNum;
                }
            @endphp
            @if(!empty($mainBodyText) && !empty($mainBodyVarList))
                    <div class="mt-4">
                        <div class="row">
                            <div class="col-12">
                                <div class="card shadow-sm">
                                    <div class="card-header bg-garay">
                                        <h4 class="mb-0 text-primary1">{{ __tr('Main Body') }}</h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            @include('whatsapp-service.template-partial', [
                                                'parameters' => $mainBodyVarList,
                                                'subjectType' => 'body',
                                                'contactDataMaps' => $contactDataMaps ?? []
                                            ])
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            @endif
            <div class="mt-4">
                <h4 class="mb-3 text-primary1">{{ __tr('Carousel Cards') }}</h4>
                @foreach($carouselTemplateData['cards'] as $cardIndex => $card)
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-garay">
                            <h5 class="mb-0">{{ __tr('Card') }} #{{ $cardIndex + 1 }}</h5>
                        </div>
                        <div class="card-body">
                            @if($card['header']['format'] === 'IMAGE')
                                <div class="form-group col-md-6">
                                    <label for="carousel_card_{{ $cardIndex }}_image"></label>
                                    <input id="carousel_card_{{ $cardIndex }}_image_filepond" type="file"
                                        class="lw-file-uploader"
                                        data-instant-upload="true"
                                        data-allow-revert="true"
                                        data-label-idle="{{ __tr('Select Image') }}"
                                        data-action="{{ route('media.upload_temp_media', 'whatsapp_image') }}"
                                        data-allowed-media='{{ getMediaRestriction('whatsapp_image') }}'
                                        data-file-input-element="#carousel_card_{{ $cardIndex }}_image">
                                    <input id="carousel_card_{{ $cardIndex }}_image" type="hidden" value="" name="carousel_cards[{{ $cardIndex }}][header_image]" required />
                                </div>
                            @elseif($card['header']['format'] === 'VIDEO')
                                <div class="form-group col-md-6">
                                    <label for="carousel_card_{{ $cardIndex }}_video">{{ __tr('Select Video') }}</label>
                                    <input id="carousel_card_{{ $cardIndex }}_video_filepond" type="file"
                                        class="lw-file-uploader"
                                        data-instant-upload="true"
                                        data-allow-revert="true"
                                        data-label-idle="{{ __tr('Select Video') }}"
                                        data-action="{{ route('media.upload_temp_media', 'whatsapp_video') }}"
                                        data-allowed-media='{{ getMediaRestriction('whatsapp_video') }}'
                                        data-file-input-element="#carousel_card_{{ $cardIndex }}_video">
                                    <input id="carousel_card_{{ $cardIndex }}_video" type="hidden" value="" name="carousel_cards[{{ $cardIndex }}][header_video]" required />
                                </div>
                            @endif
                             @php
                                $cardBodyText = $card['body']['text'] ?? '';
                                preg_match_all('/{{(\d+)}}/', $cardBodyText, $cardBodyVars);
                                $cardBodyVarList = [];
                                foreach ($cardBodyVars[1] ?? [] as $varNum) {
                                    $cardBodyVarList[] = "carousel_cards[{$cardIndex}][field_{$varNum}]";
                                }
                            @endphp
                            @if(!empty($cardBodyVarList))
                                @include('whatsapp-service.template-partial', [
                                    'parameters' => $cardBodyVarList,
                                    'subjectType' => 'body',
                                    'contactDataMaps' => $contactDataMaps ?? []
                                ])
                            @endif
                            {{-- Button Variables --}}
                            @if(!empty($card['buttons']['parameters']))
                                <div class="mt-3">
                                    <h6>{{ __tr('Button Variables') }}</h6>
                                    @include('whatsapp-service.template-partial', [
                                        'parameters' => $card['buttons']['parameters'],
                                        'buttonItems' => $card['buttons']['buttons'],
                                        'subjectType' => 'button',
                                        'contactDataMaps' => $contactDataMaps ?? []
                                    ])
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
        @if($headerFormat)
         <div class="mt-4 lw-template-header-variables-container">
            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm">
                        <div class="card-header bg-garay">
                            <h4 class="mb-0 text-primary1">{{ __tr('Header') }}</h4>
                        </div>
                        <div class="card-body">
 @if($headerFormat == 'LOCATION')
            <h3>{{ __tr('Location Details') }}</h3>
            @include('whatsapp-service.template-partial', [
            'parameters' => [
            'location_latitude',
            'location_longitude',
            'location_name',
            'location_address',
            ],
            'subjectType' => 'header',
            ])
            @elseif($headerFormat == 'TEXT' and !__isEmpty($headerParameters))
            @include('whatsapp-service.template-partial', [
            'parameters' => $headerParameters,
            'subjectType' => 'header',
            ])
            @elseif($headerFormat == 'TEXT' and __isEmpty($headerParameters))
            <div class="alert alert-info">{{  __tr('No variables available for header text.') }}</div>
            <style>
                .lw-template-header-variables-container{display:none;}
            </style>
            @elseif($headerFormat == 'IMAGE')
            @elseif($headerFormat == 'VIDEO')
            <div class="form-group col-md-6 col-sm-12 pl-0">
                <label for="lwHeaderVideoFilepond">{{ __tr('Select Video') }}</label>
                <input id="lwHeaderVideoFilepond" type="file" data-allow-revert="true"
                    data-label-idle="{{ __tr('Select Video') }}" class="lw-file-uploader" data-instant-upload="true"
                    data-action="