@extends('layouts.app')
@section('title', 'Occupancy Report')
@section('page-title', 'Occupancy Report')

@section('content')
<div class="page-header">
    <div>
        <div class="breadcrumb"><a href="{{ route('hotel.dashboard') }}">Dashboard</a><span>/</span><a href="{{ route('hotel.reports.index') }}">Reports</a><span>/</span>Occupancy</div>
        <h1>Occupancy Report</h1>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form method="GET" class="form-row" style="margin-bottom:20px;">
            <div class="form-group">
                <label>Start Date</label>
                <input type="date" name="start_date" class="form-control" value="{{ $startDate }}">
            </div>
            <div class="form-group">
                <label>End Date</label>
                <input type="date" name="end_date" class="form-control" value="{{ $endDate }}">
            </div>
            <div class="form-group" style="display:flex;align-items:flex-end;">
                <button type="submit" class="btn btn-primary">Apply Filter</button>
            </div>
        </form>

        <div style="text-align:center;margin-bottom:20px;">
            <div style="font-size:36px;font-weight:bold;color:#1a56db;">{{ number_format($occupancyRate, 1) }}%</div>
            <div style="color:#6b7280;">Occupancy Rate</div>
        </div>

        <div style="overflow-x:auto;">
            <table class="table">
                <thead>
                    <tr><th>Date</th><th>Occupied Rooms</th><th>Available Rooms</th><th>Occupancy</th></tr>
                </thead>
                <tbody>
                    @foreach($dailyData as $day)
                    <tr>
                        <td>{{ \Carbon\Carbon::parse($day['date'])->format('d M Y') }}</td>
                        <td>{{ $day['occupied'] }}</td>
                        <td>{{ $day['available'] }}</td>
                        <td>
                            <div style="background:#e5e7eb;border-radius:10px;overflow:hidden;width:100px;">
                                <div style="background:#1a56db;width:{{ $rooms ? ($day['occupied']/$rooms)*100 : 0 }}%;height:8px;"></div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection