@extends('adminlte::page')

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

@section('plugins.Select2', true)

@section('content_header')

<div class="d-flex justify-content-between align-items-center flex-wrap">

    <h1>
        Add Loan
    </h1>

    <a href="{{ route('loans.index') }}"
        class="btn btn-secondary mt-2 mt-md-0">

        <i class="fas fa-arrow-left"></i>
        Back

    </a>

</div>

@stop

@section('css')

<style>
    .required {
        color: #dc3545;
    }

    .form-group label {
        font-weight: 600;
    }

    .select2-container {
        width: 100% !important;
    }

    .select2-container--default .select2-selection--single {
        height: 38px;
        border: 1px solid #ced4da;
        border-radius: 4px;
    }

    .select2-selection__rendered {
        line-height: 36px !important;
    }

    .select2-selection__arrow {
        height: 36px !important;
    }

    .card {
        border-radius: 10px;
    }

    .card-header {
        font-weight: 600;
    }
</style>

@stop

@section('content')

@if ($errors->any())

<div class="alert alert-danger alert-dismissible fade show">

    <button type="button"
        class="close"
        data-dismiss="alert">
        &times;
    </button>

    <strong>Please fix the following errors:</strong>

    <ul class="mb-0 mt-2">

        @foreach($errors->all() as $error)

        <li>{{ $error }}</li>

        @endforeach

    </ul>

</div>

@endif

<form action="{{ route('loans.store') }}"
    method="POST">

    @csrf

    <div class="card card-success card-outline shadow">

        <div class="card-header">

            <h3 class="card-title">

                <i class="fas fa-hand-holding-usd"></i>

                Loan Information

            </h3>

        </div>

        <div class="card-body">

            <div class="row">

                <div class="col-md-4">

                    <div class="form-group">

                        <label>

                            Account
                            <span class="required">*</span>

                        </label>

                        <select name="account_id"
                            id="account_id"
                            class="form-control select2"
                            required>

                            <option value="">
                                Search Account
                            </option>

                            @foreach($accounts as $account)

                            <option value="{{ $account->id }}"
                                data-name="{{ $account->customer_name }}"
                                data-mobile="{{ $account->mobile }}">

                                {{ $account->account_no }}
                                -
                                {{ $account->customer_name }}
                                -
                                {{$account->mobile}}

                            </option>

                            @endforeach

                        </select>

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="form-group">

                        <label>

                            Loan Date
                            <span class="required">*</span>

                        </label>

                        <input type="date"
                            name="loan_start_date"
                            class="form-control"
                            value="{{ date('Y-m-d') }}">

                    </div>

                </div>

                <!-- <div class="col-md-4">

                    <div class="form-group">

                        <label>

                            Customer Name

                        </label>

                        <input type="text"
                               id="customer_name"
                               class="form-control"
                               readonly>

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="form-group">

                        <label>

                            Mobile Number

                        </label>

                        <input type="text"
                               id="mobile"
                               class="form-control"
                               readonly>

                    </div>

                </div> -->

                <div class="col-md-4">

                    <div class="form-group">

                        <label>

                            Loan Amount
                            <span class="required">*</span>

                        </label>

                        <input type="number"
                            name="loan_amount"
                            id="loan_amount"
                            class="form-control"
                            required>

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="form-group">

                        <label>

                            Interest Rate (%)
                            <span class="required">*</span>

                        </label>

                        <input type="number"
                            step="0.01"
                            name="interest_rate"
                            id="interest_rate"
                            class="form-control"
                            required>

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="form-group">

                        <label>

                            Duration (Months)
                            <span class="required">*</span>

                        </label>

                        <input type="number"
                            name="tenure_months"
                            id="tenure_months"
                            class="form-control"
                            value="12">

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="form-group">

                        <label>
                            Collection Type
                            <span class="required">*</span>
                        </label>

                        <select name="collection_type"
                            id="collection_type"
                            class="form-control"
                            required>

                            <option value="">Select Collection Type</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="monthly" selected>Monthly</option>

                        </select>

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="form-group">

                        <label>

                            Total Interest

                        </label>

                        <input type="text"
                            id="total_interest"
                            class="form-control"
                            readonly>

                    </div>

                </div>
                <div class="col-md-4">

                    <div class="form-group">

                        <label>EMI Amount</label>

                        <input type="text"
                            name="emi_amount"
                            id="emi_amount"
                            class="form-control"
                            readonly>

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="form-group">

                        <label>

                            Total Payable

                        </label>

                        <input type="text"
                            id="total_payable"
                            class="form-control"
                            readonly>

                    </div>

                </div>

                <input type="hidden" name="total_emi_count" id="total_emi_count">
                <input type="hidden" name="paid_emi_count" id="paid_emi_count" value="0">
                <input type="hidden" name="remaining_emi_count" id="remaining_emi_count">

                

            </div>

        </div>

        <div class="card-footer text-right">

            <button type="submit"
                class="btn btn-primary">

                <i class="fas fa-save"></i>

                Save Loan

            </button>

        </div>

    </div>

</form>

@stop

@section('js')

<script>
$(document).ready(function () {

    // Select2
    $('.select2').select2({
        width: '100%',
        placeholder: 'Select Account',
        allowClear: true
    });

    // Account Details
    $('#account_id').change(function () {

        let account = $(this).find(':selected');

        $('#customer_name').val(account.data('name') || '');
        $('#mobile').val(account.data('mobile') || '');

    });

    // Loan Calculation
    function calculateLoan() {

        let amount = parseFloat($('#loan_amount').val()) || 0;
        let rate = parseFloat($('#interest_rate').val()) || 0;
        let months = parseInt($('#tenure_months').val()) || 0;
        let type = $('#collection_type').val();

        // Simple Interest
        let interest = (amount * rate * months) / (100 * 12);

        // Total Payable
        let totalPayable = amount + interest;

        $('#total_interest').val(interest.toFixed(2));
        $('#total_payable').val(totalPayable.toFixed(2));

        // EMI Count
        let emiCount = 0;

        if (type === 'daily') {

            emiCount = months * 30;

        } else if (type === 'weekly') {

            emiCount = months * 4;

        } else if (type === 'monthly') {

            emiCount = months;

        }

        $('#total_emi_count').val(emiCount);
        $('#paid_emi_count').val(0);
        $('#remaining_emi_count').val(emiCount);

        // EMI Amount
        let emiAmount = 0;

        if (emiCount > 0) {

            emiAmount = totalPayable / emiCount;

        }

        $('#emi_amount').val(emiAmount.toFixed(2));

    }

    $('#loan_amount, #interest_rate, #tenure_months, #collection_type')
        .on('keyup change', function () {

            calculateLoan();

        });

    calculateLoan();

});
</script>

@stop