@extends('admin.layouts.app')

@section('content')

@push('styles')
<link rel="stylesheet" href="{{ asset('admin/css/overdue.css') }}">
@endpush


<div class="overdue-page">

    {{-- Header --}}
    <div class="overdue-header">

        <div class="overdue-title">
            <h1>Overdue EMI</h1>

            <p>
                Track overdue installments, fines and payable amounts.
            </p>
        </div>

    </div>


    {{-- Statistics --}}
    <div class="overdue-stats">

        <div class="overdue-stat danger">

            <div class="overdue-stat-label">
                Overdue Installments
            </div>

            <div class="overdue-stat-value">
                {{ number_format($overdueCount) }}
            </div>

        </div>


        <div class="overdue-stat">

            <div class="overdue-stat-label">
                Total Outstanding
            </div>

            <div class="overdue-stat-value">
                {{ money((float) $overdueOutstanding) }}
            </div>

        </div>

    </div>


    {{-- Search --}}
    <div class="overdue-toolbar">

        <form
            method="GET"
            action="{{ route('admin.overdue') }}"
            class="overdue-search"
        >

            <input
                type="text"
                name="search"
                value="{{ request('search') }}"
                placeholder="Search client name, mobile or loan number..."
            >

            <button type="submit">
                Search
            </button>

        </form>

    </div>


    {{-- Table --}}
    <div class="overdue-table-wrap">

        @if($installments->count())

            <table class="overdue-table">

                <thead>
                    <tr>

                        <th>Client</th>

                        <th>Loan</th>

                        <th>EMI</th>

                        <th>Due Date</th>

                        <th>Overdue</th>

                        <th>Outstanding</th>

                        <th>Fine</th>

                        <th>Total Payable</th>

                        <th>Action</th>

                    </tr>
                </thead>

                <tbody>

                    @foreach($installments as $installment)

                        <tr>

                            {{-- Client --}}
                            <td>

                                <div class="client-name">
                                    {{ $installment->loan?->user?->name ?? 'Unknown' }}
                                </div>

                                <div class="loan-number">
                                    {{ $installment->loan?->user?->mobile ?? '' }}
                                </div>

                            </td>


                            {{-- Loan --}}
                            <td>

                                <div class="client-name">
                                    {{ $installment->loan?->loan_number ?? '—' }}
                                </div>

                            </td>


                            {{-- EMI --}}
                            <td>

                                #{{ $installment->installment_number }}

                                <div class="loan-number">
                                    {{ money((float) $installment->emi_amount) }}
                                </div>

                            </td>


                            {{-- Due Date --}}
                            <td>
                                {{ optional($installment->due_date)->format('d M Y') }}
                            </td>


                            {{-- Days --}}
                            <td>

                                <span class="overdue-badge">
                                    {{ $installment->overdue_days }}
                                    {{ $installment->overdue_days == 1 ? 'day' : 'days' }}
                                </span>

                            </td>


                            {{-- Outstanding --}}
                            <td>
                                {{ money((float) $installment->outstanding_amount) }}
                            </td>


                            {{-- Fine --}}
                            <td>

                                @if($installment->fine_amount > 0)

                                    <span class="fine-value">
                                        {{ money((float) $installment->fine_amount) }}
                                    </span>

                                @else
                                    —
                                @endif

                            </td>


                            {{-- Total --}}
                            <td>

                                <span class="total-value">
                                    {{ money((float) $installment->total_payable) }}
                                </span>

                            </td>


                            {{-- Action --}}
                            <td>

                                <button
                                    type="button"
                                    class="pay-btn"
                                    onclick="openOverduePayment({{ $installment->id }})"
                                >
                                    Pay Overdue
                                </button>

                                <div id="overdue-payment-{{ $installment->id }}" class="overdue-modal">

                                    <div class="overdue-modal-backdrop"
                                         onclick="closeOverduePayment({{ $installment->id }})"></div>

                                    <div class="overdue-modal-card">

                                        <div class="overdue-modal-header">
                                            <div>
                                                <h3>Pay Overdue EMI</h3>
                                                <p>
                                                    {{ $installment->loan?->user?->name ?? 'Unknown' }}
                                                    · EMI #{{ $installment->installment_number }}
                                                </p>
                                            </div>

                                            <button type="button"
                                                    class="overdue-modal-close"
                                                    onclick="closeOverduePayment({{ $installment->id }})">
                                                ×
                                            </button>
                                        </div>

                                        <div class="overdue-payment-summary">
                                            <div>
                                                <span>EMI Outstanding</span>
                                                <strong>{{ money((float) $installment->outstanding_amount) }}</strong>
                                            </div>

                                            <div>
                                                <span>Fine</span>
                                                <strong class="fine-value">
                                                    {{ money((float) $installment->fine_amount) }}
                                                </strong>
                                            </div>

                                            <div class="payable">
                                                <span>Total Payable</span>
                                                <strong>{{ money((float) $installment->total_payable) }}</strong>
                                            </div>
                                        </div>

                                        <form method="POST"
                                              action="{{ route(
                                                  'admin.loans.pay-overdue',
                                                  [
                                                      'loan' => $installment->loan,
                                                      'installment' => $installment
                                                  ]
                                              ) }}">
                                            @csrf

                                            <div class="overdue-form-group">
                                                <label>Payment Amount</label>
                                                <input type="number"
                                                       name="amount"
                                                       min="0.01"
                                                       max="{{ (float) $installment->total_payable }}"
                                                       step="0.01"
                                                       value="{{ (float) $installment->total_payable }}"
                                                       required>
                                            </div>

                                            <div class="overdue-form-group">
                                                <label>Payment Method</label>
                                                <select name="payment_method" required>
                                                    <option value="">Select payment method</option>
                                                    <option value="cash">Cash</option>
                                                    <option value="upi">UPI</option>
                                                    <option value="bank_transfer">Bank Transfer</option>
                                                </select>
                                            </div>

                                            <div class="overdue-form-group">
                                                <label>Reference Number</label>
                                                <input type="text"
                                                       name="reference_number"
                                                       maxlength="255"
                                                       placeholder="Optional">
                                            </div>

                                            <div class="overdue-form-group">
                                                <label>Remarks</label>
                                                <textarea name="remarks"
                                                          maxlength="2000"
                                                          rows="3"
                                                          placeholder="Optional"></textarea>
                                            </div>

                                            <div class="overdue-modal-actions">
                                                <button type="button"
                                                        class="overdue-cancel-btn"
                                                        onclick="closeOverduePayment({{ $installment->id }})">
                                                    Cancel
                                                </button>

                                                <button type="submit" class="overdue-submit-btn">
                                                    Record Payment
                                                </button>
                                            </div>
                                        </form>

                                    </div>
                                </div>

                            </td>

                        </tr>

                    @endforeach

                </tbody>

            </table>


            <div class="pagination-wrap">
                {{ $installments->links() }}
            </div>

        @else

            <div class="empty-overdue">

                <div class="empty-overdue-icon">
                    ✓
                </div>

                <strong>
                    No overdue EMI
                </strong>

                <div>
                    There are currently no overdue installments.
                </div>

            </div>

        @endif

    </div>

</div>

<script>
    function openOverduePayment(id) {
        const modal = document.getElementById('overdue-payment-' + id);

        if (modal) {
            modal.classList.add('show');
            document.body.style.overflow = 'hidden';
        }
    }

    function closeOverduePayment(id) {
        const modal = document.getElementById('overdue-payment-' + id);

        if (modal) {
            modal.classList.remove('show');
            document.body.style.overflow = '';
        }
    }
</script>

@endsection