@extends('layout.master')
@section('title', 'Owner Details | 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">Owner</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 Owner 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="#addOwnerdetailsModal"><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">Owner Details</h4>
							</div>

							<div class="col-6">
								<form class="form-inline nav-search float-right" action="{{ route('vehicle.owner_details') }}" method="GET">
									<div class="input-group nav-width">
										<input type="text" class="form-control" placeholder="Search by Owner name" name="search" aria-label="Recipient's username" value="{{ $searchTerm ?? '' }}">
							            <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</th>
									<th scope="col">Mobile</th>
									<th scope="col">Pan No.</th>
									<th scope="col">Bank Name</th>
									<th scope="col">Account holder</th>
									<th scope="col">Account No.</th>
									<th scope="col">IFSC</th>
									<th scope="col">Status</th>
									<th scope="col">Action</th>
								</tr>
							</thead>
							<tbody>
								@php
					                $perPage = $vehicleOwners->perPage(); 
					                $currentPage = $vehicleOwners->currentPage();
					                $counter = ($currentPage - 1) * $perPage + 1;
					            @endphp

								@foreach ($vehicleOwners as $owner)
								<tr>
									<th scope="row">{{ $counter++ }}</th>
									<td>
										<a href="{{ route('vehicle.owner_vehicles', $owner->id) }}" class="font-weight-bold text-info">{{ $owner->owner_name }}</a>
									</td>
					                <td>{{ $owner->mobile_number }}</td>
					                <td>{{ $owner->pan_no }}</td>
					                <td>{{ $owner->bank_name }}</td>
					                <td>{{ $owner->account_holder }}</td>
					                <td>{{ $owner->account_no }}</td>
					                <td>{{ $owner->ifsc_code }}</td>
									<td>
										<a href="javascript:;" class="badge {{ $owner->status == 'Active' ? 'badge-success' : 'badge-danger' }}">
									        {{ $owner->status }}
									    </a>
									</td>
									<td>
										<div class="btn-group m-1" role="group" aria-label="Basic example">
											<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({{ $owner->id }})" data-id="{{ $owner->id }}"><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 ($vehicleOwners->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="{{ $vehicleOwners->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&laquo;</a>
						            </li>
						        @endif

						        <!-- Pagination Elements -->
						        @foreach ($vehicleOwners->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 == $vehicleOwners->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 ($vehicleOwners->hasMorePages())
						            <li class="page-item">
						                <a class="page-link" href="{{ $vehicleOwners->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 Product Modal -->
<div class="modal fade" id="addOwnerdetailsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Owner Details 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" novalidate>
                <div class="modal-body">
                    
                    <!-- Owner Details -->
                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <label for="ownerName">Owner Name</label>
                            <input type="text" class="form-control form-control-sm" id="ownerName" required>
                            <div class="invalid-feedback">Please enter the owner's 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 enter a valid mobile number.</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="panNumber">PAN No.</label>
                            <input type="text" class="form-control form-control-sm" id="panNumber" required>
                            <div class="invalid-feedback">Please enter a valid PAN number.</div>
                        </div>
                    </div>

                    <!-- Bank Details -->
                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <label for="accountHolder">Account Holder</label>
                            <input type="text" class="form-control form-control-sm" id="accountHolder" required>
                            <div class="invalid-feedback">Please enter the account holder's name.</div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="col-md-8 mb-3 select2-sm">
                            <label for="bankName">Bank Name</label>
                            <select class="form-control form-control-sm single-select" id="bankName" required>
                                <option selected disabled value="">Choose...</option>
                                <option value="1">State bank Of India</option>
                                <option value="2">Bank of India</option>
                                <option value="3">HDFC Bank</option>
                                <option value="4">Indusind Bank</option>
                                <option value="5">IDBI Bank</option>
                                <option value="6">Panjab National Bank</option>
                                <option value="7">Indian Overseas Bank</option>
                                <option value="8">Union Bank</option>
                                <option value="9">Kotak Mahindra</option>
                                <option value="10">Axis Bank</option>
                                <option value="11">Bank of Barada</option>
                                <option value="12">ICICI Bank</option>
                                <option value="13">Canara Bank</option>
                                <option value="14">Indian Bank</option>
                                <option value="15">Allahabad Bank</option>
                                <option value="16">Central Bank of india</option>
                            </select>
                            <div class="invalid-feedback">Please enter the bank name.</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="ifscCode">IFSC Code</label>
                            <input type="text" class="form-control form-control-sm" id="ifscCode" required>
                            <div class="invalid-feedback">Please enter the IFSC code.</div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="col-md-8 mb-3">
                            <label for="accountNumber">Account No.</label>
                            <input type="text" class="form-control form-control-sm" id="accountNumber" required>
                            <div class="invalid-feedback">Please enter the account number.</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="Active">Active</option>
                                <option value="Deactive">Deactive</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>

@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>
<!-- Auto write text -->
<script>
$(document).ready(function() {
    // Listen for changes in the owner name input
    $('#ownerName').on('input', function() {
        // Get the current value of the owner name input
        var ownerName = $(this).val();
        // Set the account holder input to the owner name value
        $('#accountHolder').val(ownerName);
    });
});
</script>
<!-- Save Data in Database -->
<script>
$(document).ready(function(){
	var saveOwnerDetailsUrl = "{{ route('vehicle.owner_details') }}";
    // When the form is submitted
    $('#addOwnerdetailsModal form').submit(function(e){
        e.preventDefault(); // Prevent the form from submitting via the browser
        var formData = {
            owner_name: $('#ownerName').val(),
            mobile_number: $('#mobileNumber').val(),
            pan_no: $('#panNumber').val(),
            account_holder: $('#accountHolder').val(),
            bank_name: $('#bankName').val(),
            ifsc_code: $('#ifscCode').val(),
            account_no: $('#accountNumber').val(),
            status: $('#statusSelect').val(),
            _token: "{{ 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: saveOwnerDetailsUrl,
            type: 'POST',
            data: formData,
            success: function(response){
                // Handle success
                console.log(response); // Log the response to the console
                // Enable the submit button and restore its text
                $('#save_changes').prop('disabled', false).text('Save changes');
                // Optionally close the modal
                $('#addOwnerdetailsModal').modal('hide');
                // 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: response.message
	        	});
            },
            error: function(error){
                // Handle error
                console.log(error); // Log the error to the console
                // Enable the submit button and restore its text
                $('#save_changes').prop('disabled', false).text('Save changes');

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

<!-- Delete -->
<script type="text/javascript">
	function confirmDeletion(ownerId) {
		var url = '{{ route('vehicle.owner_destroy', ':id') }}'.replace(':id', ownerId);
	    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 owner has been deleted.',
	                        'success'
	                    );
	                    // Remove the corresponding table row
	                    // Remove the corresponding table row
	                    $('button[data-id="' + ownerId + '"]').closest('tr').remove();
	                },
	                error: function(xhr, status, error) {
	                    Swal.fire(
	                        'Error!',
	                        'Failed to delete the owner.',
	                        'error'
	                    );
	                }
	            });
	        }
	    })
	}

</script>
@endpush