<?php $__env->startPush('styles'); ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    /* Distinguished Dark Theme */
    .stat-card {
        background: linear-gradient(145deg, #1a1c23, #111318);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 1.5rem;
        padding: 1.5rem;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    .stat-card:hover {
        transform: translateY(-5px);
        border-color: rgba(212, 175, 55, 0.3);
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .stat-card::after {
        content: '';
        position: absolute;
        top: 0; right: 0;
        width: 100px; height: 100px;
        background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.05), transparent);
    }
    .stat-icon {
        width: 48px; height: 48px;
        background: rgba(212, 175, 55, 0.1);
        color: #d4af37;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 1rem;
    }
    .chart-container {
        background: #111318;
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 1.5rem;
        padding: 2rem;
    }
    .ledger-card {
        background: #111318;
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 1.5rem;
        overflow: hidden;
    }
    .dashboard-table { width: 100%; border-collapse: collapse; }
    .dashboard-table th { 
        padding: 1.25rem 1rem; 
        text-align: right; 
        color: #d4af37; 
        background: rgba(255,255,255,0.02);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .dashboard-table td { 
        padding: 1.25rem 1rem; 
        border-bottom: 1px solid rgba(255,255,255,0.03); 
        color: #ccc; 
        text-align: right;
        font-size: 0.9rem;
    }
    .dashboard-table tr:hover { background: rgba(255,255,255,0.01); }

    /* 
       ==========================================================================
       AGGRESSIVE PRINT ISOLATION - التصميم المحاسبي الرسمي للطباعة
       ==========================================================================
    */
    @media print {
        /* 1. إخفاء كل محتويات الموقع بالكامل */
        body * { visibility: hidden !important; background: none !important; }
        
        /* 2. إظهار منطقة التقرير فقط وجعلها تملأ الصفحة */
        .report-wrapper, .report-wrapper * { visibility: visible !important; }
        .report-wrapper { 
            position: absolute !important; 
            left: 0 !important; 
            top: 0 !important; 
            width: 100% !important; 
            margin: 0 !important; 
            padding: 0 !important;
            background: white !important;
            color: black !important;
            display: block !important;
        }

        /* 3. تنسيق التقرير ليصبح وثيقة رسمية A4 */
        @page { size: A4 portrait; margin: 1.5cm; }
        
        /* 4. إخفاء العناصر غير المرغوبة في التقرير نفسه */
        .no-print, .stat-icon, .stat-card::after, .chart-container, .ledger-card h3 { display: none !important; }

        /* 5. تصميم الترويصة الرسمية (تظهر في الطباعة فقط) */
        .print-header { 
            display: flex !important; 
            justify-content: space-between !important; 
            align-items: center !important; 
            border-bottom: 3px solid #d4af37 !important; 
            padding-bottom: 20px !important; 
            margin-bottom: 40px !important; 
            direction: rtl !important;
            visibility: visible !important;
        }

        /* 6. تصميم مربعات الإحصائيات الرسمي */
        .stats-row { 
            display: grid !important; 
            grid-template-columns: repeat(4, 1fr) !important; 
            gap: 10px !important; 
            margin-bottom: 40px !important;
            direction: rtl !important;
        }
        .stat-card { 
            border: 1px solid #000 !important; 
            background: #f8f9fa !important; 
            padding: 15px !important; 
            border-radius: 0 !important;
            text-align: center !important;
            height: auto !important;
        }
        .val { color: black !important; font-size: 16px !important; font-weight: bold !important; margin: 0 !important; }
        .label { color: #555 !important; font-size: 10px !important; font-weight: bold !important; margin-bottom: 5px !important; display: block !important; }

        /* 7. تصميم الجدول المحاسبي */
        .ledger-card { border: none !important; margin-top: 20px !important; }
        .dashboard-table { 
            width: 100% !important; 
            border: 1px solid #000 !important; 
            border-collapse: collapse !important;
            font-size: 11px !important;
        }
        .dashboard-table th { 
            background: #f0f0f0 !important; 
            border: 1px solid #000 !important; 
            padding: 12px 8px !important; 
            color: black !important;
            text-align: right !important;
        }
        .dashboard-table td { 
            border: 1px solid #000 !important; 
            padding: 10px 8px !important; 
            color: black !important;
            text-align: right !important;
        }

        /* 8. تذييل التقرير للتوقيع */
        .print-footer { 
            display: block !important; 
            visibility: visible !important;
            margin-top: 60px !important; 
            border-top: 1px dashed #000 !important; 
            padding-top: 20px !important;
            direction: rtl !important;
        }
    }

    /* Styles for the screen only */
    .print-header, .print-footer { display: none; }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<div style="padding: 2rem;" class="report-wrapper">
    <!-- Official Report Header for Print -->
    <div class="print-header" style="display: none;">
        <div>
            <h2 style="margin: 0; font-size: 20px;">تقرير قيود الإهلاك الدوري</h2>
            <p style="margin: 5px 0 0; font-size: 12px; color: #666;">شركة TQ CARS لتاجير السيارات</p>
        </div>
        <div style="text-align: left;">
            <p style="margin: 0; font-size: 11px;">تاريخ التقرير: <?php echo e(now()->format('Y-m-d')); ?></p>
            <p style="margin: 3px 0 0; font-size: 11px;">الفترة: <?php echo e($startDate ?: 'First'); ?> إلى <?php echo e($endDate ?: 'Today'); ?></p>
        </div>
    </div>
    <!-- Screen Header -->
    <div class="no-print" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem;">
        <div>
            <p style="color: #d4af37; font-size: 10px; font-weight: 900; letter-spacing: 4px; margin-bottom: 0.5rem; text-transform: uppercase;">Financial Intelligence</p>
            <h1 style="color: white; margin: 0; font-size: 2.5rem; font-weight: 900;">سجل <span style="color: #d4af37;">الإهلاك</span></h1>
        </div>
        <div style="display: flex; gap: 1rem;">
             <button onclick="window.print()" style="padding: 1rem 2rem; background: #d4af37; color: black; border: none; border-radius: 1rem; cursor: pointer; font-weight: 900; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);">
                <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.5" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>
                تصدير التقرير
            </button>
        </div>
    </div>

    <!-- Stats & Chart Row -->
    <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-bottom: 2rem;" class="stats-row">
        <!-- Squares for Stats -->
        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;">
            <div class="stat-card">
                <div class="stat-icon">
                    <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="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"></path></svg>
                </div>
                <label class="label" style="color: #666; font-size: 11px; font-weight: 800; text-transform: uppercase;">إجمالي الإهلاك</label>
                <div class="val" style="color: white; font-size: 1.8rem; font-weight: 900; margin-top: 5px;"><?php echo e(number_format($depreciations->sum('amount'), 2)); ?> <small style="color: #d4af37; font-size: 12px;">SAR</small></div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="background: rgba(34, 197, 94, 0.1); color: #22c55e;">
                    <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                </div>
                <label class="label" style="color: #666; font-size: 11px; font-weight: 800; text-transform: uppercase;">متوسط الشهر</label>
                <div class="val" style="color: white; font-size: 1.8rem; font-weight: 900; margin-top: 5px;"><?php echo e(number_format($depreciations->avg('amount') ?? 0, 2)); ?> <small style="color: #22c55e; font-size: 12px;">SAR</small></div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="background: rgba(59, 130, 246, 0.1); color: #3b82f6;">
                    <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                <label class="label" style="color: #666; font-size: 11px; font-weight: 800; text-transform: uppercase;">عدد القيود</label>
                <div class="val" style="color: white; font-size: 1.8rem; font-weight: 900; margin-top: 5px;"><?php echo e($depreciations->count()); ?></div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="background: rgba(245, 158, 11, 0.1); color: #f59e0b;">
                    <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                <label class="label" style="color: #666; font-size: 11px; font-weight: 800; text-transform: uppercase;">القيمة الدفترية</label>
                <div class="val" style="color: white; font-size: 1.8rem; font-weight: 900; margin-top: 5px;"><?php echo e(number_format($depreciations->groupBy('car_id')->map(fn($group) => $group->first()->book_value)->sum(), 2)); ?> <small style="color: #f59e0b; font-size: 12px;">SAR</small></div>
            </div>
        </div>

        <!-- Pie Chart -->
        <div class="chart-container">
            <h3 style="color: white; font-size: 0.9rem; font-weight: 800; margin-bottom: 1.5rem; text-align: center;">توزيع الإهلاك حسب السيارة</h3>
            <div style="height: 250px;">
                <canvas id="depreciationPieChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Filter Bar -->
    <div class="no-print" style="background: #111318; padding: 1.5rem; border-radius: 1.5rem; border: 1px solid rgba(255,255,255,0.05); margin-bottom: 2rem;">
        <form method="GET" action="<?php echo e(route('admin.analytics.depreciation')); ?>" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; direction: rtl;">
            <div>
                <label style="color: #666; font-size: 10px; font-weight: 900; display: block; margin-bottom: 8px;">الفترة من</label>
                <input type="text" id="start_date_picker" name="start_date" value="<?php echo e($startDate); ?>" style="width: 100%; padding: 0.75rem; background: #000; border: 1px solid #333; color: white; border-radius: 0.75rem; font-size: 0.85rem;">
            </div>
            <div>
                <label style="color: #666; font-size: 10px; font-weight: 900; display: block; margin-bottom: 8px;">إلى</label>
                <input type="text" id="end_date_picker" name="end_date" value="<?php echo e($endDate); ?>" style="width: 100%; padding: 0.75rem; background: #000; border: 1px solid #333; color: white; border-radius: 0.75rem; font-size: 0.85rem;">
            </div>
            <div>
                <label style="color: #666; font-size: 10px; font-weight: 900; display: block; margin-bottom: 8px;">الفرع</label>
                <select name="branch_id" style="width: 100%; padding: 0.75rem; background: #000; border: 1px solid #333; color: white; border-radius: 0.75rem; font-size: 0.85rem;">
                    <option value="">كل الفروع</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.75rem; background: white; color: black; border: none; border-radius: 0.75rem; font-weight: 900; cursor: pointer;">تطبيق الفلتر</button>
            </div>
        </form>
    </div>

    <!-- Detailed Ledger -->
    <div class="ledger-card">
        <div style="padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.05);">
            <h3 style="margin: 0; color: white; font-size: 1.1rem; font-weight: 900;">تفاصيل القيود المحاسبية</h3>
        </div>
        <div style="overflow-x: auto;">
            <table class="dashboard-table">
                <thead>
                    <tr>
                        <th>التاريخ</th>
                        <th>المركبة</th>
                        <th>رقم اللوحة</th>
                        <th>الطريقة</th>
                        <th>مبلغ الإهلاك</th>
                        <th>المتراكم</th>
                        <th>صافي القيمة</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__currentLoopData = $depreciations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dep): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr>
                            <td style="font-weight: 700;"><?php echo e($dep->depreciation_date->format('Y-m-d')); ?></td>
                            <td>
                                <div style="color: white; font-weight: 800;"><?php echo e($dep->car->title); ?></div>
                                <div style="font-size: 10px; color: #666;"><?php echo e($dep->car->brand?->name); ?></div>
                            </td>
                            <td><span style="background: #222; padding: 4px 10px; border-radius: 6px; font-family: monospace; font-size: 11px;"><?php echo e($dep->car->plate_number); ?></span></td>
                            <td>
                                <?php
                                    $m = ['straight_line' => 'قسط ثابت', 'declining_balance' => 'قسط متناقص', 'mileage' => 'حسب الاستخدام'][$dep->car->depreciation_method] ?? '-';
                                ?>
                                <span style="font-size: 11px; font-weight: 700; color: #d4af37;"><?php echo e($m); ?></span>
                            </td>
                            <td style="color: #ef4444; font-weight: 800;">(<?php echo e(number_format($dep->amount, 2)); ?>)</td>
                            <td><?php echo e(number_format($dep->accumulated_depreciation, 2)); ?></td>
                            <td style="color: #22c55e; font-weight: 800;"><?php echo e(number_format($dep->book_value, 2)); ?></td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Print Footer (Only for PDF) -->
    <div class="print-footer">
        <div style="display: flex; justify-content: space-between;">
            <div>توقيع المحاسب المسؤول: ____________________</div>
            <div>توقيع المدير العام: ____________________</div>
        </div>
        <div style="text-align: center; margin-top: 30px; font-size: 9px; color: #999;">تم استخراج هذا التقرير آلياً من نظام TQ CARS - <?php echo e(now()->format('Y-m-d H:i')); ?></div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<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" });

    <?php
        $carStats = $depreciations->groupBy('car_id')->map(fn($group) => $group->sum('amount'));
        $carLabels = $depreciations->groupBy('car_id')->map(fn($group) => $group->first()->car->title)->values();
        $carValues = $carStats->values();
    ?>

    const ctx = document.getElementById('depreciationPieChart').getContext('2d');
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: <?php echo json_encode($carLabels); ?>,
            datasets: [{
                data: <?php echo json_encode($carValues); ?>,
                backgroundColor: ['#d4af37', '#22c55e', '#3b82f6', '#ef4444', '#f59e0b', '#8b5cf6', '#ec4899'],
                borderWidth: 0,
                hoverOffset: 20
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '70%',
            plugins: {
                legend: {
                    position: 'right',
                    rtl: true,
                    labels: { color: '#888', font: { family: 'Tajawal', size: 10, weight: 'bold' }, padding: 15, usePointStyle: true }
                }
            }
        }
    });
</script>
<?php $__env->stopPush(); ?>

<?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/depreciation.blade.php ENDPATH**/ ?>