@extends('layouts.app')

@section('title', 'Loan Types')

@section('content')	
	<!--start page wrapper -->
	<div class="page-wrapper">
		<div class="page-content">
			<!--breadcrumb-->
			<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
				<div class="ps-3">
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb mb-0 p-0">
							<li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i></a>
							</li>
							<li class="breadcrumb-item active" aria-current="page">Loans Types</li>
						</ol>
					</nav>
				</div>
				<div class="ms-auto">
					
				</div>
			</div>
			<!--end breadcrumb-->
			<hr/>
			<div class="card border-top border-0 border-4 border-primary">
				<div class="card-body">
					<div class="p-4 border rounded">
						<form class="row g-3 needs-validation" action="{{ route('admin.loantype') }}" method="post" novalidate>
							@csrf
							<div class="col-md-6">
								<label for="validationCustom01" class="form-label">Loan Type<sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup></label>
								<input type="text" class="form-control @error('name') is-invalid @enderror" id="validationCustom01" name="name" value="{{ old('name') }}"required>
								@error('name')
										<span class="invalid-feedback" role="alert">
											<strong>{{ $message }}</strong>
										</span>
									@enderror
							</div>
							
							<div class="col-md-6">
								<label for="validationCustom03" class="form-label">Maximum Amount <sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup> </label>
								<input type="text" class="form-control @error('maximum_amount') is-invalid @enderror" id="validationCustom02" name="maximum_amount" value="{{ old('maximum_amount') }}" required>
								@error('maximum_amount')
										<span class="invalid-feedback" role="alert">
											<strong>{{ $message }}</strong>
										</span>
									@enderror
							</div>
							<div class="col-md-6">
								<label for="validationCustom03" class="form-label">Duration(Months) <sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup></label>
								<input type="text" class="form-control @error('maximum_duration') is-invalid @enderror" id="validationCustom03" name="maximum_duration" value="{{ old('maximum_duration') }}" required>
								@error('maximum_duration')
										<span class="invalid-feedback" role="alert">
											<strong>{{ $message }}</strong>
										</span>
									@enderror
							</div>
							<div class="col-md-6">
								<label for="validationCustom04" class="form-label">Rate<sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup></label>
								<input type="text" class="form-control @error('rate') is-invalid @enderror" id="validationCustom04" name="rate" value="{{ old('rate') }}" required>
								@error('rate')
										<span class="invalid-feedback" role="alert">
											<strong>{{ $message }}</strong>
										</span>
									@enderror
							</div>
														
							<div class="col-6" style="padding-top: 30px;">
								<button class="btn btn-primary success" type="submit">Save</button>
							</div>
						</form>
					</div>
					<hr/>
					<div class="table-responsive">
						<table id="example" class="table table-striped table-bordered" style="width:100%">
							<thead>
								<tr>
									<th>Loan Type</th>
									<th>Maximum Amount</th>
									<th>Duration(Months)</th>
									<th>Rate</th>
									<th>Action</th>
								</tr>
							</thead>
							<tbody>
							@foreach($types as $type)
								<tr>
									<td>{{ $type->name }}</td>
									<td>{{ number_format($type->maximum_amount, 2) }}</td>
									<td>{{ $type->maximum_duration }}</td>
									<td>{{ $type->rate }}</td>
									
									<td>
										<div class="dropdown">
											<div class="cursor-pointer font-24 dropdown-toggle dropdown-toggle-nocaret" data-bs-toggle="dropdown"><i class='bx bx-dots-horizontal-rounded'></i>
											</div>
											<div class="dropdown-menu dropdown-menu-end"> 
												<a class="dropdown-item" href="#">Edit</a>
												<a class="dropdown-item" href="javascript:;">Delete</a>
											</div>
										</div>
									</td>
								</tr>
							@endforeach
							</tbody>
						</table>
					</div>
				</div>
			</div>
			
		</div>
	</div>
	<!--end page wrapper -->
@endsection
	
@pushOnce('scripts')
	<script src="{{ asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/sweetalerts/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/sweetalerts/custom-sweetalert.js') }}"></script>
	<script>
		$(document).ready(function() {
			$('#example').DataTable();
		  } );
	</script>
	<script>
		$(document).ready(function() {
			var table = $('#example2').DataTable( {
				lengthChange: false,
				buttons: [ 'copy', 'excel', 'pdf', 'print']
			} );
		 
			table.buttons().container()
				.appendTo( '#example2_wrapper .col-md-6:eq(0)' );
		} );
	</script>
@endpushOnce