@extends('layout.app')
@section('title','Add Truck Loan')
@push('header_script')
    <link rel="stylesheet" href="{{asset('theme/assets/vendor/daterange/daterange.css')}}">
@endpush
@section('content')
    <div class="app-hero-header d-flex align-items-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="javascript:void(0);">Add Truck Loan</a>
            </li>
        </ol>
        <div class="ms-auto d-lg-flex flex-row">
            <div class="d-flex flex-row gap-1 day-sorting">
                <a href="{{route('truck-loan.index')}}" class="btn btn-sm btn-primary">
                    <i class="ri-arrow-left-circle-fill"></i> Back
                </a>
            </div>
        </div>
    </div>
    
    <div class="app-body">
        <div class="row gx-3">
            <div class="col-sm-12">
                <div class="card mb-3">
                    <div class="card-body">
                        <form class="row g-3 needs-validation" action="{{route('truck-loan.store')}}" method="POST" enctype="multipart/form-data">
                            @csrf
                            
                            <div class="col-md-6 col-12">
                                <label class="form-label" for="truck_id">Truck Number <span class="text-danger">*</span></label>
                                <select id="truck_id" name="truck_id" class="form-control select2" required>
                                    <option value="" disabled selected>Select Truck</option>
                                    @foreach($vehicles as $id => $truck_no)
                                        <option value="{{$id}}">{{$truck_no}}</option>
                                    @endforeach
                                </select>
                            </div>
                            
                            <div class="col-md-6 col-12">
                                <label class="form-label" for="financer_id">Financer <span class="text-danger">*</span></label>
                                <select id="financer_id" name="financer_id" class="form-control select2" required>
                                    <option value="" disabled selected>Select Financer</option>
                                    @foreach($financers as $id => $name)
                                        <option value="{{$id}}">{{$name}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6 col-12">
                                <label class="form-label" for="loan_account_number">Loan Account Number <span class="text-danger">*</span></label>
                                <input type="text" id="loan_account_number" name="loan_account_number" class="form-control" placeholder="e.g. HDFCTL0029384" required>
                            </div>
                            
                            <div class="col-md-6 col-12">
                                <label class="form-label" for="principal_amount">Principal Sanctioned (₹) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" id="principal_amount" name="principal_amount" class="form-control" placeholder="₹" required>
                            </div>

                            <div class="col-md-4 col-12">
                                <label class="form-label" for="interest_rate">Interest Rate (%) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" id="interest_rate" name="interest_rate" class="form-control" placeholder="%" required>
                            </div>
                            
                            <div class="col-md-4 col-12">
                                <label class="form-label" for="tenure_months">Tenure (months) <span class="text-danger">*</span></label>
                                <input type="number" id="tenure_months" name="tenure_months" class="form-control" placeholder="e.g. 48" required>
                            </div>
                            
                            <div class="col-md-4 col-12">
                                <label class="form-label" for="emi_amount">EMI Amount (₹) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" id="emi_amount" name="emi_amount" class="form-control" placeholder="₹" required>
                            </div>

                            <div class="col-md-6 col-12">
                                <label class="form-label" for="sanction_date">Sanction Date <span class="text-danger">*</span></label>
                                <input type="text" id="sanction_date" name="sanction_date" class="form-control datepicker" required>
                            </div>
                            
                            <div class="col-md-6 col-12">
                                <label class="form-label" for="emi_start_date">EMI Start Date <span class="text-danger">*</span></label>
                                <input type="text" id="emi_start_date" name="emi_start_date" class="form-control datepicker" required>
                            </div>

                            <div class="col-md-6 col-12">
                                <label class="form-label" for="statement_file">Statement Upload (Optional)</label>
                                <input type="file" id="statement_file" name="statement_file" class="form-control">
                            </div>

                            <div class="col-12 mt-4">
                                <button type="submit" class="btn btn-primary">Save Loan</button>
                                <a href="{{route('truck-loan.index')}}" class="btn btn-secondary">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('footer_script')
<script src="{{asset('theme/assets/vendor/daterange/daterange.js')}}"></script>
<script>
    $(document).ready(function() {
        $('.datepicker').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            locale: {
                format: 'DD-MM-YYYY'
            }
        });
    });
</script>
@endpush