@extends('layouts.app')

@section('content')

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; margin-top: 15px;">
    <h2 style="color: #d4af37; font-size: 1.5rem; font-weight: bold;">
        {{ app()->getLocale() == 'ar' ? 'تقرير أداء الأسطول المفصل' : 'Detailed Fleet Report' }}
    </h2>
    <a href="{{ route('admin.analytics.dashboard') }}" style="background: #666; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; font-weight: bold;">
        {{ app()->getLocale() == 'ar' ? 'عودة' : 'Back' }}
    </a>
</div>

<!-- Period Info -->
<div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; margin-bottom: 2rem;">
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;">
        <div>
            <div style="color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'من' : 'From' }}</div>
            <div style="color: white; font-size: 1.125rem; font-weight: bold;">{{ Carbon\Carbon::parse($startDate)->format('d/m/Y') }}</div>
        </div>
        <div>
            <div style="color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'إلى' : 'To' }}</div>
            <div style="color: white; font-size: 1.125rem; font-weight: bold;">{{ Carbon\Carbon::parse($endDate)->format('d/m/Y') }}</div>
        </div>
        <div>
            <div style="color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'عدد الأيام' : 'Days' }}</div>
            <div style="color: white; font-size: 1.125rem; font-weight: bold;">{{ $analytics['period']['days'] }}</div>
        </div>
    </div>
</div>

<!-- Summary Statistics -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 2rem;">
    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1rem;">
        <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'إجمالي الإيرادات' : 'Total Revenue' }}</div>
        <div style="color: #22c55e; font-size: 1.5rem; font-weight: bold;">{{ number_format($analytics['summary']['total_revenue'], 2) }} SAR</div>
    </div>
    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1rem;">
        <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'إجمالي المصاريف' : 'Total Expenses' }}</div>
        <div style="color: #ef4444; font-size: 1.5rem; font-weight: bold;">{{ number_format($analytics['summary']['total_expenses'], 2) }} SAR</div>
    </div>
    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1rem;">
        <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'تكاليف الصيانة' : 'Maintenance' }}</div>
        <div style="color: #f59e0b; font-size: 1.5rem; font-weight: bold;">{{ number_format($analytics['summary']['total_maintenance'], 2) }} SAR</div>
    </div>
    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1rem;">
        <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'الربح الصافي' : 'Net Profit' }}</div>
        <div style="color: #10b981; font-size: 1.5rem; font-weight: bold;">{{ number_format($analytics['summary']['total_profit'], 2) }} SAR</div>
    </div>
</div>

<!-- Detailed Cars Table -->
<div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; overflow-x: auto;">
    <h3 style="color: #d4af37; font-size: 1.125rem; font-weight: bold; margin-bottom: 1.5rem;">{{ app()->getLocale() == 'ar' ? 'تفاصيل مفصلة لكل سيارة' : 'Detailed Car Performance' }}</h3>
    
    <table style="width: 100%; border-collapse: collapse; font-size: 0.875rem;">
        <thead>
            <tr style="border-bottom: 2px solid #333; background: rgba(212, 175, 55, 0.05);">
                <th style="padding: 1rem; text-align: right; color: #d4af37; font-weight: bold;">{{ app()->getLocale() == 'ar' ? 'البيان' : 'Description' }}</th>
                <th style="padding: 1rem; text-align: center; color: #d4af37; font-weight: bold;">{{ app()->getLocale() == 'ar' ? 'اللوحة' : 'Plate' }}</th>
                <th style="padding: 1rem; text-align: center; color: #d4af37; font-weight: bold;">{{ app()->getLocale() == 'ar' ? 'أيام التأجير' : 'Rental Days' }}</th>
                <th style="padding: 1rem; text-align: center; color: #d4af37; font-weight: bold;">{{ app()->getLocale() == 'ar' ? 'أيام التوقف' : 'Idle Days' }}</th>
                <th style="padding: 1rem; text-align: center; color: #d4af37; font-weight: bold;">{{ app()->getLocale() == 'ar' ? 'الإشغال %' : 'Occupancy' }}</th>
                <th style="padding: 1rem; text-align: center; color: #d4af37; font-weight: bold;">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</th>
            </tr>
        </thead>
        <tbody>
            @foreach($analytics['cars'] as $car)
            <tr style="border-bottom: 1px solid #333;">
                <td style="padding: 1rem; color: white; font-weight: bold;">{{ $car['title'] }}</td>
                <td style="padding: 1rem; text-align: center; color: #999;">{{ $car['plate_number'] }}</td>
                <td style="padding: 1rem; text-align: center; color: #22c55e;">{{ $car['rental_days'] }}</td>
                <td style="padding: 1rem; text-align: center; color: #ef4444;">{{ $car['idle_days'] }}</td>
                <td style="padding: 1rem; text-align: center; color: #d4af37; font-weight: bold;">{{ $car['occupancy_rate'] }}%</td>
                <td style="padding: 1rem; text-align: center;">
                    <span style="display: inline-block; padding: 0.25rem 0.75rem; border-radius: 1rem; background: {{ $car['occupancy_rate'] >= 60 ? '#10b981' : ($car['occupancy_rate'] >= 30 ? '#f59e0b' : '#ef4444') }}/20; color: {{ $car['occupancy_rate'] >= 60 ? '#10b981' : ($car['occupancy_rate'] >= 30 ? '#f59e0b' : '#ef4444') }}; font-weight: bold; font-size: 0.75rem;">
                        {{ $car['occupancy_status'] }}
                    </span>
                </td>
            </tr>
            <tr style="border-bottom: 1px solid #333; background: rgba(0,0,0,0.3);">
                <td colspan="6" style="padding: 1rem;">
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;">
                        <div>
                            <div style="color: #999; font-size: 0.7rem;">{{ app()->getLocale() == 'ar' ? 'الإيرادات' : 'Revenue' }}</div>
                            <div style="color: #22c55e; font-weight: bold;">{{ number_format($car['revenue'], 2) }} SAR</div>
                        </div>
                        <div>
                            <div style="color: #999; font-size: 0.7rem;">{{ app()->getLocale() == 'ar' ? 'المصاريف' : 'Expenses' }}</div>
                            <div style="color: #ef4444; font-weight: bold;">{{ number_format($car['expenses'], 2) }} SAR</div>
                        </div>
                        <div>
                            <div style="color: #999; font-size: 0.7rem;">{{ app()->getLocale() == 'ar' ? 'الصيانة' : 'Maintenance' }}</div>
                            <div style="color: #f59e0b; font-weight: bold;">{{ number_format($car['maintenance'], 2) }} SAR</div>
                        </div>
                        <div>
                            <div style="color: #999; font-size: 0.7rem;">{{ app()->getLocale() == 'ar' ? 'الربح' : 'Profit' }}</div>
                            <div style="color: #10b981; font-weight: bold;">{{ number_format($car['profit'], 2) }} SAR</div>
                        </div>
                        <div>
                            <div style="color: #999; font-size: 0.7rem;">{{ app()->getLocale() == 'ar' ? 'نسبة الربح' : 'Margin' }}</div>
                            <div style="color: #3b82f6; font-weight: bold;">{{ $car['profit_margin'] }}%</div>
                        </div>
                        <div>
                            <div style="color: #999; font-size: 0.7rem;">{{ app()->getLocale() == 'ar' ? 'التقييم' : 'Rating' }}</div>
                            <div style="font-size: 1.25rem;">{{ $car['rating'] }}</div>
                        </div>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

@endsection