@extends('components.dashboard.layout.layout')

@section('content')
    @include('components.alert')

    <style>
        .referral-activity-card {
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .referral-activity-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 1.25rem 1.35rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .referral-activity-header__title {
            margin: 0;
            font-size: .5rem;
            font-weight: 700;
            color: #111827;
        }

        .referral-activity-header__sub {
            margin: 0.25rem 0 0;
            color: #64748b;
            font-size: 0.88rem;
            line-height: 1.5;
        }

        .referral-activity-per-page {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            flex-wrap: nowrap;
        }

        .referral-activity-per-page label {
            margin: 0;
            font-size: 0.85rem;
            font-weight: 700;
            color: #64748b;
            white-space: nowrap;
        }

        .referral-activity-per-page select {
            width: 88px;
            min-height: 42px;
            border-radius: 12px;
            border: 1px solid #dbe2ea;
            font-size: 0.88rem;
            box-shadow: none !important;
        }

        .referral-activity-table {
            width: 100%;
            min-width: 1040px;
            border-collapse: separate;
            border-spacing: 0;
            margin: 0;
        }

        .referral-activity-table thead th {
            padding: 0.95rem 1rem;
            background: #f8fafc;
            color: #475569;
            font-size: 0.76rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
        }

        .referral-activity-table tbody td {
            padding: 1rem;
            border-bottom: 1px solid #f1f5f9;
            vertical-align: middle;
            color: #111827;
            font-size: 0.9rem;
        }

        .referral-activity-table tbody tr {
            transition: 0.18s ease;
        }

        .referral-activity-table tbody tr:hover {
            background: #f8fafc;
        }

        .referral-activity-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .referral-person {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            min-width: 0;
        }

        .referral-person__avatar {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eef2ff;
            color: #4338ca;
            flex-shrink: 0;
            font-size: 0.9rem;
            font-weight: 800;
        }

        .referral-person__name {
            margin: 0;
            font-size: 0.93rem;
            font-weight: 800;
            color: #111827;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }

        .referral-person__sub {
            margin: 0.2rem 0 0;
            font-size: 0.78rem;
            color: #64748b;
        }

        .referral-product {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            min-width: 0;
        }

        .referral-product__icon {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f1f5f9;
            color: #334155;
            flex-shrink: 0;
            font-size: 0.95rem;
        }

        .referral-product__name {
            margin: 0;
            font-size: 0.93rem;
            font-weight: 800;
            color: #111827;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }

        .referral-product__sub {
            margin: 0.2rem 0 0;
            font-size: 0.78rem;
            color: #64748b;
        }

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

        .referral-id-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            padding: 0.35rem 0.6rem;
            border-radius: 999px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #334155;
            font-size: 0.82rem;
            font-weight: 800;
        }

        .referral-activity-empty {
            padding: 2.5rem 1rem;
            text-align: center;
            color: #64748b;
        }

        .referral-activity-empty__icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 0.85rem;
            border-radius: 18px;
            background: #f1f5f9;
            color: #64748b;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.35rem;
        }

        .referral-activity-empty__title {
            font-weight: 800;
            color: #111827;
            margin-bottom: 0.25rem;
        }

        .referral-activity-pagination {
            margin-top: 1rem;
        }

        @media (max-width: 575.98px) {
            .referral-activity-header {
                align-items: flex-start;
            }

            .referral-activity-per-page {
                width: 100%;
                justify-content: space-between;
            }

            .referral-activity-per-page select {
                flex: 1;
            }
        }
    </style>

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Referral Activity"
                    description="Track referral activity records, referred users, connected products, discount values, and expiration days.">
                    <a href="{{ url()->previous() }}" class="asset-btn asset-btn--secondary">
                        Back
                    </a>
                </x-page-title>

                <div class="referral-activity-card">
                    <div class="referral-activity-header">
                        <div>
                            <h6 class="referral-activity-header__title">
                                Referral Activity Records
                            </h6>
                            <p class="referral-activity-header__sub">
                                Review all referral transactions and the discount rules applied to each referred user.
                            </p>
                        </div>

                        <form action="{{ route('referralactivities.index') }}" method="GET"
                            class="referral-activity-per-page">
                            <label for="per_page">Show</label>
                            <select name="per_page" id="per_page" class="form-select" onchange="this.form.submit()">
                                @foreach ([5, 10, 25, 50, 100, 150] as $count)
                                    <option value="{{ $count }}" {{ request('per_page', 10) == $count ? 'selected' : '' }}>
                                        {{ $count }}
                                    </option>
                                @endforeach
                            </select>
                        </form>
                    </div>

                    <div class="ui-table-wrap">
                        <table class="referral-activity-table">
                            <thead>
                                <tr>
                                    <th class="text-center">ID</th>
                                    <th>Referrer Name</th>
                                    <th>Referred Name</th>
                                    <th class="text-center">Is used</th>
                                    <th class="text-center">Created By</th>
                                </tr>
                            </thead>

                            <tbody>
                                @forelse ($referralactivities as $referralactivity)
                                    @php
                                        $referrerName = optional($referralactivity->userable)->full_name;

                                        $referredName = optional($referralactivity->referredable)->full_name;



                                    @endphp

                                    <tr>
                                        <td class="text-center">
                                            <span class="referral-id-pill">
                                                #{{ $referralactivity->id }}
                                            </span>
                                        </td>

                                        <td>
                                            <div class="referral-person">


                                                <div>
                                                    <p class="referral-person__name">
                                                        {{ $referrerName ?: '—' }}
                                                    </p>
                                                    <p class="referral-person__sub">
                                                        user who made the referral
                                                    </p>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <div class="referral-person">
                                                <div class="referral-person__avatar">
                                                    <i class="fas fa-user-plus"></i>
                                                </div>

                                                <div>
                                                    <p class="referral-person__name">
                                                        {{ $referredName ?: '—' }}
                                                    </p>
                                                    <p class="referral-person__sub">
                                                        user who was referred
                                                    </p>
                                                </div>
                                            </div>
                                        </td>

                                        <td class="text-center">
                                            @if ($referralactivity->is_used == 1)
                                                <span class="ui-pill ui-pill--success">Used</span>
                                            @else
                                                <span class="ui-pill ui-pill--neutral">
                                                    {{ $referralactivity->is_used ?: 'not used' }}
                                                </span>
                                            @endif
                                        </td>

                                        <td class="text-center">
                                            {{ $referralactivity->createdBy?->full_name ?? 'System' }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9">
                                            <div class="referral-activity-empty">
                                                <div class="referral-activity-empty__icon">
                                                    <i class="fas fa-handshake"></i>
                                                </div>

                                                <div class="referral-activity-empty__title">
                                                    No referral activity found
                                                </div>

                                                <div>
                                                    There are no referral activity records available yet.
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                @if (method_exists($referralactivities, 'hasPages') && $referralactivities->hasPages())
                    <div class="referral-activity-pagination">
                        {{ $referralactivities->links() }}
                    </div>
                @endif

            </div>
        </div>
    </div>
@endsection