@extends('layouts.app')

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

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h2 class="text-xl font-bold text-slate-800">Reservasi</h2>
        <p class="text-sm text-slate-500 mt-0.5">{{ $reservations->total() }} total reservasi</p>
    </div>
    <a href="{{ route('reservations.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>
        Reservasi Baru
    </a>
</div>

<!-- Filter -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-4 mb-5">
    <form method="GET" class="flex flex-wrap items-center gap-3">
        <div class="flex-1 min-w-48 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 kode atau nama tamu..."
                   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>
        <select name="status" onchange="this.form.submit()"
                class="text-sm border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none">
            <option value="">Semua Status</option>
            @foreach(['pending', 'confirmed', 'checked_in', 'checked_out', 'cancelled', 'no_show'] as $s)
                <option value="{{ $s }}" {{ request('status') === $s ? 'selected' : '' }}>{{ ucfirst(str_replace('_', ' ', $s)) }}</option>
            @endforeach
        </select>
        <input type="date" name="date_from" value="{{ request('date_from') }}"
               class="text-sm border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none">
        <input type="date" name="date_to" value="{{ request('date_to') }}"
               class="text-sm border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none">
        <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>
        @if(request()->anyFilled(['search', 'status', 'date_from', 'date_to']))
            <a href="{{ route('reservations.index') }}" class="text-sm text-slate-500 hover:text-slate-700">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">Reservasi</th>
                <th class="text-left px-3 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">Kamar</th>
                <th class="text-left px-3 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Check-in/out</th>
                <th class="text-left px-3 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Status</th>
                <th class="text-right px-5 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Jumlah</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($reservations as $res)
                <tr class="hover:bg-slate-50">
                    <td class="px-5 py-3">
                        <a href="{{ route('reservations.show', $res) }}"
                           class="font-medium text-indigo-600 hover:text-indigo-800">{{ $res->reservation_code }}</a>
                        <p class="text-xs text-slate-400">{{ $res->source }}</p>
                    </td>
                    <td class="px-3 py-3">
                        <a href="{{ route('guests.show', $res->guest) }}" class="text-slate-700 hover:text-indigo-600">
                            {{ $res->guest->full_name }}
                        </a>
                    </td>
                    <td class="px-3 py-3 text-slate-600">
                        {{ $res->room->room_number }}
                        <p class="text-xs text-slate-400">{{ $res->room->roomType->name }}</p>
                    </td>
                    <td class="px-3 py-3 text-xs text-slate-600">
                        <p>{{ $res->check_in_date->format('d M Y') }}</p>
                        <p>{{ $res->check_out_date->format('d M Y') }}</p>
                        <p class="text-slate-400">{{ $res->months }} bulan</p>
                    </td>
                    <td class="px-3 py-3">
                        <span class="badge-{{ $res->status_color }}">{{ ucfirst(str_replace('_', ' ', $res->status)) }}</span>
                        <br>
                        <span class="badge-{{ $res->payment_status_color }} mt-1">{{ ucfirst($res->payment_status) }}</span>
                    </td>
                    <td class="px-5 py-3 text-right font-medium text-slate-800">
                        Rp {{ number_format($res->total_price, 0, ',', '.') }}
                    </td>
                    <td class="px-5 py-3">
                        <div class="flex items-center justify-end gap-1">
                            <a href="{{ route('reservations.show', $res) }}"
                               class="p-1.5 text-slate-400 hover:text-slate-700 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>
                            @if($res->status === 'pending')
                                <form method="POST" action="{{ route('reservations.confirm', $res) }}">
                                    @csrf @method('PATCH')
                                    <button type="submit" class="p-1.5 text-green-500 hover:text-green-700 rounded-lg hover:bg-green-50" title="Konfirmasi">
                                        <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="M5 13l4 4L19 7"/>
                                        </svg>
                                    </button>
                                </form>
                            @endif
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="px-5 py-10 text-center text-slate-400">Tidak ada reservasi ditemukan</td>
                </tr>
            @endforelse
        </tbody>
    </table>
    @if($reservations->hasPages())
        <div class="px-5 py-3 border-t border-slate-100">
            {{ $reservations->appends(request()->query())->links() }}
        </div>
    @endif
</div>
@endsection