@extends('backend.layouts.app')

@section('title')
    Reports - Hotel Management System
@endsection

@section('content')
    <!-- Breadcrumb -->
    <div class="bg-white shadow-sm border-b border-gray-200 px-6 py-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center text-sm text-gray-600">
                <i class="fas fa-chart-bar mr-2"></i>
                <span>Reports & Analytics</span>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div class="p-6">
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900 mb-2">Reports & Analytics</h1>
            <p class="text-gray-600">Generate comprehensive reports for your hotel operations</p>
        </div>

        <!-- Report Categories Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

            <!-- Booking Reports -->
            <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 p-3 rounded-full">
                            <i class="fas fa-calendar-check text-blue-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold text-gray-900">Booking Reports</h3>
                            <p class="text-sm text-gray-600">Reservation analytics & insights</p>
                        </div>
                    </div>
                    <p class="text-gray-600 mb-4">Generate detailed reports on bookings, occupancy rates, and customer trends.</p>
                    <a href="{{ route('reports.booking') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        <i class="fas fa-chart-line mr-2"></i>
                        Generate Report
                    </a>
                </div>
            </div>

            <!-- Financial Reports -->
            <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 p-3 rounded-full">
                            <i class="fas fa-dollar-sign text-green-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold text-gray-900">Financial Reports</h3>
                            <p class="text-sm text-gray-600">Revenue & payment analytics</p>
                        </div>
                    </div>
                    <p class="text-gray-600 mb-4">Track revenue, payments, and financial performance over time.</p>
                    <a href="{{ route('reports.financial') }}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                        <i class="fas fa-chart-pie mr-2"></i>
                        Generate Report
                    </a>
                </div>
            </div>

            <!-- Dashboard Report -->
            <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-3 rounded-full">
                            <i class="fas fa-tachometer-alt text-indigo-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold text-gray-900">Dashboard Report</h3>
                            <p class="text-sm text-gray-600">Executive summary & KPIs</p>
                        </div>
                    </div>
                    <p class="text-gray-600 mb-4">Get a comprehensive overview of all hotel operations and key metrics.</p>
                    <a href="{{ route('reports.dashboard') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <i class="fas fa-chart-area mr-2"></i>
                        View Dashboard
                    </a>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 p-3 rounded-full">
                            <i class="fas fa-hand-holding-dollar text-orange-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold text-gray-900">Cash In Hand Reports</h3>
                            <p class="text-sm text-gray-600">Revenue & payment analytics</p>
                        </div>
                    </div>
                    <p class="text-gray-600 mb-4">Track revenue, payments in cash performance over time.</p>
                    <a href="{{ route('reports.cashInHand',[
                        'date_from' => request('date_from', date('Y-m-d', strtotime('-30 days'))),
                        'date_to'   => request('date_to', date('Y-m-d'))
                    ]) }}" class="inline-flex items-center px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors">
                        <i class="fas fa-chart-pie mr-2"></i>
                        Generate Cash In Hand Report
                    </a>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 p-3 rounded-full">
                            <i class="fas fa-building-columns text-green-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold text-gray-900">Cash In Bank Reports</h3>
                            <p class="text-sm text-gray-600">Revenue & payment analytics</p>
                        </div>
                    </div>
                    <p class="text-gray-600 mb-4">Track revenue, payments in bank performance over time.</p>
                    <a href="{{ route('reports.cashInBank',[
                        'date_from' => request('date_from', date('Y-m-d', strtotime('-30 days'))),
                        'date_to'   => request('date_to', date('Y-m-d'))
                    ]) }}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                        <i class="fas fa-chart-pie mr-2"></i>
                        Generate Cash In Bank Report
                    </a>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 p-3 rounded-full">
                            <i class="fas fa-wallet text-blue-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold text-gray-900">Cash In MPESA Reports</h3>
                            <p class="text-sm text-gray-600">Revenue & payment analytics</p>
                        </div>
                    </div>
                    <p class="text-gray-600 mb-4">Track revenue, payments in MPESA performance over time.</p>
                    <a href="{{ route('reports.cashInMPESA',[
                        'date_from' => request('date_from', date('Y-m-d', strtotime('-30 days'))),
                        'date_to'   => request('date_to', date('Y-m-d'))
                    ]) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        <i class="fas fa-chart-pie mr-2"></i>
                        Generate Cash In MPESA Report
                    </a>
                </div>
            </div>

             <!-- Room Reports -->
{{--            <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">--}}
{{--                <div class="p-6">--}}
{{--                    <div class="flex items-center mb-4">--}}
{{--                        <div class="bg-purple-100 p-3 rounded-full">--}}
{{--                            <i class="fas fa-bed text-purple-600 text-xl"></i>--}}
{{--                        </div>--}}
{{--                        <div class="ml-4">--}}
{{--                            <h3 class="text-lg font-semibold text-gray-900">Room Reports</h3>--}}
{{--                            <p class="text-sm text-gray-600">Room status & utilization</p>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <p class="text-gray-600 mb-4">Analyze room performance, occupancy rates, and maintenance needs.</p>--}}
{{--                    <a href="{{ route('reports.room') }}" class="inline-flex items-center px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">--}}
{{--                        <i class="fas fa-chart-bar mr-2"></i>--}}
{{--                        Generate Report--}}
{{--                    </a>--}}
{{--                </div>--}}
{{--            </div>--}}

            <!-- Staff Reports -->
            <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="bg-orange-100 p-3 rounded-full">
                            <i class="fas fa-users text-orange-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold text-gray-900">Cashier Reports</h3>
                            <p class="text-sm text-gray-600">Employee & shift analytics</p>
                        </div>
                    </div>
                    <p class="text-gray-600 mb-4">Monitor staff performance, schedules, and department statistics.</p>
                    <a href="{{ route('reports.cashier',[
                        'date_from' => request('date_from', date('Y-m-d', strtotime('-30 days'))),
                        'date_to'   => request('date_to', date('Y-m-d'))
                    ]) }}" class="inline-flex items-center px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors">
                        <i class="fas fa-user-chart mr-2"></i>
                        Generate Report
                    </a>
                </div>
            </div>



             <!-- Quick Stats -->
{{--            <div class="bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg shadow-md text-white">--}}
{{--                <div class="p-6">--}}
{{--                    <div class="flex items-center mb-4">--}}
{{--                        <div class="bg-white bg-opacity-20 p-3 rounded-full">--}}
{{--                            <i class="fas fa-rocket text-white text-xl"></i>--}}
{{--                        </div>--}}
{{--                        <div class="ml-4">--}}
{{--                            <h3 class="text-lg font-semibold">Quick Stats</h3>--}}
{{--                            <p class="text-blue-100">Real-time insights</p>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <div class="space-y-3">--}}
{{--                        <div class="flex justify-between items-center">--}}
{{--                            <span class="text-blue-100">Today's Bookings:</span>--}}
{{--                            <span class="font-bold">{{ \App\Models\Booking::whereDate('created_at', today())->count() }}</span>--}}
{{--                        </div>--}}
{{--                        <div class="flex justify-between items-center">--}}
{{--                            <span class="text-blue-100">Available Rooms:</span>--}}
{{--                            <span class="font-bold">{{ \App\Models\Room::where('room_status', 'Available')->where('deleteStatus', false)->count() }}</span>--}}
{{--                        </div>--}}
{{--                        <div class="flex justify-between items-center">--}}
{{--                            <span class="text-blue-100">Total Staff:</span>--}}
{{--                            <span class="font-bold">{{ \App\Models\Staff::count() }}</span>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
        </div>
    </div>
@endsection
