<?php 
// Enable errors for debugging
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
require './partials/head.php';
require '../config/message/error_success.php'; ?>

<body>
  <?php require './partials/sidebar.php' ?>

  <main class="dashboard-main">
    <?php require './partials/header.php' ?>

    <div class="dashboard-main-body">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Manage Shipping Form</h6>
        <ul class="d-flex align-items-center gap-2">
          <li class="fw-medium">
            <a href="dashboard" class="d-flex align-items-center gap-1 hover-text-primary">
              <iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon>
              Dashboard
            </a>
          </li>
          <li>-</li>
          <li class="fw-medium">Shipping Form</li>
        </ul>
      </div>

      <div class="card h-100 p-0 radius-12">
        <div class="card-body p-24">
          <div class="row justify-content-center">
            <div class="col-xxl-6 col-xl-8 col-lg-10">
              <div class="card border">
                <div class="card-body">

                  <form action="../controller/model.php" method="post" enctype="multipart/form-data">
                    <div class="row">
                      <!-- First Column -->
                      <div class="col-md-6">
                        <div class="mb-20">
                          <label for="name" class="form-label fw-semibold text-primary-light text-sm mb-8">Receiver Name<span class="text-danger-600">*</span></label>
                          <input type="text" name="user_name" class="form-control radius-8" id="name" placeholder="Enter Full Name">
                        </div>
                        <div class="mb-20">
                          <label for="email" class="form-label fw-semibold text-primary-light text-sm mb-8">Email <span class="text-danger-600">*</span></label>
                          <input type="email" name="user_email" class="form-control radius-8" id="email" placeholder="Enter email address">
                        </div>
                        <div class="mb-20">
                          <label for="number" class="form-label fw-semibold text-primary-light text-sm mb-8">Phone</label>
                          <input type="number" name="user_number" class="form-control radius-8" id="number" placeholder="Enter phone number">
                        </div>
                        <div class="mb-20">
                          <label for="package_name" class="form-label fw-semibold text-primary-light text-sm mb-8">Package Name</label>
                          <input type="text" name="package_name" class="form-control radius-8" id="package_name" placeholder="Enter Package Name">
                        </div>
                        <div class="mb-20">
                          <label for="origin" class="form-label fw-semibold text-primary-light text-sm mb-8">Origin</label>
                          <input type="text" name="origin" class="form-control radius-8" id="origin" placeholder="Enter Origin">
                        </div>
                        <div class="mb-20">
                          <label for="destination" class="form-label fw-semibold text-primary-light text-sm mb-8">Destination</label>
                          <input type="text" name="destination" class="form-control radius-8" id="destination" placeholder="Enter Destination">
                        </div>
                      </div>

                      <!-- Second Column -->
                      <div class="col-md-6">
                        <div class="mb-20">
                          <label for="current_location" class="form-label fw-semibold text-primary-light text-sm mb-8">Shipping Current Location</label>
                          <input type="text" name="current_location" class="form-control radius-8" id="current_location" placeholder="Enter shipping Current Location">
                        </div>
                        <div class="mb-20">
                          <label for="receiver_address" class="form-label fw-semibold text-primary-light text-sm mb-8">Receiver Address</label>
                          <input type="text" name="receiver_address" class="form-control radius-8" id="receiver_address" placeholder="Enter Receiver Address">
                        </div>
                        <div class="mb-20">
                          <label for="shipping_type" class="form-label fw-semibold text-primary-light text-sm mb-8">Type of Shipping</label>
                          <select name="shipping_type" class="form-control radius-8" id="shipping_type">
                            <option value="Air-Shipping">Air Shipping</option>
                            <option value="Road-Shipping">Road Shipping</option>
                            <option value="Sea-Shipping" selected>Sea Shipping</option>
                          </select>
                        </div>

                        <div class="mb-20">
                          <label for="expected_delivery_date" class="form-label fw-semibold text-primary-light text-sm mb-8">Quality</label>
                          <input type="text" name="quality" class="form-control radius-8" id="quality">
                        </div>

                        <div class="mb-20">
                          <label for="payment_mode" class="form-label fw-semibold text-primary-light text-sm mb-8">Payment Mode</label>
                          <select name="payment_mode" class="form-control radius-8" id="payment_mode">
                            <option value="cash">Cash</option>
                            <option value="credit_card">Credit Card</option>
                            <option value="online">Online</option>
                          </select>
                        </div>
                        <div class="mb-20">
                          <label for="expected_delivery_date" class="form-label fw-semibold text-primary-light text-sm mb-8">Expected Delivery Date</label>
                          <input type="date" name="expected_delivery_date" class="form-control radius-8" id="expected_delivery_date">
                        </div>
                      </div>
                      <div class="mb-20 col-md-6">
                        <label for="pickup_date" class="form-label fw-semibold text-primary-light text-sm mb-8">Pick Up Date</label>
                        <input type="date" name="pickup_date" class="form-control radius-8" id="pickup_date">
                      </div>
                      <div class="mb-20 col-md-6">
                        <label for="pickup_time" class="form-label fw-semibold text-primary-light text-sm mb-8">Pick Up Time</label>
                        <input type="time" name="pickup_time" class="form-control radius-8" id="pickup_time">
                      </div>
                      <div class="mb-20 col-md-6">
                        <label for="weight" class="form-label fw-semibold text-primary-light text-sm mb-8">Weight</label>
                        <input type="text" placeholder="Enter weight" name="weight" class="form-control radius-8" id="weight">
                      </div>
                      <div class="mb-20 col-md-6">
                        <label for="amount" class="form-label fw-semibold text-primary-light text-sm mb-8">Amount</label>
                        <input type="number" placeholder="Enter amount" name="amount" class="form-control radius-8" id="amount">
                      </div>

                    </div>


                    <!-- Comment Field (Full Width) -->
                    <div class="row">
                      <div class="col-md-12">
                        <div class="mb-20">
                          <label for="comment" class="form-label fw-semibold text-primary-light text-sm mb-8">Comment</label>
                          <textarea name="comment" class="form-control radius-8" id="comment" rows="4" placeholder="Enter any additional comments"></textarea>
                        </div>
                      </div>
                    </div>

                    <!-- File Upload -->
                    <div class="mb-20 col-md-12">
                      <label for="package_image" class="form-label fw-semibold text-primary-light text-sm mb-8">
                        Upload Package Image
                      </label>
                      <input type="file" name="package_image" class="form-control radius-8" id="package_image" accept="image/*">
                    </div>
                </div>

                <!-- Buttons Row -->
                <div class="row">
                  <div class="col-md-12">
                    <div class="d-flex align-items-center justify-content-center gap-3">
                      <button type="button" class="border border-danger-600 bg-hover-danger-200 text-danger-600 text-md px-56 py-11 radius-8">
                        Cancel
                      </button>
                      <button type="submit" name="submit_shippingFORM" class="btn btn-primary border border-primary-600 text-md px-56 py-12 radius-8">
                        Save
                      </button>
                    </div>
                  </div>
                </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>

    <?php require './partials/footer.php' ?>
  </main>

  <?php require './partials/scripts.php' ?>


  <script>
    // ================== Image Upload Js Start ===========================
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          $('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
          $('#imagePreview').hide();
          $('#imagePreview').fadeIn(650);
        }
        reader.readAsDataURL(input.files[0]);
      }
    }
    $("#imageUpload").change(function() {
      readURL(this);
    });
    // ================== Image Upload Js End ===========================
  </script>

</body>

</html>