@extends('layouts.app')

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

@section('content')
<h2 class="text-xl font-bold text-slate-800 mb-6">Ringkasan Laporan</h2>

<!-- Kartu Ringkasan -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5">
        <p class="text-sm text-slate-500">Pendapatan Bulanan</p>
        <p class="text-2xl font-bold text-slate-800 mt-1">Rp {{ number_format($monthlyRevenue / 1000, 0) }}K</p>
        <p class="text-xs text-slate-400 mt-1">{{ now()->format('F Y') }}</p>
    </div>
    <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-slate-800 mt-1">{{ $occupancyRate }}%</p>
        <p class="text-xs text-slate-400 mt-1">Bulan ini</p>
    </div>
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5">
        <p class="text-sm text-slate-500">Total Tamu</p>
        <p class="text-2xl font-bold text-slate-800 mt-1">{{ $totalGuests }}</p>
        <p class="text-xs text-slate-400 mt-1">Sepanjang waktu</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>

<!-- Tautan Laporan -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
    <a href="{{ route('reports.revenue') }}"
       class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 hover:shadow-md transition-shadow group">
        <div class="flex items-center gap-4">
            <div class="w-14 h-14 bg-green-50 rounded-2xl flex items-center justify-center group-hover:bg-green-100 transition-colors">
                <svg class="w-7 h-7 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <div>
                <h3 class="font-bold text-slate-800 text-lg">Laporan Pendapatan</h3>
                <p class="text-sm text-slate-500">Analisis pendapatan berdasarkan rentang tanggal dan metode pembayaran</p>
            </div>
            <svg class="w-5 h-5 text-slate-300 ml-auto group-hover:text-slate-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
        </div>
    </a>

    <a href="{{ route('reports.occupancy') }}"
       class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 hover:shadow-md transition-shadow group">
        <div class="flex items-center gap-4">
            <div class="w-14 h-14 bg-blue-50 rounded-2xl flex items-center justify-center group-hover:bg-blue-100 transition-colors">
                <svg class="w-7 h-7 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                </svg>
            </div>
            <div>
                <h3 class="font-bold text-slate-800 text-lg">Laporan Okupansi</h3>
                <p class="text-sm text-slate-500">Pantau utilisasi kamar dan tren pemesanan</p>
            </div>
            <svg class="w-5 h-5 text-slate-300 ml-auto group-hover:text-slate-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
        </div>
    </a>
</div>
@endsection