@extends('storefront.layout')

@section('title', 'My account')

@section('content')
@php
    $accountName = $customer->displayName();
    $statusValue = is_object($customer->account_status)
        ? ($customer->account_status->value ?? '')
        : (string) $customer->account_status;
    $accountStatus = match ($statusValue) {
        'active' => 'Active',
        'suspended' => 'Suspended',
        'pending_review' => 'Legacy review',
        'rejected' => 'Unavailable',
        default => 'Active',
    };
    $customerSince = optional($customer->created_at)->format('M j, Y');
@endphp
<div class="min-h-[80vh] bg-[#f7f6f2] px-4 py-10">
<div class="mx-auto max-w-6xl">

    <section class="mb-6 overflow-hidden rounded-3xl border border-stone-200 bg-white shadow-[0_24px_70px_rgba(28,25,23,0.10)]">
        <div class="grid lg:grid-cols-[1.35fr_0.95fr]">
            <div class="bg-[#007a55] p-6 text-white md:p-8">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-100/80">My account</p>
                    <span class="inline-flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1 text-xs font-semibold text-white ring-1 ring-white/25">
                        <span class="h-2 w-2 rounded-full bg-[#ffd400]"></span>
                        {{ $accountStatus }}
                    </span>
                </div>

                <h1 class="mt-5 text-4xl font-semibold tracking-tight md:text-5xl">Welcome back, {{ $user->name }}.</h1>
                <p class="mt-4 max-w-2xl text-sm leading-6 text-emerald-50/90 md:text-base">
                    Manage your wholesale account, review orders, update shipping addresses, and get back to the catalog quickly.
                </p>

                <div class="mt-7 flex flex-wrap gap-3">
                    <a href="{{ url('/products') }}"
                       class="inline-flex items-center gap-2 rounded-xl bg-white px-4 py-2.5 text-sm font-semibold text-[#007a55] shadow-lg shadow-emerald-950/20 transition hover:-translate-y-0.5 hover:bg-emerald-50">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/></svg>
                        Browse catalog
                    </a>
                    <a href="{{ route('storefront.orders') }}"
                       class="inline-flex items-center gap-2 rounded-xl bg-white/10 px-4 py-2.5 text-sm font-semibold text-white ring-1 ring-white/25 transition hover:-translate-y-0.5 hover:bg-white/15">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2.25 4.5h-10.5A2.25 2.25 0 0 1 4.5 18.25V5.75A2.25 2.25 0 0 1 6.75 3.5h6.879c.597 0 1.169.237 1.591.659l2.621 2.621c.422.422.659.994.659 1.591v9.879a2.25 2.25 0 0 1-2.25 2.25Z"/></svg>
                        View orders
                    </a>
                </div>
            </div>

            <div class="grid divide-y divide-stone-200 bg-stone-50/80 sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-1 lg:divide-x-0 lg:divide-y">
                <div class="p-5">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Buyer</p>
                    <p class="mt-2 text-xl font-semibold text-stone-950">{{ $accountName }}</p>
                    <p class="mt-1 text-sm text-stone-500">Wholesale account</p>
                </div>
                <div class="p-5">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Contact</p>
                    <p class="mt-2 text-sm font-semibold text-stone-950">{{ $user->email }}</p>
                    @if ($customer->phone)
                        <p class="mt-1 text-sm text-stone-500">{{ $customer->phone }}</p>
                    @endif
                </div>
                <div class="p-5 sm:col-span-2 lg:col-span-1">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Account status</p>
                    <p class="mt-2 text-sm font-semibold text-stone-950">{{ $accountStatus }}</p>
                    @if ($customerSince)
                        <p class="mt-1 text-sm text-stone-500">Customer since {{ $customerSince }}</p>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <section class="grid gap-5 lg:grid-cols-[1.4fr_0.9fr]">
        <div class="overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm">
            <div class="border-b border-stone-100 px-5 py-5 md:px-6">
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Quick actions</p>
                <h2 class="mt-1 text-xl font-semibold text-stone-950">What would you like to do next?</h2>
            </div>

            <div class="divide-y divide-stone-100">
                <a href="{{ url('/products') }}" class="group grid gap-4 px-5 py-5 transition hover:bg-[#fbfaf7] sm:grid-cols-[auto_1fr_auto] sm:items-center md:px-6">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 text-[#007a55] ring-1 ring-emerald-100">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.7" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6Zm9.75 0a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25Zm9.75 0a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"/></svg>
                    </div>
                    <div>
                        <h3 class="font-semibold text-stone-950 transition group-hover:text-[#007a55]">Browse catalog</h3>
                        <p class="mt-1 text-sm leading-6 text-stone-500">Shop the full Vida Mansa wholesale catalog and add products to your cart.</p>
                    </div>
                    <span class="inline-flex w-fit items-center gap-2 rounded-xl border border-stone-200 bg-white px-3.5 py-2 text-sm font-semibold text-stone-900 shadow-sm transition group-hover:-translate-y-0.5 group-hover:border-emerald-200 group-hover:text-[#007a55]">
                        Open
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
                    </span>
                </a>

                <a href="{{ route('storefront.orders') }}" class="group grid gap-4 px-5 py-5 transition hover:bg-[#fbfaf7] sm:grid-cols-[auto_1fr_auto] sm:items-center md:px-6">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 text-amber-700 ring-1 ring-amber-100">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.7" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2.25 4.5h-10.5A2.25 2.25 0 0 1 4.5 18.25V5.75A2.25 2.25 0 0 1 6.75 3.5h6.879c.597 0 1.169.237 1.591.659l2.621 2.621c.422.422.659.994.659 1.591v9.879a2.25 2.25 0 0 1-2.25 2.25Z"/></svg>
                    </div>
                    <div>
                        <h3 class="font-semibold text-stone-950 transition group-hover:text-[#007a55]">Orders</h3>
                        <p class="mt-1 text-sm leading-6 text-stone-500">Review order history, payment status, tracking details, and reorder previous items.</p>
                    </div>
                    <span class="inline-flex w-fit items-center gap-2 rounded-xl border border-stone-200 bg-white px-3.5 py-2 text-sm font-semibold text-stone-900 shadow-sm transition group-hover:-translate-y-0.5 group-hover:border-emerald-200 group-hover:text-[#007a55]">
                        View
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
                    </span>
                </a>

                <a href="{{ route('storefront.addresses') }}" class="group grid gap-4 px-5 py-5 transition hover:bg-[#fbfaf7] sm:grid-cols-[auto_1fr_auto] sm:items-center md:px-6">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-stone-100 text-stone-700 ring-1 ring-stone-200">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.7" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/></svg>
                    </div>
                    <div>
                        <h3 class="font-semibold text-stone-950 transition group-hover:text-[#007a55]">Shipping addresses</h3>
                        <p class="mt-1 text-sm leading-6 text-stone-500">Add, edit, or remove saved destinations for a faster checkout experience.</p>
                    </div>
                    <span class="inline-flex w-fit items-center gap-2 rounded-xl border border-stone-200 bg-white px-3.5 py-2 text-sm font-semibold text-stone-900 shadow-sm transition group-hover:-translate-y-0.5 group-hover:border-emerald-200 group-hover:text-[#007a55]">
                        Manage
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
                    </span>
                </a>
            </div>
        </div>

        <aside class="rounded-2xl border border-stone-200 bg-white p-5 shadow-sm md:p-6">
            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Account details</p>
            <h2 class="mt-1 text-xl font-semibold text-stone-950">{{ $accountName }}</h2>

            <dl class="mt-5 space-y-4">
                <div>
                    <dt class="text-xs font-semibold uppercase tracking-[0.16em] text-stone-400">Primary contact</dt>
                    <dd class="mt-1 text-sm font-semibold text-stone-950">{{ $user->name }}</dd>
                    <dd class="mt-0.5 text-sm text-stone-500">{{ $user->email }}</dd>
                </div>

                <div>
                    <dt class="text-xs font-semibold uppercase tracking-[0.16em] text-stone-400">Payment Terms status</dt>
                    <dd class="mt-1.5">
                        @if ($approvedCreditApplication)
                            <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700 ring-1 ring-inset ring-emerald-200">
                                <span class="h-1.5 w-1.5 rounded-full bg-emerald-500" aria-hidden="true"></span>
                                Approved
                            </span>
                            <p class="mt-2 text-xs leading-5 text-stone-500">
                                NET {{ $approvedCreditApplication->approved_terms_days }} ·
                                ${{ number_format($approvedCreditApplication->availableLimit(), 2) }} available
                            </p>
                        @else
                            <span class="inline-flex items-center gap-1.5 rounded-full bg-stone-100 px-2.5 py-1 text-xs font-semibold text-stone-600 ring-1 ring-inset ring-stone-200">
                                <span class="h-1.5 w-1.5 rounded-full bg-stone-400" aria-hidden="true"></span>
                                Not approved
                            </span>
                            <p class="mt-2 text-xs leading-5 text-stone-500">{{ $paymentTermsAvailabilityMessage }}</p>
                        @endif
                        <a href="{{ route('storefront.credit-application') }}" class="mt-3 inline-flex text-xs font-semibold text-emerald-700 hover:text-emerald-900">
                            {{ $approvedCreditApplication ? 'View terms and available credit' : 'Apply for payment terms' }}
                        </a>
                    </dd>
                </div>

                @if ($customer->website)
                    <div>
                        <dt class="text-xs font-semibold uppercase tracking-[0.16em] text-stone-400">Website</dt>
                        <dd class="mt-1 text-sm font-semibold text-stone-950">{{ $customer->website }}</dd>
                    </div>
                @endif

                @if ($customer->business_type)
                    <div>
                        <dt class="text-xs font-semibold uppercase tracking-[0.16em] text-stone-400">Business type</dt>
                        <dd class="mt-1 text-sm font-semibold text-stone-950">{{ $customer->business_type }}</dd>
                    </div>
                @endif
            </dl>
        </aside>
    </section>

</div>
</div>
@endsection