@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">View
                    </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>
            @if ($loanRequest->status == 'approved' && $authType == 'user')
                <button type="button" class="btn btn-primary btn-sm mark-as-paid-btn" data-status="paid"><i
                        data-feather="check-circle"></i> Mark as
                    Paid</button>
            @elseif (
                $authType == 'user' &&
                    (($loanRequest->status == 'paid' && $loanRequest->emis->where('status', 'pending')->isEmpty()) ||
                        $loanRequest->status == 'early_closure'))
                <button type="button" class="btn btn-danger btn-sm mark-as-paid-btn" data-status="closed"><i
                        data-feather="check-circle"></i> Mark as
                    Closed</button>
            @elseif ($loanRequest->status == 'paid' && $authType == 'employee' && $loanRequest->employee_id == $authUser->id)
                <button type="button" class="btn btn-warning btn-sm mark-as-paid-btn" data-status="early_closure"><i
                        data-feather="check-circle"></i> Early Closure</button>
                <button type="button" class="btn btn-primary btn-sm" data-bs-target="#tenure-change-popup"
                    data-bs-toggle="modal"><i data-feather="check-circle"></i>
                    Tenure Change</button>
            @endif
        </div>
    </div>
@endpush

@section('content')
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-md-4">
                <div class="card new-cardbox">
                    <div class="card-header newheader border-bottom mb-1">
                        <h4 class="card-title">Loan Information</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-6 col-12">
                                        <div class="mb-1">
                                            <label class="form-label">Employee <span class="text-danger">*</span></label>
                                            <input type="text" placeholder="Employee"
                                                value="{{ $loanRequest->employee->name }} ({{ $loanRequest->employee->employee_code }})"
                                                class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="mb-1">
                                            <label class="form-label">Loan Type <span class="text-danger">*</span></label>
                                            <input type="text" placeholder="Loan Type"
                                                value="{{ \App\Helpers\ConstantHelper::LOAN_TYPES[$loanRequest->loan_type] }}"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-12">
                                        <div class="mb-1">
                                            <label class="form-label">Repayment Type <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" placeholder="Repayment Type"
                                                value="{{ \App\Helpers\ConstantHelper::REPAYMENT_TYPES[$loanRequest->repayment_type] }}"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="col-md-6 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."
                                                value="{{ @$loanRequest->interest_rate }}" class="form-control" />
                                        </div>
                                    </div>

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

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

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

                                    <div class="col-md-6 col-12">
                                        <div class="mb-1">
                                            <label class="form-label">Mode of Payment <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" placeholder="Mode of Payment"
                                                value="{{ \App\Helpers\ConstantHelper::MODE_OF_PAYMENT[$loanRequest->mode_of_payment] }}"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-12">
                                        <div class="mb-1">
                                            <label class="form-label">Status <span class="text-danger">*</span></label>
                                            <input type="text" placeholder="Status"
                                                value="{{ ucfirst($loanRequest->status) }}" class="form-control" />
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-12">
                                        <div class="mb-1">
                                            <label class="form-label">Request Date <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" placeholder="Request Date"
                                                value="{{ $loanRequest->created_at }}" class="form-control" />
                                        </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>
                    </div>
                </div>
                @if ($loanRequest->approvalLevels->isNotEmpty())
                    <div class="card new-cardbox">
                        <div class="card-header newheader border-bottom mb-1">
                            <h4 class="card-title">Approval Details
                            </h4>
                        </div>
                        <div class="card-body ">

                            <table class="table table-bordered leavetable">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>Status</th>
                                        <th>Remarks</th>
                                        <th>Action At</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($loanRequest->approvalLevels as $key => $requestApproval)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>{{ $requestApproval->approver->name }}
                                                {{ $requestApproval->approver->employee_code ? '(' . $requestApproval->approver->employee_code . ')' : '' }}
                                            </td>
                                            <td>{{ $requestApproval->status }}</td>
                                            <td>{{ $requestApproval->remarks }}</td>
                                            <td>{{ $requestApproval->action_at }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif
            </div>
            <div class="col-md-8 mb-2">
                <div class="card h-100 new-cardbox">
                    <div class="card-header newheader border-bottom mb-1">
                        <h4 class="card-title">EMI Details
                            @if (!in_array($loanRequest->status, ['paid', 'early_closure', 'closed']))
                                (Tentative)
                            @endif
                        </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>
                                @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>
                                    <th>Status</th>
                                    <th>Remarks</th>
                                    @if ($loanRequest->mode_of_payment != 'salary_deduction')
                                        <th>Action</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $flag = true;
                                @endphp
                                @foreach (@$loanRequest->emis ?: [] as $key => $emi)
                                    <tr>
                                        <td>{{ $emi->sr_no }}</td>
                                        <td><strong>{{ date('M, y', strtotime("$emi->year-$emi->month-01")) }}</strong>
                                        </td>
                                        <td>{{ $emi->emi }}</td>
                                        <td>{{ $emi->principal }}</td>
                                        <td>{{ $emi->interest }}</td>
                                        <td>{{ $emi->balance }}</td>
                                        <td>{{ $emi->status }}</td>
                                        <td>{{ $emi->payment_remarks ?? '-' }}</td>
                                        @if ($loanRequest->mode_of_payment != 'salary_deduction')
                                            <td>
                                                @if ($flag && $emi->status == 'pending' && $emi->month <= date('m') && $emi->year <= date('Y') && $authType == 'user')
                                                    @php
                                                        $flag = false;
                                                    @endphp
                                                    <button type="button"
                                                        class="btn btn-primary btn-sm mark-emi-as-paid-btn"
                                                        data-id="{{ $emi->id }}">
                                                        <i data-feather="check-circle"></i> Mark as Paid
                                                    </button>
                                                @else
                                                    -
                                                @endif
                                            </td>
                                        @endif
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="mark-as-paid-popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered ">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-5 pt-50">
                    <div class="mb-2">
                        <h3 class="mb-2" id="modelHeading">Update Status</h3>
                    </div>
                    <form id="approval-form" role="post-data"
                        action="{{ $orgUrl }}/loan-requests/update-payment-status" method="POST">
                        <input type="hidden" name="id" id="id" value="{{ $loanRequest->id }}">
                        <input type="hidden" name="status" id="status" value="">
                        <div class="row">
                            <div class="col-12">
                                <label>Remarks</label>
                                <textarea class="form-control" name="remarks" id="remarks" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="col-12 d-flex justify-content-end mt-2 pt-50">
                            <button type="button" data-request="ajax-submit" data-target="[role=post-data]"
                                class="btn btn-primary"
                                id="submit-btn">{{ trans('common/common.submit_request') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="mark-emi-as-paid-popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered ">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-5 pt-50">
                    <div class="mb-2">
                        <h3 class="mb-2" id="modelHeading">Mark as Paid</h3>
                    </div>
                    <form id="approval-form" role="post-data-1"
                        action="{{ $orgUrl }}/loan-emi/update-payment-status" method="POST">
                        <input type="hidden" name="id" id="id" value="">
                        <input type="hidden" name="status" id="status" value="paid">
                        <div class="row">
                            <div class="col-12">
                                <label>Remarks</label>
                                <textarea class="form-control" name="remarks" id="remarks" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="col-12 d-flex justify-content-end mt-2 pt-50">
                            <button type="button" data-request="ajax-submit" data-target="[role=post-data-1]"
                                class="btn btn-primary"
                                id="submit-btn">{{ trans('common/common.submit_request') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="tenure-change-popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered ">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-5 pt-50">
                    <div class="mb-2">
                        <h3 class="mb-2" id="modelHeading">Tenure Change</h3>
                    </div>
                    <form id="approval-form" role="post-data-2"
                        action="{{ $orgUrl }}/loan-requests/update-loan-emis-tenure-change" method="POST">
                        <input type="hidden" name="loan_request_id" id="loan_request_id" value="{{$loanRequest->id}}">
                        <div class="row">
                            <div class="col-md-5">
                                <div class="col-12">
                                    <label class="form-label">Tenure</label>
                                    <input class="form-control" name="tenure" id="modal-tenure"
                                        value="{{ $loanRequest->emis->where('status', 'pending')->count() }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Remarks</label>
                                    <textarea class="form-control" name="remarks" id="remarks" rows="5"></textarea>
                                </div>
                            </div>
                            <div class="col-md-7" id="monthly-installments-div">
                                <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">
                                    </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>
                                        </tr>
                                    </thead>
                                    <tbody id="monthly-installments">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-12 d-flex justify-content-end mt-2 pt-50">
                            <button type="button" data-request="ajax-submit" data-target="[role=post-data-2]"
                                class="btn btn-primary"
                                id="submit-btn">{{ trans('common/common.submit_request') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer-script')
    <script src="{{ asset('js/common-script.js') }}"></script>
    <script src="{{ asset('js/sweetalert.js') }}"></script>

    <script>
        let interestTypes = @json($interestTypes);
        let emiTypes = @json($emiTypes);

        $(".mark-emi-as-paid-btn").on('click', function() {
            let id = $(this).data('id');
            $('#mark-emi-as-paid-popup input[name="id"]').val(id);
            $('#mark-emi-as-paid-popup').modal('show');
        });

        $(".mark-as-paid-btn").on('click', function() {
            let status = $(this).data('status');
            $('#mark-as-paid-popup input[name="status"]').val(status);
            $('#mark-as-paid-popup').modal('show');
        });

        $('#modal-tenure').change(function() {
            $('#monthly-installments-div').hide();
            let loan_request_id = '{{ $loanRequest->id }}';
            let tenure = $('#modal-tenure').val();

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

                apiRequest(`{{ $orgUrl }}/loan-requests/get-loan-emis-tenure-change`, 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-div').show();
                    }
                );
            }
        });
    </script>
@endpush