@extends('layouts.user')

@section('title')
    First Generation Referrals
@endsection

@section('content')

<style>
    :root {
        --orange: #f97316; --orange-dim: rgba(249,115,22,0.10); --orange-glow: rgba(249,115,22,0.22);
        --green: #10b981;  --green-dim:  rgba(16,185,129,0.09);
        --card-bg: #ffffff; --card-border: rgba(0,0,0,0.07);
        --muted: #94a3b8;
        --radius: 16px; --radius-sm: 10px;
        --shadow: 0 4px 24px rgba(0,0,0,0.07);
        --ease: cubic-bezier(.4,0,.2,1);
    }
    .dark { --card-bg:#0f172a; --card-border:rgba(255,255,255,0.07); --shadow:0 4px 24px rgba(0,0,0,0.4); }

    .sidebar-card { background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--card-border);padding:1.5rem; }
    .avatar-ring  { width:6rem;height:6rem;border-radius:50%;padding:3px;background:linear-gradient(135deg,var(--orange),#660066);display:inline-block; }
    .avatar-ring img { width:100%;height:100%;border-radius:50%;border:3px solid var(--card-bg);object-fit:cover;display:block; }

    .main-card { background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--card-border);box-shadow:var(--shadow);overflow:hidden; }
    .main-card-header { padding:1.25rem 1.5rem;border-bottom:1px solid var(--card-border); }

    .sh { font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:.45rem; }
    .sh::before { content:'';width:3px;height:1rem;border-radius:2px;background:var(--orange);flex-shrink:0; }

    .rebate-pill {
        display:inline-flex;align-items:center;gap:.4rem;margin-top:.65rem;
        padding:.32rem .85rem;border-radius:99px;
        background:rgba(249,115,22,0.08);border:1px solid rgba(249,115,22,0.2);
        font-size:.75rem;font-weight:700;color:var(--orange);
    }

    .ref-tbl { width:100%;border-collapse:collapse;font-size:.8rem; }
    .ref-tbl th {
        padding:.6rem 1rem;text-align:left;
        font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
        background:rgba(248,250,252,.9);border-bottom:1px solid var(--card-border);
        white-space:nowrap;
    }
    .dark .ref-tbl th { background:rgba(15,23,42,.9); }
    .ref-tbl td { padding:.7rem 1rem;border-bottom:1px solid var(--card-border);vertical-align:middle; }
    .ref-tbl tr:last-child td { border-bottom:none; }
    .ref-tbl tr:hover td { background:rgba(249,115,22,.025); }
    .ref-tbl tr.active-row td { color:var(--green); }

    .chip-green { display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .55rem;border-radius:99px;font-size:.68rem;font-weight:700;background:var(--green-dim);color:var(--green);border:1px solid rgba(16,185,129,.2); }
    .chip-none  { font-size:.75rem;color:var(--muted); }

    .empty-state { padding:3rem 1.5rem;text-align:center; }
    .empty-state svg { margin:0 auto .75rem;display:block;opacity:.35; }
    .empty-state p { font-size:.85rem;color:var(--muted);margin-bottom:.5rem; }

    /* pagination overrides so it matches our theme */
    .pagination-wrap { padding:1rem 1.5rem;border-top:1px solid var(--card-border); }
    .pagination-wrap nav { display:flex;justify-content:center; }
    .pagination-wrap nav span,
    .pagination-wrap nav a {
        display:inline-flex;align-items:center;justify-content:center;
        min-width:34px;height:34px;padding:0 .55rem;
        font-size:.78rem;font-weight:700;border-radius:8px;
        border:1px solid var(--card-border);
        margin:0 2px;text-decoration:none;color:inherit;
        transition:background .15s var(--ease),border-color .15s,color .15s;
    }
    .pagination-wrap nav a:hover { border-color:var(--orange);color:var(--orange); }
    .pagination-wrap nav span[aria-current] { background:var(--orange);color:#fff;border-color:var(--orange); }
    .pagination-wrap nav span.disabled { opacity:.35;cursor:not-allowed; }
    .pagination-meta { text-align:center;font-size:.72rem;color:var(--muted);margin-top:.5rem; }
</style>

<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">
    <div class="relative md:container container-fluid">
        <div class="relative overflow-hidden md:rounded-md shadow dark:shadow-gray-700 h-52 bg-cover bg-center"
            style="background-image:url('{{ asset('images/profile-1.jpg') }}');">
            <div style="position:absolute;inset:0;background:linear-gradient(135deg,rgba(249,115,22,0.35),rgba(102,0,102,0.45));"></div>
        </div>
    </div>

    <div class="container relative mt-16 md:mt-24">
        <div class="md:flex" style="gap:1.5rem;">

            {{-- Sidebar --}}
            <div class="lg:w-1/4 md:w-1/3 md:px-0">
                <div class="relative" style="margin-top:-7rem;">
                    <div class="sidebar-card">
                        <div class="mb-5 text-center">
                            <div class="flex justify-center mb-4">
                                <span class="avatar-ring"><img src="{{ asset('images/avatar-1.png') }}" id="profile-image" alt="avatar"></span>
                            </div>
                            <h5 class="text-base font-bold">{{ auth()->user()->username }}</h5>
                            <p class="text-xs mt-1" style="color:var(--muted);">{{ auth()->user()->email }}</p>
                        </div>
                        <x-side-nav />
                    </div>
                </div>
            </div>

            {{-- Main --}}
            <div class="mt-6 lg:w-3/4 md:w-2/3 md:px-0 md:mt-0" style="display:flex;flex-direction:column;gap:1.5rem;">

                <x-alert />

                <div class="main-card">
                    <div class="main-card-header">
                        <div class="sh">First Generation Referrals</div>
                        <p style="font-size:.75rem;color:var(--muted);margin-top:.25rem;">Direct referrals — people who signed up using your link</p>
                        <div class="rebate-pill">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            Earn {{ number_format(auth()->user()->first_rebate, 1) }}% rebate from this level
                        </div>
                    </div>

                    <div style="overflow-x:auto;">
                        <table class="ref-tbl">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Store name</th>
                                    <th>Email</th>
                                    <th>Active bots</th>
                                    <th>Downlines</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($referrals as $referral)
                                @php $isActive = ($referral->running_bots ?? 0) > 0; @endphp
                                <tr class="{{ $isActive ? 'active-row' : '' }}">
                                    <td>{{ $referral->first_name }} {{ $referral->last_name }}</td>
                                    <td style="font-weight:600;">{{ $referral->username }}</td>
                                    <td style="font-size:.75rem;color:var(--muted);">{{ $referral->email }}</td>
                                    <td>
                                        @if($isActive)
                                            <span class="chip-green">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                                {{ $referral->running_bots }} active
                                            </span>
                                        @else
                                            <span class="chip-none">None</span>
                                        @endif
                                    </td>
                                    <td style="font-weight:700;">{{ $referral->downline_count ?? 0 }}</td>
                                    <td><x-downline-detail-modal :user="$referral" /></td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" style="padding:0;">
                                        <div class="empty-state">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="var(--muted)" stroke-width="1.2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0"/></svg>
                                            <p>You don't have any referrals at this level yet.</p>
                                            <a href="{{ url('/my-profile') }}#refer-a-friend" style="font-size:.8rem;font-weight:700;color:var(--orange);text-decoration:none;">Share your referral link →</a>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if($referrals->hasPages())
                    <div class="pagination-wrap">
                        {{ $referrals->links() }}
                        <p class="pagination-meta">
                            Showing {{ $referrals->firstItem() }}–{{ $referrals->lastItem() }} of {{ $referrals->total() }} referrals
                        </p>
                    </div>
                    @endif

                </div>

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

@endsection