@extends('loans.base')

@section('action-content')
<section class="content">
  <div class="box">
    <div class="box-header">
      <div class="row mb-2">
        <div class="col-sm-8">
          <h3 class="box-title">Loans Management</h3>
        </div>

        {{-- CREATE LOAN BUTTON --}}
        <div class="col-sm-4 text-right">
          <button class="btn btn-primary" data-toggle="modal" data-target="#createLoanModal">
            <i class="fa fa-plus"></i> New Loan
          </button>
        </div>
      </div>

      @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show">
          <i class="fas fa-check-circle"></i> {{ session('success') }}
          <button class="close" data-dismiss="alert">&times;</button>
        </div>
      @endif
    </div>

    <div class="box-body">
      <div class="table-responsive">
        <table id="loansTable" class="table table-bordered table-hover">
          <thead class="thead-dark">
            <tr>
              <th>#</th>
              <th>Client</th>
              <th>Amount</th>
              <th>Interest</th>
              <th>Tenor</th>
              <th>Repayment Start</th>
              <th>Repayment End</th>
              <th>Status</th>
              <th width="160px">Action</th>
            </tr>
          </thead>

          {{-- NOW ONLY MAIN LOAN ROWS INSIDE TBODY — CLEAN! --}}
          <tbody>
@foreach($loans as $loan)
@php
    // Calculate next installment
    $nextInstallment = $loan->repayments()
        ->whereIn('status', ['pending','partial'])
        ->orderBy('installment_number')
        ->first();

    $nextAmount = $nextInstallment
        ? max(($nextInstallment->total_payment - ($nextInstallment->amount_paid ?? 0)), 0)
        : 0;

    // Total remaining (sum of pending/partial - amount paid)
    $totalRemaining = $loan->repayments()
        ->whereIn('status', ['pending','partial'])
        ->sum('total_payment') - $loan->repayments()
        ->whereIn('status', ['pending','partial'])
        ->sum('amount_paid');

    // Outstanding principal
    $outstandingPrincipal = $loan->outstanding_principal;

@endphp
<tr>
    <td>{{ $loop->iteration }}</td>
    <td>{{ $loan->client->surname }} {{ $loan->client->first_name }} ({{ $loan->client->account_number }})</td>
    <td>₵{{ number_format($loan->amount, 2) }}</td>
    <td>{{ $loan->interest_rate }}%</td>
    <td>{{ $loan->tenor_months }} months</td>
    <td>{{ $loan->repayment_start ? date('d M Y', strtotime($loan->repayment_start)) : '—' }}</td>
    <td>{{ $loan->repayment_end ? date('d M Y', strtotime($loan->repayment_end)) : '—' }}</td>
    <td>
        <small>
            <span class="badge badge-{{ $loan->status === 'completed' ? 'success' : ($loan->status === 'disbursed' ? 'primary' : 'secondary') }}">
                {{ ucfirst($loan->status) }}
            </span>
        </small>
        <br>
        @if($loan->approval_status === 'pending')
            <span class="badge badge-warning">Pending Approval</span>
        @elseif($loan->approval_status === 'approved')
            <span class="badge badge-success">Approved</span>
        @elseif($loan->approval_status === 'rejected')
            <span class="badge badge-danger">Rejected</span>
        @endif
        <br>
        <small>Outstanding: ₵{{ number_format($outstandingPrincipal,2) }}</small>
        <br>
        <small>Next Installment: ₵{{ number_format($nextAmount,2) }}</small>
        <br>
        <small>Total Remaining: ₵{{ number_format($totalRemaining,2) }}</small>
    </td>
    <td>
        {{-- View --}}
        <a href="{{ route('loans.show', $loan->id) }}" class="btn btn-info btn-sm" title="View Loan">
            <i class="fa fa-eye"></i>
        </a>

        {{-- Inline Schedule Toggle --}}
        <button class="btn btn-success btn-sm" title="Loan Schedule" onclick="loadSchedule({{ $loan->id }})">
            <i class="fa fa-calendar"></i>
        </button>

        {{-- Edit --}}
        <button class="btn btn-warning btn-sm"
            data-toggle="modal" title="Edit Loan" data-target="#editLoanModal{{ $loan->id }}">
            <i class="fas fa-edit"></i>
        </button>

        {{-- Approve / Reject (Managers & Admin only) --}}
@if(in_array(auth()->user()->role, ['manager', 'admin']) && $loan->approval_status === 'pending')
    <button class="btn btn-success btn-sm approveLoan" data-id="{{ $loan->id }}">
        <i class="fa fa-check"></i> Approve
    </button>
    <button class="btn btn-danger btn-sm rejectLoan" data-id="{{ $loan->id }}">
        <i class="fa fa-times"></i> Reject
    </button>
@endif
    </td>
</tr>
@endforeach
</tbody>

        </table>
      </div>
    </div>
  </div>
</section>

{{-- CREATE LOAN MODAL --}}
@include('loans.partials.create_loan')

{{-- MODAL SCHEDULE --}}
@include('loans.partials.repayment_schedule_modal')

{{-- INLINE SCHEDULE AREA (OUTSIDE DATATABLE) --}}
<div class="container mt-3">
  @foreach($loans as $loan)
      <div id="scheduleBox{{ $loan->id }}" class="p-2 mb-2 border shadow-sm"
        style="display:none; background:#f8f8f8;"></div>
  @endforeach
</div>

@endsection



@section('scripts')

{{-- =============================== --}}
{{--       GLOBAL SWEETALERT POPUPS   --}}
{{-- =============================== --}}

@if(session('success'))
<script>
Swal.fire({
    icon: 'success',
    title: 'Success',
    text: "{{ session('success') }}",
    showConfirmButton: false,
    timer: 2500
});
</script>
@endif

@if(session('error'))
<script>
Swal.fire({
    icon: 'error',
    title: 'Error',
    text: "{{ session('error') }}",
});
</script>
@endif

<script>
$(function(){

    $('#loansTable').DataTable({
        responsive: true,
        pageLength: 10,
        order: [[0, 'asc']],
        "bDestroy": true
    });

// Delete Loan
    $('.btn-delete').click(function(){
        let form = $(this).closest('form');
        Swal.fire({
            title: "Delete Loan?",
            text: "This action is permanent",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, Delete"
        }).then(res => { if(res.isConfirmed) form.submit(); });
    });

     // ===========================
    // Modal Repayment Schedule
    // ===========================
    window.loadSchedule = function(loanId) {
      window.currentLoanId = loanId; // ← MAKE GLOBAL FOR PDF BUTTON
    $("#scheduleClientName").text("Loading...");
    $("#loanAmount").text("");
    $("#loanRate").text("");
    $("#loanTenor").text("");
    $("#totalPaid").text("0.00");
    $("#totalRemaining").text("0.00");
    $("#scheduleBody").html("");

    // ⬇ add Export PDF button inside modal
        $("#exportPdfButton").html(`
            <button class="btn btn-danger" onclick="window.open('/loans/' + loanId + '/export/pdf', '_blank')">
    <i class="fa fa-file-pdf-o"></i> Export PDF
</button>
        `);

    $("#repaymentScheduleModal").modal('show');

    $.get(`/loans/${loanId}/repaymentSchedule`, function(res) {

        // Loan & Client details
        $("#scheduleClientName").text(res.client_name + " (" + res.account_number + ")");
        $("#loanAmount").text(Number(res.amount).toFixed(2));
        $("#loanRate").text(res.rate);
        $("#loanTenor").text(res.tenor);

        // Calculate totals
        let totalPaid = 0;
        let totalRemaining = 0;

        let rows = "";
        res.schedule.forEach(row => {
                let rowClass = (row.status === 'paid') ? 'table-success' : 'table-warning';
                if(row.status === 'paid') totalPaid += parseFloat(row.total_payment);
                else totalRemaining += parseFloat(row.total_payment);

            rows += `
                    <tr id="repaymentRow${row.id}" class="${rowClass}">
                        <td>${row.installment_number}</td>
                        <td>${row.repayment_date}</td>
                        <td>${Number(row.principal).toFixed(2)}</td>
                        <td>${Number(row.interest).toFixed(2)}</td>
                        <td>${Number(row.total_payment).toFixed(2)}</td>
                        <td>${Number(row.remaining_principal).toFixed(2)}</td>
                        <td id="status${row.id}">${row.status.charAt(0).toUpperCase() + row.status.slice(1)}</td>
                        <td>
                            ${row.status === 'pending' 
                    ? `<button class="btn btn-sm btn-success payNowBtn" data-id="${row.id}">Pay Now</button>`
                    : `<a href="/repayment/${row.id}/receipt" target="_blank" class="btn btn-primary btn-sm">
                           <i class="fa fa-print"></i> Receipt
                       </a>`
                            }
                        </td>
                    </tr>
                `;
            });

        $("#scheduleBody").html(rows);
            $("#totalPaid").text(totalPaid.toFixed(2));
            $("#totalRemaining").text(totalRemaining.toFixed(2));
        });
    };

    // ===========================
// PAY NOW BUTTON (AJAX)
// ===========================
$(document).on("click", ".payNowBtn", function () {
    let id = $(this).data("id");

    Swal.fire({
        title: "Confirm Payment",
        text: "Mark this installment as PAID?",
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: "Yes, Pay Now"
    }).then(result => {

        if (result.isConfirmed) {

            $.ajax({
                url: `/loan-repayment/${id}/pay`,
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}"
                },

                success: function (res) {

                    // ---- Update status text ----
                    $("#status" + id).html(`<span class='badge badge-success'>Paid</span>`);

                    // ---- Update row color ----
                    $("#repaymentRow" + id)
                        .removeClass("table-warning")
                        .addClass("table-success");

                    // ---- Replace button with Receipt button ----
                    $(`button[data-id='${id}']`).replaceWith(`
                        <a href="/repayment/${id}/receipt" 
                           target="_blank"
                           class="btn btn-primary btn-sm">
                           <i class="fa fa-print"></i> Receipt
                        </a>
                    `);

                    // ---- Update totals dynamically ----
                    $("#totalPaid").text(Number(res.updatedTotals.totalPaid).toFixed(2));
                    $("#totalRemaining").text(Number(res.updatedTotals.totalRemaining).toFixed(2));

                    Swal.fire("Success", res.message, "success");
                },

                error: function (err) {
                    Swal.fire(
                        "Error",
                        err.responseJSON?.message || "Payment failed",
                        "error"
                    );
                }
            });
        }
    });
});



   // ===========================
    // Pay Now AJAX Handler
    // ===========================
    $(document).on('click', '.payNowBtn', function() {
        let repaymentId = $(this).data('id');
        let button = $(this);

        Swal.fire({
            title: 'Confirm Payment',
            text: "Mark this installment as paid?",
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Yes, Pay Now',
        }).then((result) => {
            if(result.isConfirmed) {

            $.ajax({
                    url: `/repayments/${repaymentId}/pay`,
                    method: 'POST',
                    data: { _token: '{{ csrf_token() }}' },

                    success: function(res){
                        $(`#repaymentRow${repaymentId}`)
                            .removeClass('table-warning')
                            .addClass('table-success');
                        
                        $(`#status${repaymentId}`).text('Paid');
                        button.remove();

                        if(res.updatedTotals){
                            $("#totalPaid").text(Number(res.updatedTotals.totalPaid).toFixed(2));
                            $("#totalRemaining").text(Number(res.updatedTotals.totalRemaining).toFixed(2));
                        }

                        Swal.fire({
                            title: 'Payment Successful',
                            text: res.message,
                            icon: 'success',
                            timer: 1600,
                            showConfirmButton: false
                        });
                    }
                });
            }
        });
    });


// ===================
    // Approve Loan
    // ===================
    $(document).on('click', '.approveLoan', function() {
        let loanId = $(this).data('id');
        let btn = $(this);

        Swal.fire({
            title: 'Approve Loan?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Yes, Approve'
        }).then((result) => {
            if(result.isConfirmed){
                $.post(`/loans/${loanId}/approve`, {_token: '{{ csrf_token() }}'}, function(res){
                    Swal.fire('Approved!', res.message, 'success');
                    btn.closest('tr').find('td:nth-child(8)').html("<span class='badge badge-success'>Approved</span>");
                    btn.next('.rejectLoan').remove(); // remove reject button
                    btn.remove();
                });
            }
        });
    });

    // ===================
    // Reject Loan
    // ===================
    $(document).on('click', '.rejectLoan', function() {
        let loanId = $(this).data('id');
        let btn = $(this);

        Swal.fire({
            title: 'Reject Loan?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, Reject'
        }).then((result) => {
            if(result.isConfirmed){
                $.post(`/loans/${loanId}/reject`, {_token: '{{ csrf_token() }}'}, function(res){
                    Swal.fire('Rejected!', res.message, 'success');
                    btn.closest('tr').find('td:nth-child(8)').html("<span class='badge badge-danger'>Rejected</span>");
                    btn.prev('.approveLoan').remove(); // remove approve button
                    btn.remove();
                });
            }
        });
    });

// ===========================
    // Client Search Dropdown
    // ===========================
    $(document).ready(function(){

    $('#clientDropdown').select2({
        placeholder: 'Type to search client...',
        minimumInputLength: 2,
        ajax: {
            url: "{{ route('clients.search') }}",
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return { q: params.term };
            },
            processResults: function(data) {
                return {
                    results: data
                };
            },
            cache: true
        }
    });

});

// ===========================
    // Auto Calculate End Date
    // ===========================
    $(document).ready(function(){

    function calculateRepaymentEndDate() {
    let startDate = document.getElementById("repayment_start").value;
    let months = document.getElementById("tenor_months").value;

    if (startDate && months > 0) {
        let date = new Date(startDate);
        date.setMonth(date.getMonth() + (parseInt(months)-1));

        document.getElementById("repayment_end").value =
            date.toISOString().split("T")[0];
    }
}

document.getElementById("repayment_start").addEventListener("change", calculateRepaymentEndDate);
document.getElementById("tenor_months").addEventListener("input", calculateRepaymentEndDate);
});


// ===========================
    // ⬇ NEW — EXPORT PDF FUNCTION
    // ===========================
    window.exportPdf = function(loanId){
        window.open(`/loans/${loanId}/export-pdf`, "_blank");
    }



  });
</script>
@endsection