<!DOCTYPE html>
<html lang="{{ $locale }}" dir="{{ $locale === 'ar' ? 'rtl' : 'ltr' }}">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>{{ __('report.report_title', [], $locale) }} - {{ $period }}</title>
    <style>
        @page {
            margin: 100px 50px 80px 50px;
        }

        body {
            font-family: 'DejaVu Sans', sans-serif;
            font-size: 11px;
            color: #2D322A;
            direction: {{ $locale === 'ar' ? 'rtl' : 'ltr' }};
            line-height: 1.6;
        }

        header {
            position: fixed;
            top: -80px;
            left: 0;
            right: 0;
            height: 70px;
            border-bottom: 3px solid #C4A882;
            padding-bottom: 10px;
        }

        .header-content {
            display: table;
            width: 100%;
        }

        .header-left, .header-right {
            display: table-cell;
            vertical-align: middle;
        }

        .header-left {
            text-align: {{ $locale === 'ar' ? 'right' : 'left' }};
        }

        .header-right {
            text-align: {{ $locale === 'ar' ? 'left' : 'right' }};
        }

        .brand-name {
            font-size: 24px;
            font-weight: bold;
            color: #2D3624;
        }

        .brand-subtitle {
            font-size: 11px;
            color: #666;
            margin-top: 2px;
        }

        .report-info {
            font-size: 10px;
            color: #666;
        }

        footer {
            position: fixed;
            bottom: -60px;
            left: 0;
            right: 0;
            height: 50px;
            border-top: 2px solid #C4A882;
            padding-top: 10px;
            font-size: 9px;
            color: #666;
        }

        .footer-content {
            display: table;
            width: 100%;
        }

        .footer-left, .footer-right {
            display: table-cell;
            vertical-align: middle;
        }

        .footer-left {
            text-align: {{ $locale === 'ar' ? 'right' : 'left' }};
        }

        .footer-right {
            text-align: {{ $locale === 'ar' ? 'left' : 'right' }};
        }

        .page-number:after {
            content: counter(page);
        }

        /* Cover Page */
        .cover-page {
            text-align: center;
            padding-top: 150px;
        }

        .cover-brand {
            font-size: 48px;
            font-weight: bold;
            color: #2D3624;
            margin-bottom: 10px;
        }

        .cover-subtitle {
            font-size: 16px;
            color: #666;
            margin-bottom: 60px;
        }

        .cover-title {
            font-size: 28px;
            font-weight: bold;
            color: #2D3624;
            margin-bottom: 20px;
        }

        .cover-period {
            font-size: 22px;
            color: #A68966;
            margin-bottom: 60px;
        }

        .cover-generated {
            font-size: 12px;
            color: #666;
        }

        .page-break {
            page-break-after: always;
        }

        /* Section Styles */
        .section-title {
            font-size: 18px;
            font-weight: bold;
            color: #2D3624;
            border-bottom: 2px solid #C4A882;
            padding-bottom: 8px;
            margin-bottom: 20px;
            margin-top: 30px;
        }

        .section-title:first-of-type {
            margin-top: 0;
        }

        /* Table of Contents */
        .toc-item {
            display: table;
            width: 100%;
            margin-bottom: 10px;
            padding: 8px 0;
            border-bottom: 1px dotted #ccc;
        }

        .toc-number {
            display: table-cell;
            width: 30px;
            font-weight: bold;
            color: #A68966;
        }

        .toc-title {
            display: table-cell;
        }

        .toc-page {
            display: table-cell;
            width: 40px;
            text-align: {{ $locale === 'ar' ? 'left' : 'right' }};
            color: #A68966;
        }

        /* Stats Grid */
        .stats-grid {
            display: table;
            width: 100%;
            margin-bottom: 20px;
        }

        .stat-row {
            display: table-row;
        }

        .stat-cell {
            display: table-cell;
            width: 50%;
            padding: 10px;
            vertical-align: top;
        }

        .stat-box {
            background-color: #F4F1EA;
            border: 1px solid #C4A882;
            border-radius: 4px;
            padding: 15px;
            text-align: {{ $locale === 'ar' ? 'right' : 'left' }};
        }

        .stat-label {
            font-size: 10px;
            color: #666;
            text-transform: uppercase;
            margin-bottom: 5px;
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #2D3624;
        }

        .stat-value-gold {
            color: #A68966;
        }

        /* Data Table */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        .data-table th {
            background-color: #2D3624;
            color: #FFFFFF;
            padding: 10px 12px;
            text-align: {{ $locale === 'ar' ? 'right' : 'left' }};
            font-weight: bold;
            font-size: 10px;
            text-transform: uppercase;
        }

        .data-table td {
            padding: 10px 12px;
            border-bottom: 1px solid #C4A882;
            text-align: {{ $locale === 'ar' ? 'right' : 'left' }};
        }

        .data-table tr:nth-child(even) {
            background-color: #F4F1EA;
        }

        /* Highlights */
        .highlight-box {
            background-color: #F4F1EA;
            border: 1px solid #C4A882;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .highlight-item {
            padding: 5px 0;
            border-bottom: 1px solid rgba(196, 168, 130, 0.5);
        }

        .highlight-item:last-child {
            border-bottom: none;
        }

        .highlight-bullet {
            color: #A68966;
            font-weight: bold;
            margin-{{ $locale === 'ar' ? 'left' : 'right' }}: 8px;
        }

        /* Comparison Box */
        .comparison-box {
            background-color: #e8f4f8;
            border: 1px solid #17a2b8;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .comparison-title {
            font-weight: bold;
            color: #17a2b8;
            margin-bottom: 10px;
        }

        /* Chart Container */
        .chart-container {
            text-align: center;
            margin: 20px 0;
            padding: 15px;
            background-color: #fff;
            border: 1px solid #C4A882;
            border-radius: 4px;
        }

        .chart-title {
            font-size: 12px;
            font-weight: bold;
            color: #2D3624;
            margin-bottom: 15px;
        }

        .chart-image {
            max-width: 100%;
            height: auto;
        }

        .chart-unavailable {
            padding: 40px;
            color: #666;
            font-style: italic;
        }

        /* Badge */
        .badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 9px;
            font-weight: bold;
        }

        .badge-success {
            background-color: #d4edda;
            color: #155724;
        }

        .badge-warning {
            background-color: #fff3cd;
            color: #856404;
        }

        .badge-danger {
            background-color: #f8d7da;
            color: #721c24;
        }

        .badge-info {
            background-color: #d1ecf1;
            color: #0c5460;
        }

        /* No Data */
        .no-data {
            text-align: center;
            padding: 30px;
            color: #666;
            background-color: #F4F1EA;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <header>
        <div class="header-content">
            <div class="header-left">
                <img src="{{ public_path('images/logo.png') }}" style="height: 50px; width: 50px;" alt="LIBRA for Rights">
            </div>
            <div class="header-right">
                <div class="report-info">
                    {{ __('report.report_title', [], $locale) }}<br>
                    {{ $period }}
                </div>
            </div>
        </div>
    </header>

    <footer>
        <div class="footer-content">
            <div class="footer-left">
                {{ __('report.generated_at', [], $locale) }}: {{ $generatedAt }}
            </div>
            <div class="footer-right">
                {{ __('report.page', [], $locale) }} <span class="page-number"></span>
            </div>
        </div>
    </footer>

    <!-- Cover Page -->
    <div class="cover-page">
        <img src="{{ public_path('images/logo.png') }}" style="height: 100px; width: 100px; margin-bottom: 20px;" alt="LIBRA for Rights">
        <div class="cover-subtitle">{{ __('report.libra_law_firm', [], $locale) }}</div>
        <div class="cover-title">{{ __('report.report_title', [], $locale) }}</div>
        <div class="cover-period">{{ $period }}</div>
        <div class="cover-generated">{{ __('report.generated_at', [], $locale) }}: {{ $generatedAt }}</div>
    </div>

    <div class="page-break"></div>

    <!-- Table of Contents -->
    <div class="section-title">{{ __('report.table_of_contents', [], $locale) }}</div>

    <div class="toc-item">
        <span class="toc-number">1.</span>
        <span class="toc-title">{{ __('report.executive_summary', [], $locale) }}</span>
        <span class="toc-page">2</span>
    </div>
    <div class="toc-item">
        <span class="toc-number">2.</span>
        <span class="toc-title">{{ __('report.user_statistics', [], $locale) }}</span>
        <span class="toc-page">2</span>
    </div>
    <div class="toc-item">
        <span class="toc-number">3.</span>
        <span class="toc-title">{{ __('report.consultation_statistics', [], $locale) }}</span>
        <span class="toc-page">3</span>
    </div>
    <div class="toc-item">
        <span class="toc-number">4.</span>
        <span class="toc-title">{{ __('report.timeline_statistics', [], $locale) }}</span>
        <span class="toc-page">3</span>
    </div>
    <div class="toc-item">
        <span class="toc-number">5.</span>
        <span class="toc-title">{{ __('report.post_statistics', [], $locale) }}</span>
        <span class="toc-page">4</span>
    </div>
    <div class="toc-item">
        <span class="toc-number">6.</span>
        <span class="toc-title">{{ __('report.trends_chart', [], $locale) }}</span>
        <span class="toc-page">4</span>
    </div>

    <div class="page-break"></div>

    <!-- Executive Summary -->
    <div class="section-title">1. {{ __('report.executive_summary', [], $locale) }}</div>

    @if(count($executiveSummary) > 0)
        <div class="highlight-box">
            <strong>{{ __('report.key_highlights', [], $locale) }}:</strong>
            @foreach($executiveSummary as $highlight)
                <div class="highlight-item">
                    <span class="highlight-bullet">&#8226;</span>
                    {{ $highlight }}
                </div>
            @endforeach
        </div>
    @endif

    @if($previousMonth)
        <div class="comparison-box">
            <div class="comparison-title">{{ __('report.compared_to_previous', [], $locale) }}</div>
            <table class="data-table">
                <tr>
                    <td>{{ __('report.previous_consultations', [], $locale) }}</td>
                    <td><strong>{{ $previousMonth['consultations'] }}</strong></td>
                </tr>
                <tr>
                    <td>{{ __('report.previous_clients', [], $locale) }}</td>
                    <td><strong>{{ $previousMonth['clients'] }}</strong></td>
                </tr>
            </table>
        </div>
    @else
        <div class="no-data">{{ __('report.no_previous_data', [], $locale) }}</div>
    @endif

    <!-- User Statistics -->
    <div class="section-title">2. {{ __('report.user_statistics', [], $locale) }}</div>

    <div class="stats-grid">
        <div class="stat-row">
            <div class="stat-cell">
                <div class="stat-box">
                    <div class="stat-label">{{ __('report.new_clients', [], $locale) }}</div>
                    <div class="stat-value stat-value-gold">{{ $userStats['new_clients'] }}</div>
                </div>
            </div>
            <div class="stat-cell">
                <div class="stat-box">
                    <div class="stat-label">{{ __('report.total_active_clients', [], $locale) }}</div>
                    <div class="stat-value">{{ $userStats['total_active'] }}</div>
                </div>
            </div>
        </div>
        <div class="stat-row">
            <div class="stat-cell">
                <div class="stat-box">
                    <div class="stat-label">{{ __('report.individual_clients', [], $locale) }}</div>
                    <div class="stat-value">{{ $userStats['individual'] }}</div>
                </div>
            </div>
            <div class="stat-cell">
                <div class="stat-box">
                    <div class="stat-label">{{ __('report.company_clients', [], $locale) }}</div>
                    <div class="stat-value">{{ $userStats['company'] }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-break"></div>

    <!-- Consultation Statistics -->
    <div class="section-title">3. {{ __('report.consultation_statistics', [], $locale) }}</div>

    <div class="stats-grid">
        <div class="stat-row">
            <div class="stat-cell">
                <div class="stat-box">
                    <div class="stat-label">{{ __('report.total_consultations', [], $locale) }}</div>
                    <div class="stat-value stat-value-gold">{{ $consultationStats['total'] }}</div>
                </div>
            </div>
            <div class="stat-cell">
                <div class="stat-box">
                    <div class="stat-label">{{ __('report.no_show_rate', [], $locale) }}</div>
                    <div class="stat-value">{{ $consultationStats['no_show_rate'] }}%</div>
                </div>
            </div>
        </div>
    </div>

    <table class="data-table">
        <thead>
            <tr>
                <th>{{ __('report.consultation_statistics', [], $locale) }}</th>
                <th style="width: 100px;">{{ __('report.total_consultations', [], $locale) }}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ __('report.approved', [], $locale) }}</td>
                <td><span class="badge badge-info">{{ $consultationStats['approved'] }}</span></td>
            </tr>
            <tr>
                <td>{{ __('report.completed', [], $locale) }}</td>
                <td><span class="badge badge-success">{{ $consultationStats['completed'] }}</span></td>
            </tr>
            <tr>
                <td>{{ __('report.cancelled', [], $locale) }}</td>
                <td><span class="badge badge-warning">{{ $consultationStats['cancelled'] }}</span></td>
            </tr>
            <tr>
                <td>{{ __('report.no_show', [], $locale) }}</td>
                <td><span class="badge badge-danger">{{ $consultationStats['no_show'] }}</span></td>
            </tr>
        </tbody>
    </table>

    <table class="data-table">
        <thead>
            <tr>
                <th>{{ __('report.consultation_types', [], $locale) }}</th>
                <th style="width: 100px;">{{ __('report.total_consultations', [], $locale) }}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ __('report.free', [], $locale) }}</td>
                <td>{{ $consultationStats['free'] }}</td>
            </tr>
            <tr>
                <td>{{ __('report.paid', [], $locale) }}</td>
                <td>{{ $consultationStats['paid'] }}</td>
            </tr>
        </tbody>
    </table>

    @if($charts['consultation_pie'])
        <div class="chart-container">
            <div class="chart-title">{{ __('report.consultation_types', [], $locale) }}</div>
            <img src="{{ $charts['consultation_pie'] }}" alt="Consultation Types" class="chart-image">
        </div>
    @endif

    <!-- Timeline Statistics -->
    <div class="section-title">4. {{ __('report.timeline_statistics', [], $locale) }}</div>

    <div class="stats-grid">
        <div class="stat-row">
            <div class="stat-cell">
                <div class="stat-box">
                    <div class="stat-label">{{ __('report.active_timelines', [], $locale) }}</div>
                    <div class="stat-value">{{ $timelineStats['active'] }}</div>
                </div>
            </div>
            <div class="stat-cell">
                <div class="stat-box">
                    <div class="stat-label">{{ __('report.new_timelines', [], $locale) }}</div>
                    <div class="stat-value stat-value-gold">{{ $timelineStats['new'] }}</div>
                </div>
            </div>
        </div>
        <div class="stat-row">
            <div class="stat-cell">
                <div class="stat-box">
                    <div class="stat-label">{{ __('report.timeline_updates', [], $locale) }}</div>
                    <div class="stat-value">{{ $timelineStats['updates'] }}</div>
                </div>
            </div>
            <div class="stat-cell">
                <div class="stat-box">
                    <div class="stat-label">{{ __('report.archived_timelines', [], $locale) }}</div>
                    <div class="stat-value">{{ $timelineStats['archived'] }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-break"></div>

    <!-- Post Statistics -->
    <div class="section-title">5. {{ __('report.post_statistics', [], $locale) }}</div>

    <div class="stats-grid">
        <div class="stat-row">
            <div class="stat-cell">
                <div class="stat-box">
                    <div class="stat-label">{{ __('report.posts_this_month', [], $locale) }}</div>
                    <div class="stat-value stat-value-gold">{{ $postStats['this_month'] }}</div>
                </div>
            </div>
            <div class="stat-cell">
                <div class="stat-box">
                    <div class="stat-label">{{ __('report.total_published_posts', [], $locale) }}</div>
                    <div class="stat-value">{{ $postStats['total'] }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Trends Chart -->
    <div class="section-title">6. {{ __('report.trends_chart', [], $locale) }}</div>

    @if($charts['trend_line'])
        <div class="chart-container">
            <div class="chart-title">{{ __('report.consultation_trend', [], $locale) }}</div>
            <img src="{{ $charts['trend_line'] }}" alt="Consultation Trend" class="chart-image">
        </div>
    @else
        <div class="chart-container">
            <div class="chart-unavailable">{{ __('report.chart_unavailable', [], $locale) }}</div>
        </div>
    @endif

</body>
</html>
