<?php include'header.php';?>
<?php
if(!isset($_SESSION['id'])){ ?>
<script type = "text/javascript">window.location = "index.php";</script>
<?php } ?>

<div class="card login-card">

    <div class="card-header">
        Vehicle Detail
    </div>

    <div class="card-body p-4">
        <form action="tax.php" method="POST">
            <div class="mb-3">
                <label>Phone Number</label>
                <input type="number" name="phone_number" class="form-control" placeholder="Enter phone number" pattern="[0-9]{10}" maxlength="10" minlength="10" required >
            </div>
            <div class="mb-3">
                <label>Vehicle Number</label>
                <input type="text" name="vehicle_number" id="vehicle_number" class="form-control" placeholder="Enter Vehicle" style="text-transorm: uppercase;" pattern="[A-Z0-9]+" oninput="this.value = this.value.toUpperCase().replace(/[^A-Z0-9]/g, '')" required>
            </div>
            <div class="mb-3">
                <label for="state">Select State:</label>
                <select id="state" name="state"class="form-control" required>
                    <option value="">-- Select State --</option>
                    <?php
                    $obj->sql("SELECT * FROM state WHERE status='1' ORDER BY id ASC");
                    $result = $obj->getResult();
                    foreach ($result as $row) { ?>
                    <option value="<?php echo $row['code'];?>"><?php echo $row['name'];?></option>
                    <?php } ?>
                </select>
            </div>
            <div class="mb-3" id="chassis_box" style="display:none;">
                <label>Chassis Number</label>
                <input type="text" name="chassis_number" id="chassis_box" class="form-control" placeholder="Enter Chassis Number">
            </div>
            <div class="row">
                <div class="col-6 mb-3">
                    <label>Vehicle Category</label>
                    <select id="cat" name="category" class="form-control" required>
                        <option value="">-- Select --</option>
                        <?php
                        $obj->sql("SELECT * FROM category ORDER BY id ASC");
                        $result = $obj->getResult();
                        foreach ($result as $row) { ?>
                        <option value="<?php echo $row['id'];?>"><?php echo $row['name'];?></option>
                        <?php } ?>
                    </select>
                </div>
                <div class="col-6 mb-3">
                    <label>Vehicle Type</label>
                    <select id="sub_cat" name="sub_category" class="form-control" required>
                        <option value="">-- Select --</option>
                    </select>
                </div>
            </div>

<div class="row">
    <div class="col-6 mb-3">
        <label>Start Date & Time</label>
        <input type="datetime-local" 
               name="start_date" 
               class="form-control"
               min="<?php echo date('Y-m-d\TH:i'); ?>" 
               required>
    </div>

    <div class="col-6 mb-3">
        <label>End Date & Time</label>
        <input type="datetime-local" 
               name="end_date" 
               class="form-control"
               min="<?php echo date('Y-m-d\TH:i'); ?>" 
               required>
    </div>
</div>

            <div class="d-grid">
                <button type="submit" name="vehicle_detail" class="btn btn-login">
                    Vehicle Detail
                </button>
            </div>

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

<script>
function checkVehicleState() {
    let vehicleNumber = document.getElementById("vehicle_number").value;
    let stateCode = document.getElementById("state").value;
    let vehicleCode = vehicleNumber.substring(0,2);
    let chassisBox = document.getElementById("chassis_box");
    if(vehicleNumber.length >= 2 && vehicleCode == stateCode) {
        chassisBox.style.display = "block";
    } else {
        chassisBox.style.display = "none";
    }
}
document.getElementById("vehicle_number")
.addEventListener("keyup", checkVehicleState);
document.getElementById("state")
.addEventListener("change", checkVehicleState);
</script>
<script>
document.getElementById("cat").addEventListener("change", function(){
    let category_id = this.value;
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "sub_category_ajax.php", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onload = function(){
        document.getElementById("sub_cat").innerHTML = this.responseText;
    }
    xhr.send("category_id=" + category_id);

});

</script>
<?php include'footer.php';?>