@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-3xl font-bold text-black">{{ $report->name }}</h1>
            <p class="text-black">{{ $report->description }}</p>
        </div>
        <div class="flex gap-2">
            @can('update', $report)
            <a href="{{ route('reports.custom.edit', $report) }}" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">
                تعديل
            </a>
            @endcan
            <a href="{{ route('reports.custom.index') }}" class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded">
                عودة
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-4">
            <div class="text-black text-sm">نوع التقرير</div>
            <div class="text-xl font-bold text-blue-600">{{ $report->report_type }}</div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="text-black text-sm">عدد السجلات</div>
            <div class="text-xl font-bold text-green-600">{{ count($data) }}</div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="text-black text-sm">آخر تحديث</div>
            <div class="text-xl font-bold text-purple-600">{{ $report->updated_at->format('Y-m-d') }}</div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="text-black text-sm">الحالة</div>
            <div class="text-xl font-bold {{ $report->is_active ? 'text-green-600' : 'text-red-600' }}">
                {{ $report->is_active ? 'نشط' : 'معطل' }}
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-bold mb-4">بيانات التقرير</h2>
        
        @if($data->isEmpty())
        <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4">
            <p>لا توجد بيانات للتقرير</p>
        </div>
        @else
        <div class="overflow-x-auto">
            <table class="w-full border-collapse">
                <thead>
                    <tr class="bg-gray-100">
                        @foreach($data->first() as $key => $value)
                        <th class="border px-4 py-2 text-right font-bold">{{ $key }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @foreach($data as $row)
                    <tr class="hover:bg-gray-50">
                        @foreach($row as $value)
                        <td class="border px-4 py-2">
                            @if(is_array($value) || is_object($value))
                                {{ json_encode($value) }}
                            @else
                                {{ $value }}
                            @endif
                        </td>
                        @endforeach
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>

    <div class="flex gap-2">
        <a href="{{ route('export.customer-invoices', ['format' => 'excel']) }}" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
            <i class="fas fa-file-excel ml-1"></i> تصدير Excel
        </a>
        <a href="{{ route('export.customer-invoices', ['format' => 'pdf']) }}" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
            <i class="fas fa-file-pdf ml-1"></i> تصدير PDF
        </a>
        <a href="{{ route('export.customer-invoices', ['format' => 'csv']) }}" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">
            <i class="fas fa-file-csv ml-1"></i> تصدير CSV
        </a>
    </div>
</div>
@endsection