@extends('layouts.app')

@section('page-title', 'Tamu')

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h2 class="text-xl font-bold text-slate-800">Manajemen Tamu</h2>
        <p class="text-sm text-slate-500 mt-0.5">{{ $guests->total() }} tamu terdaftar</p>
    </div>
    <a href="{{ route('guests.create') }}"
       class="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-xl hover:bg-indigo-700 transition-colors text-sm font-medium">
        <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="M12 4v16m8-8H4"/>
        </svg>
        Daftarkan Tamu
    </a>
</div>

<!-- Cari -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-4 mb-5">
    <form method="GET" class="flex gap-3">
        <div class="flex-1 relative">
            <svg class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
            <input type="text" name="search" value="{{ request('search') }}"
                   placeholder="Cari berdasarkan nama, email, telepon, atau nomor identitas..."
                   class="w-full pl-10 pr-4 py-2.5 text-sm border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none">
        </div>
        <button type="submit"
                class="px-5 py-2.5 bg-indigo-600 text-white text-sm font-medium rounded-xl hover:bg-indigo-700 transition-colors">
            Cari
        </button>
        @if(request('search'))
            <a href="{{ route('guests.index') }}" class="px-4 py-2.5 text-sm text-slate-600 bg-slate-100 rounded-xl hover:bg-slate-200">Hapus</a>
        @endif
    </form>
</div>

<!-- Tabel -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-slate-50 border-b border-slate-100">
            <tr>
                <th class="text-left px-5 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Tamu</th>
                <th class="text-left px-3 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Kontak</th>
                <th class="text-left px-3 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Identitas</th>
                <th class="text-left px-3 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Menginap</th>
                <th class="text-right px-5 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-50">
            @forelse($guests as $guest)
                <tr class="hover:bg-slate-50 transition-colors">
                    <td class="px-5 py-3">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0">
                                {{ strtoupper(substr($guest->full_name, 0, 1)) }}
                            </div>
                            <div>
                                <a href="{{ route('guests.show', $guest) }}" class="font-medium text-slate-800 hover:text-indigo-600">
                                    {{ $guest->full_name }}
                                </a>
                                <p class="text-xs text-slate-400">{{ $guest->nationality }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-3 py-3">
                        <p class="text-slate-700">{{ $guest->phone ?: '—' }}</p>
                        <p class="text-xs text-slate-400">{{ $guest->email ?: '—' }}</p>
                    </td>
                    <td class="px-3 py-3">
                        <p class="text-slate-700 font-mono text-xs">{{ $guest->identity_number ?: '—' }}</p>
                        <p class="text-xs text-slate-400">{{ $guest->identity_type_label }}</p>
                    </td>
                    <td class="px-3 py-3">
                        <span class="badge-blue">{{ $guest->reservations_count }} reservasi</span>
                    </td>
                    <td class="px-5 py-3">
                        <div class="flex items-center justify-end gap-2">
                            <a href="{{ route('guests.show', $guest) }}"
                               class="text-slate-500 hover:text-slate-700 p-1.5 rounded-lg hover:bg-slate-100">
                                <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 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                </svg>
                            </a>
                            <a href="{{ route('guests.edit', $guest) }}"
                               class="text-indigo-600 hover:text-indigo-800 p-1.5 rounded-lg hover:bg-indigo-50">
                                <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>
                            </a>
                            <a href="{{ route('reservations.create', ['guest_id' => $guest->id]) }}"
                               class="text-green-600 hover:text-green-800 p-1.5 rounded-lg hover:bg-green-50">
                                <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="M12 4v16m8-8H4"/>
                                </svg>
                            </a>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" class="px-5 py-10 text-center text-slate-400">
                        @if(request('search'))
                            Tidak ada tamu ditemukan untuk "{{ request('search') }}"
                        @else
                            Belum ada tamu yang terdaftar
                        @endif
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
    @if($guests->hasPages())
        <div class="px-5 py-3 border-t border-slate-100">
            {{ $guests->appends(request()->query())->links() }}
        </div>
    @endif
</div>
@endsection