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

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

<!-- Selectize  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css" integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

{% endblock %}

{% block content %}

<div data-controller="admin--admin" data-admin--admin-loader-gif-value="{{ asset('images/loader/loader.gif') }}">
    <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="admin--admin#price_list" data-admin--admin-target="price_list" type="button" class="btn active btn-primary" id="priceListBtn">
                <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>
                Price List
            </button>
            <button data-action="admin--admin#service" data-admin--admin-target="service" type="button" class="btn btn-light" id="serviceBtn">
                <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-stack-3"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2l-8 4l8 4l8 -4l-8 -4" /><path d="M4 10l8 4l8 -4" /><path d="M4 18l8 4l8 -4" /><path d="M4 14l8 4l8 -4" /></svg>
                Services
            </button>
            <button data-action="admin--admin#product" data-admin--admin-target="product" type="button" class="btn btn-light" id="productBtn">
                <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-stack-3"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2l-8 4l8 4l8 -4l-8 -4" /><path d="M4 10l8 4l8 -4" /><path d="M4 18l8 4l8 -4" /><path d="M4 14l8 4l8 -4" /></svg>
                Products
            </button>
        </div>
    </div>

    <div class="col-md-11 m-auto mt-5">
        {% include "@admin/configuration/tables/price_list.html.twig" %}

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

        {% include "@admin/configuration/tables/product.html.twig" %}
    </div>
</div>


{% endblock %}

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

<!-- Selectize  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js" integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>

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

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

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

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

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

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

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

function savePatientQueue(row, index){
    $.ajax({
        url: '/admin/configuration/billable/edit', 
        method: 'POST',
        data: {
            b_id: row.b_id,
            service_name: row.service_name,
            cash_price: row.cash_price,
            insurance_price: row.insurance_price,
        },
        success: function(res) {

            var rowEl = $('#serviceCreate').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) {

            // $('#serviceCreate').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 = $('#serviceCreate').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() {

    $('#addServiceForm .service_details').on('input', function () {

        let allFilled = true;

        $('#addServiceForm .service_details').each(function () {
            if ($(this).val().trim() === '') {
                allFilled = false;
                return false;
            }
        });

        $('#addServiceBtn').prop('disabled', !allFilled);
    });

    $('#priceListCreateForm .price_list_details').on('input', function () {
        let allFilled = true;

        $('#priceListCreateForm .price_list_details').each(function () {
            if ($(this).val() === '') {
                allFilled = false;
                return false;
            }
        });

        $('#priceListCreateButton').prop('disabled', !allFilled);
    });

    $('#priceListCreateSearch').selectize({
        maxOptions: 10, // Adjusted to show more options if available
        openOnFocus: true, // Do not open on focus
        placeholder: "Start typing to select...",
        plugins: [
            "autofill_disable",
            "auto_position",
        ],
        valueField: 'pl_id',
        labelField: 'name',
        searchField: 'name',
        load: function(query, callback) {
            if (!query.length || query.length < 3) return callback();
            $.ajax({
                url: '/admin/price_list/search',
                method: 'GET',
                dataType: 'json',
                data: {
                    query: query
                },
                error: function() {
                    callback();
                },
                success: function(res) {
                    callback(res);
                }
            });
        },
        onChange: function(value){

            $.ajax({
                method: 'GET',
                url: '/admin/price_list/search',
                data: {
                    q: value
                },
                success: function(res){
                    $('#priceListLoader').css({'display': 'none'})
                },
                error: function(error){
                    console.log(error)
                },
            })

        },
        onType: function(value){          
            if(value.length > 0){
                $('#priceListLoader').css({'display': 'block'})
                }else{
                $('#priceListLoader').css({'display': 'none'})
            }
        },
    });

    $('#serviceLookup').selectize({
        maxOptions: 10, // Adjusted to show more options if available
        openOnFocus: true, // Do not open on focus
        placeholder: "Start typing to select...",
        plugins: [
            "autofill_disable",
            "auto_position",
        ],
        valueField: 'b_id',
        labelField: 'name',
        searchField: 'name',
        load: function(query, callback) {
            if (!query.length || query.length < 3) return callback();
            $.ajax({
                url: '/admin/lookup',
                method: 'GET',
                dataType: 'json',
                data: {
                    service: query
                },
                error: function() {
                    callback();
                },
                success: function(res) {
                    callback(res);
                }
            });
        },
        onChange: function(value){
        },
        onType: function(value){
        },
    });

    $('#insuranceLookup').selectize({
        maxOptions: 10, // Adjusted to show more options if available
        openOnFocus: true, // Do not open on focus
        placeholder: "Start typing to select...",
        plugins: [
            "autofill_disable",
            "auto_position",
        ],
        valueField: 'i_id',
        labelField: 'name',
        searchField: 'name',
        load: function(query, callback) {
            if (!query.length || query.length < 3) return callback();
            $.ajax({
                url: '/admin/lookup',
                method: 'GET',
                dataType: 'json',
                data: {
                    insurance: query
                },
                error: function() {
                    callback();
                },
                success: function(res) {
                    callback(res);
                }
            });
        },
        onChange: function(value){
        },
        onType: function(value){
        },
    });

    // make this open the insurance selector immidiately the user hits puts the cursor on it
    $('#priceListInsuranceLookup').selectize({
        maxOptions: 10, // Adjusted to show more options if available
        openOnFocus: true, // Do not open on focus
        placeholder: "Start typing to select...",
        plugins: [
            "autofill_disable",
            "remove_button",
            "auto_position",
        ],
        valueField: 'i_id',
        labelField: 'name',
        searchField: 'name',
        load: function(query, callback) {
            // if (!query.length || query.length < 2) return callback();
            $.ajax({
                url: '/admin/lookup',
                method: 'GET',
                dataType: 'json',
                data: {
                    insurance: query
                },
                error: function() {
                    callback();
                },
                success: function(res) {
                    callback(res);
                }
            });
        },
        onChange: function(value){
        },
        onType: function(value){
        },
    });

    $('#serviceBtn').on('click', function() {

        $('#serviceCreate').datagrid({
            url: "/admin/configuration/service/create",
            method: 'GET',
            singleSelect: true,
            pagination: true,
            fitColumns: true,
            collapsible: true,
            showFooter: true,
            rownumbers: true,
            pageSize: 20,
            loadMsg: 'Loading Organizations',
            view: detailview,
            detailFormatter: function(rowIndex, rowData){
                return ` <table style="border: none; width: 100%;"> <tr> <td rowspan="4" style="border:0; width: 80px;"> <img src="https://picsum.photos/200/300?${rowIndex}" style="height: 60px; width: 60px; border-radius: 4px;"> </td> <td style="border:0; padding-left: 10px;"> <strong>Full Name:</strong> ${rowData.person_name}<br> <strong>Phone:</strong> ${rowData.phonenumber}<br> <strong>Email:</strong> ${rowData.email ?? 'N/A'}<br> <strong>National ID:</strong> ${rowData.nationalid ?? 'N/A'}<br> <strong>Patient Status:</strong> ${rowData.status}<br> <strong>Gender:</strong> ${rowData.gender ?? 'N/A'}<br> <strong>Age:</strong> ${rowData.age ?? 'N/A'} </td> </tr> <tr> <td style="border:0; padding-left: 10px;"> <strong>Next of Kin:</strong> ${rowData.next_of_kin ?? 'Not Provided'}<br> <strong>Relationship:</strong> ${rowData.next_of_kin_relation ?? 'N/A'}<br> <strong>Next of Kin Phone:</strong> ${rowData.next_of_kin_phone ?? 'N/A'} </td> </tr> </table> `;
            },
            onLoadSuccess: function(){
                $('#cardBlurred').removeClass('loader-active')
            },
            columns: [[
                {
                    field: 'b_id', title: 'Billable Item ID', width: 30, editor:'text',
                    formatter: (v, r) => r.b_id
                },
                {
                    field: 'service_name', title: 'Service Name', width: 30, editor:'text',
                    formatter: (v, r) => r.service_name
                },
                {           
                    field: 'cash_price', title: 'Cash Price', width: 30, editor:'text',
                    formatter: (v, r) => r.cash_price
                },
                {           
                    field: 'insurance_price', title: 'Insurance Price', width: 30, editor:'text',
                    formatter: (v, r) => r.insurance_price
                },
                {
                    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: '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', [
                {
                    field:'action',
                    type:'label'
                },
                {
                    field: 'max_patient',
                    type: 'numberbox',
                    options: { precision: 1 },
                },
            ]);

        $('#serviceCreate').datagrid('hideColumn', 'b_id');
    })

    $('#productBtn').on('click', function() {

        $('#productCreate').datagrid({
            url: "/admin/configuration/product/create",
            method: 'GET',
            singleSelect: true,
            pagination: true,
            fitColumns: true,
            collapsible: true,
            showFooter: true,
            rownumbers: true,
            pageSize: 20,
            loadMsg: 'Loading Organizations',
            view: detailview,
            detailFormatter: function(rowIndex, rowData){
                return ` <table style="border: none; width: 100%;"> <tr> <td rowspan="4" style="border:0; width: 80px;"> <img src="https://picsum.photos/200/300?${rowIndex}" style="height: 60px; width: 60px; border-radius: 4px;"> </td> <td style="border:0; padding-left: 10px;"> <strong>Full Name:</strong> ${rowData.person_name}<br> <strong>Phone:</strong> ${rowData.phonenumber}<br> <strong>Email:</strong> ${rowData.email ?? 'N/A'}<br> <strong>National ID:</strong> ${rowData.nationalid ?? 'N/A'}<br> <strong>Patient Status:</strong> ${rowData.status}<br> <strong>Gender:</strong> ${rowData.gender ?? 'N/A'}<br> <strong>Age:</strong> ${rowData.age ?? 'N/A'} </td> </tr> <tr> <td style="border:0; padding-left: 10px;"> <strong>Next of Kin:</strong> ${rowData.next_of_kin ?? 'Not Provided'}<br> <strong>Relationship:</strong> ${rowData.next_of_kin_relation ?? 'N/A'}<br> <strong>Next of Kin Phone:</strong> ${rowData.next_of_kin_phone ?? 'N/A'} </td> </tr> </table> `;
            },
            onLoadSuccess: function(){
                $('#cardBlurred').removeClass('loader-active')
            },
            columns: [[
                {
                    field: 'b_id', title: 'Billable Item ID', width: 30, editor:'text',
                    formatter: (v, r) => r.b_id
                },
                {
                    field: 'product_name', title: 'Product Name', width: 30, editor:'text',
                    formatter: (v, r) => r.product_name
                },
                {           
                    field: 'cash_price', title: 'Cash Price', width: 30, editor:'text',
                    formatter: (v, r) => r.cash_price
                },
                {           
                    field: 'insurance_price', title: 'Insurance Price', width: 30, editor:'text',
                    formatter: (v, r) => r.insurance_price
                },
                {
                    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: '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', [
                {
                    field:'action',
                    type:'label'
                },
                {
                    field: 'max_patient',
                    type: 'numberbox',
                    options: { precision: 1 },
                },
            ]);

        $('#productCreate').datagrid('hideColumn', 'b_id');
    })
});

</script>

{% endblock %}