@extends('layouts.app')

@section('title', 'Dashboard - Hotel Management System')
@section('page-title', 'Dashboard')

@section('content')
<div class="row">
    <!-- Statistics Cards -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-uppercase mb-1">Total Kamar</div>
                        <div class="h5 mb-0 font-weight-bold">{{ $totalRooms }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-bed fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-uppercase mb-1">Kamar Tersedia</div>
                        <div class="h5 mb-0 font-weight-bold">{{ $availableRooms }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-check-circle fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-uppercase mb-1">Kamar Terisi</div>
                        <div class="h5 mb-0 font-weight-bold">{{ $occupiedRooms }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-user-check fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-uppercase mb-1">Booking Hari Ini</div>
                        <div class="h5 mb-0 font-weight-bold">{{ $todayCheckIns->count() + $todayCheckOuts->count() }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-calendar-day fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Financial Statistics -->
    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Pemasukan Bulan Ini</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">Rp {{ number_format($monthlyIncome, 0, ',', '.') }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card border-left-danger shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Pengeluaran Bulan Ini</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">Rp {{ number_format($monthlyExpenses, 0, ',', '.') }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-receipt fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card border-left-info shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Laba Bulan Ini</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">Rp {{ number_format($monthlyProfit, 0, ',', '.') }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-chart-line fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Guest Statistics Section -->
<div class="row">
    <div class="col-12">
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-users me-2"></i>Statistik Tamu Hotel
                </h6>
                <div class="d-flex align-items-center">
                    <!-- Period Filter -->
                    <form method="GET" class="d-flex align-items-center me-3">
                        <select name="period" class="form-select form-select-sm me-2" onchange="this.form.submit()">
                            <option value="week" {{ $period == 'week' ? 'selected' : '' }}>Minggu Ini</option>
                            <option value="month" {{ $period == 'month' ? 'selected' : '' }}>Bulan Ini</option>
                            <option value="year" {{ $period == 'year' ? 'selected' : '' }}>Tahun Ini</option>
                        </select>
                        
                        @if($period == 'month')
                        <select name="month" class="form-select form-select-sm me-2" onchange="this.form.submit()">
                            @for($i = 1; $i <= 12; $i++)
                                <option value="{{ $i }}" {{ $selectedMonth == $i ? 'selected' : '' }}>
                                    {{ Carbon\Carbon::create()->month($i)->format('F') }}
                                </option>
                            @endfor
                        </select>
                        @endif
                        
                        <select name="year" class="form-select form-select-sm me-2" onchange="this.form.submit()">
                            @for($year = date('Y'); $year >= date('Y') - 5; $year--)
                                <option value="{{ $year }}" {{ $selectedYear == $year ? 'selected' : '' }}>{{ $year }}</option>
                            @endfor
                        </select>
                    </form>
                </div>
            </div>
            <div class="card-body">
                <!-- Guest Statistics Cards -->
                <div class="row mb-4">
                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-primary shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                            Total Tamu
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">
                                            {{ number_format($guestStats['total_guests']) }}
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-users fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-success shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                            Total Booking
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">
                                            {{ number_format($guestStats['total_bookings']) }}
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-calendar-check fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-info shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                            Rata-rata Tamu/Booking
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">
                                            {{ $guestStats['avg_guests_per_booking'] }}
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-chart-bar fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-warning shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                            Tingkat Hunian
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">
                                            {{ $guestStats['occupancy_rate'] }}%
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-percentage fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Charts and Detailed Statistics -->
                <div class="row">
                    <!-- Guest Trend Chart -->
                    <div class="col-xl-8 col-lg-7">
                        <div class="card shadow mb-4">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">Trend Tamu</h6>
                            </div>
                            <div class="card-body">
                                <canvas id="guestTrendChart" width="400" height="200"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Platform Statistics -->
                    <div class="col-xl-4 col-lg-5">
                        <div class="card shadow mb-4">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">Statistik Platform</h6>
                            </div>
                            <div class="card-body">
                                @if($guestStats['platform_stats']->count() > 0)
                                    @foreach($guestStats['platform_stats'] as $platform)
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <div>
                                            <span class="font-weight-bold">{{ $platform->platform }}</span>
                                            <br>
                                            <small class="text-muted">{{ $platform->count }} booking</small>
                                        </div>
                                        <div class="text-right">
                                            <span class="h6 mb-0">{{ $platform->total_guests }} tamu</span>
                                        </div>
                                    </div>
                                    @endforeach
                                @else
                                    <p class="text-muted">Tidak ada data platform untuk periode ini</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Walk-in vs Online and Guest Regions -->
                <div class="row">
                    <div class="col-xl-6 col-lg-6">
                        <div class="card shadow mb-4">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">Walk-in vs Online</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-6 text-center">
                                        <div class="h4 text-success">{{ $guestStats['walk_in_bookings'] }}</div>
                                        <small class="text-muted">Walk-in</small>
                                    </div>
                                    <div class="col-6 text-center">
                                        <div class="h4 text-info">{{ $guestStats['online_bookings'] }}</div>
                                        <small class="text-muted">Online</small>
                                    </div>
                                </div>
                                <canvas id="walkInVsOnlineChart" width="400" height="200"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-6">
                        <div class="card shadow mb-4">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">Asal Tamu</h6>
                            </div>
                            <div class="card-body">
                                @if($guestStats['guest_regions']->count() > 0)
                                    @foreach($guestStats['guest_regions'] as $region)
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span>{{ $region->region }}</span>
                                        <span class="badge bg-primary">{{ $region->count }} booking</span>
                                    </div>
                                    @endforeach
                                @else
                                    <p class="text-muted">Tidak ada data asal tamu untuk periode ini</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Recent Bookings -->
    <div class="col-xl-8 col-lg-7">
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Booking Terbaru</h6>
                <a href="{{ route('bookings.index') }}" class="btn btn-sm btn-primary">Lihat Semua</a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>No. Booking</th>
                                <th>Nama Tamu</th>
                                <th>Kamar</th>
                                <th>Check-in</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentBookings as $booking)
                            <tr>
                                <td>#{{ $booking->id }}</td>
                                <td>{{ $booking->guest_name }}</td>
                                <td>{{ $booking->room->room_number }}</td>
                                <td>{{ $booking->check_in_date->format('d/m/Y') }}</td>
                                <td>
                                    @switch($booking->status)
                                        @case('pending')
                                            <span class="badge bg-warning">Pending</span>
                                            @break
                                        @case('confirmed')
                                            <span class="badge bg-info">Confirmed</span>
                                            @break
                                        @case('checked_in')
                                            <span class="badge bg-success">Checked In</span>
                                            @break
                                        @case('checked_out')
                                            <span class="badge bg-secondary">Checked Out</span>
                                            @break
                                        @case('cancelled')
                                            <span class="badge bg-danger">Cancelled</span>
                                            @break
                                    @endswitch
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center">Tidak ada booking terbaru</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Today's Activities -->
    <div class="col-xl-4 col-lg-5">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Aktivitas Hari Ini</h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <h6 class="text-success">Check-in Hari Ini ({{ $todayCheckIns->count() }})</h6>
                    @forelse($todayCheckIns as $checkin)
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="small">{{ $checkin->guest_name }}</span>
                        <span class="badge bg-success">Kamar {{ $checkin->room->room_number }}</span>
                    </div>
                    @empty
                    <p class="small text-muted">Tidak ada check-in hari ini</p>
                    @endforelse
                </div>

                <div class="mb-3">
                    <h6 class="text-warning">Check-out Hari Ini ({{ $todayCheckOuts->count() }})</h6>
                    @forelse($todayCheckOuts as $checkout)
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="small">{{ $checkout->guest_name }}</span>
                        <span class="badge bg-warning">Kamar {{ $checkout->room->room_number }}</span>
                    </div>
                    @empty
                    <p class="small text-muted">Tidak ada check-out hari ini</p>
                    @endforelse
                </div>

                <div class="mb-3">
                    <h6 class="text-info">Pesanan Restaurant ({{ $todayRestaurantOrders->count() }})</h6>
                    @forelse($todayRestaurantOrders->take(3) as $order)
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="small">{{ $order->restaurantMenu->name }}</span>
                        <span class="badge bg-info">Kamar {{ $order->booking->room->room_number }}</span>
                    </div>
                    @empty
                    <p class="small text-muted">Tidak ada pesanan restaurant hari ini</p>
                    @endforelse
                </div>

                <div>
                    <h6 class="text-primary">Layanan Kamar ({{ $todayRoomServiceOrders->count() }})</h6>
                    @forelse($todayRoomServiceOrders->take(3) as $order)
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="small">{{ $order->roomService->name }}</span>
                        <span class="badge bg-primary">Kamar {{ $order->booking->room->room_number }}</span>
                    </div>
                    @empty
                    <p class="small text-muted">Tidak ada layanan kamar hari ini</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="row">
    <div class="col-12">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Aksi Cepat</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <a href="{{ route('bookings.create') }}" class="btn btn-primary btn-block">
                            <i class="fas fa-plus me-2"></i>Buat Booking Baru
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ route('rooms.index') }}" class="btn btn-success btn-block">
                            <i class="fas fa-bed me-2"></i>Kelola Kamar
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ route('restaurant.menu') }}" class="btn btn-warning btn-block">
                            <i class="fas fa-utensils me-2"></i>Menu Restaurant
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ route('reports.index') }}" class="btn btn-info btn-block">
                            <i class="fas fa-chart-bar me-2"></i>Lihat Laporan
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Auto refresh dashboard every 30 seconds
    setInterval(function() {
        location.reload();
    }, 30000);

    // Guest Trend Chart
    const guestTrendCtx = document.getElementById('guestTrendChart').getContext('2d');
    const guestTrendChart = new Chart(guestTrendCtx, {
        type: 'line',
        data: {
            labels: {!! json_encode(collect($guestStats['chart_data'])->pluck('period')) !!},
            datasets: [{
                label: 'Jumlah Tamu',
                data: {!! json_encode(collect($guestStats['chart_data'])->pluck('guests')) !!},
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.1,
                fill: true
            }, {
                label: 'Jumlah Booking',
                data: {!! json_encode(collect($guestStats['chart_data'])->pluck('bookings')) !!},
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                tension: 0.1,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Trend Tamu dan Booking'
                }
            }
        }
    });

    // Walk-in vs Online Chart
    const walkInVsOnlineCtx = document.getElementById('walkInVsOnlineChart').getContext('2d');
    const walkInVsOnlineChart = new Chart(walkInVsOnlineCtx, {
        type: 'doughnut',
        data: {
            labels: ['Walk-in', 'Online'],
            datasets: [{
                data: [{{ $guestStats['walk_in_bookings'] }}, {{ $guestStats['online_bookings'] }}],
                backgroundColor: [
                    'rgba(40, 167, 69, 0.8)',
                    'rgba(23, 162, 184, 0.8)'
                ],
                borderColor: [
                    'rgba(40, 167, 69, 1)',
                    'rgba(23, 162, 184, 1)'
                ],
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: 'Perbandingan Walk-in vs Online'
                }
            }
        }
    });
</script>
@endsection