@extends('app-new')

@push('head-script')
    <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">
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Cooperative Loan - New</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url($alias.'/cooperative-loans') }}">Cooperative Loan</a></li>
                    <li class="breadcrumb-item active">New</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
<section id="basic-form-layouts">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Loan Entry Form</h4>
                </div>
                <div class="card-body">
                    <form id="cooperative-loan-form">
                        {{ csrf_field() }}
                        <div class="row">
                            <div class="col-md-6 mb-1">
                                <label class="form-label" for="employee_id">Employee <span class="text-danger">*</span></label>
                                <select class="form-control select2" id="employee_id" name="employee_id">
                                    <option value="">Select Employee</option>
                                    @foreach($employees as $employee)
                                        <option value="{{ $employee->id }}">{{ $employee->name }} ({{ $employee->employee_code }})</option>
                                    @endforeach
                                </select>
                                <span class="text-danger" id="err-employee_id"></span>
                            </div>

                            <div class="col-md-6 mb-1">
                                <label class="form-label" for="requested_amount">Requested Amount <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" min="0" class="form-control" id="requested_amount" name="requested_amount" placeholder="Requested Amount">
                                <span class="text-danger" id="err-requested_amount"></span>
                            </div>

                            <div class="col-md-6 mb-1">
                                <label class="form-label" for="requested_date">Requested Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="requested_date" name="requested_date">
                                <span class="text-danger" id="err-requested_date"></span>
                            </div>

                            <div class="col-md-6 mb-1">
                                <label class="form-label">Current No of Shares</label>
                                <input type="text" class="form-control" id="current_shares" readonly>
                            </div>

                            <div class="col-md-6 mb-1">
                                <label class="form-label">Required No of Share</label>
                                <input type="text" class="form-control" id="required_shares" readonly>
                            </div>

                            <div class="col-md-6 mb-1">
                                <label class="form-label">Shortfall Shares (auto-issued on submit)</label>
                                <input type="text" class="form-control" id="shortfall_shares" readonly>
                            </div>

                            <div class="col-md-6 mb-1">
                                <label class="form-label">Shortfall Amount</label>
                                <input type="text" class="form-control" id="shortfall_amount" readonly>
                            </div>

                            <div class="col-md-6 mb-1">
                                <label class="form-label">Old Loan Settled Amount</label>
                                <input type="text" class="form-control" id="old_loan_due" readonly>
                            </div>

                            <div class="col-md-6 mb-1">
                                <label class="form-label" for="emi_amount">EMI Amount <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" min="0" class="form-control" id="emi_amount" name="emi_amount" placeholder="EMI Amount">
                                <span class="text-danger" id="err-emi_amount"></span>
                            </div>

                            <div class="col-md-6 mb-1">
                                <label class="form-label">Final Payable Amount</label>
                                <input type="text" class="form-control" id="final_payable_amount" readonly>
                                <span class="text-danger" id="err-final_payable_amount"></span>
                            </div>

                            <div class="col-md-6 mb-1">
                                <label class="form-label" for="disbursed_date">Disbursed Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="disbursed_date" name="disbursed_date">
                                <span class="text-danger" id="err-disbursed_date"></span>
                            </div>

                            <div class="col-md-6 mb-1">
                                <label class="form-label" for="remarks">Remarks</label>
                                <input type="text" class="form-control" id="remarks" name="remarks" placeholder="Remarks">
                                <span class="text-danger" id="err-remarks"></span>
                            </div>

                            <div class="col-md-6 mb-1">
                                <label class="form-label" for="attachment">Attachment</label>
                                <input type="file" class="form-control" id="attachment" name="attachment">
                                <span class="text-danger" id="err-attachment"></span>
                            </div>
                        </div>

                        <div class="form-actions mt-2">
                            <button type="button" id="submit-loan" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('footer-script')
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
<script>
var previewUrl = "{!! route('cooperativeloan.preview', ['alias' => $alias]) !!}";
var storeUrl = "{!! route('cooperativeloan.store', ['alias' => $alias]) !!}";

function resetReadonlyFields() {
    $('#current_shares, #required_shares, #shortfall_shares, #shortfall_amount, #old_loan_due, #final_payable_amount').val('');
}

function recalcCooperativeLoanPreview() {
    $('#err-final_payable_amount').text('');
    var employeeId = $('#employee_id').val();
    var requestedAmount = $('#requested_amount').val();

    if (!employeeId || !requestedAmount || parseFloat(requestedAmount) <= 0) {
        resetReadonlyFields();
        return;
    }

    $.ajax({
        url: previewUrl,
        type: 'POST',
        data: {
            _token: "{{ csrf_token() }}",
            employee_id: employeeId,
            requested_amount: requestedAmount
        },
        success: function (res) {
            $('#current_shares').val(res.current_shares);
            $('#required_shares').val(res.required_shares);
            $('#shortfall_shares').val(res.shortfall_shares);
            $('#shortfall_amount').val(res.shortfall_amount);
            $('#old_loan_due').val(res.old_loan_due);
            $('#final_payable_amount').val(res.final_payable_amount);

            if (parseFloat(res.final_payable_amount) < 0) {
                $('#err-final_payable_amount').text('Final payable amount is negative. Please adjust the requested amount.');
            }
        },
        error: function (xhr) {
            resetReadonlyFields();
            toastr.error((xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Unable to calculate loan eligibility');
        }
    });
}

$(function () {
    $('#employee_id').on('change', recalcCooperativeLoanPreview);
    $('#requested_amount').on('input change', recalcCooperativeLoanPreview);

    $('#submit-loan').on('click', function () {
        $('.text-danger').text('');

        // Recalculate one final time before submit, per spec Section 2.
        $.ajax({
            url: previewUrl,
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                employee_id: $('#employee_id').val(),
                requested_amount: $('#requested_amount').val()
            },
            success: function () {
                if (parseFloat($('#final_payable_amount').val()) < 0) {
                    toastr.error('Final payable amount cannot be negative.');
                    return;
                }

                var formData = new FormData();
                formData.append('_token', "{{ csrf_token() }}");
                formData.append('employee_id', $('#employee_id').val());
                formData.append('requested_amount', $('#requested_amount').val());
                formData.append('requested_date', $('#requested_date').val());
                formData.append('emi_amount', $('#emi_amount').val());
                formData.append('disbursed_date', $('#disbursed_date').val());
                formData.append('remarks', $('#remarks').val());
                if ($('#attachment')[0].files.length > 0) {
                    formData.append('attachment', $('#attachment')[0].files[0]);
                }

                $.ajax({
                    url: storeUrl,
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        if (res.status === 'fail') {
                            toastr.error(res.message || 'Unable to create loan');
                            return;
                        }

                        toastr.success(res.message || 'Loan created successfully');
                        setTimeout(function () {
                            window.location.href = "{{ url($alias.'/cooperative-loans') }}";
                        }, 800);
                    },
                    error: function (xhr) {
                        if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                            $.each(xhr.responseJSON.errors, function (field, messages) {
                                $('#err-' + field).text(messages[0]);
                            });
                        } else {
                            toastr.error((xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Unable to create loan');
                        }
                    }
                });
            }
        });
    });
});
</script>
@endpush