@extends('layouts.app')

@section('title', __('app.menu.dashboard'))

@section('content')
<div class="row mb-4">
    <div class="col">
        <h1 class="h3 mb-0">{{ __('app.menu.dashboard') }}</h1>
        <p class="text-muted">{{ __('app.welcome') }}, {{ auth()->user()->name }}</p>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stats-card">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h5 class="card-title text-white-50 mb-1">{{ __('app.stats.total_vehicles') }}</h5>
                        <h3 class="mb-0">{{ number_format($stats['total_vehicles']) }}</h3>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-car fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h5 class="card-title text-white-50 mb-1">{{ __('app.stats.available_vehicles') }}</h5>
                        <h3 class="mb-0">{{ number_format($stats['available_vehicles']) }}</h3>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-check-circle fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h5 class="card-title text-white-50 mb-1">{{ __('app.stats.rented_vehicles') }}</h5>
                        <h3 class="mb-0">{{ number_format($stats['rented_vehicles']) }}</h3>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-handshake fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h5 class="card-title text-white-50 mb-1">{{ __('app.stats.monthly_revenue') }}</h5>
                        <h3 class="mb-0">{{ number_format($stats['monthly_revenue'], 2) }} ريال</h3>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-chart-line fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Additional Statistics Row -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-primary">
            <div class="card-body text-center">
                <i class="fas fa-tools fa-2x text-primary mb-2"></i>
                <h4 class="mb-1">{{ number_format($stats['maintenance_vehicles']) }}</h4>
                <p class="text-muted mb-0">{{ __('app.stats.maintenance_vehicles') }}</p>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-success">
            <div class="card-body text-center">
                <i class="fas fa-clipboard-list fa-2x text-success mb-2"></i>
                <h4 class="mb-1">{{ number_format($stats['active_rentals']) }}</h4>
                <p class="text-muted mb-0">{{ __('app.stats.active_rentals') }}</p>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-danger">
            <div class="card-body text-center">
                <i class="fas fa-exclamation-triangle fa-2x text-danger mb-2"></i>
                <h4 class="mb-1">{{ number_format($stats['overdue_rentals']) }}</h4>
                <p class="text-muted mb-0">{{ __('app.stats.overdue_rentals') }}</p>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-info">
            <div class="card-body text-center">
                <i class="fas fa-users fa-2x text-info mb-2"></i>
                <h4 class="mb-1">{{ number_format($stats['total_customers']) }}</h4>
                <p class="text-muted mb-0">{{ __('app.stats.total_customers') }}</p>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row mb-4">
    <div class="col-xl-8 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">الإيرادات الشهرية</h5>
            </div>
            <div class="card-body">
                <canvas id="revenueChart" height="100"></canvas>
            </div>
        </div>
    </div>
    
    <div class="col-xl-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">حالة المركبات</h5>
            </div>
            <div class="card-body">
                <canvas id="vehicleStatusChart"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Recent Activities and Alerts -->
<div class="row">
    <div class="col-xl-4 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">التأجيرات الأخيرة</h5>
                <a href="{{ route('rentals.index') }}" class="btn btn-sm btn-outline-primary">{{ __('app.view') }} {{ __('app.more') }}</a>
            </div>
            <div class="card-body p-0">
                @forelse($recent['recent_rentals'] as $rental)
                <div class="d-flex align-items-center p-3 border-bottom">
                    <div class="me-3">
                        <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                            <i class="fas fa-handshake text-white"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <h6 class="mb-1">{{ $rental->customer->name }}</h6>
                        <p class="text-muted mb-0 small">{{ $rental->vehicle->full_name }}</p>
                        <small class="text-muted">{{ $rental->created_at->diffForHumans() }}</small>
                    </div>
                    <div>
                        <span class="badge bg-{{ $rental->status == 'active' ? 'success' : ($rental->status == 'pending' ? 'warning' : 'secondary') }}">
                            {{ __('app.rental_status.' . $rental->status) }}
                        </span>
                    </div>
                </div>
                @empty
                <div class="text-center py-4">
                    <i class="fas fa-inbox fa-2x text-muted mb-2"></i>
                    <p class="text-muted">{{ __('app.no_data') }}</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>
    
    <div class="col-xl-4 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">الصيانة المطلوبة</h5>
                <a href="{{ route('maintenance.index') }}" class="btn btn-sm btn-outline-warning">{{ __('app.view') }} {{ __('app.more') }}</a>
            </div>
            <div class="card-body p-0">
                @forelse($recent['pending_maintenance'] as $maintenance)
                <div class="d-flex align-items-center p-3 border-bottom">
                    <div class="me-3">
                        <div class="bg-warning rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                            <i class="fas fa-tools text-white"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <h6 class="mb-1">{{ $maintenance->vehicle->full_name }}</h6>
                        <p class="text-muted mb-0 small">{{ Str::limit($maintenance->description, 50) }}</p>
                        <small class="text-muted">{{ $maintenance->scheduled_date->format('d/m/Y') }}</small>
                    </div>
                </div>
                @empty
                <div class="text-center py-4">
                    <i class="fas fa-check-circle fa-2x text-success mb-2"></i>
                    <p class="text-muted">لا توجد صيانة مطلوبة</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>
    
    <div class="col-xl-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">الإرجاعات القادمة</h5>
            </div>
            <div class="card-body p-0">
                @forelse($recent['upcoming_returns'] as $rental)
                <div class="d-flex align-items-center p-3 border-bottom">
                    <div class="me-3">
                        <div class="bg-info rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                            <i class="fas fa-calendar text-white"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <h6 class="mb-1">{{ $rental->customer->name }}</h6>
                        <p class="text-muted mb-0 small">{{ $rental->vehicle->full_name }}</p>
                        <small class="text-muted">{{ $rental->end_date->format('d/m/Y H:i') }}</small>
                    </div>
                    <div>
                        @if($rental->end_date->isPast())
                        <span class="badge bg-danger">متأخر</span>
                        @elseif($rental->end_date->isToday())
                        <span class="badge bg-warning">اليوم</span>
                        @else
                        <span class="badge bg-info">{{ $rental->end_date->diffForHumans() }}</span>
                        @endif
                    </div>
                </div>
                @empty
                <div class="text-center py-4">
                    <i class="fas fa-calendar-check fa-2x text-success mb-2"></i>
                    <p class="text-muted">لا توجد إرجاعات قادمة</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- Alerts -->
@if(!empty($alerts))
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">التنبيهات والإشعارات</h5>
            </div>
            <div class="card-body">
                @foreach($alerts as $alert)
                <div class="alert alert-{{ $alert['type'] }} d-flex align-items-center" role="alert">
                    <i class="fas fa-{{ $alert['type'] == 'danger' ? 'exclamation-triangle' : ($alert['type'] == 'warning' ? 'exclamation-circle' : 'info-circle') }} me-2"></i>
                    <div class="flex-grow-1">{{ $alert['message'] }}</div>
                    <a href="{{ $alert['link'] }}" class="btn btn-sm btn-outline-{{ $alert['type'] }}">{{ __('app.view') }}</a>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endif
@endsection

@push('scripts')
<script>
// Revenue Chart
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
new Chart(revenueCtx, {
    type: 'line',
    data: {
        labels: {!! json_encode(array_column($charts['revenue_chart'], 'month')) !!},
        datasets: [{
            label: 'الإيرادات (ريال)',
            data: {!! json_encode(array_column($charts['revenue_chart'], 'revenue')) !!},
            borderColor: '#667eea',
            backgroundColor: 'rgba(102, 126, 234, 0.1)',
            tension: 0.4,
            fill: true
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return value.toLocaleString() + ' ريال';
                    }
                }
            }
        }
    }
});

// Vehicle Status Chart
const vehicleStatusCtx = document.getElementById('vehicleStatusChart').getContext('2d');
new Chart(vehicleStatusCtx, {
    type: 'doughnut',
    data: {
        labels: ['متاحة', 'مؤجرة', 'صيانة', 'خارج الخدمة'],
        datasets: [{
            data: [
                {{ $charts['vehicle_status_chart']['available'] }},
                {{ $charts['vehicle_status_chart']['rented'] }},
                {{ $charts['vehicle_status_chart']['maintenance'] }},
                {{ $charts['vehicle_status_chart']['out_of_service'] }}
            ],
            backgroundColor: [
                '#28a745',
                '#ffc107',
                '#17a2b8',
                '#dc3545'
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});
</script>
@endpush