@extends('backend.master')
@section('title','User Installments')

@section('content')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"/>

<style>
    :root{
        --primary:#e53935;
        --success:#16a34a;
        --danger:#dc2626;
        --bg:#f5f5f5;
    }

    body{
        background:var(--bg);
        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    }

    .page-wrap{
        padding:10px 12px 40px;
    }

    .top-bar{
        display:flex;
        justify-content:space-between;
        align-items:center;
        flex-wrap:wrap;
        gap:10px;
        margin-bottom:14px;
    }

    .page-title{
        font-size:20px;
        font-weight:700;
        color:#111827;
        display:flex;
        align-items:center;
        gap:8px;
    }

    .page-title i{
        color:var(--primary);
    }

    .back-btn{
        border:1px solid #e5e7eb;
        background:#fff;
        color:#374151;
        text-decoration:none;
        border-radius:999px;
        padding:8px 13px;
        font-size:13px;
        display:inline-flex;
        align-items:center;
        gap:6px;
    }

    .back-btn:hover{
        background:#f3f4f6;
        color:#111827;
    }

    .user-card{
        background:#fff;
        border-radius:18px;
        padding:16px;
        box-shadow:0 4px 16px rgba(0,0,0,.07);
        margin-bottom:14px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        flex-wrap:wrap;
        gap:12px;
    }

    .user-left{
        display:flex;
        align-items:center;
        gap:12px;
    }

    .user-avatar{
        width:52px;
        height:52px;
        border-radius:50%;
        background:var(--primary);
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:800;
        font-size:22px;
        box-shadow:0 8px 20px rgba(229,57,53,.28);
    }

    .user-name{
        font-size:18px;
        font-weight:800;
        color:#111827;
    }

    .user-meta{
        font-size:13px;
        color:#6b7280;
        margin-top:2px;
    }

    .report-card{
        background:#fff;
        border-radius:18px;
        padding:14px;
        box-shadow:0 4px 16px rgba(0,0,0,.07);
    }

    .table thead th{
        font-size:12px;
        text-transform:uppercase;
        background:#fafafa;
        color:#6b7280;
        white-space:nowrap;
    }

    .table tbody td{
        font-size:13px;
        vertical-align:middle;
    }

    .status-badge{
        border-radius:999px;
        padding:5px 9px;
        font-size:11px;
        font-weight:700;
        display:inline-flex;
        align-items:center;
        gap:5px;
        text-transform:capitalize;
        white-space:nowrap;
    }

    .status-paid{
        background:#dcfce7;
        color:#15803d;
    }

    .status-upcoming{
        background:#dbeafe;
        color:#1d4ed8;
    }

    .status-late{
        background:#fef3c7;
        color:#b45309;
    }

    .status-rejected{
        background:#fee2e2;
        color:#b91c1c;
    }

    .status-other{
        background:#e5e7eb;
        color:#374151;
    }

    .amount{
        font-weight:800;
        color:#111827;
    }

    .action-row{
        display:flex;
        gap:6px;
        flex-wrap:wrap;
    }

    .btn-approve,
    .btn-reject{
        border:0;
        border-radius:9px;
        padding:7px 10px;
        font-size:12px;
        font-weight:700;
        color:#fff;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:5px;
    }

    .btn-approve{
        background:var(--success);
        box-shadow:0 7px 16px rgba(22,163,74,.24);
    }

    .btn-reject{
        background:var(--danger);
        box-shadow:0 7px 16px rgba(220,38,38,.24);
    }

    .btn-approve:hover,
    .btn-reject:hover{
        transform:translateY(-1px);
    }

    @media(max-width:768px){
        .table thead{
            display:none;
        }

        .table,
        .table tbody,
        .table tr,
        .table td{
            display:block;
            width:100%;
        }

        .table tr{
            border:1px solid #e5e7eb;
            border-radius:14px;
            padding:10px;
            margin-bottom:10px;
            box-shadow:0 3px 10px rgba(0,0,0,.04);
        }

        .table td{
            border:0;
            padding:6px 0;
        }

        .mobile-label{
            display:block;
            font-size:11px;
            color:#9ca3af;
            text-transform:uppercase;
            margin-bottom:3px;
        }

        .action-row form{
            width:100%;
        }

        .btn-approve,
        .btn-reject{
            width:100%;
        }
    }

    @media(min-width:769px){
        .mobile-label{
            display:none;
        }
    }
</style>

<div class="page-wrap container-fluid">

    <div class="top-bar">
        <div class="page-title">
            <i class="bi bi-receipt-cutoff"></i>
            <span>User Installments</span>
        </div>

        <a href="{{ route('admin.installments.report') }}" class="back-btn">
            <i class="bi bi-arrow-left"></i>
            Back
        </a>
    </div>

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

    <div class="user-card">
        <div class="user-left">
            <div class="user-avatar">
                {{ strtoupper(substr($user->name ?? 'U', 0, 1)) }}
            </div>

            <div>
                <div class="user-name">
                    {{ $user->name ?? 'N/A' }}
                </div>

                <div class="user-meta">
                    <i class="bi bi-telephone"></i>
                    {{ $user->phone ?? '-' }}

                    @if(!empty($user->email))
                        · <i class="bi bi-envelope"></i>
                        {{ $user->email }}
                    @endif
                </div>
            </div>
        </div>

        <div>
            <span class="status-badge status-other">
                <i class="bi bi-list-check"></i>
                Total: {{ $installments->total() }}
            </span>
        </div>
    </div>

    <div class="report-card">
        <div class="table-responsive">
            <table class="table table-sm align-middle">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Loan ID</th>
                        <th>Due Date</th>
                        <th>Amount</th>
                        <th>Principal</th>
                        <th>Interest</th>
                        <th>Paid Info</th>
                        <th>Status</th>
                        <th style="width:210px;">Action</th>
                    </tr>
                </thead>

                <tbody>
                @forelse($installments as $key => $installment)
                    @php
                        $status = strtolower($installment->status ?? 'upcoming');

                        if ($status === 'paid') {
                            $statusClass = 'status-paid';
                            $statusIcon = 'bi-check-circle-fill';
                        } elseif ($status === 'late') {
                            $statusClass = 'status-late';
                            $statusIcon = 'bi-clock-fill';
                        } elseif ($status === 'rejected') {
                            $statusClass = 'status-rejected';
                            $statusIcon = 'bi-x-circle-fill';
                        } elseif ($status === 'upcoming') {
                            $statusClass = 'status-upcoming';
                            $statusIcon = 'bi-calendar-event';
                        } else {
                            $statusClass = 'status-other';
                            $statusIcon = 'bi-info-circle-fill';
                        }
                    @endphp

                    <tr>
                        <td>
                            <span class="mobile-label">SL</span>
                            {{ $installments->firstItem() + $key }}
                        </td>

                        <td>
                            <span class="mobile-label">Loan ID</span>
                            <strong>#{{ $installment->erin_loan_application_id }}</strong>

                            @if($installment->loan)
                                <div class="text-muted" style="font-size:12px;">
                                    Loan Status: {{ ucfirst($installment->loan->status ?? '-') }}
                                </div>
                            @endif
                        </td>

                        <td>
                            <span class="mobile-label">Due Date</span>
                            {{ $installment->due_date ? $installment->due_date->format('d M Y') : '-' }}
                        </td>

                        <td>
                            <span class="mobile-label">Amount</span>
                            <span class="amount">
                                ৳{{ number_format((float) $installment->amount) }}
                            </span>
                        </td>

                        <td>
                            <span class="mobile-label">Principal</span>
                            ৳{{ number_format((float) $installment->principal_part) }}
                        </td>

                        <td>
                            <span class="mobile-label">Interest</span>
                            ৳{{ number_format((float) $installment->interest_part) }}
                        </td>

                        <td>
                            <span class="mobile-label">Paid Info</span>

                            <div>
                                Paid: ৳{{ number_format((float) ($installment->paid_amount ?? 0)) }}
                            </div>

                            @if($installment->payment_method)
                                <div class="text-muted" style="font-size:12px;">
                                    Method: {{ $installment->payment_method }}
                                </div>
                            @endif

                            @if($installment->payment_trx_id)
                                <div class="text-muted" style="font-size:12px;">
                                    TRX: {{ $installment->payment_trx_id }}
                                </div>
                            @endif

                            @if($installment->paid_at)
                                <div class="text-muted" style="font-size:12px;">
                                    {{ $installment->paid_at->format('d M Y h:i A') }}
                                </div>
                            @endif
                        </td>

                        <td>
                            <span class="mobile-label">Status</span>

                            <span class="status-badge {{ $statusClass }}">
                                <i class="bi {{ $statusIcon }}"></i>
                                {{ ucfirst($status) }}
                            </span>
                        </td>

                        <td>
                            <span class="mobile-label">Action</span>

                            <div class="action-row">
                                @if($status !== 'paid')
                                    <form action="{{ route('admin.installments.approve', $installment->id) }}"
                                          method="POST"
                                          onsubmit="return confirm('Are you sure you want to approve this installment?');">
                                        @csrf

                                        <button type="submit" class="btn-approve">
                                            <i class="bi bi-check-lg"></i>
                                            Approve
                                        </button>
                                    </form>
                                @endif

                                @if($status !== 'rejected')
                                    <form action="{{ route('admin.installments.reject', $installment->id) }}"
                                          method="POST"
                                          onsubmit="return confirm('Are you sure you want to reject this installment?');">
                                        @csrf

                                        <button type="submit" class="btn-reject">
                                            <i class="bi bi-x-lg"></i>
                                            Reject
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="text-center text-muted py-4">
                            No installments found.
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-3">
            {{ $installments->links() }}
        </div>
    </div>
</div>

@endsection