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

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

.card {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.stat-card .card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-card .icon-circle {
    background-color: #e9ecef;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

{% endblock %}

{% block content %}

<div data-controller="inventory--store" id="storeDetailsDiv">
    <div class="profile-container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>{{ store.isMain() ? store.getName() ~ ' [MAIN STORE]' : store.getName() }}</h2>
        </div>

        <div class="row g-4 mb-4">
            <div class="col-md-6 col-lg-3">
                <div class="card stat-card h-100">
                    <div class="card-body">
                        <div>
                            <p class="text-muted mb-0">Total Items</p>
                            <h3 class="font-weight-bold">{{ store_stock_quantity }}</h3>
                        </div>
                        <div class="icon-circle text-primary">
                            <i class="fa fa-cubes fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card stat-card h-100">
                    <div class="card-body">
                        <div>
                            <p class="text-muted mb-0">Daily Stock Moves</p>
                            <h3 class="font-weight-bold">12</h3>
                        </div>
                        <div class="icon-circle text-success">
                            <i class="fa fa-dollar fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card stat-card h-100">
                    <div class="card-body">
                        <div>
                            <p class="text-muted mb-0">Special Items</p>
                            <h3 class="font-weight-bold">45</h3>
                        </div>
                        <div class="icon-circle text-info">
                            <i class="fa fa-truck fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card stat-card h-100">
                    <div class="card-body">
                        <div>
                            <p class="text-muted mb-0">Top moving Category</p>
                            <h3 class="font-weight-bold">Plano/-3.25axis60add+2.00</h3>
                        </div>
                        <div class="icon-circle text-warning">
                            <i class="fa fa-star fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">In-Stock Items</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <div>
                                <div class="card shadow-sm rounded-4 p-4">
                                    <table id="storeStockItems"
                                        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>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">Inventory Breakdown</h5>
                    </div>
                    <div class="card-body d-flex justify-content-center align-items-center">
                        <canvas id="inventoryChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="viewItemDetails" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="max-width: 60%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="itemLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <ul class="nav nav-tabs" id="itemTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="details-tab" data-toggle="tab" href="#details" role="tab">Item Details</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="audit-tab" data-toggle="tab" href="#audit" role="tab">Audit Trail</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="move-tab" data-toggle="tab" href="#move" role="tab">Move Item</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="extra-tab" data-toggle="tab" href="#extra" role="tab">More</a>
                        </li>
                    </ul>

                    <div class="tab-content p-3 border border-top-0" id="itemTabsContent">
                        <div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <div class="d-flex align-items-start">
                                        <div class="flex-fill">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div>
                                                    <h4 class="mb-1" id="itemUnit"></h4>
                                                </div>

                                                <div class="text-right">
                                                    <div class="mb-1"><small class="text-muted">Last updated</small></div>
                                                    <div class="font-weight-bold" id="last_updated"></div>
                                                </div>
                                            </div>

                                            <hr>

                                            <div class="row">
                                                <div class="col-sm-4">
                                                    <dt class="col-5 text-muted small">Stock qty</dt>
                                                    <dd class="col-7 font-weight-bold" id="stockQuantity"></dd>
                                                </div>

                                                <div class="col-sm-4">
                                                    <dt class="col-5 text-muted small">Unit price</dt>
                                                    <dd class="col-7">KES 1,200.00</dd>
                                                </div>

                                                <div class="col-sm-4">
                                                    <dt class="col-5 text-muted small">Reorder level</dt>
                                                    <dd class="col-7" id="reorderLevel">50</dd>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card shadow-sm rounded-4">
                                <div class="card-body">
                                    <h6 class="mb-2">Description & notes</h6>
                                    <p class="mb-0 text-muted">High-quality progressive lens with multiple prescription support. Keep in dry, cool place. Check before dispatch.</p>
                                    <hr>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="audit" role="tabpanel">
                            <p>Audit trail goes here (logs, changes, timestamps).</p>
                        </div>
                        <div class="tab-pane fade" id="move" role="tabpanel">
                            <form>
                                <div class="form-group">
                                    <label for="targetStore">Select store to move item to:</label>
                                    <select id="targetStore" class="form-control">
                                        <option>Store A</option>
                                        <option>Store B</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-primary">Move Item</button>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="extra" role="tabpanel">
                            <p>Additional tabs you may want later.</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var ctx = document.getElementById('inventoryChart').getContext('2d');

    const chartData = {{ chart_data|json_encode|raw }};
    const labels = chartData.map(item => item.items);
    const dataValues = chartData.map(item => item.stock_quantity);

    var inventoryChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: labels,
            datasets: [{
                label: 'Items in Stock',
                data: dataValues,
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)',
                    'rgb(75, 192, 192)'
                ],
                hoverOffset: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
        }
    });
});

</script>

<script>

function cacheModal(modal){

    var originalModal = modal.clone()

    modal.on('hidden.bs.modal', function () {
        modal.remove();
        let newModal = originalModal.clone()
        $('#storeDetailsDiv').append(newModal); 
    });
}

$(document).ready(function(){

    $('#storeStockItems').datagrid({
        url: "/inventory/branch/store/" + {{ store.getId() }} + "/view/items",
        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: 'iiu_id', title: 'Inventory Item Unit Id', width: 30, editor:'text',
                formatter: (v, r) => r.iiu_id
            },
            {
                field: 'item', title: 'Item', width: 30, editor:'text',
                formatter: (v, r) => r.item
            },
            {
                field: 'item_unit', title: 'Unit', width: 34, editor:'text',
                formatter: (v, r) => r.item_unit
            },
            {
                field: 'stock_quantity', title: 'Stock Quantity', width: 30, editor:'text',
                formatter: (v, r) => r.stock_quantity
            },
            {
                field: 'reorder_level', title: 'Reorder Level', width: 18, editor:'text',
                formatter: (v, r) => r.reorder_level
            },
            {
                field: 'last_updated', title: 'Last Updated', width: 30, editor:'text',
                formatter: (v, r) => r.last_updated
            },
            {           
                field: 'action', title: 'Action', width: 18, editor:'text', align: 'center',
                formatter: (v, r) => {
                    return '<span><a href="javascript:void()" data-action="inventory--store#viewStoreItemDetails">View Details</a></span>'
                }
            },
        ]],
    }).datagrid('enableFilter', [ ]);

    $('#storeStockItems').datagrid('hideColumn', 'iiu_id');
    $('#storeStockItems').datagrid('hideColumn', 'reorder_level');
})

</script>
{% endblock %}