@extends('admin.layout')

@section('title', 'Reports')

@section('header', 'Reports')

@section('content')
<div class="container mx-auto">
    <!-- Report Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <!-- Apartment Reports Card -->
        <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Apartment Reports</h3>
                        <p class="text-sm text-gray-600 mt-1">View apartment-wise statistics and analytics</p>
                    </div>
                    <div class="bg-blue-100 rounded-full p-3">
                        <i class="fas fa-building text-blue-600 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <a href="{{ route('admin.reports.apartment') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200">
                        <i class="fas fa-chart-line mr-2"></i>
                        View Report
                    </a>
                </div>
            </div>
        </div>

        <!-- Technician Reports Card -->
        <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Technician Reports</h3>
                        <p class="text-sm text-gray-600 mt-1">View technician-wise statistics and performance</p>
                    </div>
                    <div class="bg-green-100 rounded-full p-3">
                        <i class="fas fa-tools text-green-600 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <a href="{{ route('admin.reports.technician') }}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors duration-200">
                        <i class="fas fa-chart-bar mr-2"></i>
                        View Report
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Export Options Section -->
    <div class="bg-white rounded-lg shadow-md">
        <div class="border-b border-gray-200 px-6 py-4">
            <h3 class="text-lg font-semibold text-gray-800">Export Options</h3>
        </div>
        <div class="p-6">
            <p class="text-gray-600 mb-6">Export reports in various formats for offline viewing and analysis.</p>
            <div class="flex flex-wrap gap-4">
                <a href="{{ route('admin.reports.export', 'excel') }}" class="inline-flex items-center px-4 py-2 border border-green-600 text-green-600 rounded-md hover:bg-green-50 transition-colors duration-200">
                    <i class="fas fa-file-excel mr-2"></i>
                    Export to Excel
                </a>
                <a href="{{ route('admin.reports.export', 'pdf') }}" class="inline-flex items-center px-4 py-2 border border-red-600 text-red-600 rounded-md hover:bg-red-50 transition-colors duration-200">
                    <i class="fas fa-file-pdf mr-2"></i>
                    Export to PDF
                </a>
            </div>
        </div>
    </div>
</div>
@endsection