@extends('layouts.app')

@section('content')
<div class="report-wrapper shadow-lg" dir="rtl">
    <!-- Report Header (Logo & Basic Info) -->
    <div class="report-header">
        <div class="row align-items-center">
            <div class="col-md-6 text-right">
                <h1 class="company-name">TQ CARS</h1>
                <h3 class="report-title">كشف حساب السيارة التفصيلي</h3>
            </div>
            <div class="col-md-6 text-left">
                <div class="vehicle-main-info">
                    <div class="v-name">{{ $car->brand->name ?? '' }} {{ $car->carModel->name ?? '' }}</div>
                    <div class="v-plate">{{ $car->plate_number }} | {{ $car->year }}</div>
                    <div class="v-branch">{{ $car->branch->name }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Summary -->
    <div class="stats-grid">
        <div class="stat-card income">
            <span class="label">إجمالي الإيرادات</span>
            <span class="value">{{ number_format($summary['total_income'], 0) }} ر.س</span>
        </div>
        <div class="stat-card expense">
            <span class="label">إجمالي المصروفات</span>
            <span class="value">{{ number_format($summary['total_expense'], 0) }} ر.س</span>
        </div>
        <div class="stat-card profit">
            <span class="label">صافي الربح المحاسبي</span>
            <span class="value">{{ number_format($summary['accounting_profit'], 0) }} ر.س</span>
        </div>
        <div class="stat-card occupancy">
            <span class="label">القيمة الدفترية الحالية</span>
            <span class="value">{{ number_format($summary['current_book_value'], 0) }} ر.س</span>
        </div>
    </div>

    <!-- Vehicle Details Bar -->
    <div class="details-bar">
        <div class="detail-item">
            <span class="d-label">إجمالي الإهلاك:</span>
            <span class="d-value" style="color: #ef4444;">{{ number_format($summary['total_depreciation'], 0) }} ر.س</span>
        </div>
        <div class="detail-item">
            <span class="d-label">الربح النقدي:</span>
            <span class="d-value" style="color: #22c55e;">{{ number_format($summary['net_cash_profit'], 0) }} ر.س</span>
        </div>
        <div class="detail-item">
            <span class="d-label">أيام التشغيل:</span>
            <span class="d-value">{{ $summary['operating_days'] }} يوم</span>
        </div>
        <div class="detail-item">
            <span class="d-label">نسبة الإشغال:</span>
            <span class="d-value">{{ $summary['occupancy_rate'] }}%</span>
        </div>
    </div>

    <!-- Table Section -->
    <div class="table-container">
        <table class="statement-table">
            <thead>
                <tr>
                    <th width="100">التاريخ</th>
                    <th width="120">نوع الحركة</th>
                    <th width="100">رقم المرجع</th>
                    <th width="180">الجهة / العميل</th>
                    <th>البيان / الوصف</th>
                    <th width="100">إيراد (+)</th>
                    <th width="100">مصروف (-)</th>
                    <th width="100">إهلاك (-)</th>
                    <th width="110">قيمة دفترية</th>
                    <th width="110" class="balance-col">الرصيد النقدي</th>
                </tr>
            </thead>
            <tbody>
                @php $running = 0; @endphp
                @forelse($transactions as $tx)
                    <tr>
                        <td class="text-center font-monospace">{{ \Carbon\Carbon::parse($tx['date'])->format('Y-m-d') }}</td>
                        <td class="text-center">
                            <span class="badge-type {{ $tx['type'] == 'rental' ? 'b-rental' : 'b-expense' }}">
                                {{ $tx['label'] }}
                            </span>
                        </td>
                        <td class="text-center font-bold">#{{ $tx['ref'] }}</td>
                        <td>{{ $tx['party'] }}</td>
                        <td class="text-muted small">{{ $tx['description'] }}</td>
                        <td class="text-success text-left">{{ $tx['income'] > 0 ? number_format($tx['income'], 0) : '-' }}</td>
                        <td class="text-danger text-left">{{ $tx['expense'] > 0 ? number_format($tx['expense'], 0) : '-' }}</td>
                        <td class="text-warning text-left">{{ $tx['depreciation'] > 0 ? number_format($tx['depreciation'], 0) : '-' }}</td>
                        <td class="text-center" style="color: #666; font-size: 0.8rem;">{{ number_format($tx['book_value'], 0) }}</td>
                        <td class="balance-cell {{ $tx['running_balance'] >= 0 ? 'pos' : 'neg' }}">
                            {{ number_format($tx['running_balance'], 2) }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="empty-state">لا توجد حركات مسجلة لهذه الفترة</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Footer Information -->
    <div class="report-footer">
        <div class="row">
            <div class="col-6">
                طبع بواسطة: {{ Auth::user()->name }}
            </div>
            <div class="col-6 text-left">
                تاريخ الطباعة: {{ now()->format('Y-m-d H:i') }}
            </div>
        </div>
    </div>
</div>

<div class="no-print action-buttons">
    <button onclick="window.print()" class="btn-print">
        <i class="fas fa-print"></i> طباعة التقرير
    </button>
</div>

<style>
    /* Absolute reset for the report to ensure it ignores global dark theme */
    .report-wrapper {
        background: #ffffff !important;
        color: #1a1a1a !important;
        padding: 40px;
        border-radius: 8px;
        max-width: 1200px;
        margin: 0 auto;
        font-family: 'Tajawal', sans-serif !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .report-header {
        border-bottom: 3px solid #d4af37;
        padding-bottom: 20px;
        margin-bottom: 30px;
    }

    .company-name { font-weight: 900; color: #d4af37; margin: 0; font-size: 2.5rem; }
    .report-title { font-weight: 700; color: #333; margin: 5px 0 0 0; }
    
    .vehicle-main-info { background: #f8f9fa; padding: 15px; border-radius: 10px; border-right: 5px solid #d4af37; }
    .v-name { font-weight: 800; font-size: 1.2rem; color: #000; }
    .v-plate { color: #666; font-size: 1rem; margin: 5px 0; }
    .v-branch { background: #d4af37; color: #fff; display: inline-block; padding: 2px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }

    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 30px; }
    .stat-card { padding: 20px; border-radius: 12px; text-align: center; border: 1px solid #eee; }
    .stat-card .label { display: block; font-size: 0.85rem; color: #777; font-weight: bold; margin-bottom: 5px; }
    .stat-card .value { font-size: 1.25rem; font-weight: 800; }
    
    .stat-card.income { border-bottom: 4px solid #28a745; background: #f0fff4; }
    .stat-card.income .value { color: #28a745; }
    
    .stat-card.expense { border-bottom: 4px solid #dc3545; background: #fff5f5; }
    .stat-card.expense .value { color: #dc3545; }
    
    .stat-card.profit { border-bottom: 4px solid #007bff; background: #f0f7ff; }
    .stat-card.profit .value { color: #007bff; }
    
    .stat-card.occupancy { border-bottom: 4px solid #6c757d; background: #f8f9fa; }
    .stat-card.occupancy .value { color: #333; }

    .details-bar { display: flex; justify-content: space-around; background: #333; color: #fff; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
    .detail-item .d-label { color: #aaa; font-size: 0.8rem; margin-left: 5px; }
    .detail-item .d-value { font-weight: 700; font-size: 0.95rem; color: #d4af37; }

    .table-container { border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
    .statement-table { width: 100%; border-collapse: collapse; }
    .statement-table thead th { background: #f1f1f1; padding: 15px 10px; font-size: 0.85rem; font-weight: 800; color: #444; border-bottom: 2px solid #ddd; text-align: center; }
    .statement-table tbody td { padding: 12px 10px; border-bottom: 1px solid #eee; vertical-align: middle; font-size: 0.9rem; color: #333 !important; }
    
    .font-monospace { font-family: 'Courier New', Courier, monospace !important; }
    .font-bold { font-weight: 700; }
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-success { color: #28a745 !important; font-weight: bold; }
    .text-danger { color: #dc3545 !important; font-weight: bold; }
    .text-muted { color: #777 !important; }

    .badge-type { padding: 4px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: bold; }
    .b-rental { background: #e6fffa; color: #0694a2 !important; border: 1px solid #b2f5ea; }
    .b-expense { background: #fff5f5; color: #e53e3e !important; border: 1px solid #feb2b2; }

    .balance-col { background: #d4af37 !important; color: #000 !important; }
    .balance-cell { font-weight: 800; background: #fffdf0; text-align: left; border-right: 2px solid #d4af37 !important; }
    .balance-cell.pos { color: #000 !important; }
    .balance-cell.neg { color: #dc3545 !important; }

    .empty-state { padding: 50px !important; text-align: center; color: #999; font-style: italic; }

    .report-footer { margin-top: 30px; border-top: 1px dashed #ccc; padding-top: 15px; color: #888; font-size: 0.8rem; }

    .action-buttons { position: fixed; bottom: 20px; left: 20px; z-index: 1000; }
    .btn-print { background: #d4af37; color: #000; border: none; padding: 12px 25px; border-radius: 50px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); }
    .btn-print:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6); }

    @media print {
        body { background: #fff !important; }
        .report-wrapper { box-shadow: none !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; }
        .no-print, header, aside, .action-buttons { display: none !important; }
        .h-screen { height: auto !important; overflow: visible !important; }
        .flex-1 { border-radius: 0 !important; }
        main { padding: 0 !important; }
        .report-wrapper * { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; }
    }
</style>
@endsection