@extends('adminlte::page')

@section('title', 'Add Collection')

@section('plugins.Select2', true)

@section('content_header')

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

    <h1>Add Collection</h1>

    <a href="{{ route('collections.index') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left"></i> Back
    </a>

</div>

@stop

@section('css')

<style>
    .required {
        color: red;
    }

    .card {
        border-radius: 10px;
    }

    .card-header {
        font-weight: bold;
    }

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

    .select2-selection {
        height: 38px !important;
    }

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

    .select2-selection__arrow {
        height: 36px !important;
    }
</style>

@stop

@section('content')

@if ($errors->any())

<div class="alert alert-danger">

    <ul class="mb-0">

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

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

        @endforeach

    </ul>

</div>

@endif

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

    @csrf

    <input type="hidden" name="loan_id" id="loan_id">

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

        <div class="card-header">

            <h3 class="card-title">

                <i class="fas fa-money-bill"></i>

                Collection Information

            </h3>

        </div>

        <div class="card-body">

            <div class="row">

                <div class="col-md-4">
    <div class="form-group">
        <label>Receipt No</label>
        <input type="text"
               name="receipt_no"
               class="form-control"
               value="{{ $receiptNo }}"
               readonly>
    </div>
</div>

                <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 }}">

                                {{ $account->account_no }}

                                -

                                {{ $account->customer_name }}

                                -

                                {{ $account->mobile }}

                            </option>

                            @endforeach

                        </select>

                    </div>

                </div>

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

                    <div class="form-group">

                        <label>

                            Collection Date

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

                        </label>

                        <input

                            type="date"

                            name="collection_date"

                            class="form-control"

                            value="{{ date('Y-m-d') }}"

                            required>

                    </div>

                </div>

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

                    <div class="form-group">

                        <label>

                            Collection Amount

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

                        </label>

                        <input

                            type="number"

                            step="0.01"

                            name="collection_amount"

                            id="collection_amount"

                            class="form-control"

                            required>

                    </div>

                </div>


                <hr class="w-100">

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

                    <div class="form-group">

                        <label>Loan Amount</label>

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

                    </div>

                </div>

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

                    <div class="form-group">

                        <label>Interest Rate</label>

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

                    </div>

                </div>

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

                    <div class="form-group">

                        <label>Loan Date</label>

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

                    </div>

                </div>

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

                    <div class="form-group">

                        <label>Collection Type</label>

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

                    </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>Total Payable</label>

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

                    </div>

                </div>

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

                    <div class="form-group">

                        <label>Principal EMI</label>

                        <input type="text"

                            id="principal_emi"

                            class="form-control"

                            readonly>

                    </div>

                </div>

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

                    <div class="form-group">

                        <label>Interest EMI</label>

                        <input type="text"

                            id="interest_emi"

                            class="form-control"

                            readonly>

                    </div>

                </div>

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

                    <div class="form-group">

                        <label>EMI Amount</label>

                        <input

                            type="text"

                            id="emi_amount"

                            class="form-control"

                            readonly>

                    </div>

                </div>

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

                    <div class="form-group">

                        <label>Paid EMI</label>

                        <input

                            type="text"

                            id="paid_emi"

                            class="form-control"

                            readonly>

                    </div>

                </div>

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

                    <div class="form-group">

                        <label>Remaining EMI</label>

                        <input

                            type="text"

                            id="remaining_emi"

                            class="form-control"

                            readonly>

                    </div>

                </div>

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

                    <div class="form-group">

                        <label>Remaining Amount</label>

                        <input

                            type="text"

                            id="remaining_amount"

                            class="form-control"

                            readonly>

                    </div>

                </div>

                <hr class="w-100">

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

                    <div class="form-group">

                        <label>Interest Amount</label>

                        <input

                            type="text"

                            name="interest_amount"

                            id="interest_amount"

                            class="form-control"

                            readonly>

                    </div>

                </div>

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

                    <div class="form-group">

                        <label>Principal Amount</label>

                        <input

                            type="text"

                            name="principal_amount"

                            id="principal_amount"

                            class="form-control"

                            readonly>

                    </div>

                </div>

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

                    <div class="form-group">

                        <label>Payment Mode</label>

                        <select

                            name="payment_mode"

                            class="form-control">

                            <option>Cash</option>

                            <option>Online</option>

                            <option>Cheque</option>

                        </select>

                    </div>

                </div> -->

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

                    <div class="form-group">

                        <label>Remarks</label>

                        <textarea

                            name="remarks"

                            class="form-control"

                            rows="3"></textarea>

                    </div>

                </div>

            </div>

        </div>

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

            <button class="btn btn-success">

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

                Save Collection

            </button>

        </div>

    </div>

</form>

@stop

@section('js')

<script>
    $(function() {

        $('.select2').select2();

        $('#account_id').change(function() {

            let account = $(this).val();

            if (account == '') return;

            $.ajax({

                url: '/public/collections/get-loan/' + account,

                type: 'GET',

                success: function(data) {

                    $('#loan_id').val(data.id);

                    $('#loan_amount').val(data.loan_amount);

                    $('#interest_rate').val(data.interest_rate);

                    $('#loan_date').val(data.loan_start_date);

                    $('#collection_type').val(data.collection_type);

                    $('#total_interest').val(data.total_interest);

                    $('#total_payable').val(data.total_payable);

                    $('#principal_emi').val(data.principal_emi);

                    $('#interest_emi').val(data.interest_emi);

                    $('#emi_amount').val(data.emi_amount);

                    $('#paid_emi').val(data.paid_emi_count);

                    $('#remaining_emi').val(data.remaining_emi_count);

                    $('#remaining_amount').val(data.remaining_amount);

                }

            });

        });

        $('#collection_amount').keyup(function() {

            let collection = parseFloat($(this).val()) || 0;

            let interest = parseFloat($('#interest_emi').val()) || 0;

            let principal = 0;

            if (collection >= interest) {

                principal = collection - interest;

                interest = interest;

            } else {

                interest = collection;

                principal = 0;

            }

            $('#interest_amount').val(interest.toFixed(2));

            $('#principal_amount').val(principal.toFixed(2));

        });

    });
</script>

@stop