{% 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"/>

<style>
.card-soft-green {
    background-color: #BDE5C9; /* Light Green/Teal */
}
.card-soft-pink { 
    background-color: #EEACC3; /* Soft Pink */
}
.card-soft-blue {
    background-color: #D3E3FD; /* Soft Blue */
}
.card-soft-purple-bg { /* Lighter shade of purple for card background */
    background-color: #e3d3ff;
}
.card-soft-purple-text { /* Deep Purple text/icon */
    color: #6200EE;
}
.text-shadow {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Custom styles for the quick cards */
.quick-stat-card {
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}
.quick-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; 
}
.quick-stat-card .icon-circle {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
}

/* Datagrid header styles */
#branchStoreCreate thead th {
    background-color: #6200EE;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    border: none;
    text-transform: capitalize !important;
}
#branchStoreCreate tbody tr:hover {
    background-color: #F0F0F0;
}
</style>

{% endblock %}

{% block content %}

<div data-controller="inventory--branchstore" id="bodyContent">
    <!-- Header-->
    <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') }} Stores Dashboard
        </h1>

        <div class="d-flex">
            {#  Stock Check #}
            <button type="button" class="btn btn-lg btn-danger shadow-sm mr-3" data-action="inventory--branchstore#initiateStockCheckModalOpen">
                <i class="fas fa-clipboard-list mr-2"></i> Initiate Stock Check
            </button>

            {# Add New Store #}
            <button type="button" class="btn btn-lg btn-success shadow-sm"
                data-toggle="modal"
                data-target="#newStoreModal">
                <i class="fa fa-plus-circle mr-2"></i> Add New Store
            </button>
        </div>
    </div>
    <div class="row mb-4">

        {# CARD 1: Total Stores #}
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card shadow-sm rounded quick-stat-card card-soft-blue">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-uppercase font-weight-bold text-secondary small">Total Stores</div>
                            <div class="h2 font-weight-bold mb-0 mt-1">4</div>
                        </div>
                        <div class="icon-circle text-primary">
                            <i class="fas fa-warehouse"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# CARD 2: Total Stock Units #}
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card shadow-sm rounded quick-stat-card card-soft-green">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-uppercase font-weight-bold text-secondary small">Total Stock Units</div>
                            <div class="h2 font-weight-bold mb-0 mt-1">12,500</div>
                        </div>
                        <div class="icon-circle text-success">
                            <i class="fas fa-boxes"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# CARD 3: Total Store Managers #}
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card shadow-sm rounded quick-stat-card card-soft-pink">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-uppercase font-weight-bold text-secondary small">Total Managers</div>
                            <div class="h2 font-weight-bold mb-0 mt-1">4</div>
                        </div>
                        <div class="icon-circle text-info">
                            <i class="fas fa-users-cog"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# CARD 4: Last Inventory Audit #}
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card shadow-sm rounded quick-stat-card card-soft-purple-bg">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-uppercase font-weight-bold text-secondary small">Last Audit</div>
                            <div class="h2 font-weight-bold mb-0 mt-1 text-success">3 Days Ago</div>
                        </div>
                        <div class="icon-circle card-soft-purple-text">
                            <i class="fas fa-clipboard-check"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- The almighty datagrid -->
    <div class="card shadow rounded p-4 border-details">
        <div class="h4 mb-4 font-weight-light text-shadow">Manage Inventory Stores</div>

        <table id="branchStoreCreate"
            class="table table-hover table-sm"
            style="width:100%; height:auto; font-weight:normal;">
            <thead><tr></tr></thead>
        </table>
    </div>
    <!--New Store modal -->
    <div class="modal fade" id="newStoreModal" tabindex="-1" role="dialog" aria-labelledby="newStoreModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="newStoreModalLabel">
                        <i class="fas fa-plus-square mr-2"></i> Create New Inventory Store
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <form id="createStoreForm" method="POST" action="/inventory/branch/{{ branch.getId() }}/stores/create">

                    <div class="modal-body">
                        <div class="row">

                            <div class="col-md-6 form-group">
                                <label for="storeName" class="font-weight-bold">Store Name <span class="text-danger">*</span></label>
                                <input type="text" class="new_store_details form-control" id="store_name" name="store_name" placeholder="e.g., Warehouse A" required>
                            </div>

                            <div class="col-md-6 form-group">
                                <label class="font-weight-bold d-block">Store Manager <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <select id="storeManagerLookup" class="form-select">
                                        <option value="">Select Store</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label for="storeLocation" class="font-weight-bold">Physical Location</label>
                                <input type="text" class="form-control new_store_details" id="store_location" name="location" placeholder="Building, Floor, Aisle" value="{{ branch.getName() }}" disabled>
                            </div>

                            <div class="col-md-6 form-group">
                                <label for="storePhone" class="font-weight-bold">Contact Phone</label>
                                <input type="tel" class="form-control new_store_details" id="store_phone" name="phone" placeholder="+1 555 1234">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="storeDescription" class="font-weight-bold">Description</label>
                            <textarea class="form-control" id="store_description" name="description" rows="3" placeholder="Brief description of the store's purpose or contents."></textarea>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="create_new_store_btn" disabled data-action="inventory--branchstore#createNewStore">
                            Save Store
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <!-- New Manager modal -->
    <div class="modal fade" id="newManagerModal" tabindex="-1" role="dialog" aria-labelledby="newManagerModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title" id="newManagerModalLabel">
                        <i class="fas fa-user-plus mr-2"></i> Add New Store Manager
                    </h5>
                    {# Note: Using data-dismiss="modal" will only close this nested modal #}
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <form id="createManagerForm" method="POST" action="/users/create/store-manager">
                    <div class="modal-body">
                        <p class="small text-muted">The user will automatically be assigned the 'Store Manager' role.</p>

                        {# Manager Name #}
                        <div class="form-group">
                            <label for="managerFullName">Full Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="managerFullName" name="full_name" required>
                        </div>

                        {# Manager Email #}
                        <div class="form-group">
                            <label for="managerEmail">Email (Login ID) <span class="text-danger">*</span></label>
                            <input type="email" class="form-control" id="managerEmail" name="email" required>
                        </div>

                        {# Manager Phone #}
                        <div class="form-group">
                            <label for="managerPhone">Phone Number</label>
                            <input type="tel" class="form-control" id="managerPhone" name="phone">
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-info">
                            <i class="fas fa-plus mr-2"></i> Create Manager
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
    {# (newStoreModal, newManagerModal) then Stock Check  ~ audit modal #}

    <div class="modal fade" id="initiateStockCheckModal" tabindex="-1" role="dialog" aria-labelledby="initiateStockCheckModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog  modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-warning text-dark">
                    <h5 class="modal-title" id="initiateStockCheckModalLabel">
                        <i class="fas fa-clipboard-list mr-2"></i> Start a New Stock Check
                    </h5>
                    <button type="button" class="close text-dark" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <form id="initiateStockCheckForm">
                    <div class="modal-body">

                        <div class="card card-soft-green mb-4 border-details">
                            <div class="card-body">
                                <p class="mb-0 text-dark font-weight-bold">
                                    Current Time: <span id="currentDateTime" class="float-right">Loading...</span>
                                </p>
                            </div>
                        </div>

                        <div id="startNewStockCheckForm">
                            <div class="form-group">
                                <label for="stockCheckStoreSelect" class="font-weight-bold">Choose Store to Audit <span class="text-danger">*</span></label>
                                <select id="storeLookup" class="form-select">
                                    <option value="">Select Store</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="duration" class="font-weight-bold d-block mb-2">Expected Duration</label>

                                <div class="d-flex flex-wrap align-items-center gap-2">
                                    <!-- Preset durations -->
                                    <div class="btn-group btn-group-toggle me-3" data-toggle="buttons">
                                        <label class="btn btn-outline-primary active">
                                            <input type="radio" class="default_timestamps" name="duration" value="10m" checked> 10 min
                                        </label>
                                        <label class="btn btn-outline-primary">
                                            <input type="radio" class="default_timestamps" name="duration" value="30m"> 30 min
                                        </label>
                                        <label class="btn btn-outline-primary">
                                            <input type="radio" class="default_timestamps" name="duration" value="2h"> 2 hrs
                                        </label>
                                        <label class="btn btn-outline-primary">
                                            <input type="radio" class="default_timestamps" name="duration" value="8h"> 8 hrs
                                        </label>
                                        <label class="btn btn-outline-primary">
                                            <input type="radio" class="default_timestamps" name="duration" value="24h"> 24 hrs
                                        </label>
                                        <label class="btn btn-outline-primary" id="custom-duration-label">
                                            <input type="radio" name="duration" value="custom" id="custom_duration_input_btn"> Custom
                                        </label>
                                    </div>

                                    <div id="custom_duration_input" class="align-items-center d-none" style="margin-left: 20px">
                                        <input type="number" class="form-control form-control me-2" id="custom-duration-value" placeholder="" min="1" style="width: 80px;border-radius: 0px">
                                        <select id="custom-duration-unit" class="form-control form-control" style="width: 100px;border-radius: 0px">
                                            <option value="m">Minutes</option>
                                            <option value="h">Hours</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            {# 3. Pause Stock Movements Radio/Toggle #}
                            <div class="form-group">
                                <label class="font-weight-bold d-block">
                                    Stock Movement Lock
                                    <i class="fas fa-info-circle text-primary ml-2" data-toggle="tooltip" data-placement="top" 
                                        title="Starting a stock check will halt stock movements by default. You can change this behavior in system settings."></i>
                                </label>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="pause_movements" id="pauseYes" value="pauseYes" checked  style="cursor: pointer">
                                    <label class="form-check-label" for="pauseYes"  style="cursor: pointer">Pause Movements (Recommended)</label>
                                </div>
                                <!-- <div class="form-check form-check-inline"> -->
                                <!--     <input class="form-check-input" type="radio" name="pause_movements" id="pauseNo" value="0"> -->
                                <!--     <label class="form-check-label" for="pauseNo">Allow Movements</label> -->
                                <!-- </div> -->
                            </div>
                        </div>

                        <div class="mt-4" id="stock_check_summary" style="display:none;">
                            <h6 class="font-weight-bold mb-2">Stock Check Summary</h6>
                            <div class="border rounded p-3 bg-light">
                                <div class="d-flex justify-content-between">
                                    <span><strong>Store:</strong></span>
                                    <span id="summary_store">—</span>
                                </div>
                                <div class="d-flex justify-content-between mt-2">
                                    <span><strong>Started On:</strong></span>
                                    <span id="summary_started_on">—</span>
                                </div>
                                <div class="d-flex justify-content-between mt-2">
                                    <span><strong>Duration:</strong></span>
                                    <span id="summary_duration">—</span>
                                </div>
                                <div class="d-flex justify-content-between mt-2">
                                    <span><strong>Ending At:</strong></span>
                                    <span id="summary_ending_at">—</span>
                                </div>
                                <div class="d-flex justify-content-between mt-2">
                                    <span><strong>Stock Movement Lock</strong></span>
                                    <span id="summary_stock_lock">—</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" id="startStockCheckBtn" class="btn btn-warning text-dark font-weight-bold" data-action="inventory--branchstore#startStockCheck">
                            <i class="fas fa-play mr-2"></i> Preview Stock Check Details
                        </button>
                    </div>
                </form>

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

    var originalModal = modal.clone()

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

$(document).ready(function(){

    $('body').find('.default_timestamps').each(function(el){
        $(this).on('click', function(){
            $('#custom_duration_input').addClass('d-none').removeClass('d-flex')
        })
    })

    $('#custom_duration_input_btn').on('click', function(){
        $('#custom_duration_input').removeClass('d-none').addClass('d-flex')
    })

    $('#createStoreForm .new_store_details').on('input', function () {
        let allFilled = true

        $('#createStoreForm .new_store_details').each(function () {
            if ($(this).val() === '') {
                allFilled = false;
                return false;
            }
        });

        $('#create_new_store_btn').prop('disabled', !allFilled);
    });

    $('#storeManagerLookup').selectize({
        maxOptions: 10,
        openOnFocus: true,
        placeholder: "Type to select store manager",
        preload: true, // <--- important!
        plugins: ["auto_position"],
        valueField: 'u_id',
        labelField: 'p_name',
        searchField: 'p_name',
        searchField: 'p_name',
        create: true,
        load: function(query, callback) {
            fetch('/inventory/lookup?store_manager=' + encodeURIComponent(query || ''))
                .then(response => response.json())
                .then(data => callback(data))
                .catch(() => callback());
        },
    });

    $('#branchStoreCreate').datagrid({
        url: "/inventory/branch/" + {{ branch.getId() }} + "/stores/view",
        method: 'GET',
        singleSelect: true,
        pagination: true,
        fitColumns: true,
        collapsible: true,
        showFooter: true,
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Branch Stores',
        rowStyler: function(index, row){
            // Highlight Main Store Row
            if (row.is_main){
                return 'background:#e6ffe6; font-weight:bold;'; 
            }
            // Alternating Row Color
            if ((index % 2) != 0){
                return 'background:#f4f4f4;';
            }
        },
        onLoadSuccess: function(){
            $('#cardBlurred').removeClass('loader-active')
        },
        columns: [[
            {
                field: 's_id', title: 'Store ID', width: 30, editor:'text',
                formatter: (v, r) => r.s_id
            },
            {
                field: 'store_name', title: 'Store Name', width: 40, editor:'text',
                formatter: (v, r) => {
                    if(r.is_main){
                        return `<span class="font-weight-bold text-primary">${r.store_name} | [MAIN STORE]</span>`
                    }else{
                        return r.store_name
                    }
                }
            },
            {
                field: 'stock_check_status', title: 'Stock Check Status', width: 40, editor:'text',
                formatter: function(v,r) {
                    if (r.stock_check_active) {
                        return `<span class="">Active Stock Check</span>`;
                    }
                    return `<span class="">N/A</span>`;
                }
            },
            {
                field: 'store_manager', title: 'Manager', width: 35, editor:'text',
                formatter: (v, r) => {
                    // Display r.manager_name as simple text
                    return r.store_manager || 'N/A';
                }
            },
            {
                field: 'stock_quantity', title: 'Stock Quantity', width: 30, align: '',
                formatter: (v, r) => {
                    // Stock Quantity: Now using simple text with ' units' appended
                    return `${r.stock_quantity} units`;
                }
            },
            {         
                field: 'action', title: 'Action', width: 30, align: 'center',
                formatter: (v, r) => {
                    return `
<a href="/inventory/stores/${r.store_slug}/view" 
class="btn btn-sm btn-outline-primary">
<i class="fas fa-eye mr-1"></i> View Store
</a>
`
                }
            },
        ]],
    }).datagrid('enableFilter', [ ]);

    $('#branchStoreCreate').datagrid('hideColumn', 's_id');

    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);
    };

    // Set initial time and update every second (optional, but nice)
    formatDateTime();
    const intervalId = setInterval(formatDateTime, 1000);

    // Clear interval when modal is closed
    $(this).one('hidden.bs.modal', function () {
        clearInterval(intervalId);
    });
})
</script>

{% endblock %}