@extends('layouts.admin')

@php $table_id = 'shortlink_list' @endphp
@section('script')
    @parent
    <script>
        $(function(){
            const $dt = $('#'+ @json($table_id) );
            let dt;
            $('#window-location').text(window.location.origin+'/m/')

            function getDataTable(){
                dt = $dt.DataTable({
                    ...sKaleUtils.getCommonDTConfig(window.location.href),
                    scrollX: true,
                    columns: [
                        {data:'id', 'title':'#'},
                        {data:'slug', 'title':'Shortlink URL'},
                        {data:'message', 'title':'Msg Content'},
                        {data:'use_count', 'title':'Clicks'},
                        {data:'updated_at', 'title': '{!! addslashes(__('headings.txt_last_updated')) !!}'},
                        {data:'action', 'title':'', orderable: false, "render": function( data, type, row, meta){
                                const $data= $(data).attr('data', JSON.stringify(row) );
                                return $('<div>').append( $data.clone()).html(); ;
                            }}, // todo see if theres a cleaner way to pass row data
                    ],
                    buttons: [],
                    drawCallback: function( settings,json) {
                        $('.btn-delete').remove();
                        $('.btn-edit').attr('href', 'javascript:void(0)' );
                    },
                    initComplete: (settings, json) => {

                        $('thead th:last-child').first().html(create_btn);

                        let typeList = [];
                        $.each(json.data, (idx, entry)=>{
                            if( !typeList.includes(entry.type) && entry.type) typeList.push(entry.type);
                        })
                        $.each({
                            'tpl_search_type' : typeList
                        },(cmpl, list)=>{
                            const $cmpl = $($('#'+cmpl).remove().html());
                            $cmpl.find('select').attr('id',cmpl);
                            $dt.parents('.comp-tbl-card:first').find('#search').prepend($cmpl);
                            let html = [];
                            if(list.length > 0){
                                $.each(list, (idx, type) => {
                                    html.push('<option value="'+type+'">'+type+'</option>')
                                })
                            }
                            $('#'+cmpl).html(html).select2({width: 'resolve'});
                        });


                        $.each({'tpl_search_type' : 2},(cmpl, colNo)=>{
                            $('#'+cmpl).on('change', (e)=>{
                                var type =  $('#tpl_search_type').val();
                                const url = sKaleProvider.getVariableListUrl(type);
                                dt.ajax.url(url).load();
                            }).change();
                        });


                    }
                });

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

            }

            getDataTable();

            $(document).on(  'click', '#create-shortlink',e=>editVariablePopup(e) );
            $(document).on(  'click', '.btn-edit',e=>editVariablePopup(e) );
            const editVariablePopup = e=>{
                e.preventDefault();
                const editData = $(e.currentTarget).attr('data') ? JSON.parse($(e.currentTarget).attr('data')) : false;
                let endpoint = window.location.href;

                const setPopupContent = (data=null)=>{
                    if(data){
                        endpoint = data.url_update;
                        $('#shortlink-slug').val(data.slug).attr('disabled',true);
                        $('#shortlink-message').val(data.message);
                        $('#shortlink-edit-label').text('Edit Shortlink');
                        $('#shortlink-edit-save').text('Save');
                    } else{
                        endpoint = window.location.href;
                        $('#shortlink-slug, #shortlink-message').val('').attr('disabled',false);
                        window.sKaleHelper.RegisterSlugInput($('#shortlink-slug'));
                        $('#shortlink-edit-label').text('New Shortlink');
                        $('#shortlink-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)).finally(()=>{
                            sKaleUtils.resetLoading();
                        });
                };


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

                $('#shortlink-edit').off('show.bs.modal').on('show.bs.modal', ()=>{ setPopupContent(editData); });
                $('#shortlink-edit').off('hidden.bs.modal').on('hidden.bs.modal', ()=>{ setPopupContent(); });

                $('#shortlink-edit').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')

    <!-- Channel Profile -->
    <!--
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card card-info card-outline card-outline-tabs shadow">
                        <div class="card-header">Profile</div>
                        <div class="card-body table-responsive p-0 overflow-hidden">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    -->


    <!-- Short link table -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card card-info card-outline card-outline-tabs shadow">
                        <div class="card-header">Custom Shortlink Messages</div>
                        <div class="card-body table-responsive p-0 overflow-hidden">
                            @component('admin.components.datatable_card', ['id' => $table_id, 'with_delete' => true])
                            @endcomponent
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <div class="modal fade" id="shortlink-edit" tabindex="-1" aria-labelledby="shortlink-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="shortlink-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-12">
                            <div class="form-group">
                                <label for="shortlink-name">Shortlink URL</label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="window-location"></span>
                                    </div>
                                    <input id="shortlink-slug" type="text" class="form-control" placeholder="slug">
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-group">
                                <label for="shortlink-message">Message Content</label>
                                <textarea id="shortlink-message" class="form-control" placeholder="Hello! What is this about?">
                                </textarea>
                            </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="shortlink-edit-save">Save</button>
                    <div class="error float-right my-0 p-0 text-danger text-right w-100"></div>
                </div>
            </div>
        </div>
    </div>


    <!-- Intergrations: ES/Slack -->

    <!--
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card card-info card-outline card-outline-tabs shadow">
                        <div class="card-header">
                            Integrations
                        </div>
                        <div class="card-body table-responsive p-0 overflow-hidden">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    -->

@endsection