@extends('admin.layout.master')
@section('home')

    <div class="col-12">
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger" id="hide-alert">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>

    <div class="card">
        <div class="card-header">Create Loan</div>
        <div class="card-body">
            <div class="d-flex flex-wrap">
                <form class="leave-form col-12 col-md-6 px-md-0 border-right" action="{{route('loan.store')}}"
                      method="post">
                    @csrf
                    <div class="d-flex flex-wrap">
                        <div class="form-group col-12 col-md-6">
                            <label class="labels">Select employee</label>
                            <select id="emp_select" class="name_live_search form-control" name="emp_id">
                                <option selected disabled value="">Select employee</option>
                                @foreach ($employes as $e)
                                    <option value="{{$e->id}}">{{$e->emp_name}}-{{$e->emp_code}}</option>
                                @endforeach
                            </select>
                            <input type="hidden" name="emp_total_salary" id="emp_total_salary">
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label class="labels">Select Policy</label>
                            <select id="loan_policy" class="js-example-basic-single form-control" name="loan_policy">
                            </select>
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label class="labels">Amount</label>
                            <input required id="amount" name="amount" class="form-control" type="number">
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label class="labels">No. of installment</label>
                            <input required id="installment_no" name="installment_no" class="form-control"
                                   type="number">
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label class="labels">Installment Amount</label>
                            <input id="installment_amount" name="installment_amount" class="form-control"
                                   type="number">
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label class="labels">Loan Start From</label>
                            <input name="start_month" class="form-control" type="month">
                        </div>
                        {{-- //=========== Not need Now by ismail vai =========//
                        <div class="form-group col-12 col-md-6">
                            <label>Select Ware House</label>
                            <select id="ware_id" class="js-example-basic-single form-control" name="ware_id">
                                <option selected value="">Select Ware House</option>
                                @foreach ($warehouses as $wh)
                                    <option value="{{$wh->id}}">{{$wh->name_eng}}</option>
                                @endforeach
                            </select>
                        </div>--}}
                        <div class="form-group col-12 col-md-6">
                            <label>Select Cost Center</label>
                            <select id="cost_center_id" class="js-example-basic-single form-control" name="cost_center_id">
                                <option value="0">Select Cost Center</option>
                                @foreach ($costcenters as $cs)
                                    <option value="{{$cs->id}}">{{$cs->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label for="">Apply Date</label>
                            <input name="application_date" id="application_date" class="form-control datepicker" type="text">
                        </div>
                        <div class="form-group col-12">
                            <label class="labels">Purpose</label>
                            <textarea required placeholder="enter your loan reason" class="form-control" name="purpose"
                                      id="" cols="30" rows="3"></textarea>
                        </div>
                        <div class="form-group col-12">
                            <label>Note</label>
                            <textarea placeholder="if any (optional)" class="form-control" name="note" id="" cols="30"
                                      rows="3"></textarea>
                        </div>
                        <div class="form-group col-12">
                            <input class="btn btn-success px-4" type="submit" value="Create">
                        </div>
                    </div>
                </form>
                <div class="col-md-6 col-12 px-md-0">
                    <table class="table" id="resultApplist">
                        <thead>
                        <tr>
                            <th colspan="4"><span id="emp_nam">Employee </span>Loan History</th>
                        </tr>
                        <tr>
                            <th scope="col">Date</th>
                            <th scope="col">Amount</th>
                            <th scope="col">Due</th>
                            <th scope="col">Status</th>
                        </tr>
                        </thead>
                        <tbody id="loan_body">
                        <tr>
                            <td colspan="4">Select employee to see history</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $("#emp_select").change(function () {
            var id = $('#emp_select option:selected').attr('value');
            var emp_nam = $('#emp_select option:selected').text();

            $.ajax({
                type: "GET",
                url: "/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 = '<option selected disabled value="">Select employee</option>';
                    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'>employee has no history</td></tr>";
                    } else {
                        var data = "";
                        $.each(response.loan_history, function (key, value) {
                            let due = value.amount - value.total_installment_amount;
                            let status = '';
                            if (value.status == 1) {
                                status = '<span class="badge badge-success" >Active</span>';
                            } else if (value.status == 2) {
                                status = '<span class="badge badge-warning" >Pending</span>';
                            } else if (value.status == 3) {
                                status = '<span class="badge badge-danger" >Rejected</span>';
                            } else if (value.status == 4) {
                                status = '<span class="badge badge-danger" >Completed</span>';
                            } else if (value.status == 5) {
                                status = '<span class="badge badge-secondary" >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