@extends('layout.master')
@section('title', 'Transpoting | Transporters Managment System')
@section('content')
<div class="page-wrapper">
   <!--page-content-wrapper-->
   <div class="page-content-wrapper">
      <div class="page-content">
         <!--breadcrumb-->
         <div class="page-breadcrumb d-none d-md-flex align-items-center mb-3">
            <div class="breadcrumb-title pr-3">Vehicle</div>
            <div class="pl-3">
               <nav aria-label="breadcrumb">
                  <ol class="breadcrumb mb-0 p-0">
                     <li class="breadcrumb-item"><a href="javascript:;"><i class='bx bx-home-alt'></i></a>
                     </li>
                     <li class="breadcrumb-item active" aria-current="page">Transporting List</li>
                  </ol>
               </nav>
            </div>
            <div class="ml-auto">
               <button type="button" class="btn btn-light btn-sm" data-toggle="modal" data-target="#AddPriceModal"><i class='bx bx-plus mr-1'></i>Add Price</button>
            </div>
         </div>
         <!--end breadcrumb-->
         <div class="row">
            <div class="col-12 col-lg-3">
               <div class="card">
                  <div class="card-body">
                     <button type="button" class="btn btn-light btn-sm btn-block" data-toggle="modal" data-target="#AddDestinationModal"><i class='bx bx-plus mr-1'></i>Add Destination</button>
                     <div class="fm-menu">
                        <div class="list-group list-group-flush">
                           <table class="table table-sm mt-3">
                              <tbody>
                                 @php
                                     $perPage = $destinations->perPage(); 
                                     $currentPage = $destinations->currentPage();
                                     $counter = ($currentPage - 1) * $perPage + 1;
                                 @endphp
                                 @foreach ($destinations as $transporter)
                                 <tr>
                                    <th scope="row">{{ $counter++ }}</th>
                                    <td>{{ $transporter->name }}</td>
                                    <td>
                                       <div class="btn-group m-1 float-right" role="group" aria-label="Basic example">
                                          <button type="button" class="badge badge-danger"><i class="bx bx-trash"></i>
                                          </button>
                                       </div>
                                    </td>
                                 </tr>
                                 @endforeach
                              </tbody>
                           </table>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-12 col-lg-9">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title">
                        <div class="row">
                           <div class="col-6">
                              <h4 class="mt-2">Price Details</h4>
                           </div>
                           <div class="col-6">
                              <form class="form-inline nav-search float-right">
                                 <div class="input-group nav-width">
                                    <input type="text" class="form-control" placeholder="From to Destination" aria-label="Recipient's username">
                                    <div class="input-group-append border-left-0 ml-0">
                                       <button class="btn border-left-0" type="submit"><i class='bx bx-search'></i>
                                       </button>
                                    </div>
                                 </div>
                              </form>
                           </div>
                        </div>
                     </div>
                     <hr/>
                     <div class="table-responsive">
                        <table class="table table-sm">
                           <thead>
                              <tr>
                                 <th scope="col">#</th>
                                 <th scope="col">Source</th>
                                 <th scope="col">Destination</th>
                                 <th scope="col">Rate <small class="text-warning">(MT)</small></th>
                                 <th scope="col">Action</th>
                              </tr>
                           </thead>
                           <tbody>
                              @php
                                  $perPage = $destinationprices->perPage(); 
                                  $currentPage = $destinationprices->currentPage();
                                  $counter = ($currentPage - 1) * $perPage + 1;
                              @endphp
                              @foreach ($destinationprices as $destinationprice)
                              <tr>
                                 <th scope="row">{{ $counter++ }}</th>
                                 <td>{{$destinationprice->fromDestination->name}}</td>
                                 <td>{{$destinationprice->toDestination->name}}</td>
                                 <td>{{$destinationprice->price}}</td>
                                 <td>
                                    <div class="btn-group m-1" role="group" aria-label="Basic example">
                                       <button type="button" class="btn btn-danger btn-sm"><i class="bx bx-trash"></i>
                                       </button>
                                    </div>
                                 </td>
                              </tr>
                              @endforeach
                           </tbody>
                        </table>
                        <nav aria-label="Page navigation example">
                               <ul class="pagination justify-content-end">
                                   <!-- Previous Page Link -->
                                   @if ($destinationprices->onFirstPage())
                                       <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
                                           <span class="page-link" aria-hidden="true">&laquo;</span>
                                       </li>
                                   @else
                                       <li class="page-item">
                                           <a class="page-link" href="{{ $destinationprices->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&laquo;</a>
                                       </li>
                                   @endif

                                   <!-- Pagination Elements -->
                                   @foreach ($destinationprices->links()->elements as $element)
                                       <!-- "Three Dots" Separator -->
                                       @if (is_string($element))
                                           <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
                                       @endif

                                       <!-- Array Of Links -->
                                       @if (is_array($element))
                                           @foreach ($element as $page => $url)
                                               @if ($page == $destinationprices->currentPage())
                                                   <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
                                               @else
                                                   <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
                                               @endif
                                           @endforeach
                                       @endif
                                   @endforeach

                                   <!-- Next Page Link -->
                                   @if ($destinationprices->hasMorePages())
                                       <li class="page-item">
                                           <a class="page-link" href="{{ $destinationprices->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&raquo;</a>
                                       </li>
                                   @else
                                       <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                                           <span class="page-link" aria-hidden="true">&raquo;</span>
                                       </li>
                                   @endif
                               </ul>
                           </nav>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!--end row-->
      </div>
   </div>
   <!--end page-content-wrapper-->
</div>

<!-- Set Destination Modal -->
<div class="modal fade" id="AddDestinationModal" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-sm">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title">Destination</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <form class="needs-validation" novalidate>
            <div class="modal-body">
               <!-- Owner Details -->
               <div class="form-row">
                  <div class="col-md-12 mb-3">
                     <label for="destinationName">Name:</label>
                     <input type="text" class="form-control form-control-sm" id="destinationName" required>
                     <div class="invalid-feedback">Please enter the destination name.</div>
                  </div>
               </div>
            </div>
            <div class="modal-footer justify-content-between d-flex">
               <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
               <button type="submit" id="save_changes" class="btn btn-primary btn-sm">Save changes</button>
            </div>
         </form>
      </div>
   </div>
</div>
<!-- End Modal -->

<!-- Set Price Modal -->
<div class="modal fade" id="AddPriceModal" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-sm">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title">Set Price</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <form class="needs-validation" novalidate>
            <div class="modal-body">
               <!-- Owner Details -->
               <div class="form-row">
                  <div class="col-md-12 mb-3 select2-sm">
                     <label for="sourceName">Source: <small class="text-warning">(From)</small></label>
                     <select id="sourceName" class="single-select"></select>
                     <div class="invalid-feedback">Please enter the source name.</div>
                  </div>
                  <div class="col-md-12 mb-3 select2-sm">
                     <label for="todestinationName">Destination: <small class="text-warning">(To)</small></label>
                     <select id="todestinationName" class="single-select"></select>
                     <div class="invalid-feedback">Please enter the destination name.</div>
                  </div>
                  <div class="col-md-12 mb-3">
                     <label for="price">Price</label>
                     <input type="text" class="form-control form-control-sm" id="price" required>
                     <div class="invalid-feedback">Please enter the price.</div>
                  </div>
               </div>
            </div>
            <div class="modal-footer justify-content-between d-flex">
               <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
               <button type="submit" id="save_changes" class="btn btn-primary btn-sm">Set Price</button>
            </div>
         </form>
      </div>
   </div>
</div>
<!-- End Modal -->
@endsection

@push('scripts')
<script>
   // Form validation
   (function () {
      'use strict';
      window.addEventListener('load', function () {
         // Fetch all the forms we want to apply custom Bootstrap validation styles to
         var forms = document.getElementsByClassName('needs-validation');
         // Loop over them and prevent submission
         var validation = Array.prototype.filter.call(forms, function (form) {
            form.addEventListener('submit', function (event) {
               if (form.checkValidity() === false) {
                  event.preventDefault();
                  event.stopPropagation();
               }
               form.classList.add('was-validated');
            }, false);
         });
      }, false);
   })();
</script>

<!-- Save data in database -->
<script>
$(document).ready(function() {
   var savedestinationDetailsUrl = "{{ route('vehicle.destinations') }}";

    $('#AddDestinationModal form').on('submit', function(e) {
        e.preventDefault(); // Prevent the default form behavior

        var formData = {
            destination_name: $('#destinationName').val(),
            // Add other form data here if necessary
            _token: '{{ csrf_token() }}' // Include CSRF token for Laravel applications
        };

        $.ajax({
            url: savedestinationDetailsUrl, // Change this to the URL where your server expects to receive the data
            type: 'POST',
            data: formData,
            success: function(response) {
                console.log('Success:', response);
                $('#AddDestinationModal').modal('hide'); // Optionally, close the modal after success
                
                // Notification for success
                  Lobibox.notify('success', {
                  pauseDelayOnHover: true,
                  continueDelayOnInactiveTab: false,
                  position: 'top right',
                  icon: 'bx bx-check-circle',
                  msg: response.message
               });
            },
            error: function(xhr, status, error) {
                console.log('Error:', error);

                Lobibox.notify('error', {
                  pauseDelayOnHover: true,
                  continueDelayOnInactiveTab: false,
                  position: 'top right',
                  icon: 'bx bx-x-circle',
                  msg: 'Oops! Something is wrong'
               });
            }
        });
    });
});
</script>

<!-- Serach Destination select2-->
<script>
$(document).ready(function() {
   var searchDestinationUrl = "{{ route('vehicle.search_destinations') }}";
    $('.single-select').select2({
        theme: 'bootstrap4',
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
        allowClear: Boolean($(this).data('allow-clear')),
        ajax: {
            url: searchDestinationUrl, // API endpoint that returns JSON data
            dataType: 'json',
            delay: 250, // Wait 250ms before triggering the request
            data: function (params) {
                return {
                    searchTerm: params.term // Search term
                };
            },
            processResults: function (data) {
                return {
                    results: data.map(item => ({
                        id: item.id, 
                        text: item.name
                    }))
                };
            },
            cache: true
        }
    });
});
</script>

<!-- Set Price save in database -->
<script>
$(document).ready(function() {
   var addDestinationUrl = "{{ route('vehicle.destination_price') }}";
    $('#AddPriceModal form').on('submit', function(e) {
        e.preventDefault();

        var formData = {
            source_id: $('#sourceName').val(), // ID of the selected source
            destination_id: $('#todestinationName').val(), // ID of the selected destination
            price: $('#price').val(),
            _token: '{{ csrf_token() }}' // CSRF token for Laravel
        };

        $.ajax({
            url: addDestinationUrl, // Server endpoint to process the form submission
            type: 'POST',
            data: formData,
            success: function(response) {
                $('#AddPriceModal').modal('hide');
                // Notification for success

               Lobibox.notify('success', {
                  pauseDelayOnHover: true,
                  continueDelayOnInactiveTab: false,
                  position: 'top right',
                  icon: 'bx bx-check-circle',
                  msg: response.message
               });
            },
            error: function(xhr, status, error) {
                console.log(error);
                Lobibox.notify('error', {
                  pauseDelayOnHover: true,
                  continueDelayOnInactiveTab: false,
                  position: 'top right',
                  icon: 'bx bx-x-circle',
                  msg: 'Oops! Something is wrong'
               });
            }
        });
    });
});
</script>

@endpush