@extends('layouts.app')

@section('title', 'نتائج التقرير')

@section('content')
<div style="padding: 28px;">
    {{-- Header --}}
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <div>
            <h1 style="font-size: 22px; color: #1B2A4A; margin: 0 0 4px;">
                <i class="fas fa-file-alt" style="color: #E8502F;"></i> نتائج التقرير
            </h1>
            <p style="color: #6B7280; font-size: 14px; margin: 0;">
                {{ $report->title ?? 'تقرير مخصص' }} —
                تم الإنشاء: {{ now()->format('Y/m/d H:i') }}
            </p>
        </div>
        <div style="display: flex; gap: 10px;">
            @if(Route::has('report-builder.export'))
            <a href="{{ route('report-builder.export', ['format' => 'excel']) }}" style="background: #166534; color: white; padding: 10px 20px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 600;">
                <i class="fas fa-file-excel"></i> تصدير Excel
            </a>
            <a href="{{ route('report-builder.export', ['format' => 'pdf']) }}" style="background: #991B1B; color: white; padding: 10px 20px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 600;">
                <i class="fas fa-file-pdf"></i> تصدير PDF
            </a>
            @endif
            <button onclick="window.print()" style="background: #1B2A4A; color: white; padding: 10px 20px; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;">
                <i class="fas fa-print"></i> طباعة
            </button>
            <a href="{{ route('report-builder.index') }}" style="color: #6B7280; text-decoration: none; font-size: 14px; padding: 10px 16px;">
                <i class="fas fa-arrow-right"></i> تقرير جديد
            </a>
        </div>
    </div>

    {{-- Report Summary --}}
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px;">
        <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);">
            <div style="font-size: 13px; color: #6B7280; margin-bottom: 6px;">إجمالي السجلات</div>
            <div style="font-size: 26px; font-weight: 700; color: #1B2A4A;">{{ $report->total_records ?? count($data ?? []) }}</div>
        </div>
        <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);">
            <div style="font-size: 13px; color: #6B7280; margin-bottom: 6px;">مصدر البيانات</div>
            <div style="font-size: 16px; font-weight: 700; color: #1B2A4A;">
                @if(($report->data_source ?? '') == 'employees') الموظفون
                @elseif(($report->data_source ?? '') == 'attendance') الحضور والانصراف
                @elseif(($report->data_source ?? '') == 'payroll') الرواتب
                @elseif(($report->data_source ?? '') == 'leaves') الإجازات
                @elseif(($report->data_source ?? '') == 'departments') الأقسام
                @else {{ $report->data_source ?? '—' }}
                @endif
            </div>
        </div>
        @if(isset($report->filter_department_name))
        <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);">
            <div style="font-size: 13px; color: #6B7280; margin-bottom: 6px;">القسم</div>
            <div style="font-size: 16px; font-weight: 700; color: #1B2A4A;">{{ $report->filter_department_name }}</div>
        </div>
        @endif
        @if(isset($report->date_range))
        <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);">
            <div style="font-size: 13px; color: #6B7280; margin-bottom: 6px;">الفترة</div>
            <div style="font-size: 14px; font-weight: 700; color: #1B2A4A;">{{ $report->date_range }}</div>
        </div>
        @endif
    </div>

    {{-- Report Table --}}
    <div style="background: white; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden;">
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; min-width: 600px;">
                <thead>
                    <tr style="background: #1B2A4A;">
                        <th style="padding: 14px 16px; text-align: center; font-size: 13px; color: white; font-weight: 600; width: 50px;">#</th>
                        @foreach($columns ?? [] as $col)
                        <th style="padding: 14px 16px; text-align: right; font-size: 13px; color: white; font-weight: 600; white-space: nowrap;">{{ $col }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @forelse($data ?? [] as $index => $row)
                    <tr style="border-top: 1px solid #F3F4F6; {{ $index % 2 == 0 ? '' : 'background: #F9FAFB;' }}">
                        <td style="padding: 12px 16px; text-align: center; font-size: 13px; color: #9CA3AF;">{{ $index + 1 }}</td>
                        @foreach($row as $cell)
                        <td style="padding: 12px 16px; font-size: 14px; color: #374151;">{{ $cell }}</td>
                        @endforeach
                    </tr>
                    @empty
                    <tr>
                        <td colspan="{{ count($columns ?? []) + 1 }}" style="padding: 60px; text-align: center; color: #9CA3AF; font-size: 15px;">
                            <i class="fas fa-inbox" style="font-size: 32px; margin-bottom: 12px; display: block; color: #D1D5DB;"></i>
                            لا توجد بيانات تطابق معايير البحث
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Footer with totals if available --}}
        @if(isset($totals) && $totals)
        <div style="padding: 16px 20px; background: #F9FAFB; border-top: 2px solid #E5E7EB; display: flex; gap: 24px; flex-wrap: wrap;">
            @foreach($totals as $label => $value)
            <div>
                <span style="font-size: 12px; color: #6B7280;">{{ $label }}:</span>
                <span style="font-size: 14px; font-weight: 700; color: #1B2A4A; margin-right: 6px;">{{ $value }}</span>
            </div>
            @endforeach
        </div>
        @endif
    </div>

    {{-- Pagination --}}
    @if(isset($data) && $data instanceof \Illuminate\Pagination\LengthAwarePaginator && $data->hasPages())
    <div style="margin-top: 20px; display: flex; justify-content: center;">
        {{ $data->links() }}
    </div>
    @endif
</div>

@push('styles')
<style>
    @media print {
        nav, .sidebar, header, [style*="fa-arrow-right"], button, a[href*="export"], a[href*="builder"] { display: none !important; }
        body { background: white !important; }
        div[style*="padding: 28px"] { padding: 0 !important; }
    }
</style>
@endpush
@endsection