@extends('layout.master')
@section('title', 'Vehicle | 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">Vehicle List</li>
						</ol>
					</nav>
				</div>
				<div class="ml-auto">
					<button type="button" class="btn btn-light btn-sm"><img src="https://cdn.iconscout.com/icon/free/png-256/free-excel-15-1174820.png" width="20"> Import</button>
					<button type="button" class="btn btn-light btn-sm" data-toggle="modal" data-target="#addVehicleModal"><i class='bx bx-plus mr-1'></i>Add Vehicle</button>
				</div>
			</div>
			<!--end breadcrumb-->
	
			<div class="card radius-15">
				<div class="card-body">
					<div class="card-title">
						<div class="row">
							<div class="col-6">
								<h4 class="mt-2">Vehicle 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="Search Owner name | Vehicle Number" 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">Owner Name</th>
					                <th scope="col">Vehicle Number</th>
					                <th scope="col">Status</th>
					                <th scope="col">Action</th>
					            </tr>
					        </thead>
					        <tbody>
					        	@php
					                $perPage = $vehicles->perPage(); 
					                $currentPage = $vehicles->currentPage();
					                $counter = ($currentPage - 1) * $perPage + 1;
					            @endphp

					            @foreach($vehicles as $vehicle)
					            <tr>
					                <th scope="row">{{ $counter++ }}</th>
					                <td>{{ $vehicle->owner->owner_name }}</td>
					                <td>{{ $vehicle->vehicle_number }}</td>
					                <td><a href="javascript:;" class="badge badge-{{ $vehicle->status == 'Running' ? 'success' : 'danger' }}">{{ $vehicle->status }}</a></td>
					                <td>
					                    <div class="btn-group m-1" role="group" aria-label="Basic example">
					                        <button type="button" class="btn btn-info btn-sm view-details" data-toggle="modal" data-target="#viewExpiryModal" data-vehicle="{{ json_encode($vehicle->only(['vehicle_number','tax_expiry', 'insurance_expiry', 'fitness_expiry', 'state_permit_expiry', 'national_permit_expiry', 'pollution_expiry', 'mining_gps_expiry', 'gps_tracker_expiry'])) }}"><i class="lni lni-eye"></i></button>
					                        <button type="button" class="btn btn-primary btn-sm"><i class="bx bx-edit"></i></button>
					                        <button type="button" class="btn btn-danger btn-sm" onclick="confirmDeletion({{ $vehicle->id }})" data-id="{{ $vehicle->id }}"><i class="bx bx-trash"></i>
											</button>
					                    </div>
					                </td>
					            </tr>
					            @endforeach
					        </tbody>
					    </table>
					    <!-- Pagination -->
					    <nav aria-label="Page navigation example">
						    <ul class="pagination justify-content-end">
						        <!-- Previous Page Link -->
						        @if ($vehicles->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="{{ $vehicles->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&laquo;</a>
						            </li>
						        @endif

						        <!-- Pagination Elements -->
						        @foreach ($vehicles->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 == $vehicles->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 ($vehicles->hasMorePages())
						            <li class="page-item">
						                <a class="page-link" href="{{ $vehicles->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 page-content-wrapper-->
</div>

<!-- Add Vehicle Modal -->
<div class="modal fade" id="addVehicleModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Vehicle Entry</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form class="needs-validation" method="post" action="#" novalidate>
            <div class="modal-body">

	            <div class="form-row">
	                <div class="col-md-7 mb-3 select2-sm">
	                    <label for="vehicleOwnerId">Vehicle Owner</label>
				        <select id="vehicleOwnerId" class="single-select"></select>
	                    <div class="invalid-feedback">Please provide a valid vehicle owner.</div>
	                </div>
	                <div class="col-md-5 mb-3">
	                    <label for="vehicleNumber">Vehicle Number</label>
	                    <input type="text" class="form-control form-control-sm" id="vehicleNumber" required>
	                    <div class="invalid-feedback">Please provide a valid vehicle number.</div>
	                </div>
	            </div>
	            <div class="form-row">
	            	<div class="col-md-4 mb-3">
	                    <label for="vehicleTax">Tax</label>
	                    <input type="text" class="form-control form-control-sm datepicker" id="vehicleTax" required>
	                    <div class="invalid-feedback">Please enter the tax amount.</div>
	                </div>
	                <div class="col-md-4 mb-3">
	                    <label for="insurance">Insurance</label>
	                    <input type="text" class="form-control form-control-sm datepicker" id="insurance" required>
	                    <div class="invalid-feedback">Please provide valid insurance details.</div>
	                </div>
	                <div class="col-md-4 mb-3">
	                    <label for="fitness">Fitness</label>
	                    <input type="text" class="form-control form-control-sm datepicker" id="fitness" required>
	                    <div class="invalid-feedback">Please enter fitness certification details.</div>
	                </div>
	            </div>
	            <div class="form-row">
	                <div class="col-md-4 mb-3">
	                    <label for="statePermit">State Permit</label>
	                    <input type="text" class="form-control form-control-sm datepicker" id="statePermit" required>
	                    <div class="invalid-feedback">Please provide state permit information.</div>
	                </div>
	                <div class="col-md-4 mb-3">
	                    <label for="nationalPermit">National Permit</label>
	                    <input type="text" class="form-control form-control-sm datepicker" id="nationalPermit" required>
	                    <div class="invalid-feedback">Please provide national permit information.</div>
	                </div>
	                <div class="col-md-4 mb-3">
	                    <label for="pollution">Pollution</label>
	                    <input type="text" class="form-control form-control-sm datepicker" id="pollution" required>
	                    <div class="invalid-feedback">Please enter pollution control details.</div>
	                </div>
	            </div>
	            <div class="form-row">
	                <div class="col-md-4 mb-3">
	                    <label for="miningGps">Mining GPS</label>
	                    <input type="text" class="form-control form-control-sm datepicker" id="miningGps" required>
	                    <div class="invalid-feedback">Please provide mining GPS details.</div>
	                </div>
	                <div class="col-md-4 mb-3">
	                    <label for="gpsTracker">GPS Tracker</label>
	                    <input type="text" class="form-control form-control-sm datepicker" id="gpsTracker" required>
	                    <div class="invalid-feedback">Please enter GPS tracker details.</div>
	                </div>
	                <div class="col-md-4 mb-3">
	                    <label for="statusSelect">Status</label>
				        <select class="form-control form-control-sm" id="statusSelect" required>
				            <option selected disabled value="">Choose...</option>
				            <option value="Running">Running</option>
				            <option value="Breakdown">Breakdown</option>
				        </select>
				        <div class="invalid-feedback">Please select a valid status.</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 -->

<!-- View Expiry Dates Modal -->
<div class="modal fade" id="viewExpiryModal" tabindex="-1" role="dialog" aria-labelledby="viewExpiryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="viewExpiryModalLabel">Expiry Details for <span id="vehicleNumberHeader">Vehicle Number</span></h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body bg-light">
            	<div id="loader" style="justify-content: center; align-items: center; display: none; flex-direction: column;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <div style="margin-top: 12px; margin-left:12px">Loading...</div> <!-- Loading text -->
                </div>
                <ul class="list-group list-group-flush" style="display: none;">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Tax Expiry:</b> <span class="badge badge-primary" id="modalTaxExpiry"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Insurance Expiry:</b> <span class="badge badge-primary" id="modalInsuranceExpiry"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Fitness Expiry:</b> <span class="badge badge-primary" id="modalFitnessExpiry"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>State Permit Expiry:</b> <span class="badge badge-primary" id="modalStatePermitExpiry"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>National Permit Expiry:</b> <span class="badge badge-primary" id="modalNationalPermitExpiry"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Pollution Expiry:</b> <span class="badge badge-primary" id="modalPollutionExpiry"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Mining GPS Expiry:</b> <span class="badge badge-primary" id="modalMiningGpsExpiry"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>GPS Tracker Expiry:</b> <span class="badge badge-primary" id="modalGpsTrackerExpiry"></span>
                    </li>
                </ul>
            </div>
            <div class="modal-footer bg-white"></div>
        </div>
    </div>
</div>
<!-- End Modal -->
@endsection

@push('scripts')
<script>
	// Example starter JavaScript for disabling form submissions if there are invalid fields
	(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>
<!-- Select2 -->
<script>
$(document).ready(function() {
	var searchVehicleOwnerUrl = "{{ route('vehicle.search_vehicle_owner') }}";
    $('.single-select').select2({
        theme: 'bootstrap4',
		    width: '100%', // Ensure the width is set correctly
		    placeholder: "Select a vehicle owner",
        allowClear: Boolean($(this).data('allow-clear')),
        ajax: {
            url: searchVehicleOwnerUrl,
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    term: params.term // search term
                };
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
            cache: true
        }
    });
});
</script>
<!-- Save Data -->
<script>
$(document).ready(function(){
    var saveVehicleUrl = "{{ route('vehicle.details') }}"; // Adjust the route as necessary

    // When the form is submitted
    $('#addVehicleModal form').submit(function(e){
        e.preventDefault(); // Prevent the form from submitting via the browser

        // Manually collect each form value
        var formData = {
            vehicle_owner_id: $('#vehicleOwnerId').val(), // Assuming you have a field for owner ID
            vehicle_number: $('#vehicleNumber').val(),
            tax_expiry: $('#vehicleTax').val(),
            insurance_expiry: $('#insurance').val(),
            fitness_expiry: $('#fitness').val(),
            state_permit_expiry: $('#statePermit').val(),
            national_permit_expiry: $('#nationalPermit').val(),
            pollution_expiry: $('#pollution').val(),
            mining_gps_expiry: $('#miningGps').val(),
            gps_tracker_expiry: $('#gpsTracker').val(),
            status: $('#statusSelect').val(),
            _token: "{{ csrf_token() }}" // Include CSRF token
        };

        // Disable the submit button and show loading icon
        $('#save_changes').prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Loading...');

        // AJAX call
        $.ajax({
            url: saveVehicleUrl,
            type: 'POST',
            data: formData,
            success: function(response){
                console.log(response); // Log the response to the console
                $('#addVehicleModal').modal('hide'); // Close the modal
                // Reset the form after successful submission
                // $('#addVehicleModal form')[0].reset();

                // Notification for success
                Lobibox.notify('success', {
                    pauseDelayOnHover: true,
                    continueDelayOnInactiveTab: false,
                    position: 'top right',
                    icon: 'bx bx-check-circle',
                    msg: 'Vehicle added successfully!'
                });

                // Re-enable the submit button
                $('#save_changes').prop('disabled', false).text('Save changes');
            },
            error: function(error){
                console.error(error); // Log the error to the console
                Lobibox.notify('error', {
                    pauseDelayOnHover: true,
                    continueDelayOnInactiveTab: false,
                    position: 'top right',
                    icon: 'bx bx-x-circle',
                    msg: 'Error: Unable to save vehicle details'
                });

                // Re-enable the submit button
                $('#save_changes').prop('disabled', false).text('Save changes');
            }
        });
    });
});
</script>

<!-- View Expiry Modal -->
<script>
$(document).ready(function() {
    $('.view-details').on('click', function() {
        var vehicle = $(this).data('vehicle');
        // Show the loader and the "Loading..." text
        $('#viewExpiryModal #loader').css('display', 'flex');
        $('#viewExpiryModal .list-group').hide();

        // Simulate a delay if fetching data asynchronously
        setTimeout(function() {
            // Assuming data fetching and processing happens here
            $('#vehicleNumberHeader').text(vehicle.vehicle_number);
            $('#modalTaxExpiry').text(vehicle.tax_expiry);
            $('#modalInsuranceExpiry').text(vehicle.insurance_expiry);
            $('#modalFitnessExpiry').text(vehicle.fitness_expiry);
            $('#modalStatePermitExpiry').text(vehicle.state_permit_expiry);
            $('#modalNationalPermitExpiry').text(vehicle.national_permit_expiry);
            $('#modalPollutionExpiry').text(vehicle.pollution_expiry);
            $('#modalMiningGpsExpiry').text(vehicle.mining_gps_expiry);
            $('#modalGpsTrackerExpiry').text(vehicle.gps_tracker_expiry);

            // Hide the loader and the "Loading..." text, then show the loaded data
            $('#viewExpiryModal #loader').hide();
            $('#viewExpiryModal .list-group').css('display', 'block');

        }, 1000); // delay of 1000 milliseconds for demonstration

        $('#viewExpiryModal').modal('show');
    });
});
</script>


<!-- Date Picker -->
<script>
  $( function() {
    $( ".datepicker" ).datepicker({
    	changeMonth: true,
    	changeYear: true
    });
  });
  </script>

<!-- Delete -->
<script type="text/javascript">
	function confirmDeletion(vehicleId) {
		var url = '{{ route('vehicle.vehicle_destroy', ':id') }}'.replace(':id', vehicleId);
	    Swal.fire({
	        title: 'Are you sure?',
	        text: "You won't be able to revert this!",
	        icon: 'warning',
	        showCancelButton: true,
	        confirmButtonColor: '#3085d6',
	        cancelButtonColor: '#d33',
	        confirmButtonText: 'Yes, delete it!'
	    }).then((result) => {
	        if (result.isConfirmed) {
	            // Send POST request to delete endpoint
	            $.ajax({
	                url: url,
	                type: 'POST', // Using POST because DELETE might not be supported in all environments
	                data: {
	                    _method: 'DELETE', // Spoofing a DELETE request
	                    _token: '{{ csrf_token() }}' // CSRF token is required for Laravel POST requests
	                },
	                success: function(response) {
	                    Swal.fire(
	                        'Deleted!',
	                        'The vehicle has been deleted.',
	                        'success'
	                    );
	                    // Remove the corresponding table row
	                    // Remove the corresponding table row
	                    $('button[data-id="' + vehicleId + '"]').closest('tr').remove();
	                },
	                error: function(xhr, status, error) {
	                    Swal.fire(
	                        'Error!',
	                        'Failed to delete the owner.',
	                        'error'
	                    );
	                }
	            });
	        }
	    })
	}

</script>
@endpush