@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">Payment List</li>
						</ol>
					</nav>
				</div>
				<div class="ml-auto">
					<button type="button" class="btn btn-light btn-sm" data-toggle="modal" data-target="#addModelModal"><i class='bx bx-plus mr-1'></i>Add Model</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">Model</th>
									<th scope="col">Brand's</th>
									<th scope="col">Description</th>
									<th scope="col">Action</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Joda</td>
									<td>Barbil</td>
									<td>Barbil</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>
								
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--end page-content-wrapper-->
</div>

<!-- Add Product Modal -->
<div class="modal fade" id="addModelModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Model 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">
                        <label for="brandName">Model Name :</label>
                        <input type="text" class="form-control form-control-sm" id="brandName" required>
                        <div class="invalid-feedback">Please provide a brand name.</div>
                    </div>
                    <div class="col-md-5 mb-3">
                        <label for="brandSelect">Brand :</label>
                        <select class="form-control form-control-sm" id="brandSelect" required>
                            <option selected disabled value="">Choose...</option>
                            <option value="Brand1">Brand1</option>
                            <option value="Brand2">Brand2</option>
                        </select>
                        <div class="invalid-feedback">Please select a brand.</div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-12 mb-3">
                        <label for="productName">Description :</label>
                        <textarea class="form-control form-control-sm" id="textarea" required></textarea>
                        <div class="invalid-feedback">Please provide a product 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" class="btn btn-primary btn-sm">Save changes</button>
            </div>
          </form>
        </div>
    </div>
</div>

@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>
@endpush