@extends('layouts.app')

@section('title', 'Dashboard - Maa Kamakhya Devalaya Guest House')

@push('styles')
<style>
    .dash-card { border: none; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.2s; }
    .dash-card:hover { transform: translateY(-2px); }
    .dash-card .card-body { padding: 1.25rem; }
    .dash-card .stat-value { font-size: 1.75rem; font-weight: 700; }
    .dash-card .stat-label { font-size: 0.8rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.5px; }
    .chart-card { border: none; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
    .chart-card .card-header { background: transparent; border-bottom: 1px solid #eee; font-weight: 600; padding: 1rem 1.25rem; }
    .room-card { transition: all 0.2s; border-radius: 10px; }
    .room-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
        .room-occupied { background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%); border-left: 4px solid #dc3545; }
        .room-available { background: linear-gradient(135deg, #f0fff4 0%, #e6ffed 100%); border-left: 4px solid #28a745; }
        .room-available.cursor-pointer:hover { box-shadow: 0 8px 25px rgba(40,167,69,0.25); }
    .revenue-pie { max-height: 220px; }
</style>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0"><i class="bi bi-grid-1x2-fill text-primary"></i> Dashboard</h2>
    <div class="d-flex gap-2">
        <a href="{{ route('bookings.create') }}" class="btn btn-primary"><i class="bi bi-plus-circle"></i> Check In</a>
        <a href="{{ route('bookings.index') }}?action=checkout" class="btn btn-warning"><i class="bi bi-box-arrow-right"></i> Check Out</a>
    </div>
</div>

{{-- Revenue & Stats Cards --}}
<div class="row g-3 mb-4">
    <div class="col-lg-2 col-md-4 col-6">
        <div class="card dash-card bg-primary text-white">
            <div class="card-body">
                <div class="stat-label">Room Revenue</div>
                <div class="stat-value">₹{{ number_format($roomRevenue ?? 0, 0) }}</div>
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6">
        <div class="card dash-card bg-success text-white">
            <div class="card-body">
                <div class="stat-label">Food Revenue</div>
                <div class="stat-value">₹{{ number_format($foodRevenue ?? 0, 0) }}</div>
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6">
        <div class="card dash-card text-white" style="background: #6f42c1;">
            <div class="card-body">
                <div class="stat-label">Event Venue</div>
                <div class="stat-value">₹{{ number_format($eventVenueRevenue ?? 0, 0) }}</div>
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6">
        <div class="card dash-card text-white" style="background: #fd7e14;">
            <div class="card-body">
                <div class="stat-label">Event Food</div>
                <div class="stat-value">₹{{ number_format($eventFoodRevenue ?? 0, 0) }}</div>
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6">
        <div class="card dash-card bg-dark text-white">
            <div class="card-body">
                <div class="stat-label">Total Revenue</div>
                <div class="stat-value">₹{{ number_format(($roomRevenue ?? 0) + ($foodRevenue ?? 0) + ($eventVenueRevenue ?? 0) + ($eventFoodRevenue ?? 0), 0) }}</div>
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6">
        <div class="card dash-card bg-info text-white">
            <div class="card-body">
                <div class="stat-label">Rooms</div>
                <div class="stat-value">{{ $rooms->count() }}</div>
                <small>Occupied: {{ $occupiedCount }} | Available: {{ $availableCount }}</small>
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6">
        <div class="card dash-card bg-warning text-dark">
            <div class="card-body">
                <div class="stat-label">Today Check-ins</div>
                <div class="stat-value">{{ $todayCheckIns }}</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    {{-- Revenue Pie Chart --}}
    <div class="col-lg-4">
        <div class="card chart-card">
            <div class="card-header"><i class="bi bi-pie-chart-fill me-2"></i>Revenue Split</div>
            <div class="card-body">
                <canvas id="revenuePieChart" class="revenue-pie" height="220"></canvas>
            </div>
        </div>
    </div>

    {{-- Panda Report --}}
    <div class="col-lg-8">
        <div class="card chart-card">
            <div class="card-header"><i class="bi bi-person-badge-fill me-2"></i>Panda Report – Bookings by Panda</div>
            <div class="card-body">
                <canvas id="pandaChart" height="120"></canvas>
            </div>
        </div>
    </div>

    {{-- Monthly Income --}}
    <div class="col-12">
        <div class="card chart-card">
            <div class="card-header"><i class="bi bi-graph-up-arrow me-2"></i>Monthly Income Report (Last 6 Months)</div>
            <div class="card-body">
                <canvas id="monthlyChart" height="80"></canvas>
            </div>
        </div>
    </div>

    {{-- Room Occupancy --}}
    <div class="col-12">
        <div class="card chart-card">
            <div class="card-header"><i class="bi bi-door-open-fill me-2"></i>Room Occupancy Report (Last 30 Days)</div>
            <div class="card-body">
                <canvas id="occupancyChart" height="80"></canvas>
            </div>
        </div>
    </div>

    {{-- Room Status Grid --}}
    <div class="col-12">
        <h5 class="mb-3"><i class="bi bi-grid-3x3-gap-fill me-2"></i>Room Status</h5>
        <div class="row g-3">
            @foreach($rooms as $room)
            @php
                $booking = $room->activeBooking;
                $daysRemaining = $booking && $booking->check_out_date ? max(0, now()->startOfDay()->diffInDays($booking->check_out_date->startOfDay(), false)) : null;
            @endphp
            <div class="col-md-3 col-sm-4 col-6">
                @php $canClickRoom = $room->status == 'available' && !(auth()->user()->role && auth()->user()->role->slug === 'priest'); @endphp
                @if($canClickRoom)
                <a href="{{ route('bookings.create', ['room_id' => $room->id]) }}" class="text-decoration-none text-dark">
                @endif
                <div class="card room-card {{ $room->status == 'occupied' ? 'room-occupied' : 'room-available' }} {{ $canClickRoom ? 'cursor-pointer' : '' }}">
                    <div class="card-body py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Room {{ $room->room_number }}</h5>
                            <span class="badge {{ $room->is_ac ? 'bg-info' : 'bg-secondary' }}">{{ $room->is_ac ? 'AC' : 'NON AC' }}</span>
                        </div>
                        <div class="mt-2">
                            <small class="text-muted">{{ ucfirst($room->bed_type) }} Bed</small>
                            <span class="badge {{ $room->status == 'occupied' ? 'bg-danger' : 'bg-success' }} ms-1">{{ ucfirst($room->status) }}</span>
                        </div>
                        @if($room->status == 'occupied' && $booking)
                            <div class="mt-2 small">
                                <div><strong>Guest:</strong> {{ $booking->guest->name ?? '-' }}</div>
                                <div><strong>Check Out:</strong> {{ $booking->check_out_date ? $booking->check_out_date->format('d M Y') : '-' }}</div>
                                @if($daysRemaining !== null)
                                <div><strong>Days Left:</strong> {{ $daysRemaining }} {{ $daysRemaining == 1 ? 'day' : 'days' }}</div>
                                @endif
                            </div>
                        @endif
                        <div class="mt-2"><strong>₹{{ number_format($room->rent_per_day) }}/day</strong></div>
                        @if($canClickRoom)
                        <small class="text-success mt-2 d-block"><i class="bi bi-hand-index"></i> Click to book</small>
                        @endif
                    </div>
                </div>
                @if($canClickRoom)
                </a>
                @endif
            </div>
            @endforeach
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const colors = ['#0d6efd', '#198754', '#fd7e14', '#6f42c1', '#20c997', '#e83e8c', '#ffc107'];

    // Revenue Pie Chart
    const roomRev = {{ $roomRevenue ?? 0 }};
    const foodRev = {{ $foodRevenue ?? 0 }};
    const totalRev = roomRev + foodRev;
    if (totalRev > 0) {
        new Chart(document.getElementById('revenuePieChart'), {
            type: 'doughnut',
            data: {
                labels: ['Room Revenue', 'Food Revenue'],
                datasets: [{
                    data: [roomRev, foodRev],
                    backgroundColor: ['#0d6efd', '#198754'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: { position: 'bottom' }
                }
            }
        });
    } else {
        document.getElementById('revenuePieChart').parentElement.innerHTML = '<p class="text-muted text-center py-4">No revenue data yet</p>';
    }

    // Panda Report Bar Chart
    const pandaData = @json($pandaReport ?? []);
    if (pandaData.length > 0) {
        new Chart(document.getElementById('pandaChart'), {
            type: 'bar',
            data: {
                labels: pandaData.map(p => p.priest_name),
                datasets: [{
                    label: 'Bookings',
                    data: pandaData.map(p => p.booking_count),
                    backgroundColor: colors.slice(0, pandaData.length),
                    borderRadius: 6
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: { beginAtZero: true, ticks: { stepSize: 1 } }
                }
            }
        });
    } else {
        document.getElementById('pandaChart').parentElement.innerHTML = '<p class="text-muted text-center py-4">No panda booking data yet</p>';
    }

    // Monthly Income Chart (stacked)
    const monthlyData = @json($monthlyIncome ?? []);
    if (monthlyData.length > 0) {
        new Chart(document.getElementById('monthlyChart'), {
            type: 'bar',
            data: {
                labels: monthlyData.map(m => m.month),
                datasets: [
                    { label: 'Room', data: monthlyData.map(m => m.room), backgroundColor: '#0d6efd', borderRadius: 4 },
                    { label: 'Food', data: monthlyData.map(m => m.food), backgroundColor: '#198754', borderRadius: 4 }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    x: { stacked: true },
                    y: { stacked: true, beginAtZero: true }
                }
            }
        });
    }

    // Room Occupancy Chart
    const occData = @json($occupancyData ?? []);
    if (occData.length > 0) {
        new Chart(document.getElementById('occupancyChart'), {
            type: 'bar',
            data: {
                labels: occData.map(o => o.room),
                datasets: [{
                    label: 'Occupancy %',
                    data: occData.map(o => o.pct),
                    backgroundColor: occData.map((o, i) => o.pct > 50 ? 'rgba(220, 53, 69, 0.7)' : 'rgba(40, 167, 69, 0.7)'),
                    borderRadius: 6
                }]
            },
            options: {
                responsive: true,
                indexAxis: 'y',
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    x: { max: 100, beginAtZero: true }
                }
            }
        });
    }
});
</script>
@endpush
@endsection