<!DOCTYPE html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Pipscart</title>
      <!-- plugins:css -->
      <link rel="stylesheet" href="assets/vendors/mdi/css/materialdesignicons.min.css">
      <link rel="stylesheet" href="assets/vendors/ti-icons/css/themify-icons.css">
      <link rel="stylesheet" href="assets/vendors/css/vendor.bundle.base.css">
      <link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.min.css">
      <!-- endinject -->
      <!-- Plugin css for this page -->
      <link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.min.css" />
      <link rel="stylesheet" href="assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
      <!-- End plugin css for this page -->
      <!-- inject:css -->
      <!-- endinject -->
      <!-- Layout styles -->
      <link rel="stylesheet" href="assets/css/style.css">
      <!-- End layout styles -->

      <!-- Select2 CSS for searchable dropdown -->
      <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

      <!-- <link rel="shortcut icon" href="assets/images/favicon.png" /> -->
   </head>
   <body>
      <div class="container-scroller">
         <!-- partial:partials/_navbar.html -->
         <?php
            $title = "Php Header Footer";
            include "header.php";
         ?>
         <!-- partial -->
         <div class="container-fluid page-body-wrapper">
            <!-- partial:partials/_sidebar.html -->
            <?php
               $title = "Php Header Footer";
               include "sidebar.php";
            ?>
            <!-- partial -->
            <div class="main-panel">
               <div class="content-wrapper">
                  <div class="row">
                     <div class="col-md-12">
                        <div class="card">
                           <div class="card-body">
                              <h4 class="card-title">Order Register</h4>
                              <form class="forms-sample" method="GET" action="orders_report.php">
                                 <div class="row">
                                    <!-- From Date -->
                                    <div class="col-md-2">
                                       <div class="form-group">
                                          <label for="from_date">From Date</label>
                                          <input type="date" id="from_date" name="from_date" class="form-control" >
                                       </div>
                                    </div>

                                    <!-- To Date -->
                                    <div class="col-md-2">
                                       <div class="form-group">
                                          <label for="to_date">To Date</label>
                                          <input type="date" id="to_date" name="to_date" class="form-control" >
                                       </div>
                                    </div>

                                    <!-- Status -->
                                    <!--<div class="col-md-2">-->
                                    <!--   <div class="form-group">-->
                                    <!--      <label for="status">Status</label>-->
                                    <!--      <select id="status" name="status" class="form-select">-->
                                    <!--         <option selected disabled>Select Status</option>-->
                                    <!--         <option value="Confirmed">Confirmed</option>-->
                                    <!--         <option value="Processing">Processing</option>-->
                                    <!--         <option value="Cancelled">Cancelled</option>-->
                                    <!--         <option value="Delivered">Delivered</option>-->
                                    <!--      </select>-->
                                    <!--   </div>-->
                                    <!--</div>-->
<style>
    .form-select{
            padding: 0.75rem 1.375rem !important;
    border-radius: 0 !important;
    border: 0;
    outline: 1px solid #ebedf2;
    color: #c9c8c8;
    }
    .select2-container{
               padding: 0.75rem 1.375rem !important;
    border-radius: 0 !important;
    border: 0;
    outline: 1px solid #ebedf2;
    color: #c9c8c8;  
    }
</style>
                                    <!-- Sales men -->
                                    <div class="col-md-2">
                                       <div class="form-group">
                                          <label for="sales_men">Sales men</label>
                                          <select id="sales_men" name="sales_men" class="form-select" >
                                             <option selected disabled>Select sales men</option>
                                             <?php
                                                include "config.php"; // make sure $con is your DB connection
                                                $query = mysqli_query($con, "SELECT id, name FROM sales_man ORDER BY name ASC");
                                                while($row = mysqli_fetch_assoc($query)) {
                                                   echo "<option value='".$row['id']."'>".$row['name']."</option>";
                                                }
                                             ?>
                                          </select>
                                       </div>
                                    </div>

                                    <!-- Customer -->
                                    <div class="col-md-2">
                                       <div class="form-group">
                                          <label for="customer">Customer</label>
                                          <select id="customer" name="customer" class="form-select" >
                                             <option selected disabled>Select customer</option>
                                             <?php
                                                include "config.php"; // make sure $con is your DB connection
                                                $query = mysqli_query($con, "SELECT id, company_name FROM tbl_customers ORDER BY company_name ASC");
                                                while($row = mysqli_fetch_assoc($query)) {
                                                   echo "<option value='".$row['id']."'>".$row['company_name']."</option>";
                                                }
                                             ?>
                                          </select>
                                       </div>
                                    </div>



                                    <div class="col-md-2">
                                       <button type="submit" class="btn btn-gradient-primary w-100 mt-3">Submit</button>
                                    </div>
                                 </div>
                              </form>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-8"></div>
               </div>
               <!-- content-wrapper ends -->
               <!-- partial:partials/_footer.html -->
               <?php
                  $title = "Php Header Footer";
                  include "footer.php";
               ?>
               <!-- partial -->
            </div>
            <!-- main-panel ends -->
         </div>
         <!-- page-body-wrapper ends -->
      </div>

      <style>
      .select2-container--default .select2-selection--single {
    height: 38px; /* match Bootstrap input height */
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 10px;
}

         .hover-preview-container {
            position: relative;
            display: inline-block;
         }
         .table th img, .table td img {
            width: 36px;
            height: 36px;
            border-radius: 0!important;
         }
         .hover-image {
            display: none;
            position: absolute;
            bottom: 100%; /* puts image above the link */
            left: 0;
            margin-bottom: 10px;
            width: 200px;
            border: 1px solid #ccc;
            background: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            z-index: 1000;
         }
         .hover-preview-container:hover .hover-image {
            display: block;
         }
      </style>

      <!-- container-scroller -->
      <!-- plugins:js -->
      <script src="assets/vendors/js/vendor.bundle.base.js"></script>
      <!-- endinject -->
      <!-- Plugin js for this page -->
      <script src="assets/vendors/chart.js/chart.umd.js"></script>
      <script src="assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
      <!-- End plugin js for this page -->
      <!-- inject:js -->
      <script src="assets/js/off-canvas.js"></script>
      <script src="assets/js/misc.js"></script>
      <script src="assets/js/settings.js"></script>
      <script src="assets/js/todolist.js"></script>
      <script src="assets/js/jquery.cookie.js"></script>
      <!-- endinject -->

      <!-- Select2 JS -->
      <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

      <!-- Custom js for this page -->
      <script src="assets/js/dashboard.js"></script>

      <!-- Initialize Select2 -->
      <script>
         $(document).ready(function() {
            $('.select2').select2({
               placeholder: "Select Item Code",
               allowClear: true
            });
         });
      </script>
   </body>
</html>
