<?php $__env->startPush('styles'); ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<style>
    .card { background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; }
    .stat-box { background: #1a1a1a; border: 1px solid #333; border-radius: 0.5rem; padding: 1rem; }
    table { width: 100%; border-collapse: collapse; }
    th { padding: 1rem; text-align: left; color: #d4af37; border-bottom: 2px solid #333; }
    td { padding: 1rem; border-bottom: 1px solid #333; color: white; }
    .rating { font-size: 1.5rem; }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<div style="padding: 2rem;">
    <h1 style="color: #d4af37; margin-bottom: 2rem;"><?php echo e(app()->getLocale() == 'ar' ? 'تحليل أداء الأسطول' : 'Fleet Analytics'); ?></h1>

    <!-- Filters -->
    <div class="card" style="margin-bottom: 2rem;">
        <form method="GET" action="<?php echo e(route('admin.analytics.dashboard')); ?>" style="display: grid; gap: 1rem;">
            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1rem;">
                <div>
                    <label style="color: #999; font-size: 0.75rem; display: block; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'من التاريخ' : 'From Date'); ?></label>
                    <input type="text" id="start_date_picker" name="start_date" value="<?php echo e($startDate); ?>" style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                </div>
                <div>
                    <label style="color: #999; font-size: 0.75rem; display: block; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'إلى التاريخ' : 'To Date'); ?></label>
                    <input type="text" id="end_date_picker" name="end_date" value="<?php echo e($endDate); ?>" style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                </div>
                <div>
                    <label style="color: #999; font-size: 0.75rem; display: block; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'الفرع' : 'Branch'); ?></label>
                    <select name="branch_id" style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                        <option value=""><?php echo e(app()->getLocale() == 'ar' ? 'الكل' : 'All'); ?></option>
                        <?php $__currentLoopData = $branches; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $branch): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($branch->id); ?>" <?php echo e($branchId == $branch->id ? 'selected' : ''); ?>><?php echo e($branch->name); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>
                <div style="display: flex; align-items: flex-end;">
                    <button type="submit" style="width: 100%; padding: 0.5rem; background: #d4af37; color: black; border: none; border-radius: 0.5rem; font-weight: bold; cursor: pointer;"><?php echo e(app()->getLocale() == 'ar' ? 'تصفية' : 'Filter'); ?></button>
                </div>
            </div>
        </form>
    </div>

    <!-- Smart Decision Center -->
    <div class="card" style="margin-bottom: 2rem; border: 2px solid #d4af37; background: linear-gradient(180deg, rgba(212, 175, 55, 0.05) 0%, transparent 100%);">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
            <h2 style="color: #d4af37; margin: 0; font-size: 1.5rem; display: flex; align-items: center; gap: 0.75rem;">
                <span style="display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #d4af37; color: black; border-radius: 0.5rem;">
                    <svg style="width: 20px; height: 20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                </span>
                <?php echo e(app()->getLocale() == 'ar' ? 'مركز القرارات الذكي' : 'Smart Decision Center'); ?>

            </h2>
            <div style="background: rgba(255,255,255,0.05); padding: 0.5rem 1rem; border-radius: 2rem; border: 1px solid #333; font-size: 0.85rem; color: #999;">
                <?php echo e(app()->getLocale() == 'ar' ? 'بناءً على تحليل الفترة الحالية والمقارنة السابقة' : 'Based on current period vs previous comparison'); ?>

            </div>
        </div>

        <div style="display: grid; grid-template-columns: 3fr 1fr; gap: 1.5rem;">
            <!-- Executive KPIs & Alerts -->
            <div style="display: grid; gap: 1.5rem;">
                <!-- Executive KPIs Row -->
                <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;">
                    <?php $__currentLoopData = [
                        ['label' => 'نمو الإيرادات', 'en' => 'Revenue Growth', 'key' => 'revenue_growth', 'format' => 'currency'],
                        ['label' => 'معدل الإشغال', 'en' => 'Occupancy Rate', 'key' => 'occupancy_rate', 'format' => 'percent'],
                        ['label' => 'صافي الربح', 'en' => 'Net Profit', 'key' => 'net_profit', 'format' => 'currency'],
                        ['label' => 'ربح كل سيارة', 'en' => 'Avg Profit/Car', 'key' => 'avg_profit_per_car', 'format' => 'currency']
                    ]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $kpi): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php $data = $decisionCenter['kpis'][$kpi['key']]; ?>
                        <div style="background: rgba(255,255,255,0.03); border: 1px solid #333; border-radius: 0.75rem; padding: 1rem;">
                            <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? $kpi['label'] : $kpi['en']); ?></div>
                            <div style="font-size: 1.25rem; font-weight: bold; color: white; margin-bottom: 0.25rem;">
                                <?php echo e($kpi['format'] == 'currency' ? number_format($data['value'], 0) . ' SAR' : round($data['value'], 1) . '%'); ?>

                            </div>
                            <div style="display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: bold; color: <?php echo e($data['percent'] >= 0 ? '#22c55e' : '#ef4444'); ?>;">
                                <span><?php echo e($data['percent'] >= 0 ? '↑' : '↓'); ?></span>
                                <span><?php echo e(abs($data['percent'])); ?>%</span>
                                <span style="color: #666; font-weight: normal; margin-right: 0.25rem;">(vs prev)</span>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

                <!-- Smart Alerts Row -->
                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
                    <?php $__currentLoopData = $decisionCenter['alerts']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $alert): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div style="display: flex; gap: 1rem; background: <?php echo e($alert['type'] == 'danger' ? 'rgba(239, 68, 68, 0.08)' : 'rgba(245, 158, 11, 0.08)'); ?>; border: 1px solid <?php echo e($alert['type'] == 'danger' ? 'rgba(239, 68, 68, 0.2)' : 'rgba(245, 158, 11, 0.2)'); ?>; border-radius: 0.75rem; padding: 1rem;">
                            <div style="width: 40px; height: 40px; border-radius: 50%; background: <?php echo e($alert['type'] == 'danger' ? '#ef4444' : '#f59e0b'); ?>; color: black; display: flex; items-center; justify-content: center; flex-shrink: 0; margin-top: 0.25rem;">
                                <svg style="width: 24px; height: 24px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                            </div>
                            <div style="flex: 1;">
                                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.25rem;">
                                    <h4 style="margin: 0; font-size: 0.95rem; color: <?php echo e($alert['type'] == 'danger' ? '#ef4444' : '#f59e0b'); ?>;"><?php echo e($alert['title']); ?></h4>
                                    <span style="background: white; color: black; font-weight: bold; padding: 0.1rem 0.5rem; border-radius: 1rem; font-size: 0.75rem;"><?php echo e($alert['count']); ?></span>
                                </div>
                                <p style="margin: 0 0 0.5rem 0; font-size: 0.8rem; color: #ccc; line-height: 1.4;"><?php echo e($alert['description']); ?></p>
                                <a href="<?php echo e(route($alert['action'])); ?>" style="font-size: 0.75rem; font-weight: bold; color: white; text-decoration: underline;"><?php echo e(app()->getLocale() == 'ar' ? 'عرض التفاصيل' : 'View Details'); ?></a>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>

            <!-- Health Score & Recommendations -->
            <div style="display: grid; gap: 1rem;">
                <div style="background: rgba(255,255,255,0.03); border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; text-align: center;">
                    <div style="color: #999; font-size: 0.8rem; margin-bottom: 1rem;"><?php echo e(app()->getLocale() == 'ar' ? 'مؤشر صحة الأسطول' : 'Fleet Health Score'); ?></div>
                    <div style="position: relative; width: 100px; height: 100px; margin: 0 auto 1rem;">
                        <svg viewBox="0 0 36 36" style="width: 100%; height: 100%;">
                            <path stroke="#222" stroke-width="3" fill="none" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                            <path stroke="<?php echo e($decisionCenter['health_score'] >= 80 ? '#22c55e' : ($decisionCenter['health_score'] >= 60 ? '#f59e0b' : '#ef4444')); ?>" 
                                  stroke-width="3" 
                                  stroke-dasharray="<?php echo e($decisionCenter['health_score']); ?>, 100" 
                                  stroke-linecap="round" 
                                  fill="none" 
                                  d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                        </svg>
                        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; font-weight: bold; color: white;">
                            <?php echo e($decisionCenter['health_score']); ?>%
                        </div>
                    </div>
                    <div style="font-weight: bold; color: <?php echo e($decisionCenter['health_score'] >= 80 ? '#22c55e' : ($decisionCenter['health_score'] >= 60 ? '#f59e0b' : '#ef4444')); ?>;">
                        <?php if($decisionCenter['health_score'] >= 80): ?> ممتاز <?php elseif($decisionCenter['health_score'] >= 60): ?> متوسط <?php else: ?> يحتاج تدخل <?php endif; ?>
                    </div>
                </div>

                <div style="background: rgba(212, 175, 55, 0.05); border: 1px dashed #d4af37; border-radius: 1rem; padding: 1.25rem;">
                    <h4 style="color: #d4af37; margin: 0 0 0.75rem 0; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem;">
                        <svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.364-6.364l-.707-.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M12 21a9 9 0 110-18 9 9 0 010 18zm-2-8h4"></path></svg>
                        <?php echo e(app()->getLocale() == 'ar' ? 'توصيات ذكية' : 'Smart Recommendations'); ?>

                    </h4>
                    <ul style="margin: 0; padding-right: 1.25rem; color: #eee; font-size: 0.8rem; line-height: 1.5;">
                        <?php $__currentLoopData = $decisionCenter['recommendations']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $rec): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li style="margin-bottom: 0.5rem;"><?php echo e($rec); ?></li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Summary Cards -->
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem;">
        <div class="stat-box" style="text-align: center; border-bottom: 4px solid #d4af37;">
            <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'متوسط الإشغال' : 'Avg Occupancy'); ?></div>
            <div style="color: #d4af37; font-size: 1.5rem; font-weight: bold;"><?php echo e($analytics['summary']['avg_occupancy_rate']); ?>%</div>
        </div>
        <div class="stat-box" style="text-align: center; border-bottom: 4px solid #22c55e;">
            <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'السيارات النشطة' : 'Active Cars'); ?></div>
            <div style="color: #22c55e; font-size: 1.5rem; font-weight: bold;"><?php echo e($analytics['summary']['active_cars']); ?></div>
        </div>
        <div class="stat-box" style="text-align: center; border-bottom: 4px solid #ef4444;">
            <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'السيارات الواقفة' : 'Idle Cars'); ?></div>
            <div style="color: #ef4444; font-size: 1.5rem; font-weight: bold;"><?php echo e($analytics['summary']['idle_cars']); ?></div>
        </div>
    </div>

    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem;">
        <div class="stat-box" style="text-align: center; border-left: 4px solid #10b981;">
            <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'الربح التشغيلي' : 'Operating Profit'); ?></div>
            <div style="color: #10b981; font-size: 1.25rem; font-weight: bold;"><?php echo e(number_format($analytics['summary']['total_profit'], 0)); ?> SAR</div>
        </div>
        <div class="stat-box" style="text-align: center; border-left: 4px solid #ef4444;">
            <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'إجمالي الإهلاك' : 'Total Depreciation'); ?></div>
            <div style="color: #ef4444; font-size: 1.25rem; font-weight: bold;"><?php echo e(number_format($analytics['summary']['total_depreciation'], 0)); ?> SAR</div>
        </div>
        <div class="stat-box" style="text-align: center; border-left: 4px solid #3b82f6;">
            <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'الربح المحاسبي' : 'Accounting Profit'); ?></div>
            <div style="color: #3b82f6; font-size: 1.25rem; font-weight: bold;"><?php echo e(number_format($analytics['summary']['total_profit_after_depreciation'], 0)); ?> SAR</div>
        </div>
        <div class="stat-box" style="text-align: center; border-left: 4px solid #d4af37;">
            <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'متوسط ROI المحاسبي' : 'Avg Accounting ROI'); ?></div>
            <div style="color: #d4af37; font-size: 1.25rem; font-weight: bold;"><?php echo e($analytics['summary']['avg_accounting_roi']); ?>%</div>
        </div>
    </div>

    <!-- Best & Worst Cars -->
    <?php if($analytics['summary']['best_car'] && $analytics['summary']['worst_car']): ?>
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem;">
        <div class="card" style="background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, transparent 100%); border-color: #22c55e;">
            <h3 style="color: #22c55e; margin-bottom: 1rem;">🏆 <?php echo e(app()->getLocale() == 'ar' ? 'أفضل سيارة ربحاً' : 'Best Profitable Car'); ?></h3>
            <div style="font-size: 1.25rem; font-weight: bold; margin-bottom: 0.5rem;"><?php echo e($analytics['summary']['best_car']['title']); ?></div>
            <div style="color: #999; font-size: 0.875rem; margin-bottom: 1rem;"><?php echo e($analytics['summary']['best_car']['plate_number']); ?></div>
            <div style="display: grid; gap: 0.5rem;">
                <div style="display: flex; justify-content: space-between;">
                    <span><?php echo e(app()->getLocale() == 'ar' ? 'الربح:' : 'Profit:'); ?></span>
                    <strong style="color: #22c55e;"><?php echo e(number_format($analytics['summary']['best_car']['profit'], 2)); ?> SAR</strong>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span><?php echo e(app()->getLocale() == 'ar' ? 'الإشغال:' : 'Occupancy:'); ?></span>
                    <strong style="color: #22c55e;"><?php echo e($analytics['summary']['best_car']['occupancy_rate']); ?>%</strong>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span><?php echo e(app()->getLocale() == 'ar' ? 'الحالة:' : 'Status:'); ?></span>
                    <strong style="color: #22c55e;"><?php echo e($analytics['summary']['best_car']['occupancy_status']); ?></strong>
                </div>
            </div>
        </div>
        <div class="card" style="background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, transparent 100%); border-color: #ef4444;">
            <h3 style="color: #ef4444; margin-bottom: 1rem;">📉 <?php echo e(app()->getLocale() == 'ar' ? 'أسوأ سيارة ربحاً' : 'Worst Profitable Car'); ?></h3>
            <div style="font-size: 1.25rem; font-weight: bold; margin-bottom: 0.5rem;"><?php echo e($analytics['summary']['worst_car']['title']); ?></div>
            <div style="color: #999; font-size: 0.875rem; margin-bottom: 1rem;"><?php echo e($analytics['summary']['worst_car']['plate_number']); ?></div>
            <div style="display: grid; gap: 0.5rem;">
                <div style="display: flex; justify-content: space-between;">
                    <span><?php echo e(app()->getLocale() == 'ar' ? 'الربح:' : 'Profit:'); ?></span>
                    <strong style="color: #ef4444;"><?php echo e(number_format($analytics['summary']['worst_car']['profit'], 2)); ?> SAR</strong>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span><?php echo e(app()->getLocale() == 'ar' ? 'الإشغال:' : 'Occupancy:'); ?></span>
                    <strong style="color: #ef4444;"><?php echo e($analytics['summary']['worst_car']['occupancy_rate']); ?>%</strong>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span><?php echo e(app()->getLocale() == 'ar' ? 'الحالة:' : 'Status:'); ?></span>
                    <strong style="color: #ef4444;"><?php echo e($analytics['summary']['worst_car']['occupancy_status']); ?></strong>
                </div>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <!-- Performance Charts Section -->
    <div style="margin-bottom: 3rem;">
        <h2 style="color: #d4af37; margin-bottom: 2rem; font-size: 1.75rem;">📊 <?php echo e(app()->getLocale() == 'ar' ? 'الرسوم البيانية والإحصائيات' : 'Charts & Analytics'); ?></h2>
        
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">
            <!-- Occupancy Distribution Chart -->
            <div class="card" style="box-shadow: 0 8px 24px rgba(212, 175, 55, 0.1);">
                <h3 style="color: #d4af37; margin-bottom: 1.5rem; text-align: center; font-size: 1.25rem;">📊 <?php echo e(app()->getLocale() == 'ar' ? 'توزيع نسبة الإشغال' : 'Occupancy Distribution'); ?></h3>
                <canvas id="occupancyChart" style="max-height: 320px;"></canvas>
            </div>

            <!-- Contracts Status Chart -->
            <div class="card" style="box-shadow: 0 8px 24px rgba(212, 175, 55, 0.1);">
                <h3 style="color: #d4af37; margin-bottom: 1.5rem; text-align: center; font-size: 1.25rem;">📋 <?php echo e(app()->getLocale() == 'ar' ? 'حالة العقود' : 'Contracts Status'); ?></h3>
                <canvas id="contractsChart" style="max-height: 320px;"></canvas>
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
            <!-- Cars Status Chart -->
            <div class="card" style="box-shadow: 0 8px 24px rgba(212, 175, 55, 0.1);">
                <h3 style="color: #d4af37; margin-bottom: 1.5rem; text-align: center; font-size: 1.25rem;">🚗 <?php echo e(app()->getLocale() == 'ar' ? 'حالة السيارات' : 'Cars Status'); ?></h3>
                <canvas id="carsStatusChart" style="max-height: 320px;"></canvas>
            </div>

            <!-- Revenue vs Expenses Chart -->
            <div class="card" style="box-shadow: 0 8px 24px rgba(212, 175, 55, 0.1);">
                <h3 style="color: #d4af37; margin-bottom: 1.5rem; text-align: center; font-size: 1.25rem;">💰 <?php echo e(app()->getLocale() == 'ar' ? 'الإيرادات والمصاريف' : 'Revenue vs Expenses'); ?></h3>
                <canvas id="revenueChart" style="max-height: 320px;"></canvas>
            </div>
        </div>
    </div>

    <!-- Cars Performance Table -->
    <div class="card" style="margin-bottom: 2rem;">
        <h3 style="color: #d4af37; margin-bottom: 1rem;">📊 <?php echo e(app()->getLocale() == 'ar' ? 'تفاصيل أداء الأسطول' : 'Fleet Performance Details'); ?></h3>
        <div style="overflow-x: auto;">
            <table>
                <thead>
                    <tr>
                        <th><?php echo e(app()->getLocale() == 'ar' ? 'السيارة' : 'Car'); ?></th>
                        <th><?php echo e(app()->getLocale() == 'ar' ? 'الإشغال' : 'Occupancy'); ?></th>
                        <th><?php echo e(app()->getLocale() == 'ar' ? 'الإيراد' : 'Revenue'); ?></th>
                        <th><?php echo e(app()->getLocale() == 'ar' ? 'المصاريف' : 'OpEx'); ?></th>
                        <th><?php echo e(app()->getLocale() == 'ar' ? 'الإهلاك' : 'Depr.'); ?></th>
                        <th><?php echo e(app()->getLocale() == 'ar' ? 'الربح المحاسبي' : 'Acc. Profit'); ?></th>
                        <th><?php echo e(app()->getLocale() == 'ar' ? 'القيمة الدفترية' : 'Book Value'); ?></th>
                        <th><?php echo e(app()->getLocale() == 'ar' ? 'ROI' : 'ROI'); ?></th>
                        <th><?php echo e(app()->getLocale() == 'ar' ? 'الحالة' : 'Status'); ?></th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__currentLoopData = $analytics['cars']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $car): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr>
                        <td style="font-weight: bold;">
                            <div><?php echo e($car['title']); ?></div>
                            <div style="font-size: 0.7rem; color: #666;"><?php echo e($car['plate_number']); ?></div>
                        </td>
                        <td>
                            <div style="color: #d4af37; font-weight: bold;"><?php echo e($car['occupancy_rate']); ?>%</div>
                            <div style="font-size: 0.7rem; color: #555;"><?php echo e($car['rental_days']); ?> يوم</div>
                        </td>
                        <td style="color: #22c55e;"><?php echo e(number_format($car['revenue'], 0)); ?></td>
                        <td style="color: #f59e0b;"><?php echo e(number_format($car['expenses'] + $car['maintenance'], 0)); ?></td>
                        <td style="color: #ef4444;"><?php echo e(number_format($car['depreciation'], 0)); ?></td>
                        <td style="color: #3b82f6; font-weight: bold;"><?php echo e(number_format($car['profit_after_depreciation'], 0)); ?></td>
                        <td style="color: #999;"><?php echo e(number_format($car['book_value'], 0)); ?></td>
                        <td style="font-weight: bold; color: <?php echo e($car['accounting_roi'] >= 20 ? '#22c55e' : ($car['accounting_roi'] >= 10 ? '#f59e0b' : '#ef4444')); ?>">
                            <?php echo e($car['accounting_roi']); ?>%
                        </td>
                        <td>
                            <span style="font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 1rem; background: <?php echo e($car['investment_status']['color'] == 'success' ? 'rgba(34, 197, 94, 0.2)' : ($car['investment_status']['color'] == 'warning' ? 'rgba(245, 158, 11, 0.2)' : 'rgba(239, 68, 68, 0.2)')); ?>; color: <?php echo e($car['investment_status']['color'] == 'success' ? '#22c55e' : ($car['investment_status']['color'] == 'warning' ? '#f59e0b' : '#ef4444')); ?>;">
                                <?php echo e($car['investment_status']['label']); ?>

                            </span>
                        </td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Contracts Summary -->
    <div class="card" style="margin-bottom: 2rem;">
        <h3 style="color: #d4af37; margin-bottom: 1rem;">📋 <?php echo e(app()->getLocale() == 'ar' ? 'تحليل العقود' : 'Contracts Analysis'); ?></h3>
        <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;">
            <div class="stat-box" style="text-align: center;">
                <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'إجمالي العقود' : 'Total Contracts'); ?></div>
                <div style="color: #d4af37; font-size: 1.75rem; font-weight: bold;"><?php echo e($analytics['contracts']['total']); ?></div>
            </div>
            <div class="stat-box" style="text-align: center;">
                <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'المكتملة' : 'Completed'); ?></div>
                <div style="color: #10b981; font-size: 1.75rem; font-weight: bold;"><?php echo e($analytics['contracts']['completed']); ?></div>
            </div>
            <div class="stat-box" style="text-align: center;">
                <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'غير مكتملة' : 'Incomplete'); ?></div>
                <div style="color: #f59e0b; font-size: 1.75rem; font-weight: bold;"><?php echo e($analytics['contracts']['incomplete']); ?></div>
            </div>
            <div class="stat-box" style="text-align: center;">
                <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'المتأخرة' : 'Overdue'); ?></div>
                <div style="color: #ef4444; font-size: 1.75rem; font-weight: bold;"><?php echo e($analytics['contracts']['overdue']); ?></div>
            </div>
        </div>
    </div>

    <!-- Overdue Customers -->
    <?php if($analytics['customers']['overdue_count'] > 0): ?>
    <div class="card" style="margin-bottom: 2rem;">
        <h3 style="color: #d4af37; margin-bottom: 1rem;">⚠️ <?php echo e(app()->getLocale() == 'ar' ? 'العملاء المتأخرون' : 'Overdue Customers'); ?> (<?php echo e($analytics['customers']['overdue_count']); ?>)</h3>
        <div style="overflow-x: auto;">
            <table>
                <thead>
                    <tr>
                        <th><?php echo e(app()->getLocale() == 'ar' ? 'الاسم' : 'Name'); ?></th>
                        <th><?php echo e(app()->getLocale() == 'ar' ? 'الهاتف' : 'Phone'); ?></th>
                        <th><?php echo e(app()->getLocale() == 'ar' ? 'المبلغ المتأخر' : 'Overdue Amount'); ?></th>
                        <th><?php echo e(app()->getLocale() == 'ar' ? 'أيام التأخير' : 'Delay Days'); ?></th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__currentLoopData = $analytics['customers']['overdue_customers']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $customer): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr>
                        <td><?php echo e($customer['name']); ?></td>
                        <td style="color: #999;"><?php echo e($customer['phone']); ?></td>
                        <td style="color: #ef4444; font-weight: bold;"><?php echo e(number_format($customer['overdue_amount'], 2)); ?> SAR</td>
                        <td style="color: #f59e0b; font-weight: bold;"><?php echo e($customer['delay_days']); ?> <?php echo e(app()->getLocale() == 'ar' ? 'يوم' : 'days'); ?></td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>
        </div>
    </div>
    <?php endif; ?>

    <!-- Maintenance Summary with Chart -->
    <div class="card" style="margin-bottom: 2rem; box-shadow: 0 8px 24px rgba(212, 175, 55, 0.1);">
        <h3 style="color: #d4af37; margin-bottom: 2rem; font-size: 1.25rem;">🔧 <?php echo e(app()->getLocale() == 'ar' ? 'تحليل الصيانة والأسطول' : 'Maintenance & Fleet Analytics'); ?></h3>
        
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;">
            <!-- Stats Section -->
            <div>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                    <div class="stat-box" style="text-align: center; border-left: 4px solid #d4af37;">
                        <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'إجمالي السيارات' : 'Total Cars'); ?></div>
                        <div style="color: #d4af37; font-size: 2rem; font-weight: bold;"><?php echo e($analytics['maintenance']['total_cars']); ?></div>
                    </div>
                    <div class="stat-box" style="text-align: center; border-left: 4px solid #22c55e;">
                        <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'السيارات المؤجرة' : 'Rented'); ?></div>
                        <div style="color: #22c55e; font-size: 2rem; font-weight: bold;"><?php echo e($analytics['maintenance']['rented_cars']); ?></div>
                    </div>
                </div>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div class="stat-box" style="text-align: center; border-left: 4px solid #f59e0b;">
                        <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'غير المؤجرة' : 'Non-Rented'); ?></div>
                        <div style="color: #f59e0b; font-size: 2rem; font-weight: bold;"><?php echo e($analytics['maintenance']['non_rented_cars']); ?></div>
                    </div>
                    <div class="stat-box" style="text-align: center; border-left: 4px solid #ef4444;">
                        <div style="color: #999; font-size: 0.75rem; margin-bottom: 0.5rem;"><?php echo e(app()->getLocale() == 'ar' ? 'تحت الصيانة' : 'Maintenance'); ?></div>
                        <div style="color: #ef4444; font-size: 2rem; font-weight: bold;"><?php echo e($analytics['maintenance']['cars_in_maintenance']); ?></div>
                    </div>
                </div>
            </div>
            
            <!-- Pie Chart Section -->
            <div style="display: flex; justify-content: center; align-items: center; padding: 1rem;">
                <canvas id="maintenanceChart" style="max-height: 280px;"></canvas>
            </div>
        </div>
    </div>

    <!-- Action Button -->
    <div style="margin-top: 2rem;">
        <a href="<?php echo e(route('admin.analytics.report')); ?>?start_date=<?php echo e($startDate); ?>&end_date=<?php echo e($endDate); ?>&branch_id=<?php echo e($branchId); ?>" style="background: #d4af37; color: black; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: bold; display: inline-block;">📄 <?php echo e(app()->getLocale() == 'ar' ? 'تقرير مفصل' : 'Detailed Report'); ?></a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    flatpickr("#start_date_picker", { dateFormat: "Y-m-d" });
    flatpickr("#end_date_picker", { dateFormat: "Y-m-d" });

    // Chart Color Palette
    const chartColors = {
        excellent: '#10b981',
        medium: '#f59e0b',
        poor: '#ef4444',
        completed: '#22c55e',
        incomplete: '#f59e0b',
        overdue: '#ef4444',
        rented: '#3b82f6',
        nonRented: '#f97316',
        maintenance: '#ec4899',
        revenue: '#22c55e',
        expenses: '#ef4444',
        profit: '#10b981'
    };

    // 1. Occupancy Distribution Chart
    <?php
        $excellent = $analytics['cars']->filter(fn($c) => $c['occupancy_rate'] >= 60)->count();
        $medium = $analytics['cars']->filter(fn($c) => $c['occupancy_rate'] >= 30 && $c['occupancy_rate'] < 60)->count();
        $poor = $analytics['cars']->filter(fn($c) => $c['occupancy_rate'] < 30)->count();
        $isArabic = app()->getLocale() == 'ar';
    ?>
    new Chart(document.getElementById('occupancyChart'), {
        type: 'doughnut',
        data: {
            labels: [
                '<?php echo e($isArabic ? "ممتاز (60% فأكثر) 🟢" : "Excellent (60%+) 🟢"); ?>',
                '<?php echo e($isArabic ? "متوسط (30-60%) 🟡" : "Medium (30-60%) 🟡"); ?>',
                '<?php echo e($isArabic ? "ضعيف (أقل من 30%) 🔴" : "Poor (<30%) 🔴"); ?>'
            ],
            datasets: [{
                data: [<?php echo e($excellent); ?>, <?php echo e($medium); ?>, <?php echo e($poor); ?>],
                backgroundColor: ['#10b981', '#f59e0b', '#ef4444'],
                borderColor: '#1a1a1a',
                borderWidth: 3,
                hoverOffset: 12,
                hoverBorderWidth: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            animation: {
                animateRotate: true,
                animateScale: false
            },
            plugins: {
                legend: { 
                    position: 'bottom', 
                    labels: { 
                        color: '#ccc', 
                        padding: 20,
                        font: { size: 13, weight: 'bold' }
                    } 
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleColor: '#d4af37',
                    bodyColor: '#fff',
                    borderColor: '#d4af37',
                    borderWidth: 1,
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = ((context.parsed / total) * 100).toFixed(1);
                            return context.label + ': ' + context.parsed + ' (' + percentage + '%)';
                        }
                    }
                }
            }
        }
    });

    // 2. Contracts Status Chart
    new Chart(document.getElementById('contractsChart'), {
        type: 'doughnut',
        data: {
            labels: [
                '<?php echo e($isArabic ? "مكتملة ✅" : "Completed ✅"); ?>',
                '<?php echo e($isArabic ? "غير مكتملة ⏳" : "Incomplete ⏳"); ?>',
                '<?php echo e($isArabic ? "متأخرة ⚠️" : "Overdue ⚠️"); ?>'
            ],
            datasets: [{
                data: [<?php echo e($analytics['contracts']['completed']); ?>, <?php echo e($analytics['contracts']['incomplete']); ?>, <?php echo e($analytics['contracts']['overdue']); ?>],
                backgroundColor: ['#22c55e', '#f59e0b', '#ef4444'],
                borderColor: '#1a1a1a',
                borderWidth: 3,
                hoverOffset: 12,
                hoverBorderWidth: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            animation: {
                animateRotate: true,
                animateScale: false
            },
            plugins: {
                legend: { 
                    position: 'bottom', 
                    labels: { 
                        color: '#ccc', 
                        padding: 20,
                        font: { size: 13, weight: 'bold' }
                    } 
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleColor: '#d4af37',
                    bodyColor: '#fff',
                    borderColor: '#d4af37',
                    borderWidth: 1,
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = ((context.parsed / total) * 100).toFixed(1);
                            return context.label + ': ' + context.parsed + ' (' + percentage + '%)';
                        }
                    }
                }
            }
        }
    });

    // 3. Cars Status Chart
    new Chart(document.getElementById('carsStatusChart'), {
        type: 'doughnut',
        data: {
            labels: [
                '<?php echo e($isArabic ? "مؤجرة 🟢" : "Rented 🟢"); ?>',
                '<?php echo e($isArabic ? "غير مؤجرة 🔴" : "Non-Rented 🔴"); ?>',
                '<?php echo e($isArabic ? "تحت الصيانة 🔧" : "In Maintenance 🔧"); ?>'
            ],
            datasets: [{
                data: [<?php echo e($analytics['maintenance']['rented_cars']); ?>, <?php echo e($analytics['maintenance']['non_rented_cars']); ?>, <?php echo e($analytics['maintenance']['cars_in_maintenance']); ?>],
                backgroundColor: ['#3b82f6', '#f97316', '#ec4899'],
                borderColor: '#1a1a1a',
                borderWidth: 3,
                hoverOffset: 12,
                hoverBorderWidth: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            animation: {
                animateRotate: true,
                animateScale: false
            },
            plugins: {
                legend: { 
                    position: 'bottom', 
                    labels: { 
                        color: '#ccc', 
                        padding: 20,
                        font: { size: 13, weight: 'bold' }
                    } 
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleColor: '#d4af37',
                    bodyColor: '#fff',
                    borderColor: '#d4af37',
                    borderWidth: 1,
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = ((context.parsed / total) * 100).toFixed(1);
                            return context.label + ': ' + context.parsed + ' (' + percentage + '%)';
                        }
                    }
                }
            }
        }
    });

    // 4. Revenue vs Expenses Chart
    new Chart(document.getElementById('revenueChart'), {
        type: 'doughnut',
        data: {
            labels: [
                '<?php echo e($isArabic ? "الإيرادات 💰" : "Revenue 💰"); ?>',
                '<?php echo e($isArabic ? "المصاريف 💸" : "Expenses 💸"); ?>',
                '<?php echo e($isArabic ? "الربح النظيف 📈" : "Net Profit 📈"); ?>'
            ],
            datasets: [{
                data: [<?php echo e($analytics['summary']['total_revenue']); ?>, <?php echo e($analytics['summary']['total_expenses'] + $analytics['summary']['total_maintenance']); ?>, <?php echo e($analytics['summary']['total_profit']); ?>],
                backgroundColor: ['#22c55e', '#ef4444', '#10b981'],
                borderColor: '#1a1a1a',
                borderWidth: 3,
                hoverOffset: 12,
                hoverBorderWidth: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            animation: {
                animateRotate: true,
                animateScale: false
            },
            plugins: {
                legend: { 
                    position: 'bottom', 
                    labels: { 
                        color: '#ccc', 
                        padding: 20,
                        font: { size: 13, weight: 'bold' }
                    } 
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleColor: '#d4af37',
                    bodyColor: '#fff',
                    borderColor: '#d4af37',
                    borderWidth: 1,
                    callbacks: {
                        label: function(context) {
                            return context.label + ': ' + Number(context.parsed).toFixed(2) + ' SAR';
                        }
                    }
                }
            }
        }
    });

    // 5. Maintenance Fleet Chart
    new Chart(document.getElementById('maintenanceChart'), {
        type: 'doughnut',
        data: {
            labels: [
                '<?php echo e($isArabic ? "مؤجرة 🟢" : "Rented 🟢"); ?>',
                '<?php echo e($isArabic ? "غير مؤجرة 🟡" : "Non-Rented 🟡"); ?>',
                '<?php echo e($isArabic ? "تحت الصيانة 🔴" : "Maintenance 🔴"); ?>'
            ],
            datasets: [{
                data: [<?php echo e($analytics['maintenance']['rented_cars']); ?>, <?php echo e($analytics['maintenance']['non_rented_cars']); ?>, <?php echo e($analytics['maintenance']['cars_in_maintenance']); ?>],
                backgroundColor: ['#3b82f6', '#f59e0b', '#ef4444'],
                borderColor: '#1a1a1a',
                borderWidth: 3,
                hoverOffset: 12,
                hoverBorderWidth: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            animation: {
                animateRotate: true,
                animateScale: false
            },
            plugins: {
                legend: { 
                    position: 'bottom', 
                    labels: { 
                        color: '#ccc', 
                        padding: 15,
                        font: { size: 12, weight: 'bold' }
                    } 
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleColor: '#d4af37',
                    bodyColor: '#fff',
                    borderColor: '#d4af37',
                    borderWidth: 1,
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = ((context.parsed / total) * 100).toFixed(1);
                            return context.label + ': ' + context.parsed + ' (' + percentage + '%)';
                        }
                    }
                }
            }
        }
    });
</script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\tq cars\resources\views/admin/analytics/dashboard.blade.php ENDPATH**/ ?>