@extends('layouts.app')

@section('title', $guest->full_name)
@section('nav_guests', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', $guest->full_name)
@section('page_subtitle', 'Guest profile & stay history')

@section('content')

@if (session('success'))
<div class="mb-5 flex items-center gap-3 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl px-5 py-3.5">
    <svg class="w-4 h-4 text-teal-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    <p class="text-teal-700 text-sm font-medium">{{ session('success') }}</p>
</div>
@endif

@php
    $statusBadge = [
        'pending'     => 'bg-amber-50 text-amber-700 border-[0.5px] border-amber-200',
        'confirmed'   => 'bg-teal-50 text-teal-700 border-[0.5px] border-teal-200',
        'checked_in'  => 'bg-green-50 text-green-700 border-[0.5px] border-green-200',
        'checked_out' => 'bg-gray-50 text-gray-500 border-[0.5px] border-gray-200',
        'cancelled'   => 'bg-red-50 text-red-600 border-[0.5px] border-red-200',
        'no_show'     => 'bg-orange-50 text-orange-600 border-[0.5px] border-orange-200',
    ];
    $statusLabel = [
        'pending'     => 'Pending',
        'confirmed'   => 'Confirmed',
        'checked_in'  => 'Checked In',
        'checked_out' => 'Checked Out',
        'cancelled'   => 'Cancelled',
        'no_show'     => 'No Show',
    ];
    $totalStays = $reservations->whereIn('status', ['checked_in', 'checked_out'])->count();
    $totalSpent = $reservations->whereIn('status', ['checked_in', 'checked_out'])->sum('amount');
    $firstStay  = $reservations->whereIn('status', ['checked_in', 'checked_out'])->last();
    $lastStay   = $reservations->whereIn('status', ['checked_in', 'checked_out'])->first();
@endphp

{{-- Back + Actions --}}
<div class="flex items-center justify-between mb-6">
    <a href="{{ route('guests.index') }}"
       class="inline-flex items-center gap-1.5 text-gray-400 hover:text-gray-600 text-sm transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Guests
    </a>
    <div class="flex items-center gap-2">
        <a href="{{ route('reservations.create', ['guest_id' => $guest->id]) }}"
           class="inline-flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            New Reservation
        </a>
        <a href="{{ route('guests.edit', $guest->id) }}"
           class="px-3.5 py-1.5 text-sm text-gray-600 border-[0.5px] border-gray-200 hover:bg-gray-50 rounded-lg transition-colors font-medium">
            Edit Profile
        </a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

    {{-- LEFT: Profile (2/3) --}}
    <div class="lg:col-span-2 space-y-4">

        {{-- Header card --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-6">
            <div class="flex items-start gap-4">
                <div class="w-14 h-14 rounded-xl bg-teal-50 border-[0.5px] border-teal-100 text-teal-700 flex items-center justify-center text-xl font-black flex-shrink-0">
                    {{ strtoupper(substr($guest->first_name, 0, 1)) }}{{ strtoupper(substr($guest->last_name, 0, 1)) }}
                </div>
                <div class="flex-1">
                    <div class="flex items-center gap-2 flex-wrap">
                        <h2 class="text-gray-900 font-bold text-xl">{{ $guest->full_name }}</h2>
                        @if($guest->vip)
                        <span class="text-xs font-bold px-2 py-0.5 bg-amber-50 text-amber-600 border-[0.5px] border-amber-200 rounded-full">VIP</span>
                        @endif
                        @if($guest->blacklisted)
                        <span class="text-xs font-bold px-2 py-0.5 bg-red-50 text-red-600 border-[0.5px] border-red-200 rounded-full">BLACKLISTED</span>
                        @endif
                    </div>
                    @if($guest->company)
                    <p class="text-gray-500 text-sm mt-0.5">{{ $guest->company }}</p>
                    @endif
                    <p class="text-gray-400 text-xs mt-1">Profile #{{ $guest->id }} · Added {{ $guest->created_at->format('M j, Y') }}</p>
                </div>
            </div>

            {{-- Contact row --}}
            <div class="mt-5 grid grid-cols-2 gap-4 pt-5 border-t border-gray-100">
                <div class="flex items-start gap-2.5">
                    <svg class="w-4 h-4 text-gray-300 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                    </svg>
                    <div>
                        <p class="text-gray-400 text-[10px] uppercase tracking-wider font-semibold">Phone</p>
                        <p class="text-gray-700 text-sm mt-0.5">{{ $guest->phone ?? '—' }}</p>
                    </div>
                </div>
                <div class="flex items-start gap-2.5">
                    <svg class="w-4 h-4 text-gray-300 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                    </svg>
                    <div>
                        <p class="text-gray-400 text-[10px] uppercase tracking-wider font-semibold">Email</p>
                        <p class="text-gray-700 text-sm mt-0.5">{{ $guest->email ?? '—' }}</p>
                    </div>
                </div>
                <div class="flex items-start gap-2.5">
                    <svg class="w-4 h-4 text-gray-300 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    <div>
                        <p class="text-gray-400 text-[10px] uppercase tracking-wider font-semibold">Date of Birth</p>
                        <p class="text-gray-700 text-sm mt-0.5">
                            {{ $guest->date_of_birth ? $guest->date_of_birth->format('F j, Y') : '—' }}
                            @if($guest->date_of_birth)
                            <span class="text-gray-400 text-xs">({{ $guest->date_of_birth->age }} yrs)</span>
                            @endif
                        </p>
                    </div>
                </div>
                <div class="flex items-start gap-2.5">
                    <svg class="w-4 h-4 text-gray-300 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <div>
                        <p class="text-gray-400 text-[10px] uppercase tracking-wider font-semibold">Nationality</p>
                        <p class="text-gray-700 text-sm mt-0.5">{{ $guest->nationality ?? '—' }}</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- ID & Address --}}
        <div class="grid grid-cols-2 gap-4">
            <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
                <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider mb-3">Government ID</p>
                <div class="space-y-2">
                    <div>
                        <p class="text-gray-400 text-[10px] uppercase tracking-wider">Type</p>
                        <p class="text-gray-700 text-sm mt-0.5">{{ $guest->id_type ?? '—' }}</p>
                    </div>
                    <div>
                        <p class="text-gray-400 text-[10px] uppercase tracking-wider">Number</p>
                        <p class="text-gray-700 text-sm font-mono mt-0.5">{{ $guest->id_number ?? '—' }}</p>
                    </div>
                </div>
                @if($guest->id_image)
                <div class="mt-3 pt-3 border-t border-gray-100">
                    <p class="text-gray-400 text-[10px] uppercase tracking-wider mb-2">ID Image</p>
                    <a href="{{ asset('storage/' . $guest->id_image) }}" target="_blank" class="block group">
                        <img src="{{ asset('storage/' . $guest->id_image) }}"
                             alt="Government ID"
                             class="w-full rounded-lg object-cover max-h-32 border-[0.5px] border-gray-100 group-hover:opacity-90 transition-opacity">
                        <p class="text-gray-300 text-[10px] mt-1 text-center">Click to view full size</p>
                    </a>
                </div>
                @endif
            </div>
            <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
                <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider mb-3">Address</p>
                <div class="text-sm text-gray-700 space-y-0.5">
                    @if($guest->address)
                    <p>{{ $guest->address }}</p>
                    @endif
                    @if($guest->city || $guest->province)
                    <p>{{ implode(', ', array_filter([$guest->city, $guest->province])) }}</p>
                    @endif
                    <p>{{ $guest->country ?? '—' }}</p>
                </div>
            </div>
        </div>

        {{-- Notes --}}
        @if($guest->notes)
        <div class="bg-amber-50 border-[0.5px] border-amber-200 rounded-xl p-4 flex gap-3">
            <svg class="w-4 h-4 text-amber-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
            </svg>
            <div>
                <p class="text-amber-700 font-semibold text-xs mb-1">Notes & Preferences</p>
                <p class="text-amber-700 text-sm">{{ $guest->notes }}</p>
            </div>
        </div>
        @endif

        {{-- Stay History --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100">
                <p class="text-gray-500 text-xs font-semibold uppercase tracking-wider">Stay History</p>
            </div>
            @forelse($reservations as $res)
            <div class="flex items-center gap-4 px-5 py-3.5 {{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors">
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 flex-wrap">
                        <p class="text-gray-800 font-medium text-sm">{{ $res->booking_no }}</p>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold {{ $statusBadge[$res->status] ?? '' }}">
                            {{ $statusLabel[$res->status] ?? $res->status }}
                        </span>
                    </div>
                    <p class="text-gray-400 text-xs mt-0.5">
                        Room {{ $res->room_no }} · {{ $res->room_type }} ·
                        {{ $res->check_in->format('M j') }}–{{ $res->check_out->format('M j, Y') }} ·
                        {{ $res->nights }} night{{ $res->nights > 1 ? 's' : '' }}
                    </p>
                </div>
                <div class="text-right flex-shrink-0">
                    <p class="text-gray-700 font-semibold text-sm">&#8369;{{ number_format($res->amount, 0) }}</p>
                    @php $bal = $res->balanceDue(); @endphp
                    @if($bal > 0)
                    <p class="text-red-500 text-xs">&#8369;{{ number_format($bal, 0) }} due</p>
                    @elseif(in_array($res->status, ['checked_in', 'checked_out']))
                    <p class="text-green-600 text-xs">Settled</p>
                    @endif
                </div>
                <a href="{{ route('reservations.show', $res->id) }}"
                   class="text-xs font-semibold text-teal-600 hover:text-teal-700 transition-colors flex-shrink-0">
                    View →
                </a>
            </div>
            @empty
            <div class="px-5 py-8 text-center text-gray-300 text-sm">No reservations linked to this profile.</div>
            @endforelse
        </div>

    </div>

    {{-- RIGHT: Stats (1/3) --}}
    <div class="space-y-4">

        {{-- Stay stats --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5 space-y-4">
            <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider">Stay Statistics</p>
            <div>
                <p class="text-gray-400 text-[10px] uppercase tracking-wider">Total Stays</p>
                <p class="text-gray-900 font-black text-2xl mt-0.5">{{ $totalStays }}</p>
            </div>
            <div>
                <p class="text-gray-400 text-[10px] uppercase tracking-wider">Total Spent</p>
                <p class="text-teal-700 font-black text-2xl mt-0.5">&#8369;{{ number_format($totalSpent, 0) }}</p>
            </div>
            @if($firstStay)
            <div>
                <p class="text-gray-400 text-[10px] uppercase tracking-wider">First Stay</p>
                <p class="text-gray-700 text-sm mt-0.5">{{ $firstStay->check_in->format('M j, Y') }}</p>
            </div>
            @endif
            @if($lastStay)
            <div>
                <p class="text-gray-400 text-[10px] uppercase tracking-wider">Most Recent Stay</p>
                <p class="text-gray-700 text-sm mt-0.5">{{ $lastStay->check_in->format('M j, Y') }}</p>
            </div>
            @endif
        </div>

        {{-- Quick actions --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
            <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider mb-3">Quick Actions</p>
            <div class="space-y-2">
                <a href="{{ route('reservations.create', ['guest_id' => $guest->id]) }}"
                   class="flex items-center gap-2.5 w-full px-3 py-2.5 text-sm font-medium text-white bg-teal-600 hover:bg-teal-700 rounded-lg transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    New Reservation
                </a>
                <a href="{{ route('guests.edit', $guest->id) }}"
                   class="flex items-center gap-2.5 w-full px-3 py-2.5 text-sm font-medium text-gray-600 border-[0.5px] border-gray-200 hover:bg-gray-50 rounded-lg transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    Edit Profile
                </a>
            </div>
        </div>

    </div>

</div>

@endsection