@extends('layouts.admin')

@section('style')
    @parent
    @section('style')
        @parent
        <link rel="stylesheet" href="{{ mix('css/admin/template.css') }}">
    @endSection
@endSection

@php
    $form = config('admin.template_form');
    $template_type_cond = config('admin.template_type_cond');
    $overwite_cond = $template_type_cond [ $data['type'] ];
    $max_cta_count = config('admin.template_max_cta');
    function is_req($id, $overwite_cond, $form){
        return array_key_exists($id, $overwite_cond) && array_key_exists('req', $overwite_cond[$id]) ? $overwite_cond[$id]['req']: $form[$id]['req'];
    }
@endphp

@section('content')

    @component('admin.components.step_form_pages', [
        'post_url'=>'',
        'type'=>'templates',
        'title'=> 'Customize',
        'all_pages' =>['Setup','Customize'],
        'step'=> '2',
    ])

        <div id="" class="card card-tabs shadow-none w-100">
            <div class="card-header p-0 pt-1">
                <ul class="nav nav-tabs w-100" id="" role="tablist">
                    @foreach($data['data'] as $top)
                        @php $lang = $top['locale']; @endphp
                        <li class="nav-item">
                            <a class="nav-link link-muted {{ $loop->first?'active':'' }} d-flex align-items-center" id="{{$lang}}_tab" data-toggle="pill" href="#{{$lang}}" role="tab" aria-controls="{{$lang}}" aria-selected="true">
                                {{$lang}}
                                <span class="lang_validity ml-2" data-lang="{{$lang}}">
{{--                                    <i class="fas fa-check-circle text-success d-none"></i>--}}

                                    <i class="fas fa-check-circle text-success d-none"></i>
                                    <i class="fas fa-times-circle text-danger"></i>
                                    <i class="fas fa-spinner fa-spin d-none"></i>
                                </span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>

            <div class="card-body px-0">
                <div class="tab-content" id="">
                    @foreach($data['data'] as $top)
                        @php $lang = $top['locale']; @endphp
                    <div class="tab-pane fade show {{$loop->first ? 'active':''}}" id="{{$lang}}" role="tabpanel" aria-labelledby="{{$lang}}-tab">

                        <div class="row w-100">
                            <div class="col-lg-8 col-md-7">
                                {{-- header select --}}
                                @php $id = 'msg_header'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field_100', [ 'class'=>'mb-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])

                                    <div class="row">

                                        @php $id = 'msg_header_type'; $hasError = $errors->has($id) @endphp
                                        @component('admin.components.form_field', [ 'class'=>'col-sm-3', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])

                                            <select name="{{$id}}" class="msg-dropdown filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}} {{is_req($id, $overwite_cond, $form) ?'required':''}}"
                                                data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;"
                                                {{ !array_key_exists('input', $overwite_cond[$id])  ?'disabled':''}} >
                                                @if( $overwite_cond[$id]['input']??$form[$id]['input'])
                                                    @foreach( $overwite_cond[$id]['input'] ?? $form[$id]['input'] as $value => $label)
                                                        <option value="{{$value }}" {{ in_array( $value , $overwite_cond[$id]['value'])?'selected':'' }}>{{ $label }}</option>
                                                    @endforeach
                                                @endif
                                            </select>

                                        @endcomponent
                                        <div class="col-sm-9">

                                                {{-- header text form --}}
                                                @php $id = 'msg_header_text'; $hasError = $errors->has($id); @endphp
                                                @component('admin.components.form_field', ['style'=>'display:none','class'=>'msg-header-form mhf-text col-sm-12 px-0', 'label'=>$form[$id]['label'], 'required'=>is_req($id, $overwite_cond, $form), 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                                    <textarea rows="2" name="{{$id}}" maxlength="{{$form[$id]['maxlength']}}"
                                                              class="form-control  {{is_req($id, $overwite_cond, $form) ?'required':''}}"
                                                              placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;"></textarea>
                                                @endcomponent


                                                {{-- header attachment preview --}}
                                                <div style="display:none" class="msg_header_not_text col-sm-12 px-0 overflow-hidden border bg-light rounded">
                                                    <img class="msg-header-attachment-preview mhap-image mhap-sticker img-fluid" src="" style="display:none">
                                                    <a href="javascript:void(0)" target="_blank" class="msg-header-attachment-preview mhap-document p-1 text-center flex-center" style="display:none">
                                                        <i class="mx-2 fas fa-2x fa-file-pdf text-danger my-2"></i><br>
                                                        <small style="line-height: 1; display: inline-block"></small>
                                                    </a>
                                                </div>

                                                {{-- header attachment file uploader form --}}
                                                @php $id = 'msg_header_attachment'; $hasError = $errors->has($id);@endphp
                                                @component('admin.components.form_field', ['style'=>'display:none','class'=>'msg-header-form mhf-sticker mhf-image mhf-document  col-sm-12 px-0', 'label'=>$form[$id]['label'], 'required'=>is_req($id, $overwite_cond, $form), 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                                    <div class="custom-file">
                                                        <input type="text" name="{{$id}}" class="d-none {{$hasError?'is-invalid':''}}" value="{{ $imgsrc ??'' }}">
                                                        <input type="file" name="{{$id}}_uploader" class="custom-file-input {{$hasError?'is-invalid':''}} {{is_req($id, $overwite_cond, $form) ?'required':''}}">
                                                        {{--                           accept="{{ \App\Http\Controllers\Admin\VoucherSeriesController::IMG_HTML_ACCEPT_RULE }}">--}}
                                                        <label class="custom-file-label text-nowrap" for="exampleInputFile">{{ $imgsrc3 ?? old('file')??'Choose Image/File'}}</label>
                                                    </div>
                                                @endcomponent

                                                {{-- header attachment alias name form --}}
                                                @php $id = 'msg_header_attachment_filename'; $hasError = $errors->has($id);@endphp
                                                @component('admin.components.form_field', ['style'=>'display:none','class'=>'msg-header-attachment-alias col-12 px-0 mx-0', 'label'=>$form[$id]['label'], 'required'=>is_req($id, $overwite_cond, $form), 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                                    <input class="form-control form-control-sm {{$hasError?'is-invalid':''}}  {{is_req($id, $overwite_cond, $form) ?'required':''}}" placeholder="{{$form[$id]['placeholder']}}" name="{{$id}}" value="{{ $form[$id]['value']??'' }}"/>
                                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                                @endcomponent


                                        </div>
                                    </div>


                                @endcomponent



                                {{-- body --}}
                                @php
                                    $id = 'msg_body'; $hasError = $errors->has($id);
                                    if($overwite_cond[$id]){
                                        $overwite_cond[$id]['req'] = $data['init_type']=='bi_template' ? true :  $overwite_cond[$id]['req'];
                                    }
                                @endphp
                                @component('admin.components.form_field', [ 'class'=> 'col-12', 'label'=>$form[$id]['label'], 'required'=>is_req($id, $overwite_cond, $form), 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <textarea rows="5" name="{{$id}}" class="form-control {{is_req($id, $overwite_cond, $form) ?'required':''}}"
                                              placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;"
                                              {{ array_key_exists('disabled', $overwite_cond[$id]) ?  ($overwite_cond[$id]['disabled'] ? 'disabled':''):'' }}
                                              maxlength="{{$form[$id]['maxlength']}}"
                                    ></textarea>
                                @endcomponent


                                {{-- Scheduled message (business initiated) text: Variable Samples --}}
                                <div class="col-sm-12 variable-group mb-4" data-type="scheduled" style="display: none;">

                                    <table name="data-layer-table" class="table table-borderless table-sm border-0 table-valign-middle mb-0">
                                        <thead>
                                        <tr>
                                            <th style="width:100%">Variable Samples</th>
                                            <th style="width:10%">
                                                <a class="btn btn-success d-none" id="data-layer-add"><i class="fas fa-plus"></i></a>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody class="table-hover">
                                        <template name="row-default" style="display: none">
                                            <td class="row">
                                                @php $id = 'variable_sample_key'; $hasError = $errors->has($id) @endphp
                                                @component('admin.components.form_field', [ 'class'=>'col-6 col-sm-3 mb-1 pr-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                                    <input disabled="true" class="form-control form-control-sm {{$hasError?'is-invalid':''}} {{is_req($id, $overwite_cond, $form) ?'required':''}}" placeholder="{{$form[$id]['placeholder']}}" name="{{$id}}" value="{{ $form[$id]['value']??'' }}"/>
                                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                                @endcomponent

                                                @php $id = 'variable_sample_value'; $hasError = $errors->has($id) @endphp
                                                @component('admin.components.form_field', [ 'class'=>'col-6 col-sm-9 mb-1 pr-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                                    <input class="form-control form-control-sm {{$hasError?'is-invalid':''}}  {{is_req($id, $overwite_cond, $form) ?'required':''}}" placeholder="{{$form[$id]['placeholder']}}" name="{{$id}}" value="{{ $form[$id]['value']??'' }}"/>
                                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                                @endcomponent
                                            </td>
                                            <td>
                                                <a class="btn btn-sm text-muted btn-link cta-opt del-cta-opt d-none"><i class="fas fa-times"></i></a>
                                            </td>
                                        </template>
                                        </tbody>
                                    </table>
                                </div>






                                @php $id = 'msg_footer'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field', ['style'=>'display:none', 'class'=> 'col-12', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <input class="form-control {{$hasError?'is-invalid':''}}" placeholder="{{$form[$id]['placeholder']}}"
                                           name="{{$id}}" value="{{ $voucher_series[$id] ?? old($id) ??''}}"
                                           maxlength="{{$form[$id]['maxlength']}}"/>
                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                @endcomponent

                                {{-- cta types --}}
                                @php $id = 'msg_cta_type'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field', [ 'class'=> 'col-12', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <select name="{{$id}}" class="msg-dropdown filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}  {{is_req($id, $overwite_cond, $form) ?'required':''}}"
                                            data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;" disabled>
                                        @if($form[$id]['input'])
                                            @foreach($form[$id]['input'] as $value => $label)
                                                <option value="{{$value}}" {{ in_array( $value , $overwite_cond[$id]['value'])?'selected':'' }}>{{ $label }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                @endcomponent

                                {{-- cta types : quick link --}}
                                <div class="col-sm-12 cta-group mb-4" data-type="quick_link" style="display:none">

                                    <table name="data-layer-table" class="table table-sm border-0 table-valign-middle mb-0  {{is_req($id, $overwite_cond, $form) ?'required':''}}">
                                        <thead>
                                        <tr>
                                            <th style="width: 5%">ID</th>
                                            <th style="width: 90%">Quick link type, text, value</th>
                                            <th style="width: 5%"></th>
                                        </tr>
                                        </thead>
                                        <tbody class="table-hover">
                                        <tr>
                                            <td><span class="row-id text-muted small"></span></td>
                                            <td class="d-flex align-items-center flex-column flex-lg-row">
                                                @php $id = 'msg_cta_url_type'; $hasError = $errors->has($id) @endphp
                                                @component('admin.components.form_field', [ 'class'=> 'col-lg-4', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                                    <select name="{{$id}}" class="filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}  {{is_req($id, $overwite_cond, $form) ?'required':''}}"
                                                            data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;" disabled>
                                                        @if($form[$id]['input'])
                                                            @foreach($form[$id]['input'] as $value => $label)
                                                                <option value="{{$value}}" {{ in_array( $value , $form[$id]['value'])?'selected':'' }}>{{ $label }}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                                @endcomponent

                                                @php $id = 'msg_cta_url_key'; $hasError = $errors->has($id) @endphp
                                                @component('admin.components.form_field', [ 'class'=>'col-lg-4', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                                    <input class="form-control {{$hasError?'is-invalid':''}}  {{is_req($id, $overwite_cond, $form) ?'required':''}}" placeholder="{{$form[$id]['placeholder']}}" name="{{$id}}" value="{{ $form[$id]['value']??'' }}"/>
                                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                                @endcomponent

                                                @php $id = 'msg_cta_url_value'; $hasError = $errors->has($id) @endphp
                                                @component('admin.components.form_field', [ 'class'=>'col-lg-4 mb-0 mb-lg-3', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                                    <input class="form-control {{$hasError?'is-invalid':''}}  {{is_req($id, $overwite_cond, $form) ?'required':''}}" placeholder="{{$form[$id]['placeholder']}}" name="{{$id}}" value="{{ $form[$id]['value']??'' }}"/>
                                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                                @endcomponent
                                            </td>
                                            <td class="align-baseline"><a class="btn btn-sm text-muted btn-link cta-opt del-cta-opt d-none"><i class="fas fa-times"></i></a></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <a href="javascript:void(0)" class="cta-opt add-cta-opt btn btn-sm btn-default ml-1 mt-1"><i class="fas fa-plus mr-1"></i>Add Quick Link</a>
                                </div>

                                {{-- cta types : btn reply --}}
                                <div class="col-sm-12 cta-group mb-4" data-type="btn_reply" style="display:none">
                                    <table name="data-layer-table" class="table table-borderless table-sm border-0 table-valign-middle mb-0">
                                        <thead>
                                        <tr>
                                            <th style="width: 5%">ID</th>
                                            <th style="width: 90%">Quick Reply Text</th>
                                            <th style="width: 5%">
                                                {{--                        <a class="btn btn-success" id="data-layer-add"><i class="fas fa-plus"></i></a>--}}
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody class="table-hover">
                                        <tr name="row-default">
                                            <td><span class="row-id text-muted small"></span></td>
                                            <td class="row">
                                                @php $id = 'msg_quick_reply'; $hasError = $errors->has($id) @endphp
                                                @component('admin.components.form_field', [ 'class'=>'col-12 mb-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                                    <input class="form-control {{$hasError?'is-invalid':''}} {{is_req($id, $overwite_cond, $form) ?'required':''}}"
                                                           placeholder="{{$form[$id]['placeholder']}}" name="{{$id}}"
                                                           value="{{ $form[$id]['value']??''}}"
                                                           maxlength="{{$form[$id]['maxlength']}}"/>
                                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                                @endcomponent
                                            </td>
                                            <td><a class="btn btn-sm text-muted btn-link cta-opt del-cta-opt d-none"><i class="fas fa-times"></i></a></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <a href="javascript:void(0)" class="cta-opt add-cta-opt btn btn-sm btn-default ml-1 mt-1"><i class="fas fa-plus mr-1"></i>Add Quick Reply</a>
                                </div>


                                {{-- cta types : list reply --}}
                                <div class="col-sm-12 cta-group mb-4" data-type="list_reply" style="display:none">

                                    @php $id = 'msg_cta_list_title'; $hasError = $errors->has($id) @endphp
                                    @component('admin.components.form_field', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                        <input class="form-control {{$hasError?'is-invalid':''}} {{is_req($id, $overwite_cond, $form) ?'required':''}}"
                                               placeholder="{{$form[$id]['placeholder']}}" name="{{$id}}"
                                               value="{{ $form[$id]['value']??'' }}"
                                               maxlength="{{$form[$id]['maxlength']}}"/>
                                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                    @endcomponent

                                    <table name="data-layer-table" class="table table-borderless table-sm border-0 table-valign-middle mb-0">
                                        <thead>
                                        <tr>
                                            <th style="width: 5%">ID</th>
                                            <th style="width: 90%">List Item</th>
                                            <th style="width: 5%">
                                                {{--                        <a class="btn btn-success" id="data-layer-add"><i class="fas fa-plus"></i></a>--}}
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody class="table-hover">
                                        <tr name="row-default">
                                            <td><span class="row-id text-muted small"></span></td>
                                            <td class="row">
                                                @php $id = 'msg_cta_list_key'; $hasError = $errors->has($id) @endphp
                                                @component('admin.components.form_field', [ 'class'=>'col-12 mb-1 pr-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                                    <input class="form-control {{$hasError?'is-invalid':''}} {{is_req($id, $overwite_cond, $form) ?'required':''}}"
                                                           placeholder="{{$form[$id]['placeholder']}}" name="{{$id}}"
                                                           value="{{ $form[$id]['value']??'' }}"
                                                           maxlength="{{$form[$id]['maxlength']}}"/>
                                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                                @endcomponent

                                                @php $id = 'msg_cta_list_value'; $hasError = $errors->has($id) @endphp
                                                @component('admin.components.form_field', [ 'class'=>'col-12 mb-1 pr-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                                    <input class="form-control {{$hasError?'is-invalid':''}} {{is_req($id, $overwite_cond, $form) ?'required':''}}"
                                                           placeholder="{{$form[$id]['placeholder']}}" name="{{$id}}"
                                                           value="{{ $form[$id]['value']??'' }}"
                                                           maxlength="{{$form[$id]['maxlength']}}"/>
                                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                                @endcomponent
                                            </td>
                                            <td><a class="btn btn-sm text-muted btn-link cta-opt del-cta-opt d-none"><i class="fas fa-times"></i></a></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <a href="javascript:void(0)" class="cta-opt add-cta-opt btn btn-sm btn-default ml-1 mt-1"><i class="fas fa-plus mr-1"></i>Add List Item</a>
                                </div>



                            </div>

                            {{-- preview panel --}}
                            <div class="col-lg-4 col-md-5 px-3 px-md-0">
                                <label class="mb-0">Preview</label>
                                <div class="w-100 h-100 rounded chat-wrap" style="min-height: 500px;">
                                    @if( $data['type'] ?? '')
                                        @switch( $data['type'] )

                                            {{-- preview panel : image --}}
                                            @case('image')
                                            @case('sticker')
                                            @case('document')
                                            <div class="d-flex">
                                                <div class="chat-bubble bubble-attachment bubble-image bubble-sticker" style="display: none">
                                                    <img src="" class="w-100"/>
                                                    <div class="chat-message"></div>
                                                    <div class="chat-time">00:00</div>
                                                </div>
                                            </div>

                                            {{-- preview panel : document --}}
                                            <div class="d-flex">
                                                <div class="chat-bubble bubble-attachment bubble-document w-100" style="display: none">
        {{--                                            <img src="https://wa.growthdesk.dev/assets/images/logo/growthdesk-logo.png" class="w-100"/>--}}
                                                    <a href="javascript:void(0)" target="_blank"
                                                       class="py-2 px-1 rounded d-flex align-items-center link-muted"
                                                       style="margin:0 -3px 0 -8px; background:#f7f7f7">
                                                        <i class="mx-2 fas fa-2x fa-file-pdf text-danger"></i><span>PDF name.pdf</span>
                                                    </a>
                                                    <div class="chat-message"></div>
                                                    <div class="chat-time">00:00</div>
                                                </div>
                                            </div>
                                            @break

                                            {{-- preview panel : cta --}}
                                            @case('button_reply')
                                            @case('url')
                                            <div class="d-flex">
                                                <div class="chat-bubble w-100" data-type="button">
                                                    <div class="chat-header text-bold"></div>
                                                    <div class="chat-message"></div>
                                                    <div class="chat-message-cta mt-2" style="display: none"></div>
                                                    <div class="chat-time">00:00</div>
                                                </div>
                                            </div>
                                            <div class="d-flex">
                                                <div class="chat-bubble bubble-button no-before">
                                                    <div class="bubble-area">
                                                        @for ($i = 0; $i < 3 ; $i++)
                                                            @if($i>0)
                                                                <hr class="m-0 bubble-{{$i+1}}" style="display: none">
                                                            @endif
                                                            <a class="bubble-{{$i+1}}" href="javascript:void(0)" target="_blank" ><i class="fas fa-external-link-alt mr-2"></i><span></span></a>
                                                        @endfor
                                                    </div>
                                                </div>
                                            </div>
                                            @break

                                            @case('list_reply')

                                                <div class="d-flex">
                                                    <div class="chat-bubble w-100" data-type="button">
                                                        <div class="chat-header text-bold"></div>
                                                        <div class="chat-message"></div>
                                                        <div class="chat-footer text-muted mt-1" style="font-size: .75rem;"></div>
                                                        <div class="chat-message-cta mt-2" style="display: none"></div>
                                                        <div class="chat-time">00:00</div>
                                                    </div>
                                                </div>
                                                <div class="d-flex">
                                                    <div class="chat-bubble bubble-button no-before">
                                                        <div class="bubble-area bubble-title">
                                                            <a class="bubble-1" href="javascript:void(0)" target="_blank" ><i class="fas fa-list mr-2"></i><span></span></a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex">
                                                    <div class="chat-bubble bubble-button no-before">
                                                        <div class="bubble-area bubble-menu">
                                                            @for ($i = 0; $i < $max_cta_count['list_reply'] ; $i++)
                                                                @if($i>0)
                                                                    <hr class="m-0 bubble-{{$i+1}}" style="display: none">
                                                                @endif
                                                                <a class="bubble-{{$i+1}}" href="javascript:void(0)" target="_blank" ><span></span><br><small class="text-muted"></small></a>
                                                            @endfor
                                                        </div>
                                                    </div>
                                                </div>
                                            @break

                                            {{-- preview panel : timestamp preview --}}
                                            @default
                                            <div class="d-flex" style="z-index: 1">
                                                <div class="chat-bubble" data-type="default">
                                                    <div class="chat-message"></div>
                                                    <div class="chat-time">00:00</div>
                                                </div>
                                            </div>
                                            @break
                                        @endswitch
                                    @endif


                                </div>

                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>


        @slot('footer_back')
            <a href="{{ $data ? $data['url']['edit'] :''}}" class="btn btn-default btn-back">Back</a>
        @endslot
        @slot('footer_next')
            <a href="javascript:void(0)" class="btn btn-info float-right btn-next">Save Step</a>
        @endslot

    @endcomponent



@endsection

@section('script')
    @parent
    <script src="{{ mix('js/bootstrap-maxlength.min.js') }}"></script>
    <script src="{{ mix('js/admin/template/index.js') }}"></script>
    <script>
        $(() => skaleTemplateCreate.step2(
            @json($max_cta_count),
            @json($data)
        ));
    </script>
@endSection