@extends('layouts.app')

@section('page-title', 'Check Out')

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h2 class="text-xl font-bold text-slate-800">Check Out</h2>
        <p class="text-sm text-slate-500 mt-0.5">{{ $reservations->total() }} tamu sedang menginap</p>
    </div>
    <a href="{{ route('checkin.index') }}"
       class="flex items-center gap-2 text-slate-600 border border-slate-200 px-4 py-2 rounded-xl hover:bg-slate-50 transition-colors text-sm">
        <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 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
        </svg>
        Check In
    </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 kode, tamu, atau nomor kamar..."
                   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">Cari</button>
    </form>
</div>

<!-- Daftar Tamu -->
<div class="space-y-4">
    @forelse($reservations as $res)
        @php
            $isOverdue = $res->check_out_date->lt(today());
            $isDueToday = $res->check_out_date->isToday();
        @endphp
        <div class="bg-white rounded-2xl shadow-sm border {{ $isOverdue ? 'border-red-200' : ($isDueToday ? 'border-orange-200' : 'border-slate-100') }} p-5"
             x-data="{ open: false }">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center text-orange-700 font-bold text-lg">
                        {{ strtoupper(substr($res->guest->full_name, 0, 1)) }}
                    </div>
                    <div>
                        <div class="flex items-center gap-2">
                            <h3 class="font-bold text-slate-800">{{ $res->guest->full_name }}</h3>
                            @if($isOverdue)
                                <span class="badge-red">Terlambat</span>
                            @elseif($isDueToday)
                                <span class="badge-orange">Hari Ini</span>
                            @endif
                        </div>
                        <p class="text-sm text-slate-500">
                            {{ $res->reservation_code }} •
                            Kamar {{ $res->room->room_number }} •
                            Check-in: {{ $res->checked_in_at ? $res->checked_in_at->format('d M H:i') : $res->check_in_date->format('d M') }} •
                            Check-out: {{ $res->check_out_date->format('d M Y') }}
                        </p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="text-right">
                        <p class="text-sm text-slate-500">Total</p>
                        <p class="font-bold text-slate-800">Rp {{ number_format($res->total_price, 0, ',', '.') }}</p>
                        <span class="badge-{{ $res->payment_status_color }}">{{ ucfirst($res->payment_status) }}</span>
                    </div>
                    <button @click="open = !open"
                            class="flex items-center gap-2 bg-orange-500 text-white px-4 py-2 rounded-xl hover:bg-orange-600 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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                        </svg>
                        Check Out
                    </button>
                </div>
            </div>

            <!-- Formulir Check-out -->
            <div x-show="open" x-cloak class="mt-4 pt-4 border-t border-slate-100">
                @if($res->remaining_balance > 0)
                    <div class="mb-3 bg-red-50 border border-red-200 rounded-xl px-4 py-3 text-sm text-red-700">
                        ⚠️ Sisa tagihan: <strong>Rp {{ number_format($res->remaining_balance, 0, ',', '.') }}</strong>
                        <a href="{{ route('payments.create', ['reservation_id' => $res->id]) }}"
                           class="underline ml-1">Tambah pembayaran</a>
                    </div>
                @endif
                <form method="POST" action="{{ route('checkout.process', $res) }}" class="flex flex-wrap gap-4">
                    @csrf
                    <div class="flex-1 min-w-48">
                        <label class="block text-xs font-medium text-slate-600 mb-1">Biaya Check-out Terlambat (Rp)</label>
                        <input type="number" name="late_checkout_fee" value="0" min="0"
                               class="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none">
                    </div>
                    <div class="flex-1 min-w-48">
                        <label class="block text-xs font-medium text-slate-600 mb-1">Catatan</label>
                        <input type="text" name="notes" placeholder="Catatan check-out..."
                               class="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none">
                    </div>
                    <div class="flex items-end">
                        <button type="submit"
                                class="px-5 py-2 bg-orange-500 text-white text-sm font-medium rounded-lg hover:bg-orange-600">
                            Konfirmasi Check Out
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @empty
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-12 text-center">
            <div class="w-16 h-16 bg-slate-50 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/>
                </svg>
            </div>
            <h3 class="text-lg font-semibold text-slate-700">Tidak ada tamu yang perlu check-out</h3>
            <p class="text-slate-400 mt-1">Semua tamu yang sudah check-in telah selesai check-out</p>
        </div>
    @endforelse
</div>

@if($reservations->hasPages())
    <div class="mt-5">{{ $reservations->appends(request()->query())->links() }}</div>
@endif
@endsection