@props(['clients'])

@push('styles')
<style>
    .oah-clients-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    @media (min-width: 640px) {
        .oah-clients-cards {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1024px) {
        .oah-clients-cards {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 2rem;
        }
    }

    .oah-client-card {
        width: 100%;
        min-width: 0;
    }

    .oah-client-card__header {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background-color: #f0d040;
        border-bottom: 1px solid rgba(226, 181, 36, 0.38);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
    }

    .oah-client-card__header::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
            radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.42) 0%, rgba(253, 230, 138, 0.28) 48%, transparent 70%),
            radial-gradient(ellipse 85% 65% at 100% 100%, rgba(250, 204, 21, 0.34) 0%, transparent 56%),
            radial-gradient(ellipse 80% 60% at 0% 100%, rgba(253, 224, 71, 0.3) 0%, transparent 52%),
            linear-gradient(
                152deg,
                #fefce8 0%,
                #fef08a 24%,
                #fde047 48%,
                #f5dc4a 72%,
                #e2b524 92%,
                #d9b820 100%
            );
    }

    .oah-client-card__header::after {
        content: '';
        position: absolute;
        top: -50%;
        left: 50%;
        z-index: 0;
        width: 115%;
        height: 70%;
        transform: translateX(-50%);
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.32) 0%, transparent 72%);
        pointer-events: none;
    }

    .oah-client-card__header-inner {
        position: relative;
        z-index: 1;
    }

    @media (max-width: 399px) {
        .oah-client-card__renewal-row {
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }

    .oah-client-card__actions {
        display: flex;
        shrink: 0;
        align-items: center;
        gap: 0.5rem;
    }

    .oah-client-card__action {
        display: inline-flex;
        height: 2.25rem;
        width: 2.25rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.75rem;
        border: 2px solid transparent;
        box-shadow: 0 4px 12px -4px rgba(10, 10, 10, 0.35);
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }

    .oah-client-card__action svg {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }

    .oah-client-card__action:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px -6px rgba(10, 10, 10, 0.4);
    }

    .oah-client-card__action--edit {
        border-color: #0a0a0a;
        background: linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 100%);
        color: #e2b524;
    }

    .oah-client-card__action--edit:hover {
        filter: brightness(1.15);
    }

    .oah-client-card__action--topup {
        border-color: #047857;
        background: linear-gradient(145deg, #34d399 0%, #059669 55%, #047857 100%);
        color: #ffffff;
    }

    .oah-client-card__action--delete {
        border-color: #f87171;
        background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
        color: #dc2626;
    }

    .oah-client-card__action--delete:hover {
        background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
    }

    .oah-client-card__products-panel {
        margin: 20px;
        padding: 1rem 1.125rem 1.125rem;
        border-radius: 1rem;
        background: #fff;
        border: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    /* @media (min-width: 640px) {
        .oah-client-card__products-panel {
            margin-left: 1.25rem;
            margin-right: 1.25rem;
            margin-bottom: 1.25rem;
        }
    } */

    .oah-client-card__products-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .oah-client-card__products-list > li + li {
        margin-top: var(--oah-product-gap);
    }

    .oah-client-card__products-scroll {
        --oah-product-gap: 0.625rem;
        overflow-y: visible;
        max-height: none;
        padding-right: 0;
    }

    .oah-client-card__products-scroll--scrollable {
        /* 4 product rows + gaps between them */
        max-height: calc((4.5rem * 4) + (var(--oah-product-gap) * 3));
        overflow-y: auto;
        padding-right: 0.35rem;
        scrollbar-width: thin;
        scrollbar-color: #E2B524 #f3f4f6;
    }

    .oah-client-card__products-scroll--scrollable::-webkit-scrollbar {
        width: 6px;
    }

    .oah-client-card__products-scroll--scrollable::-webkit-scrollbar-track {
        background: #f3f4f6;
        border-radius: 999px;
    }

    .oah-client-card__products-scroll--scrollable::-webkit-scrollbar-thumb {
        background: #E2B524;
        border-radius: 999px;
    }

    .oah-client-card__util-bar {
        height: 5px;
        border-radius: 999px;
        background: #e5e7eb;
        overflow: hidden;
    }

    .oah-client-card__util-fill {
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, #E2B524, #f5d76e);
    }

    .oah-client-card__util-fill--high {
        background: linear-gradient(90deg, #f59e0b, #ef4444);
    }
</style>
@endpush

<div class="oah-clients-cards">
    @foreach ($clients as $client)
        @php
            $products = $client->resolvedProducts();
            $daysUntilRenewal = $client->renewal_date ? $client->daysUntilRenewal() : null;
            $isOverdue = $daysUntilRenewal !== null && $daysUntilRenewal < 0;
            $isDueToday = $daysUntilRenewal === 0;
            $productCount = count($products);
            $actionFocus = 'focus:outline-none focus-visible:ring-2 focus-visible:ring-oah-black/25 focus-visible:ring-offset-2 focus-visible:ring-offset-[#e2c040]';
        @endphp

        <article class="oah-client-card flex flex-col overflow-hidden rounded-2xl border border-neutral-200/80 bg-neutral-100/70 shadow-[0_10px_40px_-12px_rgba(0,0,0,0.15)] transition hover:border-oah-yellow/40 hover:shadow-[0_16px_48px_-10px_rgba(0,0,0,0.18)]">
            {{-- Header --}}
            <div class="oah-client-card__header px-4 py-5 sm:px-5 sm:py-6">
                <div class="oah-client-card__header-inner flex flex-col items-center text-center">
                    @if ($client->logo_path)
                        <img
                            src="{{ asset('storage/'.$client->logo_path) }}"
                            alt=""
                            class="h-20 w-20 rounded-lg border-0  shadow-[0_6px_18px_-4px_rgba(143,114,20,0.35)] outline-none ring-0 sm:h-[5.5rem] sm:w-[5.5rem]"
                        >
                    @else
                        <div class="flex h-20 w-20 items-center justify-center rounded-2xl bg-oah-yellow text-2xl font-extrabold text-oah-black shadow-[0_6px_18px_-4px_rgba(143,114,20,0.35)] sm:h-[5.5rem] sm:w-[5.5rem]">
                            {{ strtoupper(substr($client->name, 0, 1)) }}
                        </div>
                    @endif

                    <h3 class="mt-3 w-full text-lg font-extrabold leading-tight text-oah-black sm:text-xl">
                        {{ $client->name }}
                    </h3>

                    <div class="oah-client-card__renewal-row mt-4 flex w-full items-center justify-between gap-3">
                        <div @class([
                            'oah-renewal-badge',
                            'oah-renewal-badge--unset' => ! $client->renewal_date,
                        ])>
                            <p class="oah-renewal-badge__label text-[10px] font-bold uppercase leading-tight tracking-wide">Days until renewal</p>
                            <p @class([
                                'oah-renewal-badge__value mt-1 text-sm font-extrabold leading-tight',
                                'oah-renewal-badge__value--alert' => $isDueToday || $isOverdue,
                            ])>
                                @if ($client->renewal_date)
                                    @if ($daysUntilRenewal > 0)
                                        {{ $daysUntilRenewal }} {{ $daysUntilRenewal === 1 ? 'day' : 'days' }}
                                    @elseif ($daysUntilRenewal === 0)
                                        Today
                                    @else
                                        {{ abs($daysUntilRenewal) }} {{ abs($daysUntilRenewal) === 1 ? 'day' : 'days' }} overdue
                                    @endif
                                @else
                                    Not set
                                @endif
                            </p>
                        </div>

                        <div class="oah-client-card__actions">
                            <a
                                href="{{ route('admin.clients.edit', $client) }}"
                                class="oah-client-card__action oah-client-card__action--edit {{ $actionFocus }}"
                                aria-label="Update {{ $client->name }}"
                                title="Update"
                            >
                                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M11 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2v-5M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                            </a>
                            <a
                                href="{{ route('admin.clients.top-up', $client) }}"
                                class="oah-client-card__action oah-client-card__action--topup {{ $actionFocus }}"
                                aria-label="Update package utilisation for {{ $client->name }}"
                                title="Update package products"
                            >
                                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 8h6m-6 4h4"/>
                                </svg>
                            </a>
                            <form id="delete-client-{{ $client->id }}" method="POST" action="{{ route('admin.clients.destroy', $client) }}" class="hidden">
                                @csrf
                                @method('DELETE')
                            </form>
                            <button
                                type="button"
                                class="oah-client-card__action oah-client-card__action--delete {{ $actionFocus }}"
                                data-oah-confirm
                                data-oah-confirm-form="#delete-client-{{ $client->id }}"
                                data-oah-confirm-title="Delete client"
                                data-oah-confirm-message="{{ e('Are you sure you want to delete '.$client->name.'?') }}"
                                aria-label="Delete {{ $client->name }}"
                                title="Delete"
                            >
                                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M9 7h6m2 0H7m3-3h4a1 1 0 011 1v1H9V5a1 1 0 011-1z"/></svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Products --}}
            <div class="pt-3 sm:pt-4">
            <div class="oah-client-card__products-panel flex flex-1 flex-col">
                <div class="mb-4 flex items-center justify-between gap-3 border-b border-neutral-100 pb-3">
                    <div>
                        <p class="text-[10px] font-bold uppercase tracking-[0.12em] text-oah-muted">Utilisation</p>
                        <p class="mt-0.5 text-sm font-bold text-oah-black">Package products</p>
                    </div>
                    @if ($productCount > 0)
                        <span class="flex h-9 min-w-[2.25rem] items-center justify-center rounded-lg bg-oah-black px-2 text-sm font-extrabold text-oah-yellow">
                            {{ $productCount }}
                        </span>
                    @endif
                </div>

                @if ($productCount > 0)
                    <div @class([
                        'oah-client-card__products-scroll',
                        'oah-client-card__products-scroll--scrollable' => $productCount > 4,
                    ])>
                        <ul class="oah-client-card__products-list">
                            @foreach ($products as $product)
                                @php
                                    $assigned = $product['quantity'] ?? '—';
                                    $used = $product['used'] ?? '0';
                                    $usedNum = is_numeric($used) ? (float) $used : null;
                                    $assignedNum = is_numeric($assigned) ? (float) $assigned : null;
                                    $utilPct = ($assignedNum !== null && $assignedNum > 0 && $usedNum !== null)
                                        ? min(100, (int) round(($usedNum / $assignedNum) * 100))
                                        : null;
                                    $utilHigh = $utilPct !== null && $utilPct >= 85;
                                @endphp
                                <li class="rounded-xl  p-2">
                                    <div class="flex items-start justify-between gap-4">
                                        <p class="min-w-0 flex-1 text-sm font-bold leading-snug text-oah-black">
                                            {{ $product['name'] ?? '—' }}
                                        </p>
                                        <p class="shrink-0 tabular-nums leading-none">
                                            <span class="text-base font-extrabold text-oah-black">{{ $used }}</span>
                                            <span class="text-sm font-medium text-neutral-400">/</span>
                                            <span class="text-sm font-extrabold text-red-600">{{ $assigned }}</span>
                                        </p>
                                    </div>
                                    @if ($utilPct !== null)
                                        <div class="mt-2 flex items-center gap-3">
                                            <div class="oah-client-card__util-bar min-w-0 flex-1">
                                                <div @class(['oah-client-card__util-fill', 'oah-client-card__util-fill--high' => $utilHigh]) style="width: {{ $utilPct }}%"></div>
                                            </div>
                                            <span @class([
                                                'shrink-0 min-w-[2.25rem] text-right text-xs font-bold tabular-nums',
                                                'text-amber-600' => $utilHigh,
                                                'text-oah-muted' => ! $utilHigh,
                                            ])>{{ $utilPct }}%</span>
                                        </div>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @else
                    <div class="rounded-xl border border-dashed border-neutral-300 bg-neutral-50/50 px-4 py-10 text-center">
                        <p class="text-sm font-bold text-oah-black">No products on package</p>
                        <p class="mt-1 text-xs text-oah-muted">Edit client to add products.</p>
                    </div>
                @endif
            </div>
            </div>
        </article>
    @endforeach
</div>