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

{% block stylesheets %}
{{ parent() }}
<style>
    /* Custom styling for the Datagrid header */
    #stockCheckManagementGrid thead th {
        background-color: #6200EE;
        color: white;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        border: none;
        text-transform: capitalize !important;
    }
    #stockCheckManagementGrid tbody tr:hover {
        background-color: #F0F0F0;
    }
</style>
{% endblock %}

{% block content %}

<div data-controller="inventory--stock-check-manager">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 font-weight-bold text-shadow">
            Branch: {{ branch.getName()|default('Inventory') }} Stock Checks
        </h1>
        
        <div class="d-flex">
            {# Button to initiate a new check #}
            <button type="button" class="btn btn-lg btn-warning shadow-sm mr-3"
                    data-toggle="modal"
                    data-target="#initiateStockCheckModal">
                <i class="fas fa-clipboard-list mr-2"></i> Initiate New Check
            </button>
        </div>
    </div>
    
    <hr>

    <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>

{% endblock %}

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

<script>
$(document).ready(function(){

    // Using the original Datagrid URL structure. Assuming 'branch' is now passed.
    const apiUrl = "/inventory/branch/" + {{ branch.getId()|default(0) }} + "/stock-checks/view";

    $('#stockCheckManagementGrid').datagrid({
        // Set URL to an endpoint that will return empty data [] for now
        url: apiUrl, 
        method: 'GET',
        singleSelect: true,
        pagination: true,
        fitColumns: true,
        collapsible: true,
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Stock Checks...',
        
        // Define the columns ready for future data
        columns: [[
            { field: 'store_name', title: 'Store', width: 30, formatter: (v, r) => v },
            { field: 'start_date', title: 'Started', width: 30, formatter: (v) => v ? new Date(v).toLocaleDateString() : 'N/A' },
            { 
                field: 'status', title: 'Status', width: 25, align: 'center',
                formatter: (v) => {
                    if (v === 'IN_PROGRESS') {
                        return '<span class="badge badge-warning">IN PROGRESS</span>';
                    } else if (v === 'PENDING_APPROVAL') {
                        return '<span class="badge badge-info">PENDING</span>';
                    } else if (v === 'COMPLETED') {
                        return '<span class="badge badge-success">COMPLETED</span>';
                    }
                    return v || 'NEW';
                }
            },
            { field: 'variance_count', title: 'Variances', width: 20, align: 'right', formatter: (v) => v || 0 },
            { field: 'checked_by', title: 'Checked By', width: 30, formatter: (v, r) => r.checker_name || 'N/A' },
            {         
                field: 'action', title: 'Action', width: 30, align: 'center',
                formatter: (v, r) => {
                    // Placeholder for future buttons
                    return '<span><a href="#">Details</a></span>';
                }
            },
        ]],
        // Ensure the grid doesn't try to load data immediately if the URL is bad
        onLoadError: function(){
            console.log("Could not load stock check data, likely due to an empty response or bad URL.");
        }
    }).datagrid('enableFilter', [ ]);
    
    // --- Modal Logic (Required for the Initiate button to work) ---
    $('[data-toggle="tooltip"]').tooltip();

    $('#initiateStockCheckModal').on('show.bs.modal', function () {
        const formatDateTime = () => {
            const now = new Date();
            const dateOptions = { year: 'numeric', month: 'short', day: 'numeric' };
            const timeOptions = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };
            
            const dateStr = now.toLocaleDateString('en-US', dateOptions);
            const timeStr = now.toLocaleTimeString('en-US', timeOptions);
            
            $('#currentDateTime').text(dateStr + ' at ' + timeStr);
        };

        formatDateTime();
        const intervalId = setInterval(formatDateTime, 1000);
        
        $(this).one('hidden.bs.modal', function () {
            clearInterval(intervalId);
        });
    });
})
</script>

{% endblock %}