{% extends '@admin/layouts/commonmaster.html.twig' %}

{% block stylesheets %}
{{ parent() }}

{% endblock %}

{% block content %}

<div data-controller="admin--insurance">

    <div class="d-flex align-items-center justify-content-center mb-5 top-button-menu">
        <div class="btn-group show" role="group" aria-label="Basic example">
            <button data-action="" data-admin--admin-target="" type="button" class="btn btn-primary" id="">
                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-replace"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 3m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M15 15m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M21 11v-3a2 2 0 0 0 -2 -2h-6l3 3m0 -6l-3 3" /><path d="M3 13v3a2 2 0 0 0 2 2h6l-3 -3m0 6l3 -3" /></svg>
                Add Insurances
            </button>
        </div>
    </div>

    <div class="col-md-11 m-auto mt-5">

        {% include "@admin/configuration/tables/insurance.html.twig" %}

    </div>

</div>

{% endblock %}

{% block javascripts %}
{{ parent() }}

<script>

function insertNewInsurance(){
    var row = $('#insuranceCreate').datagrid('getSelected');
    if (row){
        var index = $('#insuranceCreate').datagrid('getRowIndex', row);
    } else {
        index = 0;
    }
    $('#insuranceCreate').datagrid('insertRow', {
        index: index,
        row:{
            status:'P'
        }
    });
    $('#insuranceCreate').datagrid('selectRow',index);
    $('#insuranceCreate').datagrid('beginEdit',index);
}

function getRowIndex(target){
    var tr = $(target).closest('tr.datagrid-row');
    return parseInt(tr.attr('datagrid-row-index'));
}

function editRow(target){
    $('#insuranceCreate').datagrid('beginEdit', getRowIndex(target));
}

function deleterow(target){
    $.messager.confirm('Confirm','Are you sure?',function(r){
        if (r){
            $('#insuranceCreate').datagrid('deleteRow', getRowIndex(target));
        }
    });
}

function cancelrow(target){
    $('#insuranceCreate').datagrid('cancelEdit', getRowIndex(target));
}

function saverow(target){
    const index = getRowIndex(target);
    $('#insuranceCreate').datagrid('endEdit', index);

    const row = $('#insuranceCreate').datagrid('getRows')[index];

    saveInsurance(row, index)
}

function saveInsurance(row, index){
    $.ajax({
        url: '/admin/insurance/create', 
        method: 'POST',
        data: {
            insurance_company_id: row.insuranceId,
            insurance_company: row.name,
            insurance_parent_id: row.parentInsuranceId || null
        },        
        success: function(res) {

            var rowEl = $('#insuranceCreate').datagrid('getPanel').find('div.datagrid-body tr[datagrid-row-index="' + index + '"]');

            if(res.success){

                rowEl.addClass('highlight');

                ajaxnotify('success', res.title, res.message)

                setTimeout(function() {
                    rowEl.removeClass('highlight');
                }, 1000);

            }else{

                // $(this).datagrid('refreshRow', index);
                rowEl.addClass('highlight_error');

                ajaxnotify('error', res.title, res.message)

                setTimeout(function() {
                    rowEl.removeClass('highlight_error');
                }, 1000);

            }
        },
        error: function(error) {

            // $('#insuranceCreate').datagrid('refreshRow', 0);

            new Notify ({
                status: 'error',
                title: 'Error on Edit',
                text: 'Retrying',
                effect: 'fade',
                speed: 300,
                customClass: '',
                customIcon: '',
                showIcon: true,
                showCloseButton: true,
                autoclose: true,
                autotimeout: 3000,
                notificationsGap: null,
                notificationsPadding: null,
                type: 'filled',
                position: 'x-center',
                customWrapper: '',
            })

            var rowEl = $('#insuranceCreate').datagrid('getPanel').find('div.datagrid-body tr[datagrid-row-index="' + index + '"]');
            rowEl.addClass('highlight_error');

            setTimeout(function() {
                rowEl.removeClass('highlight_error');
            }, 1000);
        }
    });
}

function ajaxnotify(status, title, text){
    new Notify ({
        status: status,
        title: title,
        text: text,
        effect: 'fade',
        speed: 300,
        customClass: '',
        customIcon: '',
        showIcon: true,
        showCloseButton: true,
        autoclose: true,
        autotimeout: 3000,
        notificationsGap: null,
        notificationsPadding: null,
        type: 'filled',
        position: 'x-center',
        customWrapper: '',
    })
}

$(document).ready(function() {

    $('#insuranceCreate').datagrid({
        url: "/admin/configuration/insurance/companies",
        method: 'GET',
        singleSelect: true,
        pagination: true,
        fitColumns: true,
        collapsible: true,
        showFooter: true,
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Organizations',
        detailFormatter: function(index, row) {
            return '<div class="ddv" style="padding: 5px 0"></div>';
        },
        onLoadSuccess: function(){
            $('#cardBlurred').removeClass('loader-active')
        },
        columns: [[
            {
                field: 'insuranceId', title: 'Insurance  ID', width: 30, editor:'text',
                formatter: (v, r) => r.insuranceId
            },
            {
                field: 'name', title: 'Insurance Name', width: 30, editor:'text',
                formatter: (v, r) => r.name
            },
            {
                field: 'parentInsuranceId',
                title: 'Insurance Parent ',
                width: 30,
                formatter: function(value, row) {
                    return row.parentName || ''; 
                },
                editor: {
                    type: 'combobox',
                    options: {
                        url: '/admin/get/parent_insurance_companies', 
                        valueField: 'parentInsuranceId',  
                        textField: 'parentInsuranceName',
                        required: false
                    }
                }
            },
            {
                field:'action',title:'Action',width:20,align:'center',
                formatter:function(value,row,index){
                    if (row.editing){
                        var s = '<a href="javascript:void(0)" onclick="saverow(this)">Save</a> ';
                        var c = '<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>';
                        return s+c;
                    } else {
                        var e = '<a href="javascript:void(0)" onclick="editRow(this)">Edit</a> ';
                        return e;
                    }
                }
            },
        ]],
        onEndEdit:function(index,row){
            var ed = $(this).datagrid('getEditor', {
                index: index,
                field: 'insuranceId'
            });
            row.insuranceId = $(ed.target).val()
        },
        onBeforeEdit:function(index,row){
            row.editing = true;
            $(this).datagrid('refreshRow', index);
        },
        onAfterEdit:function(index,row){
            row.editing = false;
            $(this).datagrid('refreshRow', index);
        },
        onCancelEdit:function(index,row){
            row.editing = false;
            $(this).datagrid('refreshRow', index);
        }
    }).datagrid('enableFilter', [
            {
                field:'action',
                type:'label'
            },
        ]);

    $('#insuranceCreate').datagrid('hideColumn', 'insuranceId');
});

</script>

{% endblock %}