@extends('Layout.app')
@section('content')
     <div class="container">
        <div class="page-inner">
          <div class="page-header">
            <h3 class="fw-bold mb-3">Forms</h3>
            <ul class="breadcrumbs mb-3">
              <li class="nav-home">
                <a href="../index.php">
                  <i class="icon-home"></i>
                </a>
              </li>
              <li class="separator">
                <i class="icon-arrow-right"></i>
              </li>
              <li class="nav-item">
                <a href="../tables/datatables.php">Datatables</a>
              </li>
              <li class="separator">
                <i class="icon-arrow-right"></i>
              </li>
              <li class="nav-item">
                <a href="../tables/tables.php">Tables</a>
              </li>
            </ul>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="card">
                <div class="card-header">
                  <div class="card-title">Add Customer</div>
                </div>




                <form action="insert_form_customer.php" method="post" onsubmit="return validateForm()">
                  <div class="card-body">
                    <div class="row">
                      <!-- Left Side -->
                      <div class="col-md-6 col-lg-6">
                        <div class="mb-3">
                          <label for="sale_id" class="form-label" style="font-size: 18px; font-weight: bold;">Customer ID</label>
                          <input type="text" class="form-control" id="sale_id" name="sale_id" readonly>
                        </div>

                        <div class="form-group">
                          <label style="font-size: 18px; font-weight: bold;">Payment_Status<span style="color: red;">*</span></label>
                          <input type="text" class="form-control required-field" name="name" />
                        </div>

                        <div class="form-group">
                          <label style="font-size: 18px; font-weight: bold;">Note<span style="color: red;">*</span></label>
                          <input type="text" name="note" class="form-control required-field" />
                        </div>

                        <div class="form-group">
                          <label style="font-size: 18px; font-weight: bold;">Create At<span style="color: red;">*</span></label>
                          <input type="text" name="Create" class="form-control required-field" />
                        </div>

                        <div class="form-group">
                          <label style="font-size: 18px; font-weight: bold;">House No<span style="color: red;">*</span></label>
                          <input type="text" id="house" name="house" class="form-control" onblur="setNullIfEmpty(this)" />
                        </div>

                        <script>
                          function setNullIfEmpty(input) {
                            if (input.value.trim() === "") {
                              input.value = "null";
                            }
                          }
                        </script>



                        <div class="form-group">
                          <label style="font-size: 18px; font-weight: bold;">Street<span style="color: red;">*</span></label>
                          <input type="text" name="street" class="form-control required-field" />
                        </div>
                      </div>

                      <!-- Right Side -->
                      <div class="col-md-6 col-lg-6">
                        <div class="form-group">
                          <label style="font-size: 18px; font-weight: bold;">Commune<span style="color: red;">*</span></label>
                          <input type="text" name="commune" class="form-control required-field" />
                        </div>

                        <div class="form-group">
                          <label style="font-size: 18px; font-weight: bold;">District<span style="color: red;">*</span></label>
                          <select class="form-select required-field" name="district">
                            <option value="" selected>Select Your District</option>
                            <option value="Khan Russei Keo">Khan Russei Keo</option>
                            <option value="Khan Toul Kork">Khan Toul Kork</option>
                            <option value="Khan Boeng Keng Kang">Khan Boeng Keng Kang</option>
                            <option value="Khan Chamkarmorn">Khan Chamkarmorn</option>
                            <option value="Khan Daun Penh">Khan Daun Penh</option>
                            <option value="Khan Meanchey">Khan Meanchey</option>
                            <option value="Khan Dang Kor">Khan Dang Kor</option>
                            <option value="Khan 7 Makara">Khan 7 Makara</option>
                            <option value="Khan Chba Ampoeu">Khan Chba Ampoeu</option>
                            <option value="Khan Por Senchey">Khan Por Senchey</option>
                            <option value="Khan Chroy Chang Va">Khan Chroy Chang Va</option>
                            <option value="Khan Prek Phnov">Khan Prek Phnov</option>
                            <option value="Khan Sen Sok">Khan Sen Sok</option>
                            <option value="Khan Kamboul">Khan Kamboul</option>
                          </select>
                        </div>

                        <div class="form-group">
                          <label style="font-size: 18px; font-weight: bold;">City<span style="color: red;">*</span></label>
                          <input type="text" name="city" class="form-control required-field" />
                        </div>

                        <div class="form-group">
                          <label style="font-size: 18px; font-weight: bold;">Date</label>
                          <input type="date" name="date" class="form-control" />
                        </div>
                        <div class="form-group">
                          <label style="font-size: 18px; font-weight: bold;">Memo<span style="color: red;">*</span></label>
                          <textarea id="memo" name="memo" class="form-control required-field"
                            rows="4" placeholder="Enter memo details here..."
                            style="white-space: pre-wrap;"></textarea>
                        </div>

                        <script>
                          document.getElementById("memo").addEventListener("blur", function() {
                            if (this.value.trim() === "") {
                              this.value = "null";
                            }
                          });
                        </script>


                        <!-- Action Buttons -->
                        <div class="card-action">
                          <button type="submit" class="btn btn-success">Save</button>
                          <button type="reset" class="btn btn-danger">Cancel</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
@endsection