@extends('layouts.master')
@section('title', 'Get Quotes')
@section('content')
@section('style')
<style>
   [class^='select2'] {
   border: none !important;
   }
   .custom {
   color: grey;
   }
   .invalid-feedback {
   color: #dc3545;
   /* Bootstrap's default error color */
   font-size: 14px;
   padding-top: 8px;
   }
</style>
@endsection
<main id="main" class="main">
   <section class="section dashboard">
      <div class="row my-5">
      <div class="co-12 my-md-5">
         <h1 class="text-primary">Send a Package</h1>
         <p class="text-muted">Send a package with the most reliable couriers in the UK</p>
      </div>
      <form method="POST" id="quoteForm" action="{{route('quote.get')}}" class="needs-validation col-12 d-flex flex-wrap" novalidate>
         @csrf
         <div class=" col-md-7   rounded-5 mx-auto row justify-content-between"   style="position: relative; " >
   <div class="  form bg-white shadow " style="position: relative; z-index: 1; border-left: 6px solid #309cdc; border-top: 2px solid #309cdc;">
      <div class="row p-5">
      <div class="bg-light-primary rounded-5 row">
            <!-- Origin -->
            <div class="col-md-6  my-4 col-sm-6 col-12">
               <b class="w-100">Origin</b>
               <div
                  class="d-flex mt-2 py-2 px-1 wrapper   position-relative align-items-center justify-content-start bg-white rounded shadow">
                  {{-- <select class=" col-4 {{ $errors->has('country')?'is-invalid':'' }}"
                     name="origin_country">
                  @foreach ($countries as $country)
                  @if (in_array($country->name,
                  Auth::user()->favoriteCountries->pluck('country_name')->toArray()))
                  <option {{ $country->code == Auth::User()->country? 'selected="selected"' : '' }}
                  value="{{ $country->code }}">
                  </option>
                  @endif
                  @endforeach
                  </select> --}}
                  <div class="">
                     <button type="button" class="btn text-dark dropdown-toggle dropdown-toggle-split"
                        data-bs-toggle="modal" data-bs-target="#exampleModal" aria-haspopup="true"
                        aria-expanded="false">
                        <input type="hidden" {{ $errors->has('country') ? 'is-invalid' : '' }}
                        value="{{Auth::user()->country}}" id="origin_country" name="origin_country">
                        <span class="me-2" id="selected-country">
                        <img src="https://hatscripts.github.io/circle-flags/flags/{{ strtolower(Auth::user()->country) }}.svg"
                           style="margin-top:-3px" width="18"> {{ Auth::user()->country }}
                        </span>
                        <!-- <span class="visually-hidden">Toggle Dropdown</span> -->
                     </button>
                  </div>
                  <!-- <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <div class="modal-header">
                                 <h5 class="modal-title" id="countryModalLabel">Select origin country</h5>
                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                             </div>
                             <div class="modal-body d-flex flex-wrap">
                                 @foreach ($countries as $country)
                                     @if (in_array($country->name, Auth::user()->favoriteCountries->pluck('country_name')->toArray()))
                                         <div class="form-check col-sm-3 col-4 my-3 d-flex flex-wrap align-items-center justify-content-start">
                                          <input type="radio" role="button" name="selectedCountry" id="{{ $country->code }}" value="{{ $country->code }}" onclick="updateSelectedCountry('{{ $country->code }}')">
                                          <img class="mx-1" src="https://hatscripts.github.io/circle-flags/flags/{{ strtolower($country->code) }}.svg" width="18">
                     
                                             <label class="form-check-label" for="{{ $country->code }}">
                                                 {{ $country->code }}
                                             </label>
                                         </div>
                                     @endif
                                 @endforeach
                             </div>
                     
                         </div>
                     </div>
                     </div> -->
                  <div class="form-group col position-relative">
                     <input type="text" hidden value="{{Auth::User()->postal}}" placeholder="Postal Code"
                        name="origin_postal" id="origin_postal" class="form-control shadow-none border-0" required>
                     <input type="text"  value="{{Auth::User()->postal}}" placeholder="Postal Code"
                        name="origin_locality" hidden id="origin_locality" class="form-control shadow-none border-0" >
                     <input type="text"  value="{{Auth::User()->postal}} , {{Auth::User()->city}}" placeholder="Postal Code"
                        name="origin_postal_locality" id="origin_postal_locality" class="form-control shadow-none border-0" >
                     <div class="invalid-feedback position-absolute top-100 start-0">
                        Enter Postal Code.
                     </div>
                  </div>
                  <ul id="postal_code_results1"  class="dropdown-menu"
                     style="display: none; position: absolute;top:54px; left: 0; width: 100%; z-index: 1000;max-height:350px; overflow-y:scroll;">
                  </ul>
               </div>
            </div>
            <!-- Destination -->
            <div class="col-md-6 my-4 col-sm-6 col-12">
               <b class="w-100">Destination</b>
               <div
                  class="d-flex mt-2 position-relative  py-2 px-1  align-items-center justify-content-start bg-white rounded shadow">
                  {{-- <select class=" col-4 {{ $errors->has('country')?'is-invalid':'' }}" name="country">
                  @foreach ($countries as $country)
                  @if (in_array($country->name,
                  Auth::user()->favoriteCountries->pluck('country_name')->toArray()))
                  <option {{ $country->code == Auth::User()->country? 'selected="selected"' : '' }}
                  value="{{ $country->code }}">
                  {{ $country->code }}
                  </option>
                  @endif
                  @endforeach
                  </select> --}}
                  <div class="">
                     <button type="button" class="btn text-dark dropdown-toggle dropdown-toggle-split"
                        data-bs-toggle="modal" data-bs-target="#exampleDesModal" aria-haspopup="true"
                        aria-expanded="false">
                     <input type="hidden" {{ $errors->has('country') ? 'is-invalid' : '' }}
                     value="{{Auth::user()->country}}" id="country" name="country">
                     <span class="me-2" id="selected-des-country">
                     <img src="https://hatscripts.github.io/circle-flags/flags/{{ strtolower(Auth::user()->country) }}.svg"
                        style="margin-top:-3px" width="18"> {{ Auth::user()->country }}
                     </span>
                     <span class="visually-hidden">Toggle Dropdown</span>
                     </button>
                  </div>
                  <!-- <div class="modal fade" id="exampleDesModal" tabindex="-1" aria-labelledby="exampleModalDesLabel" aria-hidden="true">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <div class="modal-header">
                                 <h5 class="modal-title" id="countryModalLabel">Select destination country</h5>
                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                             </div>
                             <div class="modal-body d-flex flex-wrap">
                                 @foreach ($countries as $country)
                                     @if (in_array($country->name, Auth::user()->favoriteCountries->pluck('country_name')->toArray()))
                                         <div class="form-check col-sm-3 col-4 my-3 d-flex flex-wrap align-items-center justify-content-start">
                                          <input type="radio" role="button" name="selectedDesCountry" id="{{ $country->code }}" value="{{ $country->code }}" onclick="updateSelectedDesCountry('{{ $country->code }}')">
                                          <img class="mx-1" src="https://hatscripts.github.io/circle-flags/flags/{{ strtolower($country->code) }}.svg" width="18">
                     
                                             <label class="form-check-label" for="{{ $country->code }}">
                                                 {{ $country->code }}
                                             </label>
                                         </div>
                                     @endif
                                 @endforeach
                             </div>
                     
                         </div>
                     </div>
                     </div> -->
                  <div class="form-group col position-relative">
                     <input type="text" id="postal_code_input" hidden name="postal" placeholder="Postal Code"
                        class="form-control shadow-none border-0" required>
                     <input type="text" id="postal_code_locality" hidden name="postal_code_locality"
                        class="form-control shadow-none border-0" >
                        <input type="text"  value="" placeholder="Postal Code"
                        name="destination_postal_locality" id="destination_postal_locality" class="form-control shadow-none border-0" >
                     <div class="invalid-feedback position-absolute top-100 start-0">
                        Enter Postal Code.
                     </div>
                  </div>
                  <ul id="postal_code_results"  class="dropdown-menu"
                     style="display: none; position: absolute;top:54px; left: 0; width: 100%; z-index: 1000;max-height:350px; overflow-y:scroll;">
                  </ul>
               </div>
            </div>
            <!-- Delivery Option -->
            <div class="col-md-6 my-4 col-sm-6 col-12">
               <b class="w-100">Package Type</b>
               <div
                  class="d-flex form-group  position-relative mt-2 py-2 px-1  align-items-center justify-content-start bg-white rounded shadow">
                  {{-- 
                  <iconify-icon class="mx-1 text-primary" icon="arcticons:parcel-tracker"></iconify-icon>
                  --}}
                  <select required name="delivery-option"  id="delivery-option" placeholder="Parcel or Pallet" style="border: none"
                     class="form-control shadow-none border-0">
                     <!-- <option value=""  disabled>Package Type</option> -->
                     <option selected value="Parcel">Parcel</option>
                     <option value="Pallet">Pallet</option>
                  </select>
                  <div class="invalid-feedback position-absolute top-100 start-0">
                     Select Package Type.
                  </div>
               </div>
            </div>
            <!-- Weight -->
            {{-- 
            <div class="col-xl-2 col-lg-4 col-md-6 my-4 col-sm-6 col-12">
               <b class="w-100">Weight</b>
               <div
                  class="input-group form-group position-relative d-flex mt-2 py-2 px-1  align-items-center justify-content-start bg-white rounded shadow">
                  <span class="input-group-btn">
                     <button id="weight-minus" type="button" class="btn btn-default btn-number"
                        data-type="minus" data-field="weight">
                        <iconify-icon class="text-muted glyphicon-minus"
                           icon="zondicons:minus-solid"></iconify-icon>
                     </button>
                  </span>
                  <input id="weight-input" type="text" name="weight"
                     class="form-control border-0 text-center shadow-none input-number" value="0" min="0"
                     max="1200">
                  <div id="invalid-weight" class="invalid-feedback position-absolute top-100 start-0">
                     Weignt must be between 1-1200.
                  </div>
                  <span class="input-group-btn">
                     <button id="weight-plus" type="button" class="btn btn-default btn-number"
                        data-type="plus" data-field="weight">
                        <iconify-icon class="text-muted glyphicon-plus" icon="subway:add"></iconify-icon>
                     </button>
                  </span>
               </div>
            </div>
            --}}
            <div class="col-md-6 mt-4 col-sm-6 col-12">
               <b class="w-100">Quantity</b>
               <div
               class="d-flex form-group  position-relative mt-2 py-2 px-1  align-items-center justify-content-start bg-white rounded shadow">
                  <span class="input-group-btn">
                     <button id="quantity-minus" type="button" class="btn btn-default btn-number"
                        data-type="minus" name="quantity" data-field="quantity">
                        <iconify-icon class="text-muted glyphicon-minus"
                           icon="zondicons:minus-solid"></iconify-icon>
                     </button>
                  </span>
                  <input id="quantity-input" type="text" name="quantity"
                     class="form-control border-0 text-center shadow-none input-number" value="1" min="1"
                     max="100000">
                  <div id="invalid-quantity" class="invalid-feedback position-absolute top-100 start-0">
                     Invalid quantity.
                  </div>
                  <span class="input-group-btn">
                     <button id="quantity-plus" type="button" class="btn btn-default btn-number"
                        data-type="plus" data-field="quantity">
                        <iconify-icon class="text-muted glyphicon-plus" icon="subway:add"></iconify-icon>
                     </button>
                  </span>
               </div>
            </div>
            <input value="parcel" name="package_type" id="package_type" hidden>
            <!-- Get a Quote Button -->
            
            </div>
         </div>
         </div>
         </div>
         @include('quotes.Component.pallet')
         @include('quotes.Component.parcel')
      </form>
   </section>
</main>
@endsection
@section('script')
<script>
   $(document).ready(function() {
       $('#destination_postal_locality').on('input', debounce(function() {
           let query = $(this).val();
           if (query.length >= 1) {
            query = query.replace(/,\s*$/, '');
               $.ajax({
                   url: '{{ route("postalCodes.search") }}',
                   method: 'GET',
                   data: { q: query },
                   success: function(data) {
                       console.log('data',data.result)
                       let resultsDropdown = $('#postal_code_results');
                       resultsDropdown.empty().show();
                       if (data.result && data.result.length  > 0) {
                           data.result.forEach(function(postalCode) {
                               resultsDropdown.append(`<li class="dropdown-item" data-postal="${postalCode.postcode}" data-locality="${postalCode.admin_ward}">${postalCode.postcode}, ${postalCode.admin_ward}</li>`);
                           });
                       } else {
                           resultsDropdown.append('<li class="dropdown-item disabled">No results found</li>');
                       }
                   }
               });
           } else {
               $('#postal_code_results').hide();
           }
       }));
   
   
   
       $(document).click(function(e) {
           if (!$(e.target).closest('.form-group').length) {
               $('#postal_code_results').hide();
           }
       });
   });
   // Debounce function to limit API calls
function debounce(func, delay) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}
   $(document).ready(function() {
      $('#origin_postal_locality').on('input', debounce(function() {
        let query = $(this).val();
        if (query.length >= 1) {
            // Remove trailing space before comma if exists
            query = query.replace(/,\s*$/, '');
            console.log('query',query);
            $.ajax({
                url: '{{ route("postalCodes.search") }}',
                method: 'GET',
                data: { q: query },
                success: function(data) {
                    console.log('data', data.result)
                    let resultsDropdown = $('#postal_code_results1');
                    resultsDropdown.empty().show();
                    if (data.result && data.result.length > 0) {
                        data.result.forEach(function(postalCode) {
                            resultsDropdown.append(`<li class="dropdown-item" data-postal="${postalCode.postcode}" data-locality="${postalCode.admin_ward}">${postalCode.postcode}, ${postalCode.admin_ward}</li>`);
                        });
                    } else {
                        resultsDropdown.append('<li class="dropdown-item disabled">No results found</li>');
                    }
                }
            });
        } else {
            $('#postal_code_results').hide();
        }
    }));
       $(document).on('click', '#postal_code_results li', function() {
           let selectedPostalCode = $(this).data('postal');
           let selectedPostalLocality = $(this).data('locality');
           $('#postal_code_input').val(selectedPostalCode);
           $('#postal_code_locality').val(selectedPostalLocality);
           $('#destination_postal_locality').val(selectedPostalCode+', '+selectedPostalLocality);
           $('#postal_code_results').hide();
       });
       $(document).click(function(e) {
           if (!$(e.target).closest('.form-group').length) {
               $('#postal_code_results').hide();
           }
       });
       $(document).on('click', '#postal_code_results1 li', function() {
           let selectedPostalCode = $(this).data('postal');
           let selectedPostalLocality = $(this).data('locality');
           $('#origin_postal').val(selectedPostalCode);
           $('#origin_postal_locality').val(selectedPostalCode+', '+selectedPostalLocality);
           $('#origin_locality').val(selectedPostalLocality);
           $('#postal_code_results1').hide();
       });
   
       $(document).click(function(e) {
           if (!$(e.target).closest('.form-group').length) {
               $('#postal_code_results1').hide();
           }
       });
   });
   
   
   
   
       const queryString = window.location.search;
       const urlParams = new URLSearchParams(queryString);
   
       // Get the value of a specific parameter
       const isNew = urlParams.get('new');
       if (isNew) {
           toastr.success("Order added in basket.");
       }
   
       // Delete the 'new' parameter from the URL
       urlParams.delete('new');
   
       // Get the URL without the 'new' parameter
       let updatedUrl = `${window.location.pathname}?${urlParams.toString()}`;
   
       // Replace the current URL without reloading the page
       window.history.replaceState({}, document.title, updatedUrl);
   
       function updateSelectedCountry(code) {
           document.getElementById('selected-country').innerHTML = `<img src="https://hatscripts.github.io/circle-flags/flags/${code.toLowerCase()}.svg" width="18"> ${code}`;
           document.getElementById('origin_country').value = code;
       }
   
       function updateSelectedDesCountry(code) {
           document.getElementById('selected-des-country').innerHTML = `<img src="https://hatscripts.github.io/circle-flags/flags/${code.toLowerCase()}.svg" width="18"> ${code}`;
           document.getElementById('country').value = code;
       }
   
   
   document.addEventListener('DOMContentLoaded', function () {
    const destinationPostalLocalityInput = document.getElementById('origin_postal_locality');
    const postalCodeInput = document.getElementById('origin_postal');
    const postalCodeLocality = document.getElementById('origin_locality');

    destinationPostalLocalityInput.addEventListener('input', function () {
        const inputValue = destinationPostalLocalityInput.value;
        const parts = inputValue.split(',');

        if (parts.length >= 2) {
            postalCodeInput.value = parts[0].trim();
            postalCodeLocality.value = parts[1].trim();
        } else {
            postalCodeInput.value = parts[0].trim();
            postalCodeLocality.value = '';
        }

 
    });
});
   document.addEventListener('DOMContentLoaded', function () {
    const destinationPostalLocalityInput = document.getElementById('destination_postal_locality');
    const postalCodeInput = document.getElementById('postal_code_input');
    const postalCodeLocality = document.getElementById('postal_code_locality');

    destinationPostalLocalityInput.addEventListener('input', function () {
        const inputValue = destinationPostalLocalityInput.value;
        const parts = inputValue.split(',');

        if (parts.length >= 2) {
            postalCodeInput.value = parts[0].trim();
            postalCodeLocality.value = parts[1].trim();
        } else {
            postalCodeInput.value = parts[0].trim();
            postalCodeLocality.value = '';
        }

        console.log('code',postalCodeInput.value)
        console.log('locality',postalCodeLocality.value)
    });
});

</script>
@include('quotes.quote-script');
@endsection