<?php
ob_start();
include('include/session.php');
// session_start();

error_reporting(E_ALL);
ini_set('display_errors', 1);
include('include/navigation.php');
include('connection.php');
include('class.php');
// include('include/session.php');
$dbConnection = new DbConnection();
$connection = $dbConnection->connection;

$NewOrer = new NewOrder();
$randomNumber=$NewOrer->generateSequentialNumber();
?>
<html lang="en">
<head>
    <link rel="stylesheet" href="assets/css/style.css">
<?php
include('include/header_links.php');

?>
</head>
<style>
    .pd_id{
        display:flex;
        
    }
</style>
<body>
    <div class="container_main">
    <!--<button class="reset-button"><a href="_order_punch.php"><i class="fa-solid fa-backward"></i></a></button>-->
        <form id="orderForm" action="new_order.php" method="POST">
            <div class="">
            <h1> Create Order </h1>
            <div class="reset-button"><a href="_new_order_list.php">Order Summary List</a></div>
              <input type="text" id="uid_generated" name="order_id" value="<?php echo $randomNumber;?>" hidden>
                 <h3>Client UID:
                <select data-live-search="true" name="cuid" id="clientUid" required>
                <option  id= "option" value="">Select Client UID</option>
                
                        <?php
                        $option = mysqli_query($connection, "SELECT * FROM clients");
                        while ($row = mysqli_fetch_array($option)) {
                            echo '<option value="' . $row['u_id'] . '">' . $row['u_id'] . ' - ' . $row['firm_name'] . '</option>';
                        }
                        ?>
            
                    </select>
             
</h3>


<div class="box_button" id="boxButton"  >
     <button type="button" class="btn btn-outline-success" style="width:300px">

        <select class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split category"  id ="category" name="category[]" style="width:280px">
                <option value=""> Select Category </option>
            <?php
                        $sql = "SELECT category FROM category 
            UNION 
            SELECT category FROM procurement";

                        $result = $connection->query($sql);

                        // Check if there are rows in the result
                        if ($result->num_rows > 0) {
                            while ($row = $result->fetch_assoc()) {
                                echo '<option value="' . $row["category"] . '">' . $row["category"] . '</option>';
                            }
                        }
                    ?>
        </select>
    </button>
            <button type="button" class="btn btn-outline-success" style="width:300px">
                    <select class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split product" name="product[]" id="product" style="width:280px">
                    <option value=""> Select product</option>
                    <optgroup label="Product">
                        <!-- Options will be dynamically populated using JavaScript -->
                    </optgroup>
                   </select>
           </button>
        <button type="button" class="btn btn-outline-success"style="width:300px">
            <select class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split variation" name="variation[]" id="variation" style="width:280px">
                <option value=""> Select variation</option>
                <optgroup label="variation">
                    <!-- Options will be dynamically populated using JavaScript -->
                </optgroup>
            </select>
        </button><br><br>
               <center><input type="button" class="btn btn-info or" id="or" value="OR"></center><br><br>
             <div class="pd_id" id="">
                    <button type="button" class="btn btn-outline-success" style="width:100%">
                      <h2>Product Id</h2>
                            <input type="text" id="product_id" class="form-control  product_id" placeholder="Product Id" aria-label="Product_id" name="product_id[]" value="" >
                            <!-- <input type="button" class="btn btn-info search" value="search"><br><br> -->
                            
                            <!-- <input type="text" id="variation_one" class="form-control variation_one" placeholder="variation" aria-label="" name="variation[]" value="" >
                            <input type="text" id="product_one" class="form-control product_one" placeholder="product" aria-label="" name="product[]" value="" >
                            <input type="text" id="category_one" class="form-control category_one" placeholder="category" aria-label="" name="category[]" value="" > -->
                </button>
        </div><br><br>
        
        
        
        <div class="mb-3">
            <label for="price" class="form-label"style="font-size: 1.5rem;">Price</label>
            <div class="d-flex">
                <input type="text" class="form-control me-2" placeholder="Rs " aria-label="Price" name="" value="Rs " style="width:20%" readonly>
                <input type="text" id="price" class="form-control price" placeholder="Enter price" aria-label="Price" name="price[]" value="" required>
            </div>
        </div>
       
        <div class="mb-3" >
            <label for="Instock" class="form-label" style="font-size: 1.5rem;">Instock</label>
            <input type="text" id="Instock" class="form-control Instock" placeholder="Instock" aria-label="Stock" name="quantity[]" value="" required>
        </div>

        <div class="mb-3">
            <label for="quantity" class="form-label" style="font-size: 1.5rem;">Quantity</label>
            <input type="text" class="form-control quantity" placeholder="quantity" aria-label="Text input with segmented dropdown button" id="quantity" name="items[]" required>

        </div>


<div id="clonedContainer"></div>
       <div class="button" id="add_button">
             <button type="button" class="btn btn-info" id="addMore">Add More</button>
       </div>


       <div class="mb-3">
            <label for="quantity" class="form-label" style="font-size: 1.5rem;">Total Amount</label>
           <input type="text" class="form-control total_amount"  id="totalAmount" placehold="total_amount" aria-label="Text input with segmented dropdown button" name="total_price"required >
        </div>
        <div class="mb-3">
            <label for="quantity" class="form-label" style="font-size: 1.5rem;">Payment Reference</label>
           <input type="text" class="form-control" placeholder="Payment Refrence" aria-label="Text input with segmented dropdown button" name="payment_reference" required>
      </div>
        
        
        <div class="button" style="display:flex; justify-content: center;">
        <button type="submit"  name="submit" class="reset-button">Submit</button>
        <!-- <button type="button" class="reset-button">Save</button>
            <button type="button" class="reset-button">Share</button> -->
        </div>
        </div>
        </div>
 </form>
 </div>
 
 <section class="footer">
     <?php include('include/footer_two.php');         ?>
     
 </section>
</body>
 
<?php 
 include("include/footer_link.php");
?>
<script src="assets/script/script.js"></script>
<script>
$(document).ready(function() {
    // Initialize Bootstrap Selectpicker
    $('#clientUid').selectpicker();
});

$(document).ready(function() {
    // Retrieve values of elements with class name "Instock"
    var quantityElements = document.getElementsByClassName("Instock");
    var quantityValues = [];
    for (var i = 0; i < quantityElements.length; i++) {
        quantityValues.push(quantityElements[i].value);
    }

    // Retrieve values of elements with class name "quantity"
    var itemsElements = document.getElementsByClassName("quantity");
    var itemsValues = [];
    for (var j = 0; j < itemsElements.length; j++) {
        itemsValues.push(itemsElements[j].value);
    }

    // Log the retrieved values
    console.log("Quantity values:", quantityValues);
    console.log("Items values:", itemsValues);
    
   var updatedValues=quantityValues-itemsValues;
   console.log(updatedValues)
});

</script>
</html>
<?php
ob_end_flush();
?>