@extends('layout.master')
@section('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="{{ 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="{{ route('admin.booking.store') }}" method="POST" enctype="multipart/form-data">
              @csrf

              <span class="section">General Details</span>
              <div class="row">
                {{-- General Booking Info --}}
                <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>
                    @foreach ($customers as $customer)
                      <option value="{{ $customer->id }}">{{ $customer->first_name }} - {{ $customer->email }}</option>
                    @endforeach
                  </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>
                    @foreach ($transporters as $transporter)
                      <option value="{{ $transporter->id }}">{{ $transporter->company_name }}</option>
                    @endforeach
                  </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>
                    @foreach (\App\Models\Booking::rideTypes() as $id => $name)
                      <option value="{{ $id }}">{{ $name }}</option>
                    @endforeach
                  </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">
                {{-- Trip Template --}}
                <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>
                        @foreach ($vehicleTypes as $vehicle)
                          <option value="{{ $vehicle->id }}">{{ $vehicle->name }}</option>
                        @endforeach
                      </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>


@endsection