@extends('layouts.admin')

@php $table_id = 'variables_list' @endphp
@section('script')
    @parent
    <script>
        $(function(){
            const $dt = $('#'+ @json($table_id) );
            let dt;
            const origUrl = window.location.href;

            function getDataTable(){
                var cols = [
                    {data:'id', 'title':'#'},
                    {data:'variable_name', 'title':'Slug'},
                    {data:'type', 'title':'Type'},
                    {data:'variable_value', 'title':'Value'},
                    {data:'num_count', 'title':'Uses'},
                    {data:'updated_at', 'title': '{!! addslashes(__('headings.txt_last_updated')) !!}'},
                    {data:'action', 'title':'', orderable: false,
                        {{--
                        render: function( data, type, row, meta){
                            return $('<div>').append(
                                $(data).attr('data', row)
                            ).html(); ;
                        }
                        --}}
                    }, // todo see if theres a cleaner way to pass row data
                ];
                $.each(@json($colShowHide), (key, val) => {
                    if (val) return;
                    var opt = cols.find(opt => opt.data === key);
                    opt && (opt.visible = !!val);
                });
                dt = $dt.DataTable({
                        ...sKaleUtils.getCommonDTConfig(origUrl),
                        scrollX: true,
                        columns: cols,
                        drawCallback: function( settings,json) {
                            {{-- $('.btn-delete').remove(); --}}
                            $('.btn-edit').attr('href', 'javascript:void(0)');
                        },
                        initComplete: (settings, json) => {
                            @if(data_get($colShowHide, 'type') !== false)
                            sKaleViewHelper.renderFilterListBoxesInDt($dt, {
                                'tpl_search_type' : @json($types ?? []),
                            });
                            $.each({'tpl_search_type' : 2},(cmpl, colNo)=>{
                                $('#'+cmpl).on('change', (e)=>{
                                    const url = sKaleProvider.getVariableListUrl(
                                        $(e.currentTarget).val()
                                    );
                                    dt.ajax.url(url).load();
                                }).select2({width: 'resolve'});
                            });
                            @endif
                        }
                    });

                var create_btn = `<a role='button' href="javascript:void(0)" class="mr-2 btn btn-sm btn-info" id="create-variable"><i class="fas fa-plus"></i> Create Variable</a>`;

                $('#'+ @json($table_id) ).parents('.comp-tbl-card:first').find('#left_panel').prepend(create_btn);
            }

            getDataTable();

            $('#create-variable').on('click',e=>editVariablePopup(e) );
            $(document).on(  'click', '.btn-edit',e=>editVariablePopup(e) );
            const editVariablePopup = e=>{
                e.preventDefault();
                const $row = $(e.currentTarget).parents('td:first').parents('tr:first');
                const editData = $row.index() === -1 ?
                    false :
                    dt.data()[$row.index()];
                let endpoint = origUrl;

                const setPopupContent = (data=null)=>{
                    if(data){
                        endpoint = data.url_update;
                        $('#variable-name').val(data.variable_name).attr('disabled',true);
                        $('#variable-type').val(data.hidden_type).trigger('change').attr('disabled',true);
                        $('#variable-value').val(data.variable_value);
                        $('#variable-edit-label').text('Edit Variable');
                        $('#variable-edit-save').text('Save');
                    } else{
                        $('#variable-name, #variable-value').val('').attr('disabled',false);
                        window.sKaleHelper.RegisterSlugInput($('#variable-name'));
                        $('#variable-type').prop('selectedIndex', 0).trigger('change').attr('disabled',true);
                        $('#variable-edit-label').text('New Variable');
                        $('#variable-edit-save').text('Create');
                        $('.error').text('');
                    }
                }

                const doAjax = (endpoint, isEdit, data) => {
                    return sKaleHttp.doAbsoluteAJAX(endpoint, isEdit?'PUT':'POST', data, false, 'application/json').promise
                        .then(res=>{
                            if(!res.success){
                                $('.error').text(res.errors.slug)
                            } else {
                                $('#variable-edit').modal('hide');
                                sKaleUtils.toastSuccess(res.message);
                                dt.draw();
                            }
                        })
                        .catch(res=> {
                            $('.error').text(res.error_msg);
                            sKaleFrmPopulator.showValidationErrorsInToast(res.errors);
                        })
                        .finally(()=>{
                            sKaleUtils.resetLoading();
                        });
                };


                // submit ajax response
                $('#variable-edit-save').off('click').on('click', ()=>{
                    e.preventDefault();
                    sKaleUtils.setLoading('#variable-edit-save');
                    let postData = { value : $('#variable-value').val(), }
                    if(!editData){
                        postData = { ...postData, ...{
                                slug: $('#variable-name').val(),
                                type: $('#variable-type').val(),
                            }
                        }
                    }
                    $('.error').text('');
                    doAjax(endpoint, !!editData, postData);
                });

                $('#variable-edit')
                    .off('show.bs.modal').on('show.bs.modal', ()=>{ setPopupContent(editData); })
                    .off('hidden.bs.modal').on('hidden.bs.modal', ()=>{ setPopupContent(); })
                    .modal('show');
            }
        });
    </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' =>'Type:',
                'heading'=>'headings.txt_filter_type',
            ],
        ] 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


    <div class="modal fade" id="variable-edit" tabindex="-1" aria-labelledby="variable-edit-label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="variable-edit-label">Variable</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6 col-12">
                            <div class="form-group">
                                <label for="variable-name">Slug</label>
                                <input id="variable-name" type="text" class="form-control" value="">
                            </div>
                        </div>
                        <div class="col-sm-6 col-12">
                            <div class="form-group">
                                <label for="variable-type">Type</label>
                                <select id="variable-type" class="form-control">
                                    @foreach ($types as $val => $type)
                                        <option value="{{$val}}">{{$type}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-group">
                                <label for="variable-value">Value</label>
                                <input id="variable-value" type="text" class="form-control" value="">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-info" id="variable-edit-save">Save</button>
                    <div class="error float-right my-0 p-0 text-danger text-right w-100"></div>
                </div>
            </div>
        </div>
    </div>

@endsection