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

@section('content')

    {{-- Bootstrap Icons CDN (needed if not already in master) --}}
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"/>

    <style>
        :root{
            --primary:#e53935;
            --primary-soft:#fee2e2;
            --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;
            flex-wrap:wrap;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:14px;
        }
        .page-title{
            font-size:20px;
            font-weight:600;
            display:flex;
            align-items:center;
            gap:8px;
        }
        .page-title i{
            color:var(--primary);
        }

        .filter-pills{
            display:flex;
            flex-wrap:wrap;
            gap:6px;
        }
        .pill-btn{
            border-radius:999px;
            border:1px solid #e5e7eb;
            padding:6px 12px;
            font-size:13px;
            background:#fff;
            cursor:pointer;
            display:inline-flex;
            align-items:center;
            gap:6px;
            text-decoration:none;
            color:#374151;
            transition:all .16s ease;
        }
        .pill-btn i{
            font-size:14px;
        }
        .pill-btn:hover{
            background:#f3f4f6;
        }
        .pill-btn.active{
            background:var(--primary);
            color:#fff;
            border-color:var(--primary);
            box-shadow:0 8px 18px rgba(220,38,38,.35);
        }

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

        .table thead th{
            font-size:12px;
            text-transform:uppercase;
            letter-spacing:.04em;
            background:#fafafa;
        }
        .table tbody td{
            font-size:13px;
            vertical-align:middle;
        }

        .badge-status{
            border-radius:999px;
            padding:3px 8px;
            font-size:11px;
            font-weight:500;
        }
        .badge-completed{ background:#e8f5e9; color:#2e7d32; }
        .badge-running{ background:#e3f2fd; color:#1565c0; }
        .badge-nopay{ background:#fff7ed; color:#c05621; }
        .badge-mixed{ background:#ede9fe; color:#5b21b6; }

        .stat-pill{
            display:inline-flex;
            align-items:center;
            gap:4px;
            font-size:11px;
            padding:2px 8px;
            border-radius:999px;
            background:#f3f4f6;
            margin-right:4px;
        }
        .stat-pill i{ font-size:12px; color:#9ca3af; }

        @media (max-width:768px){
            .table-responsive{
                font-size:12px;
            }
        }
    </style>

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

        <div class="page-head">
            <div class="page-title">
                <i class="bi bi-people-fill"></i>
                <span>Installment Report (per user)</span>
            </div>

            {{-- Filter pills --}}
            <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>
                    <span>All</span>
                </a>

                <a href="{{ route('admin.installments.report', ['filter' => 'completed']) }}"
                   class="pill-btn {{ $filter==='completed' ? 'active' : '' }}">
                    <i class="bi bi-award-fill"></i>
                    <span>Completed loans</span>
                </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>
                    <span>No installment paid</span>
                </a>

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

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

        <div class="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 summary</th>
                        <th style="width:110px;">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($users as $user)
                        @php
                            $totalLoans   = $user->total_loans;
                            $runningLoans = $user->running_loans;
                            $completed    = $user->completed_loans;

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

                            // badge select
                            if ($completed > 0 && $runningLoans === 0) {
                                $badgeClass = 'badge-completed';
                                $badgeText  = 'All completed';
                            } elseif ($runningLoans > 0 && $paidIns > 0) {
                                $badgeClass = 'badge-running';
                                $badgeText  = 'Running & paying';
                            } elseif ($totalLoans > 0 && $paidIns === 0) {
                                $badgeClass = 'badge-nopay';
                                $badgeText  = 'No installment paid';
                            } else {
                                $badgeClass = 'badge-mixed';
                                $badgeText  = 'Mixed status';
                            }
                        @endphp
                        <tr>
                            {{-- User info --}}
                            <td>
                                <div style="font-weight:600;">
                                    {{ $user->name ?? 'N/A' }}
                                </div>
                                <div class="text-muted" style="font-size:12px;">
                                    <i class="bi bi-telephone"></i>
                                    {{ $user->phone ?? '-' }}
                                    @if($user->email)
                                        · <i class="bi bi-envelope"></i> {{ $user->email }}
                                    @endif
                                </div>
                            </td>

                            {{-- Loans count --}}
                            <td>
                                <div class="stat-pill">
                                    <i class="bi bi-credit-card-2-front"></i>
                                    <span>Total: {{ $totalLoans }}</span>
                                </div>
                                <div class="stat-pill">
                                    <i class="bi bi-play-circle"></i>
                                    <span>Running: {{ $runningLoans }}</span>
                                </div>
                                <div class="stat-pill">
                                    <i class="bi bi-trophy-fill"></i>
                                    <span>Completed: {{ $completed }}</span>
                                </div>
                            </td>

                            {{-- Installments --}}
                            <td>
                                <div class="stat-pill">
                                    <i class="bi bi-list-check"></i>
                                    <span>Total: {{ $totalIns }}</span>
                                </div>
                                <div class="stat-pill">
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span>Paid: {{ $paidIns }}</span>
                                </div>
                                <div class="stat-pill">
                                    <i class="bi bi-clock-history"></i>
                                    <span>Unpaid: {{ $unpaid }}</span>
                                </div>
                            </td>

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

                            {{-- Actions --}}
                            <td>
                                {{-- এখানে loan list filter করে দেখানোর জন্য simple লিঙ্ক --}}
                                <a href="{{ url('/admin/loans?user='.$user->id) }}"
                                   class="btn btn-sm btn-outline-primary w-100 mb-1">
                                    <i class="bi bi-credit-card"></i>
                                    Loans
                                </a>
                                {{-- চাইলে user details পেজেও পাঠাতে পারো --}}
                                <a href="{{ url('/admin/users/'.$user->id) }}"
                                   class="btn btn-sm btn-outline-secondary w-100">
                                    <i class="bi bi-person-lines-fill"></i>
                                    Profile
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center text-muted">
                                No users found for this filter.
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>

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