@extends('layouts.master')
@section('content')

<div class="app-page-title">
    <div class="page-title-wrapper">
        <div class="page-title-heading">
            <div class="page-title-icon">
                <i class="pe-7s-medal icon-gradient bg-tempting-azure"></i>
            </div>
            <div>
                {{ $title }}
                <div class="page-title-subheading">A list of loans.</div>
            </div>


        </div>

    </div>
    @if(isset($error) || session('error'))
    <div class="alert alert-danger">
        {{ $error ?? session('error') }}
    </div>
    @endif

    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif
</div>

<div class="main-card mb-3 card">
    <div class="card-body">
       
        <ul class="nav nav-tabs nav-justified">
            <li class="nav-item">
                <a data-bs-toggle="tab" href="#tab-eg11-0" class="active nav-link"><h6 class="card-title">Running Loans</h6></a>
            </li>
            <li class="nav-item">
                <a data-bs-toggle="tab" href="#tab-eg11-1" class="nav-link"><h6 class="card-title">Settled Loans</h6></a>
            </li>
            
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab-eg11-0" role="tabpanel">
                <table style="width: 100%;" id="dataTableActiveLoans" class="display nowrap table table-hover table-striped table-bordered">


                    <thead>
                        <tr>
                            <th>Emp No</th>
                            <th>Employee Name</th>
                            <th>Loan Name</th>
                            <th>Loan Amount</th>
                            
                            <th>Balance</th>
                            <th>Monthly Instalment</th>
                            <th>Start Date</th>
                           
                            <th>Tenure</th>
                            <th>Last Payment Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($pamActiveLoans as $item)
                        @if($item->pamEmp)
                        <tr>
                            <td>{{ $item->pamEmp->pamHRUser->man_number ? $item->pamEmp->pamHRUser->man_number : '' }}</td>
                            <td>{{ $item->pamEmp->pamHRUser->name }} </td>
                            <td>{{ $item->pamDeduDef->short_description }}</td>
                            <td>{{ $item->loan_amount }}</td>
                          
                            <td>{{ $item->loan_balance_amount}}</td>
                            <td>{{ $item->monthly_instalment}}</td>
                            <td>{{ $item->start_date}}</td>
                            
                            <td>{{ $item->tenure}}</td>
                            <td>{{ $item->last_payment_date}}</td>
                            <td style="text-align: right;">
                            @if(auth()->user()->roles->first()->permissions->contains('name', 'Run payrolls'))
                             
                                <a href="{{ route('pam-loans.payments', $item->id) }}"
                            class="btn cur-p btn-primary btn-color">Payments</a>
                                @endif

                                @if(auth()->user()->roles->first()->permissions->contains('name', 'Run payrolls') )
                     
                                <a data-bs-toggle="modal" data-bs-target="#settleLoanModal-{{$item->id}}" class="btn cur-p btn-success btn-color">Settle
                                </a>
                                @endif
                            </td>
                        </tr>
                        @endif
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="tab-pane" id="tab-eg11-1" role="tabpanel">

                <table style="width: 100%;" id="dataTablePaidLoans" class="display nowrap table table-hover table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Emp No</th>
                            <th>Employee Name</th>
                            <th>Loan Name</th>
                            <th>Loan Amount</th>
                            <th>Balance</th>
                            <th>Monthly Instalment</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Tenure</th>
                            <th>Last Payement Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($pamSettledLoans as $item)
                        @if($item->pamEmp)
                        <tr>
                            <td>{{ $item->pamEmp->pamHRUser->man_number }}</td>
                            <td>{{ $item->pamEmp->pamHRUser->name}} </td>
                            <td>{{ $item->pamDeduDef->short_description }}</td>
                            <td>{{ $item->loan_amount }}</td>
                            <td>{{ $item->loan_balance_amount}}</td>
                            <td>{{ $item->monthly_instalment}}</td>
                            <td>{{ $item->start_date}}</td>
                            <td>{{ $item->end_date}}</td>
                            <td>{{ $item->tenure}}</td>
                            <td>{{ $item->last_payment_date}}</td>
                            <td style="text-align: right;">
                            
                        <a href="{{ route('pam-loans.payments', $item->id) }}"
                            class="btn cur-p btn-primary btn-color">Payments</a>
                            </td>
                        </tr>
                        @endif
                        @endforeach
                    </tbody>
                </table>
            </div>
            
        </div>
    </div>
</div>
@endsection

@section('modal')

@foreach ($pamActiveLoans as $key => $item)
<div class="modal fade" id="settleLoanModal-{{$item->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">SETTLE {{ strtoupper($item->pamDeduDef->short_description)}} FOR {{$item->pamEmp->first_name}} {{$item->pamEmp->last_name}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
            <form method="post" action="{{ route('pam-loans.settle') }}">
                      @csrf
                    @method('POST')
                    <input type="hidden" name="id" id="id" value="{{ $item->id }}">
                  
                    <div class="position-relative row mb-1">
                        <label class="form-label col-sm-4 col-form-label">Employee Name :</label>
                        <div class="form-label col-sm-8 col-form-label">
                            {{$item->pamEmp->pamHRUser->name}} 
                        </div>
                    </div>
                    <div class="position-relative row mb-1">
                        <label for="id2" class="form-label col-sm-4 col-form-label">Employee Number :</label>
                        <div class="form-label col-sm-8 col-form-label">
                            {{$item->pamEmp->pamHRUser->man_number}}
                        </div>
                    </div>
                    <div class="position-relative row mb-1">
                        <label for="id3" class="form-label col-sm-4 col-form-label">Loan Name :</label>
                        <div class="form-label col-sm-8 col-form-label">
                            {{strtoupper($item->pamDeduDef->short_description)}}
                        </div>
                    </div>
                    <div class="position-relative row mb-1">
                        <label for="id4" class="form-label col-sm-4 col-form-label">Start Date :</label>
                        <div class="form-label col-sm-8 col-form-label">
                            {{strtoupper($item->start_date)}}
                        </div>
                    </div>
                    <div class="position-relative row mb-1">
                        <label for="id5" class="form-label col-sm-4 col-form-label">Tenure :</label>
                        <div class="form-label col-sm-8 col-form-label">
                            {{strtoupper($item->tenure)}}
                        </div>
                    </div>
                    <div class="position-relative row mb-1">
                        <label for="id6" class="form-label col-sm-4 col-form-label">Loan Amount :</label>
                        <div class="form-label col-sm-8 col-form-label">
                            {{strtoupper($item->loan_amount)}}
                        </div>
                    </div>
                    <div class="position-relative row mb-1">
                        <label for="id7" class="form-label col-sm-4 col-form-label">Loan Paid :</label>
                        <div class="form-label col-sm-8 col-form-label">
                            {{strtoupper($item->total_paid_to_date)}}
                        </div>
                    </div>
                    <div class="position-relative row mb-1">
                        <label for="id8" class="form-label col-sm-4 col-form-label">Loan Balance :</label>
                        <div class="form-label col-sm-8 col-form-label">
                            {{strtoupper($item->loan_balance_amount)}}
                        </div>
                    </div>
                    <div class="position-relative row mb-1">
                        <label for="id9" class="form-label col-sm-4 col-form-label">Monthly Instalment :</label>
                        <div class="form-label col-sm-8 col-form-label">
                            {{strtoupper($item->monthly_instalment)}}
                        </div>
                    </div>
                    <div class="position-relative row mb-1">
                        <label for="payment_reference" class="form-label col-sm-4 col-form-label">Payment Reference<span class="text-danger">*</span> :</label>
                        <div class="col-sm-8">
                            <input name="payment_reference"  id="payment_reference" placeholder="Enter Receipt Number" type="text" class="form-control">
                        </div>
                    </div>

                    <div class="position-relative row mb-1">
                        <label for="input_amount" class="form-label col-sm-4 col-form-label">Amount<span class="text-danger">*</span> :</label>
                        <div class="col-sm-8">
                            <input name="input_amount" value="{{$item->loan_balance_amount}}" id="input_amount" placeholder="Enter Amount" type="number" step=0.01 class="form-control">
                        </div>
                    </div>

                    <div class="position-relative row mb-3">
                        <div class="col-sm-8 offset-sm-4">
                            <button class="btn btn-secondary">Pay</button>
                        </div>
                    </div>
                   
                            <ul>
                                <li>Fields marked with <span class="text-danger">*</span> are required.</li>
                                <li>Click the <strong>Pay</strong> button to settle the loan.</li>
                            </ul>
                   
                </form>
            </div>

        </div>
    </div>
</div>
@endforeach
@endsection
@section('scripts')
@if(!$pamActiveLoans)
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Function to validate input amount
        function validateInputAmount() {
            var inputAmount = parseFloat(document.getElementById('input_amount').value);
            var loanBalance = parseFloat("{{$item->loan_balance_amount}}");

            if (isNaN(inputAmount) || inputAmount <= 0 || inputAmount > loanBalance) {
                alert('Please enter a valid amount that is less than or equal to the loan balance.');
                return false;
            }

            return true;
        }

        // Attach the validation function to the form submission
        document.querySelector('form').addEventListener('submit', function (event) {
            if (!validateInputAmount()) {
                event.preventDefault(); // Prevent form submission if validation fails
            }
        });
    });
</script>
@endif
@endsection