{% extends '@inventory/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 class="row text-dark">

    <!-- Total Items -->
    <div class="col-md-3 mb-3">
        <div class="card shadow">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="card-title mb-1">Total Items</h5>
                    <h3 class="mb-0">450</h3>
                </div>
                <i class="fas fa-box fa-2x"></i>
            </div>
        </div>
    </div>

    <!-- Low Stock Items -->
    <div class="col-md-3 mb-3">
        <div class="card shadow">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="card-title mb-1">Low Stock</h5>
                    <h3 class="mb-0">25</h3>
                </div>
                <i class="fas fa-exclamation-triangle fa-2x"></i>
            </div>
        </div>
    </div>

    <!-- Out of Stock Items -->
    <div class="col-md-3 mb-3">
        <div class="card shadow">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="card-title mb-1">Out of Stock</h5>
                    <h3 class="mb-0">10</h3>
                </div>
                <i class="fas fa-times-circle fa-2x"></i>
            </div>
        </div>
    </div>

    <!-- Total Stock Value -->
    <div class="col-md-3 mb-3">
        <div class="card shadow">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="card-title mb-1">Total Stock Value</h5>
                    <h3 class="mb-0">10</h3>
                </div>
                <i class="fas fa-times-circle fa-2x"></i>
            </div>
        </div>
    </div>
</div>

<div class="row" data-controller="inventory--inventory" 
    data-inventory--inventory-loader-static-value="{{ asset('bundles/inventory/images/reload/reload_static.png') }}"
    data-inventory--inventory-loader-gif-value="{{ asset('bundles/inventory/images/reload/reload.gif') }}">
    <div class="col-md-12 mt-5">
<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;">
        <span><h3><strong>INVENTORY OVERVIEW</strong></h3></span>
        <button class="btn btn-primary d-flex align-items-center gap-2" data-toggle="modal" data-target="#inventoryModalCreate">
            Add Inventory Item
        </button>
    </div>

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

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

<div class="modal fade" id="inventoryModalCreate" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" data-inventory--inventory-target="inventoryItemModalForm">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Add Items to Inventory</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="{{ path('app_inventory_store') }}" data-inventory--inventory-target="inventoryItemsForm" id="formInputs">

                <div class="modal-body">

                    <div class="form-group mb-4">
                        <label for="batch_number">Batch Number</label>
                        <div class="input-group">
                            <input 
                                type="text"
                                class="form-control inventory_item" 
                                id="batch_number" 
                                name="batch_number"
                                data-inventory--inventory-target="batch_number"
                                placeholder="Enter batch number" />
                            <span 
                                id="batchNumberReloadSpan"
                                class="input-group-text p-1 rounded-0 rounded-end d-flex justify-content-center align-items-center" 
                                data-action="click->inventory--inventory#reloadBatchInput"
                                style="width: 50px; cursor: pointer;background-color: #e9eaf3;pointer-events: none">
                                <img src="{{ asset('bundles/inventory/images/reload/reload_static.png') }}" width="25px" alt="Reload Icon">
                            </span>
                        </div>
                    </div>

                    <div class="p-3 mb-3 border border-warning rounded-4 shadow-sm bg-warning-subtle" id="unitRowTemplate">
                        <div class="row align-items-end unitRowTemplate">
                            <!-- Item -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="item">Item</label>
                                    <input type="text" class="form-control inventory_item" name="item" value="" data-inventory--inventory-target="item">
                                </div>       
                            </div>

                            <!-- Quantity + Unit -->
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="quantityUnit"> 
                                        Unit Quantity 
                                        <i data-toggle="tooltip" data-placement="right" title="Start typing to choose a unit or add a custom one." 
                                            class="fa-solid fa-circle-question ms-1" 
                                            style="font-size: 14px; cursor: pointer; color: maroon; vertical-align: super;">
                                        </i> 
                                    </label>
                                    <div class="d-flex">
                                        <input type="number" class="inventory_item rounded-0 form-control me-2" placeholder="e.g 20" name="quantity" min="1" data-inventory--inventory-target="quantity" style="max-width: 50%;">
                                        <select class="form-select inventory_items unitLookup" name="unit" data-inventory--inventory-target="unit">
                                            <option value="">Select Unit</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Store -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="store">Store</label>
                                    <select class="form-select storeLookup inventory_items" name="store" data-inventory--inventory-target="store">
                                        <option value="">Select Store</option>
                                    </select>
                                </div>       
                            </div>

                            <!-- Add Button -->
                            <div class="col-md-1 d-flex align-items-end">
                                <div class="form-group w-100">
                                    <button 
                                        id="batchInventoryItemsBtn"
                                        type="button" class="btn btn-outline-secondary w-100 add-unit-row"
                                        data-action="inventory--inventory#batchInventoryItems"
                                        data-inventory--inventory-target="batchInventoryItemsBtn"
                                        style="opacity: 0.5; pointer-events: none;">
                                        <i class="fa fa-plus"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Divider -->
                    <!-- <hr class="mb-4"> -->

                    <div class="border border-secondary rounded-4 shadow-sm p-3 bg-light" style="display: none;" data-inventory--inventory-target="inventoryItemsDiv">
                        <h6 class="text-muted mb-3">Inventory Items</h6>

                        <div class="table-responsive">
                            <table class="table table-sm table-striped mb-0" data-inventory--inventory-target="inventoryItemsTable">
                                <thead class="table-secondary" style="position: sticky; top: 0; z-index: 2;">
                                    <tr>
                                        <th scope="col" data-editable="false">#</th>
                                        <th scope="col" data-editable="false" style="display: none" id="itemStaticCreationId">itemStaticCreationId</th>
                                        <th scope="col">Item</th>
                                        <th scope="col">Quantity</th>
                                        <th scope="col">Unit</th>
                                        <th scope="col">Store</th>
                                        <th scope="col" data-editable="false">Actions</th>
                                    </tr>
                                </thead>
                                <tbody style="">
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

                <div class="modal-footer d-flex justify-content-between align-items-center">
                    <button class="button" type="button" data-action="inventory--inventory#submitBatchInventoryItemsBtn" data-inventory--inventory-target="submitBatchInventoryItemsBtn" disabled>
                        <span class="submit">Add Items to Inventory</span>
                        <span class="loading"><i class="fa fa-refresh"></i></span>
                        <span class="check"><i class="fa fa-check"></i></span>
                        <span class="error"><i class="fas fa-times"></i></span> 
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>
    </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 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: '',
    })
}

// Combined handler for text inputs and selectize fields
function validateInventoryInputs() {
    let allFilled = true;
    let selectizeFilled = true;

    // Check if all input fields are filled
    $('#formInputs .inventory_item').each(function () {
        if ($(this).val().trim() === '') {
            allFilled = false;
            return false; // break loop early
        }
    });

    // Get selectize instances safely
    const selectizeUnit = $('.unitLookup')[0]?.selectize;
    const selectizeStore = $('.storeLookup')[0]?.selectize;

    if (!selectizeUnit || !selectizeStore || selectizeUnit.items.length === 0 || selectizeStore.items.length === 0) {
        selectizeFilled = false;
    }

    // Enable/disable button
    if (allFilled && selectizeFilled) {
        $('#batchInventoryItemsBtn').css({ 'pointer-events': 'auto', 'opacity': '1' });
        $('#batchInventoryItemsBtn').removeClass('btn-outline-secondary')
        $('#batchInventoryItemsBtn').addClass('btn-outline-success')
    } else {
        $('#batchInventoryItemsBtn').css({ 'pointer-events': 'none', 'opacity': '0.5' });
        $('#batchInventoryItemsBtn').addClass('btn-outline-secondary')
        $('#batchInventoryItemsBtn').removeClass('btn-outline-success')
    }
}

// Bind event listeners (works even with dynamically added rows)
$(document).on('input', '#formInputs .inventory_item', validateInventoryInputs);
$(document).on('change', '.unitLookup, .storeLookup', validateInventoryInputs);

$(document).on('blur', '#batch_number', function(){
    if($(this).val().length > 0){
        $(this).prop('readonly', true)
        $('#batchNumberReloadSpan').css({'background-color' : '#fff', 'pointer-events' : 'auto'})
    }
});

// Also run on initial page load (in case of pre-filled data)
$(document).ready(validateInventoryInputs);

$(document).ready(function() {

    $('#inventoryCreate').datagrid({
        url: "/inventory/view",
        method: 'GET',
        singleSelect: true,
        pagination: true,
        fitColumns: true,
        collapsible: true,
        showFooter: true,
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Organizations',
        onLoadSuccess: function(){
            $('#cardBlurred').removeClass('loader-active')
        },
        columns: [[
            {
                field: 'i_id', title: 'Inventory Item ID', width: 30, editor:'text',
                formatter: (v, r) => r.i_id
            },
            {
                field: 'item', title: 'Item', width: 30, editor:'text',
                formatter: (v, r) => r.item
            },
            {
                field: 'stock_quantity', title: 'Stock Quantity', width: 30, editor:'text',
                formatter: (v, r) => r.stock_quantity
            },
            {           
                field: 'unit', title: 'Unit', width: 30, editor:'text',
                formatter: (v, r) => r.unit
            },
            {           
                field: 'item_status', title: 'Status', width: 30, editor:'text',
                formatter: function(v, r){
                    if (r.item_status === 'in_stock') {
                        return '<span class="badge bg-success">In Stock</span>';
                    }
                    if (r.item_status === 'low_stock') {
                        return '<span class="badge bg-warning text-dark">Low Stock</span>';
                    }
                    if (r.item_status === 'out_of_stock') {
                        return '<span class="badge bg-danger">Out of Stock</span>';
                    }
                    if (r.item_status === 'back_ordered') {
                        return '<span class="badge bg-info text-dark">Back Ordered</span>';
                    }
                    if (r.item_status === 'discontinued') {
                        return '<span class="badge bg-secondary">Discontinued</span>';
                    }
                }
            },
            {           
                field: 'store', title: 'Store', width: 30, editor:'text',
                formatter: (v, r) => r.store
            },
            {
                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;
                    }
                }
            },
        ]],
    }).datagrid('enableFilter', [ ]);

    $('#inventoryCreate').datagrid('hideColumn', 'i_id');

    // openOnFocus not working
    $('.unitLookup').selectize({
        maxOptions: 10,
        openOnFocus: true,
        placeholder: "unit",
        preload: true, // <--- important!
        plugins: ["auto_position"],
        valueField: 'u_id',
        labelField: 'unit',
        searchField: 'unit',
        create: true,
        load: function(query, callback) {
            fetch('/inventory/lookup?unit=' + encodeURIComponent(query || ''))
                .then(response => response.json())
                .then(data => callback(data))
                .catch(() => callback());
        }
    });

    $('.storeLookup').selectize({
        maxOptions: 10,
        openOnFocus: true,
        placeholder: "Start typing to select store",
        preload: true, // <--- important!
        plugins: ["auto_position"],
        valueField: 's_id',
        labelField: 'store_name',
        searchField: 'store_name',
        load: function(query, callback) {
            fetch('/inventory/lookup?store=' + encodeURIComponent(query || ''))
                .then(response => response.json())
                .then(data => callback(data))
                .catch(() => callback());
        }
    });
});

</script>

{% endblock %}