@extends('frontend.layouts.app3')

@section('seo')
<title>Checkout | Mulach Bakery</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="https://rweb.solutions/muhlach/public/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="My Basket | Mulach Bakery" />
<meta property="og:description" content="" />
<meta property="og:site_name" content="My Basket | Mulach Bakery" />
<meta property="og:image" content="" />
<meta property="og:image" content="{{ asset('img/meta-thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('img/meta-thumbnail.jpg') }}" />
<meta property="og:image:alt" content="{{ asset('img/meta-thumbnail.jpg') }}">
@endsection


<link rel="stylesheet" href="{{asset('css/final_checkout.css')}}">

@section('content')

@php
$cart_total = 0;
@endphp
@if (session('cart'))
@foreach (session('cart') as $cart)
@php
$cart_total += $cart['amount'] * $cart['price'];
@endphp
@endforeach
@endif


<script>
  // When the "Confirm" button is clicked in the second modal
  $('.place-order').on('click', function() {
    // Get the pinned address text
    var pinnedAddress = $('#pinnedAddress').text().trim();

    // Get optional building or apartment and unit number values
    var buildingOrApartment = $('#building_or_apartment').val().trim();
    var unitNo = $('#unit_no').val().trim();

    // Construct the complete address
    var completeAddress = pinnedAddress;

    if (buildingOrApartment !== '') {
      completeAddress += ', ' + buildingOrApartment;
    }

    if (unitNo !== '') {
      completeAddress += ', Unit ' + unitNo;
    }

    // Set the complete address as the value of the input field
    $('input[name="delivery"]').val(completeAddress);

    // Close both modals
    $('#exampleModalToggle').modal('hide');
    $('#exampleModalToggle2').modal('hide');
  });
</script>


<div class="container-fluid bg-dirty-white pb-5">
  <div class="container content-placement">
    <form id="checkoutForm" action="{{ url('final-checkout') }}" method="POST">
      @csrf
      <input type="hidden" name="sf" value="{{ session('sf') }}" />
      {{-- <input type="hidden" name="store_id" value="{{ session('store') }}" /> --}}
      <input type="hidden" name="cart_total" value="{{ $cart_total }}" />
      @if(session()->get('service_type') != 'Delivery')
      <input type="hidden" name="total" value="{{ $cart_total + (session('sf') ?? 0) }}" />
      @else
      <input type="hidden" name="total" value="{{ $cart_total + (session('sf') ?? 0) }}" />
      @endif

      @if(session('success'))
      <div class="col-12">
        <div class="alert alert-success my-3">
          {{ session('success') }}
        </div>
      </div>
      @endif

      @if (request()->is('cart/create'))
      @php
      $service_type = request()->input('service_type');
      @endphp
      @endif

      <input type="hidden" name="service_type" value="{{ $service_type ?? '' }}" />

      <left>
        <h5 class="red">Checkout</h5>
      </left>
      <br>
      <hr class="red">

      <span class="red"><a href="{{url('/cart')}}" class="red back">
          <i class="fa-solid fa-arrow-left"></i>&ensp;&ensp; Back to My Basket</a>
      </span>
      <div class="billing-content">
        <div class="row g-5 gy-5 row-checkout">
          <div class="col-md-5 col-lg-7">
            <h5 class="mb-3 billing-title red ">Billing address</h5>


            <div class="row g-3">
              <label for="" class="form-label"><span class="red">Preferred Shipping option</span></label>
              <div class="col-12  col-xl-8  d-flex flex-column flex-lg-row gap-2">
                <button type="button" class="btn border-danger btn-lg rounded-pill w-100 bold mb-2 mb-md-0 {{ session()->get('service_type') == 'Pick_up' ? ' bg-yellow' : ' bg-white' }}" id="pickupButton">CUSTOMER PICK-UP</button>
                <button type="button" class="btn border-danger btn-lg rounded-pill w-100 bold {{ session()->get('service_type') == 'Delivery' ? ' bg-yellow' : ' bg-white' }}" id="deliveryButton">MUHLACH DELIVERY</button>
              </div>

              <div class="col-md-12">

                @if (session()->get('service_type') == 'Delivery')

                <label for="firstName" class="form-label">
                  <span class="red">For Delivery <span class="yellow"><i>(Care of Muhlach)</i></span></span>
                </label>
                <input data-bs-toggle="modal" href="#exampleModalToggle" role="button" type="text" id="delivery" name="store_name" class="form-control rounded-0" placeholder="Enter your preferred delivery address" required>

                @error('address')
                <code>{{ $message }}</code>
                @enderror

                <div class="col-md-12">
                  <!-- Modal for entering and confirming address -->
                  <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                      <div class="modal-content custom-modal-height">
                        <div class="my-4">
                          <button type="button" class="btn btn-link position-absolute top-0 start-0 m-3 text-decoration-none" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fa-solid fa-angle-left" style="color: #682c2d; background-color: #f6e5eb; border-radius: 50%; padding: 12px;"></i>
                          </button>
                        </div>
                        <div class="modal-header">
                          <h5 class="modal-title red text-center" id="exampleModalToggleLabel">Delivery address</h5>
                        </div>
                        <div class="modal-body">
                          <!-- Input for entering address -->
                          <input type="text" name="address" class="form-control rounded-0 border-danger text-center" id="autocomplete" placeholder="Enter your preferred delivery address" required value="{{ old('address') }}">
                          <ul id="suggestionList" class="list-group mt-3" style="display: none;"></ul>
                          <!-- Hidden inputs to store place details -->
                          <input type="hidden" id="place-id">
                          <input type="hidden" id="lat">
                          <input type="hidden" id="lng">
                        </div>
                      </div>
                    </div>
                  </div>



                  <!-- Modal for confirming address with map -->
                  <div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                      <div class="modal-content">
                        <div class="my-4">
                          <button type="button" class="btn btn-link position-absolute top-0 start-0 m-3 text-decoration-none" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">
                            <i class="fa-solid fa-angle-left" style="color: #682c2d; background-color: #f6e5eb; border-radius: 50%; padding: 12px;"></i>
                          </button>
                        </div>
                        <center>
                          <h5 class="modal-title red p-3" id="exampleModalToggleLabel2">Confirm Address</h5>
                        </center>

                        <div class="modal-body">
                          <!-- Div to display the selected address map -->
                          <div id="map" style="width: 100%; height: 250px;"></div>
                          <!-- Text below the map to display pinned location address -->
                          <p id="pinnedLocationText" class="mt-3">
                            <img class="img-fluid" src="{{ asset('img/icon-pin.png') }}" alt="">
                            <span class="red" id="pinnedAddress"></span>
                          </p>

                          <div class="row" style="margin-bottom: 5rem; margin-top: 2rem;">
                            <div class="col-8">
                              <label for="building_or_apartment" class="form-label red fw-semibold">Building or Apartment</label>
                              <input type="text" id="building_or_apartment" name="building_or_apartment" class="form-control rounded-0 red border-danger w-100" placeholder="Optional">
                            </div>
                            <div class="col-4">
                              <label for="unit_no" class="form-label red fw-semibold">Unit No.</label>
                              <input type="text" id="unit_no" name="unit_no" class="form-control rounded-0 red border-danger w-100" placeholder="Optional">
                            </div>
                          </div>
                          <button id="confirmButton" class="red place-order" data-bs-dismiss="modal" aria-label="Close">Confirm</button>
                        </div>

                      </div>
                    </div>
                  </div>

                </div>

                @else

                <label for="firstName" class="form-label">
                  <span class="red">Preferred Branch <span class="yellow"><i>(Care of Customer)</i></span></span>
                </label>
                <select class="form-select" aria-label="Default select example" name="store_name" value="{{ old('store_name') }}">
                  <option selected>Please select a branch</option>
                  @foreach ($stores as $store)
                  <option value="{{ $store->location }}">{{ $store->location }} / {{ $store->maintext }}</option>
                  @endforeach
                </select>
                @error('store_id')
                <code>{{ $message }}</code>
                @enderror
                @endif
              </div>

              <div class="col-md-12">
                <label for="firstName" class="form-label"><span class="red">Full Name <span class="yellow"><i>(Required)</i></span></span></label>
                <input type="text" name="full_name" class="form-control rounded-0" id="" required value="{{ old('full_name') }}">
                @error('full_name')
                <code>{{ $message }}</code>
                @enderror
              </div>

              <div class="col-md-12">
                <label for="email" class="form-label"><span class="red">Email <span class="yellow"><i>(Required)</i></span></span></label>
                <input type="email" id="emailInput" name="email" class="form-control rounded-0" value="{{ old('email') }}" required>

              </div>


                <!-- Inside the modal for OTP verification -->
            <div class="modal fade" id="otpModal" tabindex="-1" aria-labelledby="otpModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                  <div class="modal-header d-flex justify-content-center">
                    <h5 class="modal-title red" id="otpModalLabel">Verify OTP</h5>
                    <!--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
                  </div>
                  <div class="modal-body">
                    <div id="otpMessage" class="alert alert-danger text-center d-none"></div>
            
                    <p class="text-center">Please enter the OTP sent to your phone.</p>
            
                    <!-- Message display area -->
                    
                    <div class="mb-3">
                      <input type="text" class="form-control" id="otpInput" name="otp" placeholder="Enter OTP" required>
                    </div>
                    
                    <button type="button" class="place-order red" id="verifyOtpButton">Verify OTP</button>
            
                    <!-- Resend OTP button and timer -->
                    <div class="d-flex justify-content-between mt-3 text-center">
                      <button type="button" class="btn btn-secondary" id="resendOtpButton" disabled>Resend OTP</button>
                      <span class="mt-2 red" id="resendTimer">Resend OTP Code in <span id="timer">2:00</span>.</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>





              <div class="col-md-12">
                <!-- Label and input for complete address -->
                <label for="firstName" class="form-label">
                  <span class="red">Complete Address <span class="yellow"><i>(Required)</i></span></span>
                </label>
                <input type="text" name="address" class="form-control rounded-0" placeholder="Block No./Unit No., Street, Residence, Barangay, City/Login, Province" required>
                @error('address')
                <code>{{ $message }}</code>
                @enderror
              </div>


              <div class="col-md-12">
                <label for="contactNoInput" class="form-label"><span class="red">Contact No. <span class="yellow"><i>(Required)</i></span></span></label>
                <div class="input-group">
                  <span class="input-group-text bg-white rounded-0 red" id="basic-addon1">+63</span>
                  <input type="number" id="contactNoInput" name="contact_no" class="form-control rounded-0" aria-label="contact_no" aria-describedby="basic-addon1" required>
                </div>
                <span class="fs-6 fst-italic red">Ex: +639123456789</span>
                @error('contact_no')
                <code>{{ $message }}</code>
                @enderror
              </div>

              <div class="col-md-12">
                <label for="firstName" class="form-label"><span class="red">Special Instructions <span class="yellow"><i>(Optional)</i></span></span></label>
                <textarea name="special_instructions" id="" class="form-control rounded-0" rows="4">{{ old('special_instructions') }}</textarea>
              </div>

              <div class="row gy-3">
                <div class="col-md-6">
                  <label for="assignedDate" class="form-label">
                    <span class="red">Date of {{ session()->get('service_type') }}
                      <span class="yellow"><i>(Required)</i></span>
                    </span>
                  </label>
                  <input type="date" name="assigned_date" class="form-control rounded-0" id="assignedDate" required value="{{ old('assigned_date') }}">
                  <span class="fs-6 fst-italic red">(Please note: We only accept orders during 8:00 AM to 5:00 PM)</span>
                  @error('assigned_date')
                  <code>{{ $message }}</code>
                  @enderror
                </div>

                <div class="col-md-6">
                  @if (session()->get('service_type') == 'Delivery')
                  <label for="assignedTime" class="form-label">
                    <span class="red">Time of Deliver
                      <span class="yellow"><i>(Required)</i></span>
                    </span>
                  </label>
                  @else
                  <label for="assignedTime" class="form-label">
                    <span class="red">Pick up Time
                      <span class="yellow"><i>(Required)</i></span>
                    </span>
                  </label>
                  @endif
                  <select id="assignedTime" name="assigned_time" class="form-control rounded-0" required>
                    <option selected hidden disabled>Select a time</option>
                  </select>
                  @error('assigned_time')
                  <code>{{ $message }}</code>
                  @enderror
                </div>

                 <script>
                  document.addEventListener('DOMContentLoaded', function() {
                    const assignedDate = document.getElementById('assignedDate');
                    const assignedTime = document.getElementById('assignedTime');
                    const timeDisplay = document.getElementById('timeDisplay');

                    const today = new Date().toISOString().split('T')[0];
                    assignedDate.setAttribute('min', today);

                    const times = [
                      '08:00 AM', '08:30 AM', '09:00 AM', '09:30 AM', '10:00 AM', '10:30 AM', '11:00 AM', '11:30 AM',
                      '12:00 PM', '12:30 PM', '01:00 PM', '01:30 PM', '02:00 PM', '02:30 PM', '03:00 PM', '03:30 PM',
                      '04:00 PM', '04:30 PM', '05:00 PM'
                    ];

                    function updateTimeOptions() {
                      const selectedDate = assignedDate.value;

                      assignedTime.innerHTML = '<option selected hidden disabled>Select a time</option>';

                      if (selectedDate === today) {
                        const currentHour = new Date().getHours();

                        times.forEach(time => {
                          const [hour, minute] = time.split(':');
                          const amPm = time.split(' ')[1];
                          const isBeforeNoon = (amPm === 'AM') || (amPm === 'PM' && parseInt(hour) === 12);

                          if (isBeforeNoon && time !== '12:30 PM') {
                            assignedTime.innerHTML += `<option value="${time}">${time}</option>`;
                          }
                        });
                      } else {
                        times.forEach(time => {
                          assignedTime.innerHTML += `<option value="${time}">${time}</option>`;
                        });
                      }
                    }

                    function addMinutes(time, minutes) {
                      const [hour, minute] = time.split(':');
                      let hours = parseInt(hour);
                      let mins = parseInt(minute.split(' ')[0]);
                      let amPm = time.split(' ')[1];

                      mins += minutes;
                      if (mins >= 60) {
                        mins -= 60;
                        hours += 1;
                      }

                      // Handle transition from 12 PM correctly
                      if (hours === 12 && amPm === 'AM') {
                        amPm = 'PM'; // Transition from AM to PM at 12:00
                      } else if (hours === 12 && amPm === 'PM') {
                        // Keep it as PM for 12 PM to 12:30 PM
                      } else if (hours > 12) {
                        hours -= 12; // Keep hours in 12-hour format
                      } else if (hours === 12 && mins === 0) {
                        amPm = 'PM'; // Ensure transition from 11:30 AM to 12:00 PM works correctly
                      }

                      return `${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')} ${amPm}`;
                    }

                    function formatTime(time) {
                      const [hour, minute] = time.split(':');
                      const amPm = time.split(' ')[1];
                      const adjustedHours = parseInt(hour) % 12 || 12;
                      return `${String(adjustedHours).padStart(2, '0')}:${String(minute.split(' ')[0]).padStart(2, '0')} ${amPm}`;
                    }

                    assignedDate.addEventListener('change', updateTimeOptions);

                    assignedTime.addEventListener('change', function() {
                      const selectedTime = assignedTime.value;
                      if (selectedTime) {
                        const endTime = addMinutes(selectedTime, 30); // Adding 30 minutes
                        timeDisplay.textContent = `${formatTime(selectedTime)} - ${formatTime(endTime)}`; // Display start and end times
                      }
                    });

                    updateTimeOptions();
                  });
                </script>


              </div>
            </div>
            {{-- @endforeach --}}
            @foreach (session('cart') as $cart)
            <input type="hidden" name="item[]" value="{{ $cart['name'] }}" />
            <input type="hidden" name="quantity[]" value="{{ $cart['amount'] }}" />
            {{-- <input type="hidden" name="item" value="{{ $cart['quantity'] }}" /> --}}
            @endforeach

          </div>
          <div class="col-md-7 col-lg-5 order-md-last ">
            <h6 class="red">Your Orders</h6><br>
            <div class="order-border border bg-red text-white p-3 rounded-top-5">
              <div class="d-flex justify-content-between">
                <span>Product(s)</span>
              </div>
            </div>


            <div class="border bg-white p-5 rounded-bottom-5">
              @if (session('cart'))
              @foreach (session('cart') as $cart)
              @if ($cart['amount'] != 0)
              <div class="d-flex justify-content-between">
                <div class="left">
                  <span class="red"> {{ $cart['name'] }}</span><br>
                  <span class="yellow">x {{ $cart['amount'] }}</span>
                </div>
                <div class="right">
                  <span class="red">₱ {{ number_format($cart['amount'] * $cart['price'], 2) }}</span>
                </div>
              </div>
              @endif
              @endforeach
              @endif

              <hr>
              <div class="d-flex justify-content-between">
                <div class="left">
                  <span class="red bold">Sub Total</span><br>
                </div>
                <div class="right">
                  <span class="red ">₱ {{ number_format($cart_total, 2) }}</span><br>
                </div>
              </div>
              <br>



              <div class="d-flex justify-content-between">
                <div class="left">
                  <span class="red">Delivery Fee</span><br>
                </div>
                <div class="right">
                  <span id="deliveryFee" class="red">₱ 0.00</span><br>
                  <!-- Add this input field -->
                  <input type="hidden" name="delivery_fee" id="deliveryFeeInput" value="0.00">
                </div>
              </div>


              <hr>
              <div class="d-flex justify-content-between">
                <span class="red bold">Total</span>
                <br>
                <span id="totalAmount" class="red bold">₱{{ number_format($cart_total + session('sf') ?? 0, 2) }}</span>
              </div>
            </div>

            <br>
            <div class="order-border border bg-red text-white p-3 rounded-top-5">
              <div class="d-flex justify-content-between">
                <span></span>
              </div>
            </div>


            <div class="border bg-white p-5 rounded-bottom-5">

              <div class="row ">
                <div class="col-6">
                  <span class="red"><img class="img-fluid" src="{{asset('img/icon-date.png')}}" alt=""> Time of Delivery</span>
                </div>
                <div class="col-6">
                  <span id="timeDisplay" class="yellow">1:00 PM - 1:30 PM</span>
                </div>
              </div>
              <br>



              <div class="row">
                <div class="col-6">
                  <span class="red"><img class="img-fluid" src="{{asset('img/icon-location.png')}}" alt=""> Delivery Address</span>
                </div>
                <div class="col-6">
                  <span id="location" class="yellow">Manila G/F Office ...</span>
                </div>
              </div>


            </div>


            <div class="my-5">
              <h6 class="red">Payment Methods</h6>
              <div class="form-check d-flex  align-items-center">
                <input class="form-check-input" type="radio" name="payment_method" value="card" id="credit" required>
                <div class="d-flex flex-col flex-md-row align-items-center">
                  <div>
                    <label class="form-check-label label-check mx-2 mt-2" for="credit">
                      Credit or debit card
                    </label>
                  </div>
                  <div>
                    <img style=" height:5rem; width:5rem; object-fit:contain;" src="{{asset('img/logo/master_card.png')}}" alt=""> <img style=" height:5rem; width:5rem; object-fit:contain;" src="{{asset('img/logo/visa.png')}}" alt="">
                  </div>
                </div>

              </div>
              <div class="form-check d-flex  align-items-center">
                <input class="form-check-input" type="radio" name="payment_method" value="gcash" id="gcash" required>
                <label class="form-check-label label-check mx-2 mt-2" for="gcash">
                  <span> <img style=" height:5rem; width:5rem; object-fit:contain;" src="{{asset('img/logo/gcash.png')}}" alt=""></span>
                </label>
              </div>
            </div>

            <br>
            <br>

            <a role="button">
              <button class="place-order red" id="placeOrderButton">PLACE ORDER</button>
            </a>
            <script>
              let resendTimer;
              let timeRemaining = 120; // 2 minutes in seconds
            
              document.getElementById('placeOrderButton').addEventListener('click', function() {
                const contactNo = document.getElementById('contactNoInput').value;
            
                if (!contactNo) {
                  showOtpMessage('Please enter a contact number.', 'danger');
                  return;
                }
            
                sendOtp(contactNo);
              });
            
              function sendOtp(contactNo) {
                // Disable the Resend OTP button and start the timer
                startResendTimer();
            
                // Send OTP request
                fetch("{{ route('send.otp') }}", {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json',
                      'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                      contact_no: contactNo
                    })
                  })
                  .then(response => response.json())
                  .then(data => {
                    if (data.success) {
                      showOtpMessage('OTP sent successfully! Check your SMS.', 'success');
            
                      // Open OTP modal
                      var otpModal = new bootstrap.Modal(document.getElementById('otpModal'));
                      otpModal.show();
            
                      // Clear OTP input field
                      document.getElementById('otpInput').value = '';
            
                      // Verify OTP handler
                      document.getElementById('verifyOtpButton').onclick = function() {
                        const otp = document.getElementById('otpInput').value;
            
                        if (!otp) {
                          showOtpMessage('Please enter the OTP.', 'danger');
                          return;
                        }
            
                        // Verify OTP request
                        verifyOtp(otp, contactNo);
                      };
                    } else {
                      showOtpMessage('Error sending OTP: ' + data.error, 'danger');
                      var otpModal = new bootstrap.Modal(document.getElementById('otpModal'));
                      otpModal.show();
            
                    }
                  })
                  .catch(error => {
                    console.error('Error:', error);
                    showOtpMessage('Failed to send OTP. Please try again.', 'danger');
                    var otpModal = new bootstrap.Modal(document.getElementById('otpModal'));
                      otpModal.show();
            
                  });
              }
            
              function verifyOtp(otp, contactNo) {
                fetch("{{ route('verify.otp') }}", {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json',
                      'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                      otp: otp,
                      contact_no: contactNo
                    })
                  })
                  .then(response => response.json())
                  .then(data => {
                    if (data.success) {
                      document.getElementById('checkoutForm').submit(); // Submit the form
                    } else {
                      showOtpMessage('Invalid OTP. Please try again.', 'danger');
                      var otpModal = new bootstrap.Modal(document.getElementById('otpModal'));
                      otpModal.show();
            
                    }
                  })
                  .catch(error => {
                    console.error('Error:', error);
                    showOtpMessage('Failed to verify OTP. Please try again.', 'danger');
                    var otpModal = new bootstrap.Modal(document.getElementById('otpModal'));
                      otpModal.show();
            
                  });
              }
            
              function startResendTimer() {
                document.getElementById('resendOtpButton').disabled = true;
                document.getElementById('timer').innerText = '2:00';
            
                resendTimer = setInterval(function() {
                  if (timeRemaining <= 0) {
                    clearInterval(resendTimer);
                    enableResendButton();
                    return;
                  }
            
                  timeRemaining--;
            
                  const minutes = Math.floor(timeRemaining / 60);
                  const seconds = timeRemaining % 60;
                  document.getElementById('timer').innerText = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
                }, 1000);
              }
            
              function enableResendButton() {
                document.getElementById('resendOtpButton').disabled = false;
                document.getElementById('resendOtpButton').innerText = 'Resend OTP';
                timeRemaining = 120; // Reset the timer
              }
            
              // Resend OTP button event listener
              document.getElementById('resendOtpButton').addEventListener('click', function() {
                const contactNo = document.getElementById('contactNoInput').value;
                if (contactNo) {
                  sendOtp(contactNo);
                } else {
                  showOtpMessage('Please enter a contact number.', 'danger');
                }
              });
            
              // Function to show the message in the OTP modal
              function showOtpMessage(message, type) {
                const otpMessageElement = document.getElementById('otpMessage');
                otpMessageElement.innerText = message;
                otpMessageElement.classList.remove('d-none', 'alert-danger', 'alert-success');
                otpMessageElement.classList.add('alert-' + type); // Adds alert-success or alert-danger based on the type
              }
            </script>



            
            
            
          </div>
        </div>
      </div>

    </form>
  </div>
</div>



<script>
  document.getElementById('pickupButton').addEventListener('click', function() {
    updateServiceType('Pick_up');
  });

  document.getElementById('deliveryButton').addEventListener('click', function() {
    updateServiceType('Delivery');
  });

  function updateServiceType(serviceType) {
    const token = '{{ csrf_token() }}';
    const newUrl = `?_token=${token}&service_type=${serviceType}`;

    // Redirect to the new URL
    window.location.href = newUrl;
  }
</script>



<script>
  document.addEventListener('DOMContentLoaded', () => {
    const autocompleteInput = document.getElementById('autocomplete');
    const suggestionList = document.getElementById('suggestionList');
    let debounceTimer;
    let suggestions = [];
    const startLatLng = {
      lat: 14.617538450793047,
      lng: 121.04485657674584
    };
    let endLatLng;
    let startMarker;
    let endMarker;
    let routeControl;

    // Define the bounding box for Metro Manila and Calabarzon
    const boundingBox = {
      north: 14.856,
      south: 13.950,
      east: 122.221,
      west: 120.800
    };

    function fetchLocationSuggestions(query) {
      return fetch(`https://nominatim.openstreetmap.org/search?format=json&addressdetails=1&q=${query}&bounded=1&limit=10&viewbox=${boundingBox.west},${boundingBox.south},${boundingBox.east},${boundingBox.north}`)
        .then(response => response.json())
        .then(data => {
          // Filter results based on bounding box
          return data.filter(place => {
            return place.lat >= boundingBox.south &&
              place.lat <= boundingBox.north &&
              place.lon >= boundingBox.west &&
              place.lon <= boundingBox.east;
          }).map(place => ({
            placeId: place.place_id,
            displayName: place.display_name,
            lat: place.lat,
            lon: place.lon
          }));
        });
    }

    function updateSuggestions(suggestionsData) {
      suggestions = suggestionsData;
      suggestionList.innerHTML = '';

      suggestions.forEach(suggestion => {
        const listItem = document.createElement('li');
        listItem.classList.add('list-group-item', 'suggestion-item', 'red');

        const image = document.createElement('img');
        image.src = "{{ asset('img/icon-pin.png') }}";
        image.classList.add('suggestion-image', 'img-fluid', 'px-2');
        listItem.appendChild(image);

        const textElement = document.createElement('span');
        textElement.textContent = suggestion.displayName;
        listItem.appendChild(textElement);

        suggestionList.appendChild(listItem);
      });

      suggestionList.style.display = suggestions.length > 0 ? 'block' : 'none';
    }

    suggestionList.addEventListener('click', function(event) {
      const listItem = event.target.closest('.suggestion-item');
      if (listItem) {
        const displayName = listItem.querySelector('span').textContent;
        const suggestion = suggestions.find(s => s.displayName === displayName);

        autocompleteInput.value = displayName;
        suggestionList.style.display = 'none';
        $('#exampleModalToggle').modal('hide');
        $('#exampleModalToggle2').modal('show');

        document.getElementById('place-id').value = suggestion.placeId;
        document.getElementById('lat').value = suggestion.lat;
        document.getElementById('lng').value = suggestion.lon;

        endLatLng = {
          lat: parseFloat(suggestion.lat),
          lng: parseFloat(suggestion.lon)
        };

        updateEndMarker(endLatLng.lat, endLatLng.lng, suggestion.displayName);
        updateDistanceAndFee();
      }
    });

    autocompleteInput.addEventListener('input', function() {
      const query = this.value.trim();
      if (query.length > 3) {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
          fetchLocationSuggestions(query)
            .then(updateSuggestions)
            .catch(error => console.error('Error fetching suggestions:', error));
        }, 300);
      } else {
        suggestionList.style.display = 'none';
      }
    });

    const map = L.map('map', {
      center: [14.617538450793047, 121.04485657674584],
      zoom: 13
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    startMarker = L.marker([14.617538450793047, 121.04485657674584]).addTo(map);
    startMarker.bindPopup("Muhlach Ensaymada, Mayor Ignacio Santos Diaz Avenue, Kaunlaran, Cubao, 4th District, Quezon City, Eastern Manila District, Metro Manila, 1111, Philippines").openPopup();

    function updateEndMarker(lat, lon, address) {
      if (endMarker) {
        endMarker.setLatLng([lat, lon]);
      } else {
        endMarker = L.marker([lat, lon]).addTo(map);
      }
      endMarker.bindPopup(address).openPopup();
      document.getElementById('pinnedAddress').textContent = address;
    }

    function calculateDistance(lat1, lon1, lat2, lon2) {
      const R = 6371;
      const dLat = (lat2 - lat1) * Math.PI / 180;
      const dLon = (lon2 - lon1) * Math.PI / 180;
      const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      return R * c;
    }

    function calculateDeliveryFee(distanceKm) {
      const baseFee = 150;
      const additionalFeePerKm = 25;
      const baseDistance = 5;

      if (distanceKm <= baseDistance) {
        return baseFee;
      } else {
        return baseFee + (distanceKm - baseDistance) * additionalFeePerKm;
      }
    }

    function updateDistanceAndFee() {
      if (endLatLng) {
        const distanceKm = calculateDistance(startLatLng.lat, startLatLng.lng, endLatLng.lat, endLatLng.lng);
        const deliveryFee = calculateDeliveryFee(distanceKm);

        // Update the span element
        document.getElementById('deliveryFee').textContent = `₱ ${deliveryFee.toFixed(2)}`;

        // Update the input field
        document.getElementById('deliveryFeeInput').value = deliveryFee.toFixed(2);

        const cartTotal = parseFloat("{{ $cart_total }}");
        const totalAmount = cartTotal + deliveryFee;
        document.getElementById('totalAmount').textContent = `₱ ${totalAmount.toFixed(2)}`;

        if (routeControl) {
          map.removeControl(routeControl);
        }

        routeControl = L.Routing.control({
          waypoints: [
            L.latLng(startLatLng.lat, startLatLng.lng),
            L.latLng(endLatLng.lat, endLatLng.lng)
          ],
          routeWhileDragging: true,
          lineOptions: {
            styles: [{
              color: '#ff0000',
              opacity: 0.8,
              weight: 5
            }]
          },
          createMarker: function() {
            return null;
          },
          show: false,
          addWaypoints: false,
          draggableWaypoints: false,
          fitSelectedRoutes: true
        }).addTo(map);
      }
    }

    function reverseGeocode(lat, lon) {
      return fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`)
        .then(response => response.json())
        .then(data => data.display_name);
    }

    map.on('click', function(e) {
      const lat = e.latlng.lat;
      const lon = e.latlng.lng;

      endLatLng = {
        lat,
        lng: lon
      };

      reverseGeocode(lat, lon)
        .then(address => {
          // Check if the clicked location is within the bounding box
          if (lat >= boundingBox.south &&
            lat <= boundingBox.north &&
            lon >= boundingBox.west &&
            lon <= boundingBox.east) {
            updateEndMarker(lat, lon, address);
            updateDistanceAndFee();
          } else {
            alert('Location is outside the allowable area.');
          }
        })
        .catch(error => console.error('Error fetching address:', error));
    });

    $('#exampleModalToggle2').on('shown.bs.modal', function() {
      map.invalidateSize();
    });

    // Add this event listener
    document.getElementById('confirmButton').addEventListener('click', () => {
      const address = document.getElementById('pinnedAddress').textContent;
      const buildingOrApartment = document.getElementById('building_or_apartment').value.trim();
      const unitNo = document.getElementById('unit_no').value.trim();

      // Construct the full delivery address
      let fullAddress = address;
      if (buildingOrApartment) {
        fullAddress += `, Building/Apartment: ${buildingOrApartment}`;
      }
      if (unitNo) {
        fullAddress += `, Unit No: ${unitNo}`;
      }

      // Set the delivery input field's value
      document.getElementById('delivery').value = fullAddress;
      document.getElementById('location').textContent = fullAddress;
    });
  });
</script>


<style>
  .navbar {
    background-color: #fff0e0;
  }

  .navbar-scrolled {
    background-color: transparent;
  }
</style>
<style>
  .custom-modal-height {
    height: 80vh;
    /* Set the height to 80% of the viewport height */
  }

  .placeorder-modal-height {
    height: 60vh;
    /* Set the height to 80% of the viewport height */
  }

  .suggestion-item {
    border: none;
    cursor: pointer;
  }

  .modal-body {
    max-height: calc(100vh - 210px);
    /* Adjust the max-height to allow for header and footer */
    overflow-y: auto;
    /* Enable vertical scrolling if the content exceeds the height */
  }
</style>
<style>
  /* Style for the input text color */
  #pickupButton {
    color: rgb(155, 0, 0);
    /* Text color when typing */
  }

  #deliveryButton {
    color: rgb(155, 0, 0);
    /* Text color when typing */
  }

  .bg-yellow:hover {
    background-color: #ffb12d;
  }
</style>
<style>
  /* Style for the input text color */
  #autocomplete {
    color: rgb(155, 0, 0);
    /* Text color when typing */
  }

  /* Style for the placeholder */
  #autocomplete::placeholder {
    color: rgb(155, 0, 0);
    /* Placeholder color */
  }

  #building_or_apartment {
    color: rgb(155, 0, 0);
    /* Text color when typing */
  }

  /* Style for the placeholder */
  #building_or_apartment::placeholder {
    color: rgb(155, 0, 0);
    /* Placeholder color */
  }

  #unit_no {
    color: rgb(155, 0, 0);
    /* Text color when typing */
  }

  /* Style for the placeholder */
  #unit_no::placeholder {
    color: rgb(155, 0, 0);
    /* Placeholder color */
  }
</style>
<style>
  .rounded-bottom-5 {
    border-bottom-left-radius: 1.5rem;
    /* Adjust the value as needed */
    border-bottom-right-radius: 1.5rem;
    /* Adjust the value as needed */
  }

  .rounded-top-5 {
    border-top-left-radius: 1.5rem;
    /* Adjust the value as needed */
    border-top-right-radius: 1.5rem;
    /* Adjust the value as needed */
  }
</style>

@endsection

@section('js')
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var timeInput = document.getElementById("assigned_time");
    var startTime = 8; // Start hour (8:00 am)
    var endTime = 17; // End hour (5:00 pm)

    // Generate time options from start to end hour
    for (var hour = startTime; hour <= endTime; hour++) {
      var time = hour.toString().padStart(2, "0") + ":00"; // Format the time as HH:00
      var option = document.createElement("option");
      option.text = time;
      option.value = time;
      timeInput.add(option);
    }
  });
</script>

@endsection