<!doctype html>
<?php 
include("../connection.php");
include("../user.php");
$cur_date = date('Y-m-d H:i:s');
$user = $_SESSION['user'];
?>
<html class="no-js" lang=""> 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title><?php echo TITLE; ?></title>
    <meta name="description" content="Ela Admin - HTML5 Admin Template">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="../images/bluebase.png">
    <link rel="shortcut icon" href="../images/bluebase.png">
    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> -->

    <style>
        input {
            text-transform: uppercase;    
        }
        textarea {
            text-transform: uppercase;    
        }
        .measurement-input {
            display: none;
        }
    </style>
    <script>
        function showMeasurementInput(value) {
    // Hide all measurement input fields initially
    document.querySelectorAll('.measurement-input').forEach(function(input) {
        input.style.display = 'none';
    });

    // Show the selected input field based on the chosen measurement type
    if (value) {
        document.getElementById(value + '-input').style.display = 'flex';
    }
}

    </script>
</head>
<body>
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <strong>Material Request </strong>
                <a href="material_master.php">
                    <button class="btn btn-primary" style="width:50px; margin-left:400px;">
                        <i class="fa fa-backward"></i>
                    </button>
                </a>            
            </div>
            <div class="card-body card-block">
                <form method="post" enctype="multipart/form-data" class="form-horizontal" action="material_submit.php">
                    <div class="row form-group">
                        <div class="col col-md-3">
                            <label for="text-input" class="form-control-label">Material Name</label>
                            <span style="color:red;">*</span>
                        </div>
                        <div class="col-12 col-md-9">
                            <input type="text" id="material" name="material" placeholder="Enter material Name" class="form-control" onchange="catgval(this.value)" autocomplete="off" required>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col col-md-3">
                            <label for="text-input" class="form-control-label">material Description</label>
                            <span style="color:red;">*</span>
                        </div>
                        <div class="col-12 col-md-9">
                            <input type="text" id="prefix" name="prefix" placeholder="Enter material Description" class="form-control" autocomplete="off" required>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col col-md-3">
                            <label for="measurement-type" class="form-control-label">Measurement Type</label>
                            <span style="color:red;">*</span>
                        </div>
                        <div class="col-12 col-md-9">
                            <select id="measurement-type" name="measurement_type" class="form-control" onchange="showMeasurementInput(this.value)" required>
                                <option value="">Select Measurement Type</option>
                                <option value="kg">Kilogram (kg)</option>
                                <option value="meter">Meter (m)</option>
                                <option value="unit">Unit</option>
                            </select>
                        </div>
                    </div>

                    
<div class="row form-group measurement-input" id="kg-input">
    <div class="col col-md-3">
        <label for="kg" class="form-control-label">Kilogram (kg)</label>
    </div>
    <div class="col-12 col-md-9">
        <input type="text" id="kg" name="kg" placeholder="Enter weight in kg" class="form-control" autocomplete="off">
    </div>
</div>

<div class="row form-group measurement-input" id="meter-input">
    <div class="col col-md-3">
        <label for="meter" class="form-control-label">Meter (m)</label>
    </div>
    <div class="col-12 col-md-9">
        <input type="text" id="meter" name="meter" placeholder="Enter length in meters" class="form-control" autocomplete="off">
    </div>
</div>

<div class="row form-group measurement-input" id="unit-input">
    <div class="col col-md-3">
        <label for="unit" class="form-control-label">Unit</label>
    </div>
    <div class="col-12 col-md-9">
        <input type="text" id="unit" name="unit" placeholder="Enter units" class="form-control" autocomplete="off">
    </div>
</div>

                    <div class="row form-group">
                        <div class="col col-md-3">
                            <label for="department" class="form-control-label">Department</label>
                        </div>
                        <div class="col-12 col-md-9">
                            <input type="text" id="department" name="department" placeholder="Enter Department" class="form-control" autocomplete="off">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col col-md-3">
                            <label for="area" class="form-control-label">Area</label>
                        </div>
                        <div class="col-12 col-md-9">
                            <input type="text" id="area" name="area" placeholder="Enter Area" class="form-control" autocomplete="off">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col col-md-3">
                            <label for="block" class="form-control-label">Block</label>
                        </div>
                        <div class="col-12 col-md-9">
                            <input type="text" id="block" name="block" placeholder="Enter Block" class="form-control" autocomplete="off">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col col-md-3">
                            <label for="no_of_staff" class="form-control-label">No. of Staff</label>
                        </div>
                        <div class="col-12 col-md-9">
                            <input type="number" id="no_of_staff" name="no_of_staff" placeholder="Enter No. of Staff" class="form-control" autocomplete="off">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col col-md-3">
                            <label for="performance_job" class="form-control-label">Performance Job</label>
                        </div>
                        <div class="col-12 col-md-9">
                            <input type="text" id="performance_job" name="performance_job" placeholder="Enter Performance Job" class="form-control" autocomplete="off">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col col-md-3">
                            <label for="qty_requested" class="form-control-label">Qty Requested</label>
                        </div>
                        <div class="col-12 col-md-9">
                            <input type="number" id="qty_requested" name="qty_requested" placeholder="Enter Qty Requested" class="form-control" autocomplete="off">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col col-md-3">
                            <label for="qty_issued" class="form-control-label">Qty Issued</label>
                        </div>
                        <div class="col-12 col-md-9">
                            <input type="number" id="qty_issued" name="qty_issued" placeholder="Enter Qty Issued" class="form-control" autocomplete="off">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col col-md-3">
                            <label for="requested_by" class="form-control-label">Requested By</label>
                        </div>
                        <div class="col-12 col-md-9">
                            <input type="text" id="requested_by" name="requested_by" placeholder="Enter Requested By" class="form-control" autocomplete="off">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col col-md-3">
                            <label for="location" class="form-control-label">Location</label>
                        </div>
                        <div class="col-12 col-md-9">
                            <input type="text" id="location" name="location" placeholder="Enter Location" class="form-control" autocomplete="off" value='' >
                        </div>
                    </div>







                    <div style="">
                        <button type="submit" name="submit" class="btn btn-success">
                            <i class="fa fa-dot-circle-o"></i> Submit
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="clearfix"></div>
        <footer class="site-footer"></footer>
    </div>
</body>
</html>
