@extends('layouts.app')

@section('content')
<div class="col-12">

</div>
<div class="col-12">
    <div class="card">
        <div class="card-header">
            <h5 class="title mb-0">Savings</h5>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb"style="background-color: white; padding-left: 2px">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('personnel') }}">Personnel</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('personnel.show', ['id' => $saving->pid ]) }}">{{ $saving->first_name . ' ' . $saving->last_name }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Savings</li>
                </ol>
            </nav>
        </div>
        <div class="card-body all-icons">
            <div class="row">
                <div class="col-6 col-md-3">
                    <div class="card border">
                        <div class="card-body">
                            <small class="text-secondary">PERSONNEL</small>
                            <p>{{ $saving->first_name . ' ' . $saving->last_name }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card border">
                        <div class="card-body">
                            <small class="text-secondary">TOTAL BOND</small>
                            <p>{{ number_format($saving->total_bond, 2) }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card border">
                        <div class="card-body">
                            <small class="text-secondary">LOAN BALANCE</small>
                            <p id="loanBalance">{{ number_format($saving->loan_balance, 2) }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card border">
                        <div class="card-body">
                            <small class="text-secondary">STATUS</small>
                            <p>
                                @if($saving->is_active)
                                    <span class="text-success">ACTIVE</span>
                                @else
                                    <span class="text-danger">INACTIVE</span>
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-100 text-right">
                <a href="{{ route('loan.create', [ 'id' => $pid ]) }}" class="btn btn-primary btn-sm text-white">ADD LOAN</a>
            </div>
            <div class="table-responsive">

                <table class="table">
                    <thead class=" text-primary">
                        <tr>
                            <th>Date</th>
                            <th>Loan Type</th>
                            <th>Amount</th>
                            <th>Deduction Rate</th>
                            <th>Current Balance</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($loans as $loan)
                            <tr>
                                <td>{{ $loan->created_at }} </td>
                                <td>
                                    {{-- @if($loan->type == 1)
                                        SSS
                                    @elseIf($loan->type == 2)
                                        Pag-Ibig
                                    @elseIf($loan->type == 3)
                                        Cash Advance
                                    @else
                                        Office Loan
                                    @endif --}}
                                    {{ $loan->type }}
                                </td>
                                <td>{{ number_format($loan->amount, 2) }} </td>
                                <td>{{ number_format($loan->deduction_rate, 2) }} </td>
                                <td>{{ number_format($loan->current_balance, 2) }} </td>
                                <td id="st{{ $loan->id }}">
                                    @if($loan->is_active)
                                    Active
                                    @else
                                    Inactive
                                    @endif
                                </td>
                                <td id="ac{{ $loan->id }}">
                                    <div id="acdl{{ $loan->id }}" style="display: inline-block">
                                    @if($loan->is_active)
                                        <button type="button" class="px-1 btn btn-danger btn-link btn-sm btnDelete" id="dl{{ $loan->id }}"><i class="fa fa-trash"></i> </button>
                                        @else
                                        <button type="button" class="px-1 btn btn-success btn-link btn-sm btnBack" id="dl{{ $loan->id }}"><i class="fa fa-check"></i> </button>
                                    @endif
                                    </div>
                                    <a style="display: inline-block" href="{{ route('loan.edit', ['id' => $loan->id, 'pid' => $saving->pid ]) }}" class="px-1 btn btn-warning btn-link btn-sm" ><i class="fa fa-edit"></i></a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer">
            <p class="text-secondary">Showing {{ count($loans) }} of {{ $loans->appends(request()->input())->total() }} entries</p>
            {{ $loans->appends(request()->input())->links() }}
        </div>
    </div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="mdlDelConfirmation">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">CONFIRMATION</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body text-secondary">
            <p>Are you sure you want to change this loan status?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">CANCEL</button>
          <button type="button" class="btn btn-success ml-3" id="confirmDelete">Confirm</button>
        </div>
    </div>
</div>

@section('script')
    <script>
        notif = {
                misc: {
                navbar_menu_visible: 0
                },

                showNotification: function(from, align, color, msg) {

                $.notify({
                    icon: "now-ui-icons ui-1_bell-53",
                    message: msg

                }, {
                    type: color,
                    timer: 8000,
                    placement: {
                    from: from,
                    align: align
                    }
                });
                }
            };

        let deletingIndex = 0;
        let deleting = 1;
        $('.btnDelete').click(function() {
            $('#mdlDelConfirmation').modal('show')
            let index = $(this).attr("id");
            deletingIndex = index.substr(2);
            deleting = 1
        })
        $('.btnBack').click(function() {
            $('#mdlDelConfirmation').modal('show')
            let index = $(this).attr("id");
            deletingIndex = index.substr(2);
            deleting = 0
        })

        $('#confirmDelete').click(function() {
            loader();
            $.ajax({
                url : '{{ route( 'loan.status' ) }}',
                data: {
                    '_token': '{{ csrf_token() }}',
                    'id': deletingIndex,
                    'deleting': deleting,
                    'personnel_id': {{ $saving->pid }},
                },
                type: 'post',
                dataType: 'json',
                success: function( result )
                {
                    if(result.code == 200) {
                        if(deleting) {
                            $('#mdlDelConfirmation').modal('hide');
                            $('#st' + deletingIndex).empty()
                            $('#acdl' + deletingIndex).empty()
                            $('#st' + deletingIndex).append('Inactive');
                            $('#acdl' + deletingIndex).append(
                                '<button type="button" class="px-1 btn btn-success btn-link btn-sm btnBack" id="dl' + deletingIndex + '"><i class="fa fa-check"></i> </button>'

                            );
                        } else {
                            $('#mdlDelConfirmation').modal('hide');
                            $('#st' + deletingIndex).empty()
                            $('#acdl' + deletingIndex).empty()
                            $('#st' + deletingIndex).append('Inactive');
                            $('#acdl' + deletingIndex).append(
                                '<button type="button" class="px-1 btn btn-danger btn-link btn-sm btnDelete" id="dl' + deletingIndex + '"><i class="fa fa-trash"></i> </button>'
                            );
                        }

                        $('.btnDelete').click(function() {
                            $('#mdlDelConfirmation').modal('show')
                            let index = $(this).attr("id");
                            deletingIndex = index.substr(2);
                            deleting = 1
                        })
                        $('.btnBack').click(function() {
                            $('#mdlDelConfirmation').modal('show')
                            let index = $(this).attr("id");
                            deletingIndex = index.substr(2);
                            deleting = 0
                        })

                        $('#loanBalance').empty()
                        $('#loanBalance').append(result.updatedBalance);

                        notif.showNotification('top','right', 'success', 'Loan status changed successfully')
                    } else {
                        notif.showNotification('top','right', 'danger', 'Something went wrong. DTR entry was NOT deleted')
                    }
                    unloader();
                },
                error: function()
                {
                    notif.showNotification('top','right', 'danger', 'Something went wrong')
                }
            });
        })
    </script>
@endsection
@endsection