@extends('layouts.user')

@section('title', 'Dashboard — OAH')

@push('styles')
<style>
    .user-dashboard-button-stack {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .user-enquiry-btn {
        width: 100%;
        border-radius: 0.75rem;
        padding: 0.875rem 1.25rem;
        text-align: center;
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.4;
        cursor: pointer;
        transition:
            background 0.38s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .user-enquiry-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(226, 181, 36, 0.45);
    }

    .user-enquiry-btn--primary {
        background: linear-gradient(135deg, #e2b524 0%, #c9a01f 100%);
        color: #fff;
        border: none;
        box-shadow: 0 4px 14px -6px rgba(201, 160, 31, 0.42);
    }

    .user-enquiry-btn--primary:hover {
        background: linear-gradient(135deg, #ecc032 0%, #e2b524 55%, #c9a01f 100%);
        box-shadow:
            0 16px 32px -14px rgba(201, 160, 31, 0.62),
            inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    .user-enquiry-btn--primary:active {
        background: linear-gradient(135deg, #c9a01f 0%, #b8921a 100%);
        box-shadow: 0 6px 14px -8px rgba(201, 160, 31, 0.45);
    }

    @media (min-width: 640px) {
        .user-enquiry-btn {
            font-size: 0.9375rem;
            padding: 0.9375rem 1.375rem;
        }
    }
</style>
@endpush

@section('content')
<x-user.nav />

<div class="mx-auto max-w-[min(100%,92rem)] px-4 py-8 sm:px-6 sm:py-10">
    {{-- Dashboard header --}}
    <div class="mb-8 flex flex-col gap-6 border-b border-neutral-200 pb-8 lg:flex-row lg:items-start lg:justify-between">
        <div class="min-w-0 flex-1">
            <h1 class="text-2xl font-extrabold uppercase leading-tight tracking-tight text-oah-black sm:text-3xl lg:text-4xl">
                Dashboard: {{ $client->name }}
            </h1>
            @if ($client->renewal_date)
                <p class="mt-3 text-sm font-bold text-red-600 sm:text-base">
                    Next renewal date: {{ $client->renewal_date->format('d/m/Y') }}
                    @if ($daysUntilRenewal !== null)
                        <span class="font-extrabold">
                            @if ($daysUntilRenewal > 0)
                                — {{ $daysUntilRenewal }} {{ $daysUntilRenewal === 1 ? 'day' : 'days' }} remaining until renewal
                            @elseif ($daysUntilRenewal === 0)
                                — renewal is today
                            @else
                                — renewal was {{ abs($daysUntilRenewal) }} {{ abs($daysUntilRenewal) === 1 ? 'day' : 'days' }} ago
                            @endif
                        </span>
                    @endif
                </p>
            @else
                <p class="mt-3 text-sm font-semibold text-oah-muted">Renewal date not set.</p>
            @endif
        </div>

        <div class="flex w-full shrink-0 items-center justify-end gap-4 sm:gap-5 lg:w-auto">
            <img
                src="{{ asset('images/company-logo.svg') }}?v=1"
                alt="OAH Partnership Programme"
                width="197"
                height="96"
                class="h-16 w-auto max-h-16 shrink-0 object-contain sm:h-20 sm:max-h-20"
                decoding="async"
            >
            @if ($client->logo_path)
                <img
                    src="{{ asset('storage/'.$client->logo_path) }}"
                    alt="{{ $client->name }}"
                    width="96"
                    height="96"
                    class="h-16 w-16 shrink-0 rounded-lg border border-neutral-200 sm:h-20 sm:w-20"
                    decoding="async"
                >
            @else
                <div
                    class="flex h-16 w-16 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-oah-black text-lg font-bold text-white sm:h-20 sm:w-20 sm:text-xl"
                    aria-hidden="true"
                >
                    {{ strtoupper(substr($client->name, 0, 1)) }}
                </div>
            @endif
        </div>
    </div>

    @if (count($products) > 0)
        @php
            $productCount = count($products);
        @endphp

        <div class="rounded-2xl border border-neutral-200 bg-white p-6 shadow-oah sm:p-8 lg:p-10">
        <span id="request-legal-breakdown" class="sr-only" tabindex="-1"></span>
        {{-- Mobile: name + bar per product, then buttons --}}
        <div class="space-y-10 min-[1100px]:hidden">
            @foreach ($products as $product)
                <div class="space-y-4">
                    <p class="text-left text-base font-semibold leading-snug text-oah-black sm:text-lg">
                        {{ $product['name'] ?? '—' }}
                    </p>
                    <x-user.utilisation-bar
                        :assigned="$product['quantity'] ?? 0"
                        :used="$product['used'] ?? 0"
                        class="w-full"
                    />
                </div>
            @endforeach

            <div class="user-dashboard-button-stack pt-2">
                <button
                    type="button"
                    class="user-enquiry-btn user-enquiry-btn--primary"
                    data-oah-enquiry
                    data-oah-enquiry-action="{{ route('user.request-legal-breakdown') }}"
                    data-oah-enquiry-title="Request legal hours breakdown"
                >
                    Request breakdown of legal hours used
                </button>

                <button
                    type="button"
                    class="user-enquiry-btn user-enquiry-btn--primary"
                    data-oah-enquiry
                    data-oah-enquiry-action="{{ route('user.request-training-or-top-up') }}"
                    data-oah-enquiry-title="Training or top-up enquiry"
                >
                    Enquire about booking training or top-up products
                </button>
            </div>
        </div>

        {{-- Desktop: product names (auto width) | bars | buttons --}}
        <div
            class="hidden min-[1100px]:grid min-[1100px]:gap-x-8 min-[1100px]:gap-y-12"
            style="grid-template-columns: minmax(14rem, 24rem) minmax(0, 1fr) minmax(15rem, 18rem); grid-template-rows: repeat({{ $productCount }}, minmax(6.5rem, auto));"
        >
            @foreach ($products as $product)
                <div class="flex h-full min-h-[6.5rem] min-w-0 items-center justify-start self-stretch pe-4">
                    <p class="max-w-full whitespace-normal break-words text-left text-base font-semibold leading-snug text-oah-black sm:text-lg">
                        {{ $product['name'] ?? '—' }}
                    </p>
                </div>
                <div class="flex items-center justify-center">
                    <x-user.utilisation-bar
                        :assigned="$product['quantity'] ?? 0"
                        :used="$product['used'] ?? 0"
                        class="w-full max-w-xl"
                    />
                </div>
            @endforeach

            <div
                class="user-dashboard-button-stack col-start-3 row-start-1 h-full justify-center self-stretch px-2"
                style="grid-row: 1 / span {{ $productCount }};"
            >
                <button
                    type="button"
                    class="user-enquiry-btn user-enquiry-btn--primary"
                    data-oah-enquiry
                    data-oah-enquiry-action="{{ route('user.request-legal-breakdown') }}"
                    data-oah-enquiry-title="Request legal hours breakdown"
                >
                    Request breakdown of legal hours used
                </button>

                <button
                    type="button"
                    class="user-enquiry-btn user-enquiry-btn--primary"
                    data-oah-enquiry
                    data-oah-enquiry-action="{{ route('user.request-training-or-top-up') }}"
                    data-oah-enquiry-title="Training or top-up enquiry"
                >
                    Enquire about booking training or top-up products
                </button>
            </div>
        </div>
        </div>
    @else
        <div class="rounded-2xl border-2 border-dashed border-neutral-200 bg-white px-6 py-16 text-center">
            <p class="font-semibold text-oah-black">No products on your package yet</p>
            <p class="mt-2 text-sm text-oah-muted">Your administrator will assign products to your account.</p>
        </div>
    @endif
</div>

<x-user.enquiry-modal
    :default-name="old('contact_name', auth()->user()->name)"
    :default-email="old('contact_email', auth()->user()->email)"
/>
@endsection