@extends('layouts.sidebar')

@section('page-title', __('app.reports') . ' & Analytics')
@section('page-description', __('app.business_performance_analytics'))

@section('title', __('app.reports') . ' - ' . __('app.admin'))

@section('content')
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">
        <i class="fas fa-chart-bar text-accent mr-3"></i>
        {{ __('app.reports_analytics') }}
    </h1>
    <p class="text-gray-600 mt-2">{{ __('app.system_performance_insights') }}</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">
            <i class="fas fa-users text-accent mr-2"></i>
            {{ __('app.user_reports') }}
        </h3>
        <p class="text-gray-600 mb-4">{{ __('app.view_user_registration_activity') }}</p>
        <button class="bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded">
            {{ __('app.generate_report') }}
        </button>
    </div>

    <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">
            <i class="fas fa-dumbbell text-green-500 mr-2"></i>
            {{ __('app.pilates_reports') }}
        </h3>
        <p class="text-gray-600 mb-4">{{ __('app.class_attendance_booking_analytics') }}</p>
        <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded">
            {{ __('app.generate_report') }}
        </button>
    </div>

    <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">
            <i class="fas fa-spa text-accent mr-2"></i>
            {{ __('app.salon_reports') }}
        </h3>
        <p class="text-gray-600 mb-4">{{ __('app.service_bookings_revenue_analytics') }}</p>
        <button class="bg-accent hover:bg-accent-dark text-white px-4 py-2 rounded">
            {{ __('app.generate_report') }}
        </button>
    </div>

    <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">
            <i class="fas fa-dollar-sign text-yellow-500 mr-2"></i>
            {{ __('app.revenue_reports') }}
        </h3>
        <p class="text-gray-600 mb-4">{{ __('app.financial_performance_trends') }}</p>
        <button class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded">
            {{ __('app.generate_report') }}
        </button>
    </div>

    <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">
            <i class="fas fa-calendar text-red-500 mr-2"></i>
            {{ __('app.booking_reports') }}
        </h3>
        <p class="text-gray-600 mb-4">{{ __('app.booking_patterns_cancellation_rates') }}</p>
        <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded">
            {{ __('app.generate_report') }}
        </button>
    </div>

    <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">
            <i class="fas fa-cogs text-gray-500 mr-2"></i>
            {{ __('app.system_reports') }}
        </h3>
        <p class="text-gray-600 mb-4">{{ __('app.system_usage_performance_metrics') }}</p>
        <button class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded">
            {{ __('app.generate_report') }}
        </button>
    </div>
</div>

<div class="mt-8 bg-white rounded-lg shadow p-6">
    <h3 class="text-lg font-semibold text-gray-900 mb-4">{{ __('app.recent_activity') }}</h3>
    <div class="text-center py-8">
        <i class="fas fa-chart-line text-gray-400 text-4xl mb-4"></i>
        <p class="text-gray-600">{{ __('app.reports_functionality_coming_soon') }}</p>
    </div>
</div>
@endsection