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

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

{% endblock %}

{% block content %}

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

    <div>
        {% include "@branch/table/create_branch.html.twig" %}
    </div>
    
</div>


{% endblock %}

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

<script>

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

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

function editrow(target){
    $('#branchCreate').datagrid('beginEdit', getRowIndex(target));
}

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

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

    window.location.href = '/admin/branch/' + row.branch_slug
}

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

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

    const row = $('#branchCreate').datagrid('getRows')[index];
    createNewBranch(row, index)
}

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

function createNewBranch(row, index){

    let branchData = {
        b_id: row.b_id,
        town: row.town,
        address: row.address,
        name: row.name,
    }

    $.ajax({
        method: 'POST',
        url: '/admin/branch/store',
        data: { 
            branchData: branchData 
        },
        success: function(response){
            if(response.success){

                notify('success', response.title, response.message)
                $('#branchCreate').datagrid('load');

            }
        },
        error: function(error){
            console.log(error)
            notify('error', 'An error in operation occurred', 'A problem has occurred. Please Try Again')
        },
    })
}

function notify(status, title, message){
    new Notify ({
        status: status,
        title: title,
        text: message,
        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(){

    $('#branchCreate').datagrid({
        url: "/admin/branch/view",
        method: 'GET',
        singleSelect: true,
        pagination: true,
        fitColumns: true,
        collapsible: true,
        showFooter: true,
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Branches',
        onLoadSuccess: function(){
            $('#cardBlurred').removeClass('loader-active')
        },
        columns: [[
            {
                field: 'b_id', title: 'Branch ID', width: 30, editor:'text',
                formatter: (v, r) => r.b_id
            },
            {
                field: 'branch_slug', title: 'Branch Slug', width: 30, editor:'text',
                formatter: (v, r) => r.branch_slug
            },
            {
                field: 'name', title: 'Branch Name', width: 30, editor:'text',
                formatter: (v, r) => r.name
            },
            {           
                field: 'town', title: 'Branch Town', width: 30, editor:'text',
                formatter: (v, r) => r.town
            },
            {           
                field: 'address', title: 'Branch Address', width: 30, editor:'text',
                formatter: (v, r) => r.address
            },
            {
                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> ';
                        var v = '<a href="javascript:void(0)" onclick="viewbranch(this)">View</a> ';
                        return v+e;
                    }
                }
            },
        ]],
        onEndEdit:function(index,row){
            var ed = $(this).datagrid('getEditor', {
                index: index,
                field: 'b_id'
            });
            row.b_id = $(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', [ ]);

    $('#branchCreate').datagrid('hideColumn', 'b_id');
    $('#branchCreate').datagrid('hideColumn', 'branch_slug');
})
</script>

{% endblock %}