@extends('app-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Loan</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ $orgUrl }}/loan-requests">Loan Requests</a>
                    </li>
                    <li class="breadcrumb-item active">Add/Edit
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right text-end col-md-3 col-12">
        <div class="form-group breadcrumb-right">
            <a href="javascript:history.back()" class="btn btn-secondary btn-sm"><i data-feather="arrow-left-circle"></i>
                Back</a>
            <button type="button" data-request="ajax-submit" data-target="[role=post-data]"
                class="btn btn-primary btn-sm"><i data-feather="check-circle"></i> Submit</button>
        </div>
    </div>
@endpush

@section('content')
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-md-8">
                <div class="card new-cardbox">
                    <div class="card-header newheader border-bottom mb-1">
                        <h4 class="card-title">Fill the below Information</h4>
                    </div>
                    <div class="card-body">
                        <form class="form" action="{{ "$orgUrl/loan-requests" }}" role="post-data"
                            redirect="{{ "$orgUrl/loan-requests" }}" method="POST">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-1">
                                                <label class="form-label">Employee<span class="text-danger">*</span></label>
                                                <select class="form-select mw-100 select2" name="employee_id" id="employee_id">
                                                    <option value="">Select</option>
                                                    @foreach ($employees as $employee)
                                                        <option value="{{ $employee->id }}"
                                                            {{ @$loanRequest->employee_id == $employee->id ? 'selected' : '' }}>
                                                            {{ $employee->name }} ({{ $employee->employee_code }})
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-1">
                                                <input type="hidden" id="loan_rule_id">
                                                <label class="form-label">Loan Type <span
                                                        class="text-danger">*</span></label>
                                                <select class="form-select mw-100 select2" name="loan_type" id="loan_type">
                                                    <option value="">Select</option>
                                                    @foreach ($loanTypes as $loanType)
                                                        <option value="{{ $loanType['id'] }}"
                                                            {{ @$loanRequest->loan_type == $loanType['id'] ? 'selected' : '' }}>
                                                            {{ $loanType['name'] }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">Repayment Type <span
                                                        class="text-danger">*</span></label>
                                                <select class="form-select select2" name="repayment_type" id="repayment_type">
                                                    <option value="">Select</option>
                                                    @foreach ($repaymentTypes as $repaymentType)
                                                        <option value="{{ $repaymentType['id'] }}"
                                                            {{ @$loanRequest->repayment_type == $repaymentType['id'] ? 'selected' : '' }}>
                                                            {{ $repaymentType['name'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">Eligible Amount <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" id="eligible_amount" value="" disabled
                                                    class="form-control" />
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">Rate of Int. <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" placeholder="Rate of Int." id="interest_rate"
                                                    value="{{ @$loanRequest->interest_rate }}" disabled
                                                    class="form-control" />
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">Tenure <span class="text-danger">*</span>
                                                </label>
                                                <input type="number" placeholder="Loan Tenure" id="tenure"
                                                    value="{{ @$loanRequest->tenure }}" min="0" name="tenure"
                                                    class="form-control" disabled />
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">Cooling Period<span class="text-danger">*</span>
                                                </label>
                                                <input type="number" placeholder="Cooling Period" id="cooling_period"
                                                    value="{{ @$loanRequest->cooling_period }}" min="0"
                                                    name="cooling_period" class="form-control" />
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">Amount <span class="text-danger">*</span>
                                                </label>
                                                <input type="number" placeholder="Loan Amount" id="amount"
                                                    value="{{ @$loanRequest->amount }}" min="0" name="amount"
                                                    class="form-control" />
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">Mode of Payment <span
                                                        class="text-danger">*</span></label>
                                                <select class="form-select select2" id="mode_of_payment" name="mode_of_payment">
                                                    <option value="">Select</option>
                                                    @foreach ($modeOfPayments as $modeOfPayment)
                                                        <option value="{{ $modeOfPayment['id'] }}"
                                                            {{ @$loanRequest->mode_of_payment == $modeOfPayment['id'] ? 'selected' : '' }}>
                                                            {{ $modeOfPayment['name'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-12 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">Remarks <span
                                                        class="text-danger">*</span></label>
                                                <textarea class="form-control" name="remarks" id="remarks" placeholder="Enter reason here...">{{ @$loanRequest->remarks }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb-2" id="monthly-installments-card" style="display: none">
                <div class="card h-100 new-cardbox">
                    <div class="card-header newheader border-bottom mb-1">
                        <h4 class="card-title">EMI Details (Tentative)</h4>
                    </div>
                    <div class="card-body ">

                        <table class="table table-bordered leavetable">
                            <thead>
                                <tr>
                                    <th>EMI Type</th>
                                    <th>Interest Type</th>
                                    <th>Interest</th>
                                    <th>Total Amount</th>
                                </tr>
                            </thead>
                            <tbody id="monthly-installments-heads">
                                @if (@$loanRequest)
                                    <tr>
                                        <td>{{ \App\Helpers\ConstantHelper::EMI_TYPES[$loanRequest->emi_type] }}</td>
                                        <td>{{ \App\Helpers\ConstantHelper::INTEREST_TYPES[$loanRequest->interest_type] }}
                                        </td>
                                        <td>{{ $loanRequest->total_interest }}</td>
                                        <td>{{ $loanRequest->total_payment }}</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                        <table class="table table-bordered leavetable mt-2">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Month</th>
                                    <th>EMI</th>
                                    <th>Principal</th>
                                    <th>Interest</th>
                                    <th>Bal.</th>
                                    @if (@$loanRequest)
                                        <th>Status</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody id="monthly-installments">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('footer-script')
    <script src="/js/common-script.js"></script>
    <script>
        $(function () {
            $('.select2').select2();
        })
        let interestTypes = @json($interestTypes);
        let emiTypes = @json($emiTypes);

        $('#employee_id, #loan_type, #repayment_type').change(function() {
            $('#tenure').val('');
            $('#interest_rate').val('');
            $('#eligible_amount').val('');
            $('#loan_rule_id').val('');
            $('#cooling_period').val('');
            $('#amount').val('').removeAttr('max');

            let employee_id = $('#employee_id').val();
            let loan_type = $('#loan_type').val();
            let repayment_type = $('#repayment_type').val();

            if (repayment_type != 'monthly_emi') {
                $('#tenure').attr('disabled', true);
            } else {
                $('#tenure').removeAttr('disabled');
            }

            if (loan_type && repayment_type) {
                const formData = new FormData();
                formData.append('employee_id', employee_id);
                formData.append('loan_type', loan_type);
                formData.append('repayment_type', repayment_type);

                apiRequest(`{{ $orgUrl }}/loan-requests/get-loan-eligibility`, formData, null, 'GET',
                    function(res) {
                        $('#tenure').val(res.data.tenure);
                        $('#cooling_period').val(res.data.cooling_period);
                        $('#interest_rate').val(res.data.interest_rate);
                        $('#eligible_amount').val(res.data.loan_eligibility);
                        $('#amount').attr('max', res.data.loan_eligibility);
                        $('#loan_rule_id').val(res.data.loan_rule_id);
                    }
                );
            }
        });

        $('#amount, #tenure, #cooling_period').change(function() {
            $('#monthly-installments-card').hide();
            let loan_rule_id = $('#loan_rule_id').val();
            let amount = $('#amount').val();
            let tenure = $('#tenure').val();
            let cooling_period = $('#cooling_period').val();

            let maxAmount = $('#amount').attr('max');

            if (Number(amount) > Number(maxAmount)) {
                amount = maxAmount;
                $('#amount').val(maxAmount);
            }

            if (loan_rule_id && amount && tenure) {
                const formData = new FormData();
                formData.append('loan_rule_id', loan_rule_id);
                formData.append('amount', amount);
                formData.append('tenure', tenure);
                formData.append('cooling_period', cooling_period);

                apiRequest(`{{ $orgUrl }}/loan-requests/get-loan-emis`, formData, null, 'GET',
                    function(res) {
                        let html = '';
                        let emiType = emiTypes.find(item => item.id == res.data.emi_type)?.name;
                        let interestType = interestTypes.find(item => item.id == res.data.interest_type)?.name;

                        html += `
                                <tr>
                                    <td>${emiType}</td>
                                    <td>${interestType}</td>
                                    <td><strong>${res.data.total_interest}</strong></td>
                                    <td>${res.data.total_payment}</td>
                                </tr>
                            `;

                        $('#monthly-installments-heads').html(html);

                        html = '';
                        res.data.schedule.forEach(item => {
                            html += `
                                <tr>
                                    <td>${item.sr_no}</td>
                                    <td><strong>${item.month_year}</strong></td>
                                    <td>${item.emi}</td>
                                    <td>${item.principal}</td>
                                    <td>${item.interest}</td>
                                    <td>${item.balance}</td>
                                </tr>
                            `;
                        });

                        $('#monthly-installments').html(html);
                        $('#monthly-installments-card').show();
                    }
                );
            }
        });
    </script>
@endpush