@extends('admin.layout.master')
@section('content')
    @include('flash-message')

    <div class="card sina-card">
        @include('admin.layout.pay_title_header', [
            'title' => __('obs.create_loan'),
            'button_html' =>
                '<a href="' .
                route('payroll.payroll.manage_loan.loan_list') .
                '" class="btn btn-sm btn-light">' .
                __('obs.loan_list') .
                '</a>',
        ])
        <div class="card-body">

            <form class="" action="{{ route('payroll.payroll.manage_loan.loan_store') }}" method="post">
                @csrf
                <input type="hidden" name="emp_total_salary" id="emp_total_salary">
                <input type="hidden" name="type" value="2">

                <div class="row">
                    <div class="col-md-6">
                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label class="labels">{{ __('obs.name') }}/{{ __('obs.id') }}</label>
                            </div>
                            <div class="col-md-7">
                                <select  class="name_code_live_search form-control" name="employee_id" id="employee_id">
                                </select>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label class="labels">{{ __('obs.amount') }}</label>
                            </div>
                            <div class="col-md-7">
                                <input required id="amount" name="amount" class="form-control" type="number">
                            </div>
                        </div>


                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label class="labels">{{ __('obs.number_of_installment') }}</label>
                            </div>
                            <div class="col-md-7">
                                <input required id="installment_no" name="installment_no" class="form-control"
                                    type="number">
                            </div>
                        </div>


                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label class="labels"> {{ __('obs.installment_amount') }}</label>
                            </div>
                            <div class="col-md-7">
                                <input id="installment_amount" name="installment_amount" class="form-control"
                                    type="number">
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label class="labels">{{ __('obs.loan_start_from') }}</label>
                            </div>
                            <div class="col-md-7">
                                <input name="start_month" class="form-control" type="month">
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label for="">{{ __('obs.apply_date') }}</label>
                            </div>
                            <div class="col-md-7">
                                <input name="application_date" id="application_date" class="form-control datepicker"
                                    type="text">
                            </div>
                        </div>


                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label class="labels">{{ __('obs.purpose') }}</label>
                            </div>
                            <div class="col-md-7">
                                <textarea required placeholder="Enter your loan reason" class="form-control" name="purpose" id=""
                                    cols="30" rows="3"></textarea>
                            </div>
                        </div>


                    </div>

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

                        <table class="table" id="resultApplist">
                            <thead>
                                <tr>
                                    <th colspan="4">
                                        <span id="emp_nam">{{ __('obs.employee') }}</span>
                                        {{ __('obs.loan') }} {{ __('obs.history') }}
                                    </th>
                                </tr>
                                <tr>
                                    <th scope="col">{{ __('obs.date') }}</th>
                                    <th scope="col">{{ __('obs.amount') }}</th>
                                    <th scope="col">{{ __('obs.due') }}</th>
                                    <th scope="col">{{ __('obs.status') }}</th>
                                </tr>
                            </thead>
                            <tbody id="loan_body">
                                <tr>
                                    <td colspan="4">{{ __('obs.select_employee_to_see_history') }}</td>
                                </tr>
                            </tbody>
                        </table>

                    </div>

                    <div class="form-group ps-0 pe-3 col-10 text-center mt-3">
                        <input class="btn btn-success px-4" type="submit" value="{{ __('obs.submit') }}">
                    </div>
                </div>
            </form>

        </div>
    @endsection

    @section('script')
        <script src="{{ asset('payroll_assets/payroll_common.js') }}"></script>
        <script>
            $("#employee_id").change(function() {
                var id = $('#employee_id option:selected').attr('value');
                var emp_nam = $('#employee_id option:selected').text();

                $.ajax({
                    type: "GET",
                    url: "/payroll/get-emp-loan-history/" + id,
                    dataType: "json",
                    beforeSend: function() {
                        $('#loan_body').html("please wait...");
                        $('#emp_nam').html(emp_nam);
                    },
                    success: function(response) {

                        $("#emp_total_salary").val(response.emp_info.gross_salary);
                        let loan_sett = '';
                        if (response.loan_policy.length != 0) {
                            $.each(response.loan_policy, function(l_key, l_value) {
                                loan_sett += '<option value="' + l_value.id + '">' + l_value.name +
                                    '</option>';
                            });
                            $("#loan_policy").html(loan_sett);
                        }
                        if (response.loan_history.length == 0) {
                            var data =
                                "<tr><td colspan='4'>{{ __('obs.employee_has_no_history') }}</td></tr>";
                        } else {
                            var data = "";
                            $.each(response.loan_history, function(key, value) {
                                // alert(value.approve_status);
                                let due = value.amount - value.total_installment_amount;
                                let status = '';
                                if (value.approve_status == 2) {
                                    status =
                                        '<span class="badge badge-success" >{{ __('obs.active') }}</span>';
                                } else if (value.approve_status == 1) {
                                    status =
                                        '<span class="badge badge-warning" >{{ __('obs.pending') }}</span>';
                                } else if (value.approve_status == 3) {
                                    status =
                                        '<span class="badge badge-danger" >{{ __('obs.rejected') }}</span>';
                                } else if (value.approve_status == 4) {
                                    status =
                                        '<span class="badge badge-danger" >{{ __('obs.completed') }}</span>';
                                } else if (value.approve_status == 5) {
                                    status =
                                        '<span class="badge badge-secondary" >{{ __('obs.paused') }}</span>';
                                } else {
                                    status = 'unknown'
                                }
                                data = data + '<tr>' +
                                    '<td>' + value.application_date + '</td>' +
                                    '<td>' + value.amount + '</td>' +
                                    '<td>' + due + '</td>' +
                                    '<td> ' + status + ' </td>' +
                                    '</tr>';
                            })
                        }
                        $('#loan_body').html(data);
                    },
                });
            });

            $('.js-example-basic-single').select2();

            $("#installment_no").blur(function() {
                let amount = $("#amount").val();
                let insno = $("#installment_no").val();
                const ia = amount / insno;

                $("#installment_amount").val(Math.round(ia));
            });
        </script>
    @endsection