@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="#addTransporterModal"><i class='bx bx-plus mr-1'></i>Add Transporter</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">Transporting 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">Transporter</th>
									<th scope="col">Mobile</th>
									<th scope="col">Address</th>
									<th scope="col">GSTIN</th>
									<th scope="col">Action</th>
								</tr>
							</thead>
							<tbody>
								@php
					                $perPage = $transporters->perPage(); 
					                $currentPage = $transporters->currentPage();
					                $counter = ($currentPage - 1) * $perPage + 1;
					            @endphp

								@foreach ($transporters as $transporter)
								<tr>
									<th scope="row">{{ $counter++ }}</th>
									<td>{{ $transporter->name }}</td>
									<td>{{ $transporter->mobile }}</td>
									<td>{{ $transporter->address }}</td>
									<td>{{ $transporter->gst_no }}</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 ($transporters->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="{{ $transporters->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&laquo;</a>
						            </li>
						        @endif

						        <!-- Pagination Elements -->
						        @foreach ($transporters->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 == $transporters->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 ($transporters->hasMorePages())
						            <li class="page-item">
						                <a class="page-link" href="{{ $transporters->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 Transporter Modal -->
<div class="modal fade" id="addTransporterModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Transporter 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-12 mb-3">
	                    <label for="transporterName">Transporter Name</label>
	                    <input type="text" class="form-control form-control-sm" id="transporterName" required>
	                    <div class="invalid-feedback">Please provide a valid transporter name.</div>
	                </div>
	            </div>
	            <div class="form-row">
	                <div class="col-md-6 mb-3">
	                    <label for="mobileNumber">Mobile Number</label>
	                    <input type="text" class="form-control form-control-sm" id="mobileNumber" required>
	                    <div class="invalid-feedback">Please provide mobile Number.</div>
	                </div>
	                <div class="col-md-6 mb-3">
	                    <label for="gstNumber">GST Number</label>
	                    <input type="text" class="form-control form-control-sm" id="gstNumber" required>
	                    <div class="invalid-feedback">Please provide gst Number.</div>
	                </div>
	            </div>
	            <div class="form-row">
	            	<div class="col-md-12 mb-3">
	            		<label for="addressNumber">Address</label>
	            		<textarea class="form-control" id="address"></textarea>
	            	</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 -->
@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 saveTransporterDetailsUrl = "{{ route('vehicle.transporters') }}";
    // Prevent the default form submission and use AJAX instead
    $('#addTransporterModal form').on('submit', function(e) {
        e.preventDefault(); // Prevent the default form behavior

        // Collect the form data using the ID of each form element
        var formData = {
            transporter_name: $('#transporterName').val(),
            mobile_number: $('#mobileNumber').val(),
            gst_number: $('#gstNumber').val(),
            address: $('#address').val(),
            _token: '{{ csrf_token() }}' // Include CSRF token for Laravel applications
        };

        // Perform the AJAX request
        $.ajax({
            url: saveTransporterDetailsUrl, // Change this to the URL where your server expects to receive the data
            type: 'POST',
            data: formData,
            success: function(response) {
                // This block is executed if the server responds with a success message
                console.log('Success:', response);
                $('#addTransporterModal').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) {
                // This block is executed in case of an 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>

@endpush