@extends('layouts.app')

@section('page-title', 'Laporan Okupansi')

@section('content')
<div class="flex items-center gap-3 mb-6">
    <a href="{{ route('reports.index') }}" class="text-slate-400 hover:text-slate-600">
        <svg class="w-5 h-5" 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>
    </a>
    <h2 class="text-xl font-bold text-slate-800">Laporan Okupansi</h2>
</div>

<!-- Filter Tanggal -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-4 mb-6">
    <form method="GET" class="flex flex-wrap items-center gap-3">
        <input type="date" name="from" value="{{ $from->format('Y-m-d') }}"
               class="text-sm border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 outline-none">
        <span class="text-slate-400">s/d</span>
        <input type="date" name="to" value="{{ $to->format('Y-m-d') }}"
               class="text-sm border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 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">Terapkan</button>
    </form>
</div>

<!-- Ringkasan -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-5 mb-6">
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5">
        <p class="text-sm text-slate-500">Tingkat Okupansi</p>
        <p class="text-2xl font-bold text-indigo-600 mt-1">{{ $occupancyRate }}%</p>
        <div class="w-full bg-slate-100 rounded-full h-2 mt-2">
            <div class="bg-indigo-500 h-2 rounded-full" style="width: {{ min($occupancyRate, 100) }}%"></div>
        </div>
    </div>
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5">
        <p class="text-sm text-slate-500">Total Pemesanan</p>
        <p class="text-2xl font-bold text-slate-800 mt-1">{{ $reservations->count() }}</p>
        <p class="text-xs text-slate-400 mt-1">Pada periode yang dipilih</p>
    </div>
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5">
        <p class="text-sm text-slate-500">Total Kamar</p>
        <p class="text-2xl font-bold text-slate-800 mt-1">{{ $totalRooms }}</p>
        <p class="text-xs text-slate-400 mt-1">Kapasitas kosan</p>
    </div>
</div>

<!-- Berdasarkan Tipe Kamar -->
@if($byRoomType->count())
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5 mb-6">
        <h3 class="font-semibold text-slate-800 mb-4">Pemesanan per Tipe Kamar</h3>
        <div class="space-y-3">
            @foreach($byRoomType as $type => $count)
                <div class="flex items-center justify-between">
                    <span class="text-sm text-slate-600">{{ $type ?? 'Tidak Diketahui' }}</span>
                    <div class="flex items-center gap-3">
                        <div class="w-32 bg-slate-100 rounded-full h-2">
                            <div class="bg-blue-400 h-2 rounded-full" style="width: {{ $reservations->count() > 0 ? ($count / $reservations->count() * 100) : 0 }}%"></div>
                        </div>
                        <span class="text-sm font-medium text-slate-800">{{ $count }} pemesanan</span>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endif

<!-- Tabel Reservasi -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
    <div class="px-5 py-4 border-b border-slate-100">
        <h3 class="font-semibold text-slate-800">Detail Reservasi</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-slate-50">
                <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/Tipe</th>
                    <th class="text-left px-3 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Check-in</th>
                    <th class="text-left px-3 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Bulan</th>
                    <th class="text-left px-3 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Status</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="text-indigo-600 hover:text-indigo-800 font-medium">{{ $res->reservation_code }}</a>
                        </td>
                        <td class="px-3 py-3 text-slate-700">{{ $res->guest->full_name }}</td>
                        <td class="px-3 py-3">
                            <p class="text-slate-700">{{ $res->room->room_number }}</p>
                            <p class="text-xs text-slate-400">{{ $res->room->roomType->name }}</p>
                        </td>
                        <td class="px-3 py-3 text-slate-600">{{ $res->check_in_date->format('d M Y') }}</td>
                        <td class="px-3 py-3 text-slate-600">{{ $res->months }}</td>
                        <td class="px-3 py-3">
                            <span class="badge-{{ $res->status_color }}">{{ ucfirst(str_replace('_', ' ', $res->status)) }}</span>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-5 py-8 text-center text-slate-400">Tidak ada reservasi pada periode yang dipilih</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection