<?php
session_start();
// ============
include("../../asset/theme/css/myfunc.php");
include("../../php_crud/my_class.php");
$obj = new my_class();
// ============
$branchid = $_SESSION['LOGIN_BRANCH'];
?>
<style>
    .left_th {
        text-align: right;
        width: 18%;
        padding-bottom: 10px;
        padding-left: 2px;
    }

    .left_select_th {
        text-align: right;
        width: 20%;
        padding-bottom: 5px;
        padding-left: 2px;
    }

    .right_th {
        text-align: right;
        width: 15%;
        padding-bottom: 10px;
        padding-left: 2px;
    }

    .right_select_th {
        text-align: right;
        width: 10%;
        padding-bottom: 5px;
        padding-left: 2px;
    }
</style>
<div class="row-fluid">
    <table border="0" style="width: 100%; border-collapse: collapse;">

        <tr>
            <td colspan="6">&nbsp;&nbsp;&nbsp; </td>
        </tr>
        <tr>
            <th class="left_th">Material Code: </th>
            <td style="width: 28%;">
                <input type="text" style="width: 93%;" id="mat_code" onkeyup="call_next_val_loader(event,'mat_code','des_cription')" />
            </td>
            <td style="width: 4%;">&nbsp;&nbsp;&nbsp;</td>
            <th class="right_th">YL: </th>
            <td style="width: 28%;">
                <input type="number" style="width: 93%;" id="yl_id" onkeyup="call_next_val_loader(event,'yl_id','ym_id')" />
            </td>
            <td style="width: 10%;">&nbsp;&nbsp;&nbsp;</td>
        </tr>
        <tr>
            <th class="left_th">Description: </th>
            <td style="width: 28%;">
                <input type="text" style="width: 93%;" id="des_cription" onkeyup="call_next_val_loader(event,'des_cription','low_size')" />
            </td>
            <td style="width: 4%;">&nbsp;&nbsp;&nbsp;</td>
            <th class="right_th">YM: </th>
            <td style="width: 28%;">
                <input type="number" style="width: 93%;" id="ym_id" onkeyup="call_next_val_loader(event,'ym_id','yh_id')" />
            </td>
            <td style="width: 10%;">&nbsp;&nbsp;&nbsp;</td>
        </tr>
        <tr>
            <th class="left_th">Lower Size: </th>
            <td style="width: 28%;">
                <input type="number" style="width: 93%;" id="low_size" onkeyup="call_next_val_loader(event,'low_size','up_size')" />
            </td>
            <td style="width: 4%;">&nbsp;&nbsp;&nbsp;</td>
            <th class="right_th">YH: </th>
            <td style="width: 28%;">
                <input type="number" style="width: 93%;" id="yh_id" />
            </td>
            <td style="width: 10%;">&nbsp;&nbsp;&nbsp;</td>
        </tr>
        <tr>
            <th class="left_th">Upper Size: </th>
            <td style="width: 28%;">
                <input type="number" style="width: 93%;" id="up_size" onkeyup="call_next_val_loader(event,'up_size','yl_id')" />
            </td>
            <td style="width: 4%;">&nbsp;&nbsp;&nbsp;</td>
            <td style="width: 10%;">&nbsp;&nbsp;&nbsp;</td>
        </tr>

    </table>
</div>

<script>
    $('.chosen-select').chosen({
        allow_single_deselect: true
    });
    //resize the chosen on window resize

    $(window)
        .off('resize.chosen')
        .on('resize.chosen', function() {
            $('.chosen-select').each(function() {
                var $this = $(this);
                $this.next().css({
                    'width': '98%'
                });
            })
        }).trigger('resize.chosen');
    //resize chosen on sidebar collapse/expand
    $(document).on('settings.ace.chosen', function(e, event_name, event_val) {
        if (event_name != 'sidebar_collapsed') return;
        $('.chosen-select').each(function() {
            var $this = $(this);
            $this.next().css({
                'width': '98%'
            });
        })
    });
</script>


<!-- Alphanumeric Checking -->
<script>
    let inputReset = false; // Track whether input should be reset

    function isNumericInput(event) {
        const key = event.keyCode || event.which;
        const keyChar = String.fromCharCode(key);

        const regex = /[0-9]|\.|\-/; // Alphanumeric pattern

        // Only allow alphanumeric input
        if (!regex.test(keyChar)) {
            event.preventDefault();
            return false;
        }

        const input = event.target;
        const currentValue = input.value;

        if (inputReset) {
            input.value = "";
            inputReset = false;
        }

        return true;
    }
</script>
<!-- Alphanumeric Checking -->


<!--Enter Checking-->
<script>
    function call_next_val_loader(e, sel_col_id, next_col_id) {
        if (e.keyCode === 13 || e.keyCode === 9 || e.keyCode === 13) {
            $("#" + next_col_id).select();
        }
    }
</script>
<!--Enter Checking-->