@extends('admin.layout.master')
@section('custom_style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
@endsection
@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
    </div>
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h5 class="font-weight-bold mb-0">Loan list</h5>
            </div>
            <div>
                <a href="{{route('loan.create')}}" class="btn btn-sm btn-primary">Add Loan</a>
            </div>
        </div>
        <div class="card-body">
            <form id="filterform" class="d-flex flex-wrap" action="{{route('loan.filter')}}" method="GET">
                <div class="col-12 col-md-4 mb-3 px-1">
                    <label for="">Employee code</label>
                    <input value="{{request('emp_code')}}" class="form-control" type="number" name="emp_code">
                </div>
                <div class="col-12 col-md-4 mb-3 px-1">
                    <label for="">Department</label>
                    <select class="form-control" name="department" id="">
                        <option disable selected value="">Select Dept.</option>
                        @foreach ($departments as $d)
                            <option
                                {{request('department') == $d->id ? 'selected' : ''}}
                                value="{{$d->id}}">{{$d->name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-4 mb-3 px-1">
                    <label for="">Status</label>
                    <select class="form-control" name="status" id="">
                        <option disable selected value="">select status</option>
                        <option {{request('approve_status') == 2 ? 'selected' : ''}} value="1">Approved</option>
                        <option {{request('approve_status') == 1 ? 'selected' : ''}} value="2">Pending</option>
                        <option {{request('approve_status') == 3 ? 'selected' : ''}} value="3">Reject</option>
                        <option {{request('approve_status') == 4 ? 'selected' : ''}} value="4">Completed</option>
                        <option {{request('approve_status') == 5 ? 'selected' : ''}} value="5">Paused</option>
                    </select>
                </div>
                <div class="col-12 col-md-4 mb-3 px-1">
                    <label for="">From Date</label>
                    <input value="{{request('from_date')}}" class="form-control" type="date" name="from_date">
                </div>
                <div class="col-12 col-md-4 mb-3 px-1">
                    <label for="">To Date</label>
                    <input value="{{request('to_date')}}" class="form-control" type="date" name="to_date">
                </div>
                <div class="col-12 col-md-3 mb-3 px-1">
                    <button type="submit" class="btn w-100 btn-primary mt-4">Filter</button>
                </div>
                <div class="col-12 col-md-1 mb-3 px-1">
                    <button class="empty btn w-100 btn-warning mt-4" type="button">Reset</button>
                </div>
            </form>
            <div>
                <table class="table table-hover table-bordered mt-3">
                    <thead class="thead-dark">
                    <tr>
                        <th>Emp Name</th>
                        <th>Emp Code</th>
                        <th>Dept.</th>
                        <th>amount</th>
                        <th>due</th>
                        <th>apply at</th>
                        <th>approve at</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if(!empty($loans))
                        @foreach ($loans as $l)
                            <tr>
                                <td>{{$l->empinfo->emp_name}}</td>
                                <td>{{$l->empinfo->emp_code}}</td>
                                <td>{{$l->empinfo->fetch_department->name}}</td>
                                <td>{{$l->amount}}</td>
                                <td>{{$l->amount - $l->total_installment_amount}}</td>
                                <td>{{$l->application_date}}</td>
                                <td>{{$l->disburse_date}}</td>
                                <td>
                                <span class="{{
                                            $l->approve_status == 2 ? 'badge badge-success' :
                                            ($l->approve_status == 1 ? 'badge badge-warning' :
                                            ($l->approve_status == 3 ? 'badge badge-danger' :
                                            ($l->approve_status == 4 ? 'badge badge-primary' : 'badge badge-secondary'
                                            ) ))}}

                                    px-2 py-1">
                                        {{
                                            $l->approve_status == 2 ? 'Active' :
                                            ($l->approve_status == 1 ? 'Pending' :
                                            ($l->approve_status == 3 ? 'Rejected' :
                                            ($l->approve_status == 4 ? 'Completed' : 'Paused'

                                            )) )}}
                                </span>
                                </td>
                                <td>
                                    <div class="d-flex">
                                        @if ($l->approve_status == 2)
                                            <a target="_blank" title="Pay Loan" data-toggle="tooltip"
                                               data-placement="top" onclick="loan_payment({{$l->id}})"
                                               class="btn btn-primary mr-1">
                                                <i class="fadeIn animated bx bx-money"></i>
                                            </a>
                                        @endif
                                        @if ($l->approve_status != 2 && $l->approve_status != 4 && $l->approve_status != 5)
                                            <a target="_blank" title="Edit Loan" data-toggle="tooltip"
                                               data-placement="top"
                                               href="{{route('loan.edit',[$l->id])}}" class="btn btn-primary mr-1">
                                                <i class="fadeIn animated bx bx-edit-alt"></i>
                                            </a>
                                        @endif
                                        <a target="_blank" title="View Loan" data-toggle="tooltip" data-placement="top"
                                           href="{{route('loan.view',[$l->id])}}" class="btn btn-info mr-1">
                                            <i class='bx bx-detail'></i>
                                        </a>
                                        @if ($l->approve_status == 2)
                                            <button title="Loan Pause" type="button" data-toggle="tooltip"
                                                    data-placement="top"
                                                    onclick="loanpause({{$l->id}})" class="btn btn-warning mr-1">
                                                <i class='bx bx-pause'></i></button>
                                        @endif
                                        @if ($l->approve_status == 5)
                                            <button title="Loan Re-active" type="button" data-toggle="tooltip"
                                                    data-placement="top"
                                                    onclick="loanreactive({{$l->id}})" class="btn btn-success mr-1">
                                                <i class='bx bx-play'></i></button>
                                        @endif
                                        @if ($l->approve_status == 1)
                                            @if (  $l->start_month )
                                                @include('admin.mapping_blade.mapping', ['approve_status' => $l->approve_status, 'approvals' =>$l->approvals,'action_id'=>8,'cost_center_id'=>1,'item_id'=>$l->id,'model_name'=>"App\\\Models\\\Payroll\\\LoanAdvance\\\PayLoanAdvTakens"])
                                                {{-- <button onclick="loanapproveModal({{$l->id}})" class="btn btn-success mr-1">
                                                 <i class='bx bx-check-double'></i></button>
                                         @else
                                             <button title="Approve Loan" type="button" data-toggle="tooltip"
                                                     data-placement="top"
                                                     onclick="reviewmonth({{$l->id}})" class="btn btn-warning mr-1">
                                                 <i class='bx bx-check-double'></i></button>--}}
                                            @endif
                                        @endif
                                        @if ($l->approve_status == 2)
                                            <button title="Reject loan" type="button" data-toggle="tooltip"
                                                    data-placement="top"
                                                    onclick="loanreject({{$l->id}})" class="btn btn-danger mr-1">
                                                <i class='bx bx-x'></i></button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @include('payroll.loan_advance.loan.loan_payment_modal')
    @include('payroll.loan_advance.loan.loan_approve_modal')
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })

        function loan_payment(loan_id) {
            let method = "POST";
            let url = li + 'get-loan-info';
            let data = {loan_id: loan_id};

            ajaxSetup(function (response) {
                swal.close();
                $("#loanPayment").modal('show');
                $("#loan_id").val(response.id);
                $("#total_loan_amount").text(response.amount);
                $("#installment_no").text(response.installment_no);
                $("#installment_amount").text(response.installment_amount);
                $("#total_adjusted_loan").text(response.total_adjusted_amount);
                $("#total_adjusted_installment").text(response.total_adjusted_installment_no);
                $("#remaining_installment").text(Number(response.installment_no) - Number(response.total_adjusted_installment_no));
            }, method, url, data);
        }

        function submit_payment() {
            let loan_id = $("#loan_id").val();
            let installment_no = $("#paid_installment_no").val();
            let remaining_installment = Number($("#remaining_installment").text());

            if (remaining_installment >= installment_no) {
                let method = "POST";
                let url = li + 'paid_loan-installment';
                let data = {loan_id: loan_id, installment_no: installment_no};

                ajaxSetup(function (response) {
                    swal.close();

                    swal.fire({
                        icon: response.icon,
                        html: '<h5>' + response.mesg + '</h5>'
                    });
                    window.location.reload();
                }, method, url, data);
            } else {
                swal.fire({
                    icon: 'danger',
                    html: '<h5>Remaining Installment Must be Equal or Greater!!!</h5>'
                });

            }
        }

        // loan aoorove start
        function loanapproveModal(id) {
            $("#loan_approveModal").modal('show');
            $("#loan_id").val(id);
        }

        function loanapprove() {
            let id = $("#loan_id").val();
            let approve_date = $("#approve_date").val();

            if (approve_date !== '' && approve_date != 0) {
                $.confirm({
                    title: 'Are you sure?',
                    content: 'If you click approve then this loan will on approve state',
                    type: 'green',
                    typeAnimated: true,
                    buttons: {
                        tryAgain: {
                            text: 'Approve',
                            btnClass: 'btn-green',
                            action: function () {
                                window.location.href = '{{ route('loan.approve') }}/' + id + '/' + approve_date;
                            }
                        },
                        close: function () {
                        }
                    }
                });
            } else {
                console.log("Please Select Approve Date");
            }
        }

        // loan aoorove end

        // review start
        function reviewmonth(id) {
            $.confirm({
                title: 'Please Review Start Month',
                content: 'From edit option please fix the loan start month, then you can approve',
                type: 'yellow',
                typeAnimated: true,
                buttons: {
                    close: function () {
                    }
                }
            });
        }

        // review end

        // loan aoorove start
        function loanreactive(id) {
            $.confirm({
                title: 'Are you sure?',
                content: 'If you click approve then this loan will on Re-active state',
                type: 'green',
                typeAnimated: true,
                buttons: {
                    tryAgain: {
                        text: 'Re-active',
                        btnClass: 'btn-green',
                        action: function () {
                            window.location.href = '{{ route('loan.approve') }}/' + id;
                        }
                    },
                    close: function () {
                    }
                }
            });
        }

        // loan aoorove end

        // loan reject start
        function loanreject(id) {
            $.confirm({
                title: 'Are you sure?',
                content: 'If you click reject then this loan will on reject state',
                type: 'red',
                typeAnimated: true,
                buttons: {
                    tryAgain: {
                        text: 'Reject',
                        btnClass: 'btn-red',
                        action: function () {
                            window.location.href = '{{ route('loan.reject') }}/' + id;
                        }
                    },
                    close: function () {
                    }
                }
            });
        }

        // loan reject end

        // loan pause start
        function loanpause(id) {
            $.confirm({
                title: 'Are you sure?',
                content: 'If you click pause then this loan will on reject state',
                type: 'red',
                typeAnimated: true,
                buttons: {
                    tryAgain: {
                        text: 'Pause',
                        btnClass: 'btn-red',
                        action: function () {
                            window.location.href = '{{ route('loan.pause') }}/' + id;
                        }
                    },
                    close: function () {
                    }
                }
            });
        }

        // loan pause end

        $(".empty").click(function () {

            $(this).closest('form').find("input[type=number], input[type=date], select").val("");
        });
    </script>

@endsection