@extends('layouts.app')
@push('scripts')
    <script>
        var loanTypes = {!! json_encode($loanTypes) !!};
    </script>
    <script src="{{ asset('assets/js/calculation.js') }}"></script>
	
@endpush

@section('title', 'Loan')

@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">Apply Loan</li>
                        
					</ol>
                    <br>
                    <div>
                        <a href="{{ route('loan.list') }}">
                        <i class="fas fa-arrow-circle-left">  </i>My Loans</a>

                    </div>
				</nav>
			</div>

		</div>
		<!--end breadcrumb-->
		<hr />
		<div class="row">
			<div class="col-xl-12 mx-auto">
				<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" id="loan-form" action="{{ route('loan.apply') }}" method="post" enctype="multipart/form-data" novalidate>
								@csrf
								<div class="col-md-6">
									<label for="type_id" class="form-label">Loan Type<sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup></label>
									<select class="form-control @error('type_id') is-invalid @enderror" id="type_id" name="type_id" required>
										<option selected disabled value="">Choose...</option>
										@foreach ($loanTypes as $loanType)
										<option value="{{ $loanType->id }}" data-rate="{{ $loanType->rate }}">
										  {{ $loanType->name }}
										</option>
									  @endforeach
									</select>
                                    @error('type_id')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
								</div>
								<div class="col-md-6">
									<label for="applied_amount" class="form-label">Loan Amount<sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup></label>
									<input type="number" class="form-control @error('applied_amount') is-invalid @enderror" id="applied_amount" name="applied_amount" value="{{ old('applied_amount') }}"required>
                                    @error('applied_amount')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
								</div>
								
								<div class="col-md-6">
									<label for="applied_duration" class="form-label">Duration(Months)  </label>
									<input type="number" class="form-control @error('applied_duration') is-invalid @enderror" id="applied_duration" name="applied_duration" value="{{ old('applied_duration') }}">
									@error('applied_duration')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
								</div>
								
								<div class="col-md-6">
									<label for="monthly_installment" class="form-label">Monthly Installments <sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup></label>
									<input type="number" class="form-control"  id="monthly_installment" name="monthly_installment"  readonly>
									@error('monthly_installment')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
								</div>
								<div class="col-md-12">
									<label for="validationCustom04" class="form-label">Loan Reasons</label>
									<textarea class="form-control @error('loan_reasons') is-invalid @enderror" rows="4" id="loan_reasons" name="loan_reasons" placeholder="Describe the purpose for which loan is applied."></textarea>
																		
									@error('loan_reasons')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
								</div>
								<br>
								<div class="row">
								<div class="col-12">
									<button type="submit" class="btn btn-primary" name="action" value="next">Next</button>
									<button class="btn btn-danger" type="reset">Clear</button>
								</div>
							</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--end row-->
	</div>
</div>
<!--end page wrapper -->
@endsection
@push('scripts')
<script src="{{ asset('assets/plugins/sweetalerts/sweetalert2.min.js') }}"></script>
<script src="{{ asset('assets/plugins/sweetalerts/custom-sweetalert.js') }}"></script>
    @if (session('success'))
    <script>
        console.log('Success message:', '{{ session('success') }}');
        Swal.fire('Loan Created', '{{ session('success') }}', 'success');
    </script>
@endif
@if ($errors->any())
<script>
Swal.fire('Error', '{{ $errors->first() }}', 'error');
</script>
@endif

@endpush