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

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

<style>

.placeholder {
    display: inline-block;
    height: 1em;
    background: #e0e0e0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.placeholder::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: -150px;
    height: 100%;
    width: 150px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: loading 1.5s infinite;
}
@keyframes loading {
100% {
    left: 100%;
}
}

/* Variations */
.placeholder.col-6 { width: 50%; }
.placeholder.col-8 { width: 70%; }
.placeholder.col-4 { width: 40%; }
.placeholder.col-2 { width: 20%; }
.placeholder-lg { height: 1.5em; }
.placeholder-sm { height: 0.75em; }


.selectize-control {
    min-width: 300px;
    flex-grow: 1;
}

@keyframes flash {
0% { background-color: #ffe48d; } /* start color (e.g., red) */
50% { background-color: #ffffff; } /* end color (e.g., white) */
100% { background-color: #ffe48d; } /* return to start color */
}

.flash-active {
    animation: flash 1s infinite alternate; /* apply animation */
}

.proceed-btn {
    background-color: #d48806; /* deeper amber, contrasts with yellow box */
    color: #fff !important;
    font-weight: 600;
    border: 2px solid #b36b00; /* darker outline for visibility */
    border-radius: 8px;
    padding: 6px 16px;
    margin-top: 10px;
    display: block;
    width: fit-content;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s ease-in-out;
}
.proceed-btn:hover {
    background-color: #b36b00 !important; /* darker hover */
    border-color: #804d00;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
</style>

<!-- 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="inventory--branch" id="inventoryBranchControllerDiv">

    <div class="row mt-2">
        <div class="col-md-11 m-auto">
            <div class="card shadow-sm rounded-4 p-4">

                <div class="d-flex justify-content-between align-items-center mb-3" style="margin: 10px 0;">

                    <div>
                        <button class="btn btn-primary" style="border-radius: 0px" id="viewAllBranchesBtn">
                            <i class="bi bi-arrow-counterclockwise"></i> VIEW ALL
                        </button>
                    </div>

                    <div>
                        <h3 class="mb-0 text-center">
                            <strong id="branchName">All Branch Orders</strong>
                        </h3>
                    </div>

                    <div class="d-flex align-items-center gap-2" style="max-width: 400px;">
                        <select class="form-select branchLookup" style="border-radius: 0px; min-width: 200px;">
                        </select>
                        <button class="btn btn-primary" style="border-radius: 0px" id="branchSearchBtn">
                            <i class="bi bi-search"></i> SEARCH
                        </button>
                    </div>

                </div>

                <table id="approvedBranchRequisitions"
                    class="table table-responsive"
                    style="width:100%; height:auto; font-weight:normal; text-transform: uppercase;"
                    toolbar="#tb">

                    <thead>
                        <tr>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div id="viewBranchOrderRequisitionDetailsWindow" class="easyui-window" title="REQUISITION" data-options="iconCls:'icon-save'" style="width:70%;max-height:91%;height:91%;overflow:auto;padding:10px" closed="true">

        <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2" id="windowRequisitionStatus"> </div>

        <table id="branchRequisitionItems" 
            class="table table-responsive" 
            style="width:100%; height:auto; font-weight:normal; text-transform: uppercase;" 
            toolbar="#tb"> 

            <thead> 
                <tr> 
                </tr> 
            </thead> 
        </table> 
    </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 cacheModal(modal){

    // cache the original modal
    var originalModal = modal.clone()

    // On modal hidden, restore it
    modal.on('hidden.bs.modal', function () {
        modal.remove();
        let newModal = originalModal.clone()
        $('#inventoryBranchControllerDiv').append(newModal); 
    });
}

let branch_slug = {{ branch.getSlug()|json_encode|raw }}

let url = "/inventory/view/all/branch/approved/orders"

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

    let selectize = $('.branchLookup')[0].selectize;
    let branchId = selectize.getValue();
    let branchName = selectize.options[branchId].branch_name

    $('#branchName').text('').text(branchName + ' Branch Orders')

    let newUrl = "/inventory/view/all/branch/approved/orders?branch_id=" + branchId;
    $('#approvedBranchRequisitions').datagrid('options').url = newUrl;
    $('#approvedBranchRequisitions').datagrid('reload');
})

$('#viewAllBranchesBtn').on('click', function(){
    $('#branchName').text('').text('All Branch Orders')
    let newUrl = "/inventory/view/all/branch/approved/orders"
    $('#approvedBranchRequisitions').datagrid('options').url = newUrl;
    $('#approvedBranchRequisitions').datagrid('reload');
})

// make this button not clickable when all items have been dispatched
$('body').on('click', '#autoDispatchBtn', function(){

    var rows = $('#branchRequisitionItems').datagrid('getRows');
    let quantity_to_dispatch_to_branch = 0;
    let canDispatchExists = false; 
    let undispatchedNoStock = [];

    rows.forEach(function(row, index){
        if(!row.is_dispatched){
            if (parseFloat(row.quantity_in_stock) > 0) {
                const ordered = parseFloat(row.quantity_ordered) || 0;
                const inStock = parseFloat(row.quantity_in_stock) || 0;
                const maxAllowed = parseFloat(row.max_dispatch_quantity) || 0;

                // Default: dispatch what was ordered
                quantity_to_dispatch_to_branch = ordered;

                // If ordered > stock, cap at available stock
                if (ordered > inStock) {
                    quantity_to_dispatch_to_branch = inStock;
                }

                // If ordered > maxAllowed, cap at max dispatch limit
                if (ordered > maxAllowed) {
                    quantity_to_dispatch_to_branch = maxAllowed;
                }

                // Final safety: never exceed both stock and maxAllowed
                quantity_to_dispatch_to_branch = Math.min(quantity_to_dispatch_to_branch, inStock, maxAllowed);

                // Ensure not negative
                if (quantity_to_dispatch_to_branch < 0) {
                    quantity_to_dispatch_to_branch = 0;
                }

                $('#branchRequisitionItems').datagrid('updateRow', {
                    index: index,
                    row: { quantity_to_dispatch: quantity_to_dispatch_to_branch }
                });

                if(quantity_to_dispatch_to_branch > 0){
                    canDispatchExists = true;
                }
            }
        }
    })

    if(!canDispatchExists){
        alert('Remaining items cannot be dispatched because of low inventory stock')
        return; 
    }

    $(this).removeClass('btn-pimary').addClass('btn-success')
    $(this).text('Confirm & Save Items')
    $(this).attr('id', 'postDispatchableItems')
})

$('body').on('click', '#postDispatchableItems', function(){

    var rows = $('#branchRequisitionItems').datagrid('getRows');
    let formData = []
    $('#branchRequisitionItems').datagrid('loading');
    $('#branchRequisitionItems').datagrid('options').loadMsg = 'Dispatching Items'; 
    $('#branchRequisitionItems').datagrid('endEdit', 0);

    rows.forEach(function(row, index){
        if(row.quantity_to_dispatch > 0){
            formData.push({
                requisition_item_id: row['ri_id'],
                quantity_to_dispatch: row['quantity_to_dispatch']
            })
        }
    })

    $.ajax({
        url: '/inventory/requisition_items/dispatch',
        method: 'POST',
        data: {
            formData: formData
        },
        success: function(res){
            $('#branchRequisitionItems').datagrid('loaded'); 
            $('#branchRequisitionItems').datagrid('load');
            if(res.success){
                new Notify ({
                    status: 'success',
                    title: res.title,
                    text: res.message,
                    effect: 'fade',
                    speed: 300,
                    customClass: '',
                    customIcon: '',
                    showIcon: true,
                    showCloseButton: true,
                    autoclose: true,
                    autotimeout: 2000,
                    notificationsGap: null,
                    notificationsPadding: null,
                    type: 'filled',
                    position: 'x-center',
                    customWrapper: '',
                })
            }else{
                new Notify ({
                    status: 'error',
                    title: res.title,
                    text: res.message,
                    effect: 'fade',
                    speed: 300, customClass: '', customIcon: '', showIcon: true, showCloseButton: true,
                    autoclose: true, autotimeout: 2000, notificationsGap: null, notificationsPadding: null, type: 'filled',
                    position: 'x-center',
                    customWrapper: '',
                })
            }
        },
        error: function(error){
            $('#dg').datagrid('loaded'); 
            $('#branchRequisitionItems').datagrid('load');
            console.log(error)
        },
    })

    $(this).addClass('btn-pimary').removeClass('btn-success')
    $(this).text('Auto Dispatch Items')
    $(this).attr('id', 'autoDispatchBtn')
})

$(document).ready(function() {

    $('#viewBranchOrderRequisitionDetailsWindow').window({
        onClose: function(){
            $('#approvedBranchRequisitions').datagrid('load')
        }
    })

    $('#approvedBranchRequisitions').datagrid({
        url: url,
        method: 'GET',
        singleSelect: true,   // allow multiple rows to be selected
        checkOnSelect: true,   // check when selecting a row
        selectOnCheck: true,    // select when checking a row
        pagination: true,
        fitColumns: true,
        collapsible: true,
        showFooter: true,
        idField: 'iiu_id',
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Branch Orders',
        onLoadSuccess: function(){
            $('#cardBlurred').removeClass('loader-active')
        },
        columns: [[
            {
                field: 'req_id', title: 'Requisition Id', width: 30, editor:'text', 
                formatter: (v, r) => r.req_id
            },
            {
                field: 'req_number', title: 'Requisition Number', width: 30, editor:'text',
                formatter: (v, r) => r.req_number
            },
            {
                field: 'branch_name', title: 'Branch', width: 30, editor:'text',
                formatter: (v, r) => r.branch_name
            },
            {
                field: 'order_date', title: 'Order Date', width: 30, editor:'text',
                formatter: (v, r) => r.order_date
            },
            {           
                field: 'status', title: 'Status', width: 15, editor:'text', align: 'center',
                formatter: (v, r) => {
                    if (r.is_dispatching) {
                        return '<i class="fa fa-truck"></i> Dispatching';
                    } else if (r.is_dispatched_fully) {
                        return '<i class="fa fa-check"></i> Dispatched';
                    } else {
                        return '<i class="fa fa-clock"></i> Not Dispatched';
                    }
                },
                styler: (v, r) => {
                    if (r.is_dispatching) {
                        return 'background-color:#fff3cd; color:#856404;'; // light yellow
                    } else if (r.is_dispatched_fully) {
                        return 'background-color:#d4edda; color:#155724;'; // light green
                    } else {
                        return 'background-color:#f8d7da; color:#721c24;'; // light red
                    }
                }
            },
            {
                field:'action',title:'Action',width:20,align:'center',
                formatter:function(value,row,index){
                    var e = '<a href="javascript:void(0)" data-action="inventory--branch#viewBranchRequisition ">View</a> ';
                    return e;
                }
            },
        ]],
    }).datagrid('enableFilter', [ ]);

    $('#approvedBranchRequisitions').datagrid('hideColumn', 'req_id');

    $('.branchLookup').selectize({
        maxOptions: 10,
        openOnFocus: true,
        placeholder: "Select Branch",
        preload: true, // <--- important!
        plugins: ["auto_position"],
        valueField: 'b_id',
        labelField: 'branch_name',
        searchField: 'branch_name',
        load: function(query, callback) {
            fetch('/inventory/branch/lookup?branch=' + encodeURIComponent(query || ''))
                .then(response => response.json())
                .then(data => callback(data))
                .catch(() => callback());
        }
    });
})
</script>
{% endblock %}