@extends('layouts.app')
@push('scripts')
    
    <script src="{{ asset('assets/js/signature.js') }}"></script>
	
@endpush
@php
    use Carbon\Carbon;
@endphp

@section('content')
<!-- Begin Page Content -->


<!--Swal Message for errors and success-->
@if(session('success'))
<script>
    Swal.fire('Success', '{{ session('success') }}', 'success');
</script>
@endif

@if($errors->any())
<script>
    Swal.fire('Error', '{{ $errors->first() }}', 'error');
</script>
@endif
<div class="container-fluid">

    <!-- Page Heading -->
    <div>
        <h1 class="h3 mb-2 text-gray-800">Loan Approvals</h1>
        
            <br>
            <hr>
    </div>
    <div class="card" id="profile-card">
        <div class="card-body pt-3">
          <!-- Bordered Tabs -->
          <ul class="nav nav-tabs nav-tabs-bordered">
            <li class="nav-item">
              <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#pending-requests">Pending Requests</button>
            </li>
            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#approved-requests">Approved Loans</button>
            </li>
          </ul>
          <div class="tab-content pt-2">
            <div class="tab-pane fade show active pending-requests" id="pending-requests">
              <h5 class="card-title">Pending Requests</h5>
              <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Member</th>
                            <th>Ref</th>
                            <th>Type</th>                            
                            <th>Amount</th>
                            <th>Monthly Installments</th>
                            <th>Application Date</th>                            
                            <th>Approval Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                   
                    <tbody id="table-body">
                        @foreach($loans as $index => $loan)
                      
                      @if($loan->guarantee_balance == 0 && $loan->loan_status == 'processing')
                      
						<tr class="loan-row" data-loan-id="{{ $loan->id }}">
                            <th>{{ $index + 1 }}</th>
                            <td>{{$loan->user->member_number}}</td>
                            <td>{{$loan->loan_no}}</td>
                            <td>{{ $loan->loanType->name}}</td>
                           
                            <td>{{ number_format($loan->applied_amount) }}</td>
                            <td>{{ number_format($loan->monthly_installment, 2) }}</td>
                            <td>{{ $loan->application_date }}</td>
                            <td><span class="badge bg-info">Pending</span></td>                          
                                                                               
                            <td>                             
                                @if(Auth::user()->hasRole('Treasurer'))
                                    <!-- Click approve to display the signature popup pad for treasurer or chairman -->
                                    <div class="dropdown">
                                        <div class="cursor-pointer font-24 dropdown-toggle " data-bs-toggle="dropdown"><i class='fas fa-ellipsis-h'></i>
                                        </div>
                                        <div class="dropdown-menu dropdown-menu-end"> 
                                            <a class="dropdown-item" href="#" class="view" data-bs-toggle="modal" data-bs-target="#show{{$loan->id}}">View</a>  
                                            <a class="dropdown-item" href="#" class="open-signature-popup" data-bs-toggle="modal" data-bs-target="#signaturePopupModal{{$loan->id}}">Approve</a>                                     
                                            <a class="dropdown-item" href="#" class="reject" data-bs-toggle="modal" data-bs-target="#rejectModal{{$loan->id}}">Reject</a>
                                                                                    
                                        </div>
                                    </div>     
                                    
                           <!-- Treasurer Signature Popup Modal -->
                               
                            <div class="modal fade" id="signaturePopupModal{{$loan->id}}" tabindex="-1" role="dialog" aria-labelledby="signaturePopupModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="signaturePopupModalLabel">Sign and Confirm Approval</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <form action="{{ route('treasurer.approve', $loan->id) }}" method="post" enctype="multipart/form-data"> 
                                            @csrf
                                        <div class="modal-body">
                                            <div class="signature-container">
                                                <canvas id="signatureCanvas" class="signature-canvas border border-dark" style="width: 100%;"></canvas>
                                                <!-- Hidden input field to store the loan ID -->
                                                <input type="hidden" id="loanIdInput" name="loan_id" value="{{ $loan->id }}">

                                                <!-- Hidden input field to store the signature data -->
                                                <input type="hidden" id="signatureDataInput" name="signature_data">
                                                <div class="signature-pointer"></div>
                                                <button id="clearSignatureBtn" class="clear-signature-btn btn btn-secondary mt-2">Clear Signature</button>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button id="confirmSignatureBtn" class="btn btn-success">Confirm</button>
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                        </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                                                  
                            @elseif(Auth::user()->hasRole('HR'))
                                    <!-- Click approve to display the signature popup pad for treasurer or chairman -->
                                    <div class="dropdown">
                                        <div class="cursor-pointer font-24 dropdown-toggle " data-bs-toggle="dropdown"><i class='fas fa-ellipsis-h'></i>
                                        </div>
                                        <div class="dropdown-menu dropdown-menu-end"> 
                                            <a class="dropdown-item" href="#" class="view" data-bs-toggle="modal" data-bs-target="#show{{$loan->id}}">View</a>  
                                            <a class="dropdown-item" href="#" class="open-signature-popup" data-bs-toggle="modal" data-bs-target="#hrPopupModal{{$loan->id}}">Approve</a>                                     
                                            <a class="dropdown-item" href="#" class="reject" data-bs-toggle="modal" data-bs-target="#rejectModal{{$loan->id}}">Reject</a>
                                                                                    
                                        </div>
                                    </div> 
                                    <!-- Chairman Signature Popup Modal -->
                               
                                 <div class="modal fade" id="hrPopupModal{{$loan->id}}" tabindex="-1" role="dialog" aria-labelledby="hrPopupModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="hrPopupModalLabel">Sign and Confirm Approval</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <form action="{{ route('hr.approve', $loan->id) }}" method="post" enctype="multipart/form-data"> 
                                                @csrf
                                            <div class="modal-body">
                                                <div class="signature-container">
                                                    <canvas id="signatureCanvas" class="signature-canvas border border-dark" style="width: 100%;" ></canvas>
                                                    <!-- Hidden input field to store the loan ID -->
                                                    <input type="hidden" id="loanIdInput" name="loan_id" value="{{ $loan->id }}">
    
                                                    <!-- Hidden input field to store the signature data -->
                                                    <input type="hidden" id="signatureDataInput" name="signature_data">
                                                    <div class="signature-pointer"></div>
                                                    
                                                </div>
                                               
                                            </div>
                                            <div class="modal-footer">
                                                <button id="clearSignatureBtn" class="clear-signature-btn btn btn-secondary mt-2">Clear Signature</button>
                                                <button id="confirmSignatureBtn" class="btn btn-success">Confirm</button>
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                            </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>    
                                @elseif(Auth::user()->hasRole('Chairman'))
                                    <!-- Click approve to display the signature popup pad for treasurer or chairman -->
                                    <div class="dropdown">
                                        <div class="cursor-pointer font-24 dropdown-toggle " data-bs-toggle="dropdown"><i class='fas fa-ellipsis-h'></i>
                                        </div>
                                        <div class="dropdown-menu dropdown-menu-end"> 
                                            <a class="dropdown-item" href="#" class="view" data-bs-toggle="modal" data-bs-target="#show{{$loan->id}}">View</a>  
                                            <a class="dropdown-item" href="#" class="open-signature-popup" data-bs-toggle="modal" data-bs-target="#chairmanPopupModal{{$loan->id}}">Approve</a>                                     
                                            <a class="dropdown-item" href="#" class="reject" data-bs-toggle="modal" data-bs-target="#rejectModal{{$loan->id}}">Reject</a>
                                                                                    
                                        </div>
                                    </div> 
                                    <!-- Chairman Signature Popup Modal -->
                               
                                 <div class="modal fade" id="chairmanPopupModal{{$loan->id}}" tabindex="-1" role="dialog" aria-labelledby="chairmanPopupModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="chairmanPopupModalLabel">Sign and Confirm Approval</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <form action="{{ route('chairman.approve', $loan->id) }}" method="post" enctype="multipart/form-data"> 
                                                @csrf
                                            <div class="modal-body">
                                                <div class="signature-container">
                                                    <canvas id="signatureCanvas" class="signature-canvas border border-dark" style="width: 100%;"></canvas>
                                                    <!-- Hidden input field to store the loan ID -->
                                                    <input type="hidden" id="loanIdInput" name="loan_id" value="{{ $loan->id }}">
    
                                                    <!-- Hidden input field to store the signature data -->
                                                    <input type="hidden" id="signatureDataInput" name="signature_data">
                                                    <div class="signature-pointer"></div>
                                                    <button id="clearSignatureBtn" class="clear-signature-btn btn btn-secondary mt-2">Clear Signature</button>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button id="confirmSignatureBtn" class="btn btn-success">Confirm</button>
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                            </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                                                 
                                @endif                                  
                            </td>                         
                        </tr>
                       
                        @endif 
                        @endforeach
                       
                        
                    </tbody>
                </table>
            </div>
            </div>
          </div>
          @foreach($loans as $loan)
          <!--View Modal Scrollable-->
          <div class="modal fade" id="show{{$loan->id}}" tabindex="-1" aria-labelledby="showLabel{{$loan->id}}" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title">View Loan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Loan Details Accordion -->
                        <div class="accordion" id="accordionExample">
                            <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Loan Details
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item"><strong id="loan-titles">Member No:</strong> <span id="loan-details">{{$loan->user->member_number}} </span> </li>
                                        <li class="list-group-item"><strong id="loan-titles">Name:</strong> <span id="loan-details">{{$loan->user->fname}} {{$loan->user->lname}}</span> </li>
                                        <li class="list-group-item"><strong id="loan-titles" class="loan-titles">Reference No:</strong> <span id="loan-details" class="loan-details">{{$loan->loan_no}}</span>   </li>
                                        <li class="list-group-item"><strong id="loan-titles">Loan Type:</strong> <span id="loan-details">{{$loan->loanType->name}} </span> </li>
                                        <li class="list-group-item"><strong id="loan-titles">Loan Amount:</strong> <span id="loan-details">{{number_format($loan->applied_amount)}}</span></li>
                                        <li class="list-group-item"><strong id="loan-titles">Installments:</strong> <span id="loan-details">{{number_format($loan->monthly_installment)}}</span></li>
                                        <li class="list-group-item"><strong id="loan-titles">Date Applied:</strong> <span id="loan-details">{{$loan->application_date}}</span></li>
                                    </ul>
                                </div>
                            </div>
                            </div>
                            <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guarantorDetails" aria-expanded="false" aria-controls="guarantorDetails">
                                Guarantors
                                </button>
                            </h2>
                            <div id="guarantorDetails" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                     
                                <ul class="list-group list-group-flush">
                                    @foreach ($loan->guarantors as $guarantor)
                                    <li class="list-group-item">
                                    <span id="guarantor-name">{{ $guarantor->user->fname }} {{ $guarantor->user->lname }}</span>
                                    <span id="guarantor-amount">{{ number_format($guarantor->guarantee_amount) }}</span>                                            
                                    <span  id="guarantor-status">{{ $guarantor->guarantee_status }}</span>
                                    </li>
                                    @endforeach
                                    @if (empty($loan->guarantors))
                                    <li class="list-group-item">No guarantors found.</li>
                                    @endif                                                
                                </ul>                                        
                                    
                                </div>
                            </div>
                            </div>
                           
                    </div><!-- End Loan Details Accordion -->                            
                </div>
            </div>
            </div>
        </div>  

          @endforeach
          <div class="tab-pane fade pt-3" id="approved-requests">
            <table class="table datatable" id="dataTable">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Member</th>
                    <th scope="col">Ref</th>
                    <th scope="col">Type</th>                            
                    <th scope="col">Amount</th>
                    <th scope="col">Monthly Installments</th>
                    <th scope="col">Date of Approval</th>                                           
                  </tr>
                </thead>
                <tbody>
                    @forEach($approvals as $index => $approval)
                    <tr>
                        <td>{{$index + 1}}</td>
                        <td>{{$approval->loan->user->member_number}}</td>
                        <td>{{$approval->loan->loan_no}}</td>
                        <td>{{ $approval->loan->loanType->name}}</td>                           
                        <td>{{ number_format($approval->loan->applied_amount) }}</td>
                        <td>{{ number_format($approval->loan->monthly_installment, 2) }}</td>
                        <td>{{$approval->approved_at}}</td>
                        
                    </tr>                    

                    @endforeach
                                    
                </tbody>
              </table>
          </div>
        </div>
    </div>
</div>
  @endSection     
        
@pushOnce('scripts')

    @if ($errors->any())
    <script>
        Swal.fire('Error', '{{ $errors->first() }}', 'error');
    </script>
    @endif
 
@endPushOnce