@extends('backend.master')
@section('title','Installment Report')

@section('content')

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

<style>
    :root{
        --primary:#e53935;
        --bg:#f5f5f5;
    }

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

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

    .page-head{
        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;
        display:flex;
        align-items:center;
        gap:8px;
        color:#111827;
    }

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

    .filter-pills{
        display:flex;
        flex-wrap:wrap;
        gap:7px;
    }

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

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

    .pill-btn.active{
        background:var(--primary);
        color:#fff;
        border-color:var(--primary);
        box-shadow:0 8px 18px rgba(229,57,53,.28);
    }

    .report-card{
        background:#fff;
        border-radius:16px;
        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;
    }

    .stat-pill{
        display:inline-flex;
        align-items:center;
        gap:4px;
        background:#f3f4f6;
        padding:4px 8px;
        border-radius:999px;
        font-size:11px;
        margin:2px;
        white-space:nowrap;
    }

    .stat-pill i{
        color:#9ca3af;
    }

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

    .badge-completed{
        background:#dcfce7;
        color:#15803d;
    }

    .badge-running{
        background:#dbeafe;
        color:#1d4ed8;
    }

    .badge-nopay{
        background:#ffedd5;
        color:#c2410c;
    }

    .badge-mixed{
        background:#ede9fe;
        color:#6d28d9;
    }

    .btn-view{
        border:0;
        background:var(--primary);
        color:#fff;
        border-radius:10px;
        padding:8px 12px;
        font-size:13px;
        text-decoration:none;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:5px;
        width:100%;
        box-shadow:0 7px 16px rgba(229,57,53,.25);
    }

    .btn-view:hover{
        color:#fff;
        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;
        }
    }

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

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

    <div class="page-head">
        <div class="page-title">
            <i class="bi bi-people-fill"></i>
            <span>Installment Manage</span>
        </div>

        <div class="filter-pills">
            <a href="{{ route('admin.installments.report', ['filter' => 'all']) }}"
               class="pill-btn {{ $filter === 'all' ? 'active' : '' }}">
                <i class="bi bi-ui-checks-grid"></i>
                All
            </a>

            <a href="{{ route('admin.installments.report', ['filter' => 'completed']) }}"
               class="pill-btn {{ $filter === 'completed' ? 'active' : '' }}">
                <i class="bi bi-award-fill"></i>
                Completed
            </a>

            <a href="{{ route('admin.installments.report', ['filter' => 'no_payment']) }}"
               class="pill-btn {{ $filter === 'no_payment' ? 'active' : '' }}">
                <i class="bi bi-exclamation-triangle-fill"></i>
                No Payment
            </a>

            <a href="{{ route('admin.installments.report', ['filter' => 'running']) }}"
               class="pill-btn {{ $filter === 'running' ? 'active' : '' }}">
                <i class="bi bi-play-circle-fill"></i>
                Running
            </a>
        </div>
    </div>

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

    <div class="report-card">
        <div class="table-responsive">
            <table class="table table-sm align-middle">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Loans</th>
                        <th>Installments</th>
                        <th>Status</th>
                        <th style="width:120px;">Action</th>
                    </tr>
                </thead>

                <tbody>
                @forelse($users as $user)
                    @php
                        $totalLoans   = (int) $user->total_loans;
                        $runningLoans = (int) $user->running_loans;
                        $completed    = (int) $user->completed_loans;

                        $totalIns = (int) $user->total_installments;
                        $paidIns  = (int) $user->paid_installments;
                        $unpaid   = max($totalIns - $paidIns, 0);

                        if ($completed > 0 && $runningLoans === 0) {
                            $badgeClass = 'badge-completed';
                            $badgeText  = 'Completed';
                            $badgeIcon  = 'bi-check-circle-fill';
                        } elseif ($runningLoans > 0 && $paidIns > 0) {
                            $badgeClass = 'badge-running';
                            $badgeText  = 'Running';
                            $badgeIcon  = 'bi-play-circle-fill';
                        } elseif ($totalLoans > 0 && $paidIns === 0) {
                            $badgeClass = 'badge-nopay';
                            $badgeText  = 'No Payment';
                            $badgeIcon  = 'bi-exclamation-triangle-fill';
                        } else {
                            $badgeClass = 'badge-mixed';
                            $badgeText  = 'Mixed';
                            $badgeIcon  = 'bi-shuffle';
                        }
                    @endphp

                    <tr>
                        <td>
                            <span class="mobile-label">User</span>

                            <div style="font-weight:700;color:#111827;">
                                {{ $user->name ?? 'N/A' }}
                            </div>

                            <div class="text-muted" style="font-size:12px;">
                                <i class="bi bi-telephone"></i>
                                {{ $user->phone ?? '-' }}

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

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

                            <span class="stat-pill">
                                <i class="bi bi-credit-card-2-front"></i>
                                Total: {{ $totalLoans }}
                            </span>

                            <span class="stat-pill">
                                <i class="bi bi-play-circle"></i>
                                Running: {{ $runningLoans }}
                            </span>

                            <span class="stat-pill">
                                <i class="bi bi-trophy-fill"></i>
                                Completed: {{ $completed }}
                            </span>
                        </td>

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

                            <span class="stat-pill">
                                <i class="bi bi-list-check"></i>
                                Total: {{ $totalIns }}
                            </span>

                            <span class="stat-pill">
                                <i class="bi bi-check-circle-fill"></i>
                                Paid: {{ $paidIns }}
                            </span>

                            <span class="stat-pill">
                                <i class="bi bi-clock-history"></i>
                                Unpaid: {{ $unpaid }}
                            </span>
                        </td>

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

                            <span class="badge-status {{ $badgeClass }}">
                                <i class="bi {{ $badgeIcon }}"></i>
                                {{ $badgeText }}
                            </span>
                        </td>

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

                            <a href="{{ route('admin.installments.report.show', $user->id) }}"
                               class="btn-view">
                                <i class="bi bi-eye-fill"></i>
                                View
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center text-muted py-4">
                            No users found.
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

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

@endsection