@extends('layouts.epelcon')
@section('title', $customer->name)

@section('content')
<div x-data="{ edit: false }">
    <a href="{{ route('epelcon.customers.index') }}" class="mb-4 inline-flex items-center gap-1 text-sm font-bold text-indigo-600 hover:underline">← Customers</a>

    <div class="grid gap-5 lg:grid-cols-3">
        {{-- Profile --}}
        <div class="h-fit rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <div class="flex items-center gap-4">
                <div class="flex h-14 w-14 items-center justify-center rounded-full bg-indigo-100 text-lg font-bold text-indigo-700">{{ strtoupper(substr($customer->name, 0, 2)) }}</div>
                <div>
                    <h1 class="text-lg font-extrabold text-slate-900">{{ $customer->name }} @if ($customer->vip)⭐@endif</h1>
                    @if ($customer->membership)
                        <span class="rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase text-white" style="background: {{ $customer->membership->plan->color }}">{{ $customer->membership->plan->name }} member</span>
                    @endif
                </div>
            </div>
            <dl class="mt-4 space-y-2 text-sm">
                <div class="flex justify-between"><dt class="text-slate-400">Phone</dt><dd class="font-semibold text-slate-700">{{ $customer->phone ?? '—' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">Email</dt><dd class="font-semibold text-slate-700">{{ $customer->email ?? '—' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">Location</dt><dd class="font-semibold text-slate-700">{{ $customer->city ?? '—' }}{{ $customer->country ? ', ' . $customer->country : '' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">ID</dt><dd class="font-semibold text-slate-700">{{ $customer->id_type ?? '—' }} {{ $customer->id_number }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">Reward points</dt><dd class="font-extrabold text-violet-600">{{ $customer->reward_points }} pts</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">Customer since</dt><dd class="font-semibold text-slate-700">{{ $customer->created_at->format('M Y') }}</dd></div>
            </dl>
            <div class="mt-4 grid grid-cols-2 gap-2 rounded-xl bg-slate-50 p-3 text-center">
                <div><p class="text-lg font-extrabold text-slate-900">@money($lifetime['bookings_value'])</p><p class="text-[10px] font-bold uppercase text-slate-400">Room spend</p></div>
                <div><p class="text-lg font-extrabold text-slate-900">@money($lifetime['orders_value'])</p><p class="text-[10px] font-bold uppercase text-slate-400">F&B spend</p></div>
            </div>
            <button @click="edit = true" class="mt-4 w-full rounded-xl bg-indigo-50 py-2.5 text-sm font-bold text-indigo-600 hover:bg-indigo-100">Edit profile</button>
            @if ($customer->notes)<p class="mt-3 rounded-xl bg-amber-50 p-3 text-xs text-amber-800">{{ $customer->notes }}</p>@endif
        </div>

        {{-- History --}}
        <div class="space-y-5 lg:col-span-2">
            <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                <h2 class="mb-3 font-bold text-slate-900">Recent bookings</h2>
                <div class="divide-y divide-slate-100">
                    @forelse ($customer->bookings as $booking)
                        <a href="{{ route('epelcon.bookings.show', $booking) }}" class="flex items-center justify-between py-2.5 text-sm hover:bg-slate-50">
                            <span class="font-mono text-xs font-bold text-indigo-600">{{ $booking->code }}</span>
                            <span class="text-slate-600">{{ $booking->room->number ?? '—' }} · {{ $booking->check_in->format('j M') }} → {{ $booking->check_out->format('j M Y') }}</span>
                            <span class="font-bold text-slate-900">@money($booking->total_amount)</span>
                            <span class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-bold uppercase text-slate-600">{{ str_replace('_', ' ', $booking->status) }}</span>
                        </a>
                    @empty
                        <p class="py-4 text-center text-sm text-slate-400">No bookings yet.</p>
                    @endforelse
                </div>
            </div>

            <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                <h2 class="mb-3 font-bold text-slate-900">Recent orders</h2>
                <div class="divide-y divide-slate-100">
                    @forelse ($customer->orders as $order)
                        <a href="{{ route('epelcon.orders.show', $order) }}" class="flex items-center justify-between py-2.5 text-sm hover:bg-slate-50">
                            <span class="font-mono text-xs font-bold text-indigo-600">{{ $order->code }}</span>
                            <span class="capitalize text-slate-600">{{ str_replace('_', ' ', $order->type) }} · {{ $order->created_at->format('j M Y') }}</span>
                            <span class="font-bold text-slate-900">@money($order->total)</span>
                        </a>
                    @empty
                        <p class="py-4 text-center text-sm text-slate-400">No orders yet.</p>
                    @endforelse
                </div>
            </div>

            <div class="grid gap-5 sm:grid-cols-2">
                <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                    <h2 class="mb-3 font-bold text-slate-900">Reward history</h2>
                    <div class="space-y-2 text-sm">
                        @forelse ($customer->rewardTransactions as $tx)
                            <div class="flex justify-between"><span class="text-slate-600">{{ $tx->description }}</span>
                                <span class="font-bold {{ $tx->points > 0 ? 'text-emerald-600' : 'text-rose-500' }}">{{ $tx->points > 0 ? '+' : '' }}{{ $tx->points }}</span></div>
                        @empty
                            <p class="text-sm text-slate-400">No reward activity.</p>
                        @endforelse
                    </div>
                </div>
                <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                    <h2 class="mb-3 font-bold text-slate-900">Referrals made</h2>
                    <div class="space-y-2 text-sm">
                        @forelse ($customer->referralsMade as $referral)
                            <div class="flex justify-between"><span class="text-slate-600">{{ $referral->referred->name ?? '—' }}</span>
                                <span class="font-bold text-violet-600">+{{ $referral->reward_points }} pts</span></div>
                        @empty
                            <p class="text-sm text-slate-400">No referrals yet.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Edit modal --}}
    <div x-cloak x-show="edit" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="edit = false"></div>
        <div x-show="edit" x-transition class="relative max-h-[92vh] w-full max-w-lg overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">Edit customer</h2>
            <form method="POST" action="{{ route('epelcon.customers.update', $customer) }}" class="grid grid-cols-2 gap-4">@csrf
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Full name</span><input name="name" value="{{ $customer->name }}" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Phone</span><input name="phone" value="{{ $customer->phone }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Email</span><input type="email" name="email" value="{{ $customer->email }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">City</span><input name="city" value="{{ $customer->city }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Country</span><input name="country" value="{{ $customer->country }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">ID type</span><input name="id_type" value="{{ $customer->id_type }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">ID number</span><input name="id_number" value="{{ $customer->id_number }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label class="col-span-2 flex items-center gap-2 text-sm font-semibold text-slate-600"><input type="checkbox" name="vip" value="1" class="rounded text-indigo-600" @checked($customer->vip)> VIP customer</label>
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Notes</span><textarea name="notes" rows="2" class="w-full rounded-xl border-slate-200 text-sm">{{ $customer->notes }}</textarea></label>
                <div class="col-span-2 flex justify-end gap-2">
                    <button type="button" @click="edit = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
