@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8">
    <div class="max-w-7xl mx-auto">
        <!-- Page Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-black mb-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Cost Center Reports', __('Cost Center Reports')) }}</h1>
                    <p class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Advanced Comprehensive Report System for Cost Centers, Profits and Losses', __('Advanced Comprehensive Report System for Cost Centers, Profits and Losses')) }}</p>
                </div>
                <div class="text-right">
                    <i class="fas fa-chart-pie text-blue-600 text-5xl"></i>
                </div>
            </div>
        </div>

        <!-- Reports Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($reports as $report)
            <a href="{{ $report['url'] }}" class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl hover:scale-105 transition-all duration-200">
                <div class="flex items-start justify-between">
                    <div>
                        <h3 class="text-xl font-bold text-black mb-2">{{ $report['name'] }}</h3>
                        <p class="text-black text-sm">عرض تقرير {{ $report['name'] }} مع خيارات تصفية متقدمة</p>
                    </div>
                    @php
                        $icons = [
                            'types' => 'fa-tags text-blue-500',
                            'categories' => 'fa-folder-tree text-green-500',
                            'directory' => 'fa-book text-amber-500',
                            'movements' => 'fa-file-invoice-dollar text-red-500',
                            'expenses' => 'fa-money-bill-wave text-purple-500',
                            'expenses_by_type' => 'fa-chart-pie text-indigo-500',
                            'expenses_by_category' => 'fa-chart-column text-cyan-500',
                            'sales' => 'fa-shopping-cart text-emerald-500',
                            'profitability' => 'fa-balance-scale text-rose-500',
                            'car_costs' => 'fa-truck text-slate-500',
                            'sales_rep_costs' => 'fa-user-tie text-blue-400',
                            'summary' => 'fa-dashboard text-violet-500',
                            'hierarchical' => 'fa-sitemap text-orange-500',
                            'warehouse' => 'fa-warehouse text-sky-500',
                        ];
                    @endphp
                    <i class="fas {{ $icons[$report['id']] ?? 'fa-file-alt text-black' }} text-2xl"></i>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-200">
                    <span class="inline-block bg-gray-100 text-black px-3 py-1 rounded-full text-xs font-semibold">
                        تقرير #{{ $loop->iteration }}
                    </span>
                </div>
            </a>
            @endforeach
        </div>

        <!-- Features Summary -->
        <div class="mt-12 grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="bg-white rounded-lg shadow p-6">
                <div class="text-center">
                    <i class="fas fa-check-circle text-green-500 text-3xl mb-2"></i>
                    <h4 class="font-semibold text-black mb-1">{{ \App\Helpers\TranslationHelper::transFromDatabase('Comprehensive Reports', __('Comprehensive Reports')) }}</h4>
                    <p class="text-sm text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('10 advanced and comprehensive reports', __('10 advanced and comprehensive reports')) }}</p>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-6">
                <div class="text-center">
                    <i class="fas fa-download text-blue-500 text-3xl mb-2"></i>
                    <h4 class="font-semibold text-black mb-1">{{ \App\Helpers\TranslationHelper::transFromDatabase('Multiple Export', __('Multiple Export')) }}</h4>
                    <p class="text-sm text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Excel, PDF, CSV', __('Excel, PDF, CSV')) }}</p>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-6">
                <div class="text-center">
                    <i class="fas fa-chart-bar text-purple-500 text-3xl mb-2"></i>
                    <h4 class="font-semibold text-black mb-1">{{ \App\Helpers\TranslationHelper::transFromDatabase('Charts', __('Charts')) }}</h4>
                    <p class="text-sm text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Visualize data clearly', __('Visualize data clearly')) }}</p>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-6">
                <div class="text-center">
                    <i class="fas fa-filter text-amber-500 text-3xl mb-2"></i>
                    <h4 class="font-semibold text-black mb-1">تصفية متقدمة</h4>
                    <p class="text-sm text-black">حسب التاريخ والمركز</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection