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

{% block stylesheets %}
{{ parent() }}
<style></style>
{% endblock %}

{% block content %}

<div data-controller="inventory--stock-check" data-inventory--stock-check-branch-name-value="{{ branch.getName() }}">

    <div class="card shadow rounded p-4 card-soft-blue border-details">
        <div class="h4 mb-4 font-weight-light text-shadow">All Stock Check History</div>

        <table id="stockCheckManagementGrid" class="table table-hover table-sm" style="width:100%; height:auto; font-weight:normal;">
            <thead><tr></tr></thead>
        </table>
    </div>

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

        <div id="stockCheckStatus" class="mb-3"></div>

        <div class="tab-content mt-3" id="stockCheckTabsContent" style="display: none">

            <ul class="nav nav-tabs" id="stockCheckTabs" role="tablist">
                <li class="nav-item" role="presentation"> 
                    <button class="nav-link active" id="all-items-tab" data-toggle="tab" data-target="#all-items-tab-pane" type="button" role="tab" aria-controls="all-items-tab-pane" aria-selected="true">
                        All Store Items
                    </button>
                </li>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="checked-items-tab" data-toggle="tab" data-target="#all-items-tab-pane" type="button" role="tab" aria-controls="all-items-tab-pane" aria-selected="false">
                        Checked Items
                    </button>
                </li>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pending-items-tab" data-toggle="tab" data-target="#all-items-tab-pane" type="button" role="tab" aria-controls="all-items-tab-pane" aria-selected="false">
                        Unchecked Items
                    </button>
                </li>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="complete-check-tab" data-toggle="tab" data-target="#complete-check-tab-pane" type="button" role="tab" aria-controls="complete-check-tab-pane" aria-selected="false">
                        Complete Stock Check
                    </button>
                </li>
            </ul>

            <div class="tab-pane fade show active" id="all-items-tab-pane" role="tabpanel" aria-labelledby="all-items-tab">
                <table id="stockCheckItems" 
                    class="table table-striped table-bordered"
                    style="width:100%; height:auto; font-weight:normal; text-transform: uppercase;"
                    toolbar="#tb">
                    <thead><tr></tr></thead>
                </table>
            </div>

            <div class="tab-pane fade" id="complete-check-tab-pane" role="tabpanel" aria-labelledby="complete-check-tab"> 
                <div id="stockCheckComplete" class="p-3 border"></div>
            </div>

        </div>
    </div>

</div>

{% endblock %}

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

<script>

$(document).on('click', '#complete-check-tab', function(){
    $('#stockCheckComplete').html(`
<div class="card shadow-sm border-0 mb-3"> <div class="card-body"> <div class="row text-center"> <div class="col-md-3"> <h6 class="text-muted mb-1">Branch / Store</h6>
<h5 id="storeName">${$('#scBranchStore').text()}</h5> </div> <div class="col-md-3"> <h6 class="text-muted mb-1">Handled By</h6> <h5 id="handledBy">${$('#scUser').text()}</h5> </div>
<div class="col-md-3"> <h6 class="text-muted mb-1">Duration</h6> <h5 id="duration">${$('#scDate').data('duration')}</h5> </div> <div class="col-md-3"> <h6 class="text-muted mb-1">Time Status</h6>
<h5 id="timeElapsed">—</h5> </div> </div> </div> </div>

<div id="stockCheckSummaryCard" class="card shadow-sm border-0 mb-3"> <div class="card-body"> 

<div class="row text-center"> <div class="col-md-2"> <h4 id="totalItemsCount">${$('#scProgressItemsCheckedBar').data('totalItems')}</h4>
<small>Total Items</small> </div> <div class="col-md-2"> <h4 id="checkedItemsCount">${$('#scProgressItemsCheckedBar').data('checkedItems')}</h4> <small>Checked Items</small> </div>
<div class="col-md-2"> <h4 id="pendingItemsCount">${parseInt($('#scProgressItemsCheckedBar').data('totalItems')) - parseInt($('#scProgressItemsCheckedBar').data('checkedItems'))}</h4>
<small>Pending Items</small> </div> <div class="col-md-2"> <h4 id="varianceCount">0</h4> <small>Items with Variance</small> </div> <div class="col-md-2"> <h4 id="completionPercentage">${$('#scProgressItemsCheckedText').text()}</h4>
<small>Completion</small> </div> <div class="col-md-2"> <h4 id="lastUpdated">—</h4> <small>Last Updated</small> </div> </div>

<hr>

<div class="mt-3 text-center">
<button class="btn btn-primary btn-sm" id="finalizeStockCheckBtn">Checking...</button>
</div>
</div>
</div>

<div class="">
<table id="varianceItems" class="table table-striped table-bordered" style="width:100%; height:auto; font-weight:normal; text-transform: uppercase;" toolbar="#tb">
<thead><tr></tr></thead>
</table>
</div> `)

    $('#varianceItems').datagrid({
        url: `/inventory/branch/store/${$('#scBranchStore').data('storeId')}/view/items?stock_check_id=${$('#scNumber').data('stock_check_id')}&variance=true`,
        singleSelect: true,
        pagination: true,
        fitColumns: true,
        collapsible: true,
        showFooter: true,
        rownumbers: true,
        pageSize: 20,
        clickToEdit: true,
        onLoadSuccess: function(data){
            $('#cardBlurred').removeClass('loader-active')

            $.ajax({
                method: 'GET',
                url: '/inventory/stock_check/status',
                data: {
                    stock_check_id: $('#scNumber').data('stock_check_id')
                },
                success: (response) => {
                    if(response.status){
                        $('#finalizeStockCheckBtn').text('Complete Stock Check')
                    }else{
                        $('#finalizeStockCheckBtn').replaceWith('<span class="text-danger fw-semibold">✔ Stock Check Closed</span>')
                    }
                }
            })

            const grid = $('#varianceItems');
            grid.datagrid('resize');
            grid.datagrid('fixRowHeight');

            $('#varianceCount').text($('#varianceItems').datagrid('getData').total)

            const opts = $(this).datagrid('options');
        },
        columns: [[
            {
                field: 'iiu_id', title: 'Inventory Item Unit Id', width: 30,
                formatter: (v, r) => r.iiu_id
            },
            {
                field: 'item_checked', title: 'Item Checked Status', width: 30,
                formatter: (v, r) => v
            },
            {
                field: 'i_id', title: 'Inventory Id', width: 30,
                formatter: (v, r) => r.iiu_id
            },
            {
                field: 'item', title: 'Item', width: 30,
                formatter: (v, r) => r.item
            },
            {
                field: 'item_unit', title: 'Unit', width: 34, 
                formatter: (v, r) => r.item_unit
            },
            {
                field: 'stock_quantity', title: 'Stock Quantity', width: 30, 
                formatter: (v, r) => r.stock_quantity,
                styler: (v, r) => {
                    return 'background-color:#d4edda; color:#155724;'; // light green
                }
            },
            {
                field: 'stock_counted', title: 'Stock Counted', width: 30, editor: { type: 'numberbox', options: { min: 0 } },
                formatter: (v, r) => v,
                styler: (v, r) => {
                    if (v === null || v === undefined || v === '') {
                        return '';
                    } else if (r.stock_quantity === r.stock_counted) {
                        // Exact match — green
                        return 'background-color:#d4edda; color:#155724;';
                    } else if (r.stock_counted < r.stock_quantity) {
                        // Missing items — red
                        return 'background-color:#f8d7da; color:#721c24;';
                    } else if (r.stock_counted > r.stock_quantity) {
                        // Overcounted — yellow
                        return 'background-color:#fff3cd; color:#664d03;';
                    }
                }                
            },
            {
                field: 'stock_count_variance', title: 'Stock Count Variance', width: 30, 
                formatter: (v, r) => v,
                styler: (v, r) => {
                    if(r.stock_count_variance === 0){
                        return 'background-color:#d4edda; color:#155724;'; // light green
                    } else if (r.stock_count_variance > 0) {
                        return 'background-color:#f8d7da; color:#721c24;'; // light red
                    } else if (r.stock_count_variance < 0) {
                        return 'background-color:#fff3cd; color:#856404;'; // light yellow
                    }
                }        
            },
            {
                field: 'variance_reason', title: 'Variance Reason', width: 30, editor: 'text',
                formatter: (v, r) => v,
            },
            {           
                field: 'action', title: 'Action', width: 18, align: 'center',
                formatter: (v, r) => {
                    if(r.item_checked){
                        return '<span>Processed</span>'
                    }else{
                        return '<span><a href="javascript:void(0)" onclick="saveThisStockCheckInfo(this)" data-action="">Complete Stock Check</a></span>'
                    }
                }
            },
        ]],
    }).datagrid('enableFilter', [ ]);

    $('#varianceItems').datagrid('hideColumn', 'iiu_id');
    $('#varianceItems').datagrid('hideColumn', 'item_checked');
    $('#varianceItems').datagrid('hideColumn', 'i_id');
})

$(document).on('click', '#finalizeStockCheckBtn', function(){

    $(this).attr('disabled', true)

    notify('success', 'Stock Check Closed', 'The Stock Check has been closed');
    $(this).replaceWith('<span class="text-success fw-semibold">✔ Stock Check Closed</span>');

    $.ajax({
        method: "POST",
        url: '/inventory/stock_check/close',
        data: {
            stock_check_id: $('#scNumber').data('stock_check_id')
        },
        success:(response) => {
        },
        error:(error) => {},
    })
})

$(document).on('click', '#completeStockCheckBtn', function(e){
    e.preventDefault()
    $("#complete-check-tab").click()
})

$(document).on('click', '#addStockTakeTimeBtn', function(e){
    e.preventDefault()
})


function reloadStockGrid(filter = '', context = '') {
    const grid = $('#stockCheckItems');
    const opts = grid.datagrid('options');
    const baseUrl = `/inventory/branch/store/${$('#scBranchStore').data('storeId')}/view/items`;
    const stockCheckId = $('#scNumber').data('stock_check_id');

    opts.url = `${baseUrl}?stock_check_id=${stockCheckId}${filter}`;
    grid.datagrid('reload', {
        context: context
    });
}

$(document).on('click', '#checked-items-tab', function () {
    reloadStockGrid('&checked=true', 'checked');
});

$(document).on('click', '#pending-items-tab', function () {
    reloadStockGrid('&pending=true', 'pending');
});

$(document).on('click', '#all-items-tab', function () {
    reloadStockGrid('', 'all');
});

function saveThisStockCheckInfo(el){
    const elHtml = el.outerHTML;

    const rowIndex = parseInt(el.closest('tr.datagrid-row').getAttribute('datagrid-row-index'));
    $('#stockCheckItems').datagrid('endEdit', rowIndex);

    const row = $('#stockCheckItems').datagrid('getRows')[rowIndex];

    if (parseFloat(row['stock_count_variance']) > 0) {
        const reason = (row['variance_reason'] || '').trim();

        if (reason.length < 4) {
            notify('error', 'Variance Reason cannot be empty or too short.', 'You need to provide a detailed explanation for why there is a variance.');
            return;
        }
    }

    $.ajax({
        method: 'POST',
        url: '/inventory/stock_check/info/store', 
        data: {
            formData: {
                sc_id: $('#scNumber').data('stock_check_id'),
                i_id: row['i_id'],
                stock_count: row['stock_counted'],
                stock_count_variance: row['stock_count_variance'],
                variance_reason: row['variance_reason'],
            }
        },
        success: (response) => {
            if(response.success){
                el.outerHTML = '<span class="text-success">Processed</span>';
                notify('success', response.title, response.message)

                $('#stockCheckItems').datagrid('reload');

            }else{
                $(el).replaceWith(elHtml)
                notify('error', 'An error occurred. Please try again', 'Stock Check for ' + row['item'] + ' failed')
            }
        },
        error: function(error){
            $(el).replaceWith(elHtml)
            notify('error', 'An error occurred. Please try again', 'Stock Check for ' + row['item'] + ' failed')
        },
    })
}

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: 2000,
        notificationsGap: null,
        notificationsPadding: null,
        type: 'filled',
        position: 'x-center',
        customWrapper: '',
    })
}

$(document).ready(function(){

    $('#viewStockCheckProgressInfo').window({
        onClose: function () {
            $('#stockCheckTabs').find('[data-toggle="tab"]').removeClass('active');
            $('.tab-pane').removeClass('show active');

            $('#all-items-tab').addClass('active');
            $('#all-items-tab-pane').addClass('show active');
        }
    });

    $('#stockCheckManagementGrid').datagrid({
        url: '/inventory/' + {{ branch.getId() }} + '/stores/stock_check', 
        method: 'GET',
        singleSelect: true,
        pagination: true,
        fitColumns: true,
        collapsible: true,
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Stock Checks...',
        columns: [[
            { 
                field: 'check_number', title: 'Stock Check No', width: 30, 
                formatter: (v, r) => v
            },
            { 
                field: 'sc_id', title: 'Stock Check Id', width: 30, 
                formatter: (v, r) => v
            },
            { 
                field: 'store_name', title: 'Store', width: 30, 
                formatter: (v, r) => v
            },
            { 
                field: 's_id', title: 'Store Id', width: 30, 
                formatter: (v, r) => v
            },
            {
                field: 'started_on', title: 'Started', width: 30, 
                formatter: (v, r) => v 
            },
            {
                field: 'duration', title: 'Duration', width: 30, 
                formatter: (v, r) => v 
            },
            { 
                field: 'status', title: 'Status', width: 25, align: 'center',
                formatter: (v,r) => {
                    if (r.is_active) {
                        return '<span class="badge badge-warning">IN PROGRESS</span>';
                    } else {
                        return '<span class="badge badge-success">COMPLETED</span>';
                    }
                }
            },
            { 
                field: 'checked_by', title: 'Checked By', width: 30,
                formatter: (v, r) => r.checked_by
            },
            {         
                field: 'action', title: 'Action', width: 30, align: 'center',
                formatter: (v, r) => {
                    return '<span><a href="javascript:void(0);" data-action="inventory--stock-check#viewThisStockCheckDetails">Details</a></span>';
                }
            },
        ]],
    }).datagrid('enableFilter', [ ]);

    $('#stockCheckManagementGrid').datagrid('hideColumn', 's_id');
    // $('#stockCheckManagementGrid').datagrid('hideColumn', 'time_remaining');
    $('#stockCheckManagementGrid').datagrid('hideColumn', 'sc_id');
})
</script>

{% endblock %}