<?php $__env->startSection('content'); ?>
<div class="right_col" role="main">
  <div class="">
    <div class="clearfix"></div>
    <div class="row" style="display: block;">
      <div class="col-md-12 col-sm-12 ">
        <div class="x_panel">
          <div class="x_title">
            <h2>Booking <small>Create</small></h2>
            <ul class="nav navbar-right panel_toolbox">
              <li>
                <a href="<?php echo e(route('admin.booking.index')); ?>" class="closeBtn">
                  <i class="fa fa-arrow-left"></i> Back
                </a>
              </li>
            </ul>
            <div class="clearfix"></div>
          </div>

          <div class="x_content">
            <form action="<?php echo e(route('admin.booking.store')); ?>" method="POST" enctype="multipart/form-data">
              <?php echo csrf_field(); ?>

              <span class="section">General Details</span>
              <div class="row">
                
                <div class="col-md-4 col-sm-6 form-group">
                  <label>Customer *:</label>
                  <select name="customer_id" class="form-control">
                    <option value="">Select Customer</option>
                    <?php $__currentLoopData = $customers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $customer): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                      <option value="<?php echo e($customer->id); ?>"><?php echo e($customer->first_name); ?> - <?php echo e($customer->email); ?></option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                  </select>
                </div>

                <div class="col-md-4 col-sm-6 form-group">
                  <label>Transporter *:</label>
                  <select name="transporter_id" class="form-control">
                    <option value="">Select Transporter</option>
                    <?php $__currentLoopData = $transporters; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $transporter): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                      <option value="<?php echo e($transporter->id); ?>"><?php echo e($transporter->company_name); ?></option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                  </select>
                </div>

                <div class="col-md-4 col-sm-6 form-group">
                  <label>Ride Type *:</label>
                  <select name="ride_type" class="form-control">
                    <option value="">Select</option>
                    <?php $__currentLoopData = \App\Models\Booking::rideTypes(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $id => $name): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                      <option value="<?php echo e($id); ?>"><?php echo e($name); ?></option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                  </select>
                </div>

                <div class="col-md-4 col-sm-6 form-group">
                  <label>Booking Type *:</label>
                  <select name="booking_type" id="bookingType" class="form-control">
                    <option value="">Select</option>
                    <option value="1">One Way</option>
                    <option value="2">Two Way</option>
                  </select>
                </div>
              </div>
              <span class="section">Trips</span>
              <div id="tripContainer">
                
                <div class="tripItem border p-3 mb-4 bg-light rounded">
                  <h5 class="mb-3">Trip <span class="tripIndex">1</span></h5>

                  <div class="row">
                    <div class="col-md-4 form-group">
                      <label>Vehicle Type *:</label>
                      <select name="trips[0][vehicle_type]" class="form-control">
                        <option value="">Select</option>
                        <?php $__currentLoopData = $vehicleTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $vehicle): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                          <option value="<?php echo e($vehicle->id); ?>"><?php echo e($vehicle->name); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                      </select>
                    </div>

                    <div class="col-md-4 form-group">
                      <label>Pickup Location *:</label>
                      <input type="text" name="trips[0][pickup_location]" class="form-control">
                    </div>

                    <div class="col-md-4 form-group">
                      <label>Drop Location *:</label>
                      <input type="text" name="trips[0][drop_location]" class="form-control">
                    </div>

                    <div class="col-md-4 form-group">
                      <label>Pickup Latitude *:</label>
                      <input type="number" step="any" name="trips[0][pickup_lat]" class="form-control">
                    </div>

                    <div class="col-md-4 form-group">
                      <label>Pickup Longitude *:</label>
                      <input type="number" step="any" name="trips[0][pickup_lng]" class="form-control">
                    </div>

                    <div class="col-md-4 form-group">
                      <label>Drop Latitude *:</label>
                      <input type="number" step="any" name="trips[0][drop_lat]" class="form-control">
                    </div>

                    <div class="col-md-4 form-group">
                      <label>Drop Longitude *:</label>
                      <input type="number" step="any" name="trips[0][drop_lng]" class="form-control">
                    </div>

                    <div class="col-md-4 form-group">
                      <label>Pickup Time *:</label>
                      <input type="time" name="trips[0][pickup_time]" class="form-control">
                    </div>

                    <div class="col-md-4 form-group returnTimeBox">
                      <label>Return Time:</label>
                      <input type="time" name="trips[0][return_time]" class="form-control">
                    </div>

                    <div class="col-md-12 form-group">
                        <label>Dates *:</label>
                        <input type="text" name="trips[0][dates]" class="form-control trip-dates" placeholder="Select multiple dates">
                    </div>

                  </div>

                  <button type="button" class="btn btn-danger removeTrip mt-2" style="display:none;">
                    <i class="fa fa-trash"></i> Remove 
                  </button>
                </div>
              </div>

              <div class="text-right mb-3">
                <button type="button" id="addTrip" class="btn btn-primary">
                  <i class="fa fa-plus"></i> Add More 
                </button>
              </div>

              <div class="form-group row">
                <div class="col-md-12 text-right">
                  <button class="btn btn-secondary" type="reset">Reset</button>
                  <button type="submit" class="btn btn-success">Create Booking</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        initMultiDatePicker(".trip-dates");
    });

    document.addEventListener("DOMContentLoaded", function () {

        const bookingType = document.getElementById("bookingType");

        if (bookingType) {
            bookingType.addEventListener("change", function () {
                const isTwoWay = this.value == "2";
                document.querySelectorAll(".returnTimeBox").forEach(box => {
                    box.style.display = isTwoWay ? "block" : "none";
                });
            });
        }

        enableMultiDatePicker(".trip-dates");

    });

    function initMultiDatePicker(el) {
        $(el).multiDatesPicker("destroy"); 
        $(el).multiDatesPicker({
            dateFormat: "yy-mm-dd",
            separator: ", "
        });
    }

    document.addEventListener("DOMContentLoaded", function () {

    let tripIndex = 1;

    document.getElementById("addTrip").addEventListener("click", function () {

        const container = document.getElementById("tripContainer");
        const firstTrip = container.firstElementChild;

        const newTrip = firstTrip.cloneNode(true);

        let dateInput = newTrip.querySelector(".trip-dates");
        dateInput.value = "";
        dateInput.removeAttribute("id");
        $(dateInput).removeClass("hasDatepicker"); 

        newTrip.querySelectorAll("input, select").forEach((el) => {
            let name = el.getAttribute("name");
            if (name) {
                el.setAttribute("name", name.replace(/\[\d+\]/, `[${tripIndex}]`));
            }
            el.value = "";
        });

        newTrip.querySelector(".removeTrip").style.display = "inline-block";

        container.appendChild(newTrip);

        initMultiDatePicker(dateInput);

        tripIndex++;
    });

    document.addEventListener("click", function (e) {
        if (e.target.classList.contains("removeTrip")) {
            e.target.closest(".tripItem").remove();
        }
    });

});
</script>


<?php $__env->stopSection(); ?>

<?php echo $__env->make('layout.master', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/html/dashboard.orbiwheels.com/resources/views/admin/booking/create.blade.php ENDPATH**/ ?>