@extends('layouts.admin')

@php $table_id = 'templates_list' @endphp
@section('script')
    @parent
    <script>
        $(function(){
            function getDataTable(){
                const $dt = $('#'+ @json($table_id) );
                const dt =  $dt.DataTable({
                        ...sKaleUtils.getCommonDTConfig(
                            sKaleProvider.getTemplateListUrl()
                        ),
                        scrollX: true,
                        columns: [
                            {data:'id', 'title':'#'},
                            {data:'slug', 'title':'Slug'},
                            {data:'type', 'title':'Message Type'},
                            {data:'init_type', 'title':'Initiating Type'},
                            {data:'status', 'title':'Status'},
                            {data:'preview', 'title':'Preview'},
                            {data:'language', 'title':'Lang'},
                            {data:'updated_at', 'title':'{!! addslashes(__('headings.txt_last_updated')) !!}'},
                            {data:'action', 'title':'', orderable: false},
                        ],
                        {{--
                        drawCallback: function( settings ) {
                            $('.btn-delete').remove();
                        },
                        --}}
                        initComplete: (settings, json) => {
                            sKaleViewHelper.renderFilterListBoxesInDt($dt, {
                                tpl_search_status: @json($statuses ?? []),
                                tpl_search_init_type: @json($init_types ?? []),
                                tpl_search_type: @json($types ?? []),
                            });
                            $.each({tpl_search_status: 4, tpl_search_init_type: 3, tpl_search_type: 2},(cmpl, colNo)=>{
                                $('#'+cmpl).on('change', (e)=>{
                                    var status =  $('#tpl_search_status').val();
                                    var type =  $('#tpl_search_type').val();
                                    var init_type = $('#tpl_search_init_type').val();
                                    dt.ajax.url(
                                        sKaleProvider.getTemplateListUrl(type,status,init_type)
                                    ).load();
                                }).change();
                            });
                        }
                    });




                var create_btn = `<a role='button' href="{{ channelRoute('template.create') }}" class="mr-2 btn btn-sm btn-info"><i class="fas fa-plus"></i> Create Template</a>`;
                $('#'+ @json($table_id) ).parents('.comp-tbl-card:first').find('#left_panel').prepend(create_btn);
            }

            getDataTable();
        });
    </script>
@endSection


@section('style')
    @parent
    <style>
        .input-group .select2-container,
        .select2-container--default .select2-selection--multiple .select2-selection__rendered li:first-child.select2-search.select2-search--inline .select2-search__field {
            width: unset !important;
        }
    </style>
@endSection

@section('content')
    @component('admin.components.tabs')
        @foreach([
            'tpl_search_type'=>[
                'label' =>'Message Type:',
                'heading'=>'headings.txt_filter_type',
            ],
            'tpl_search_init_type' => [
                'label' =>'Initiating Type:',
                'heading'=>'headings.txt_filter_init_type',
            ],
            'tpl_search_status'=> [
                'label' =>'Status:',
                'heading'=>'headings.txt_filter_status',
            ],
        ] as $id => $data)
            <template class="d-none" id="{{$id}}">
                <div class="input-group d-flex flex-row align-items-center mb-2 mr-3 w-auto">
                    <label class="font-weight-normal mb-0 mr-2">{{$data['label']}}</label>
                    <select multiple class="select2 select2bs4 form-control"
                            title="{{ __($data['heading']) }}"
                            placeholder="{{ __($data['heading']) }}"
                            data-placeholder="{{ __($data['heading']) }}"></select>
                </div>
            </template>
        @endforeach

        @component('admin.components.datatable_card', ['id' => $table_id, 'with_delete' => true])
        @endcomponent
    @endcomponent

@endsection