<!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>{{ __('export.timelines_export_title', [], $locale) }}</title>
    <style>
        @page {
            margin: 100px 50px 80px 50px;
        }

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

        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: 22px;
            font-weight: bold;
            color: #2D3624;
        }

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

        .report-title {
            font-size: 14px;
            font-weight: bold;
            color: #2D3624;
        }

        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);
        }

        .filters-section {
            background-color: #F4F1EA;
            border: 1px solid #C4A882;
            border-radius: 4px;
            padding: 10px 15px;
            margin-bottom: 20px;
        }

        .filters-title {
            font-weight: bold;
            color: #A68966;
            margin-bottom: 5px;
        }

        .filter-item {
            display: inline-block;
            margin-{{ $locale === 'ar' ? 'left' : 'right' }}: 15px;
            color: #666;
        }

        .summary {
            margin-bottom: 15px;
            color: #2D3624;
        }

        .summary strong {
            color: #A68966;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

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

        td {
            padding: 8px;
            border-bottom: 1px solid #C4A882;
            text-align: {{ $locale === 'ar' ? 'right' : 'left' }};
            font-size: 9px;
        }

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

        .status-active {
            color: #28a745;
            font-weight: bold;
        }

        .status-archived {
            color: #6c757d;
            font-weight: bold;
        }

        .updates-section {
            background-color: #F4F1EA;
            padding: 10px;
            margin: 5px 0;
            border-{{ $locale === 'ar' ? 'right' : 'left' }}: 3px solid #A68966;
        }

        .update-entry {
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px dashed #C4A882;
        }

        .update-entry:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .update-date {
            font-size: 8px;
            color: #666;
            margin-bottom: 3px;
        }

        .update-text {
            font-size: 9px;
            color: #2D322A;
        }

        .no-data {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .updates-row td {
            background-color: #fafafa;
            padding: 0;
        }
    </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-title">{{ __('export.timelines_export_title', [], $locale) }}</div>
            </div>
        </div>
    </header>

    <footer>
        <div class="footer-content">
            <div class="footer-left">
                {{ __('export.generated_at', [], $locale) }}: {{ $generatedAt->format($locale === 'ar' ? 'd/m/Y H:i' : 'm/d/Y H:i') }}
            </div>
            <div class="footer-right">
                {{ __('export.page', [], $locale) }} <span class="page-number"></span>
            </div>
        </div>
    </footer>

    <main>
        @if(count($filters) > 0)
            <div class="filters-section">
                <div class="filters-title">{{ __('export.filters_applied', [], $locale) }}:</div>
                @foreach($filters as $key => $value)
                    <span class="filter-item">
                        @if($key === 'client')
                            {{ __('export.client_name', [], $locale) }}: {{ $value }}
                        @elseif($key === 'status')
                            {{ __('export.status', [], $locale) }}: {{ $value }}
                        @elseif($key === 'date_from')
                            {{ __('export.date_from', [], $locale) }}: {{ $value }}
                        @elseif($key === 'date_to')
                            {{ __('export.date_to', [], $locale) }}: {{ $value }}
                        @endif
                    </span>
                @endforeach
            </div>
        @endif

        <div class="summary">
            {{ __('export.total_records', [], $locale) }}: <strong>{{ $totalCount }}</strong>
        </div>

        @if($timelines->count() > 0)
            <table>
                <thead>
                    <tr>
                        <th>{{ __('export.case_name', [], $locale) }}</th>
                        <th>{{ __('export.case_reference', [], $locale) }}</th>
                        <th>{{ __('export.client_name', [], $locale) }}</th>
                        <th>{{ __('export.status', [], $locale) }}</th>
                        <th>{{ __('export.created_date', [], $locale) }}</th>
                        <th>{{ __('export.updates_count', [], $locale) }}</th>
                        <th>{{ __('export.last_update', [], $locale) }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($timelines as $timeline)
                        <tr>
                            <td>{{ $timeline->case_name }}</td>
                            <td>{{ $timeline->case_reference ?? '-' }}</td>
                            <td>{{ $timeline->user->full_name }}</td>
                            <td class="status-{{ $timeline->status->value }}">
                                {{ __('export.timeline_status_' . $timeline->status->value, [], $locale) }}
                            </td>
                            <td>{{ $timeline->created_at->format($locale === 'ar' ? 'd/m/Y' : 'm/d/Y') }}</td>
                            <td>{{ $timeline->updates_count }}</td>
                            <td>
                                @if($timeline->updates_max_created_at)
                                    {{ \Carbon\Carbon::parse($timeline->updates_max_created_at)->format($locale === 'ar' ? 'd/m/Y H:i' : 'm/d/Y H:i') }}
                                @else
                                    -
                                @endif
                            </td>
                        </tr>
                        @if($includeUpdates && $timeline->updates->count() > 0)
                            <tr class="updates-row">
                                <td colspan="7">
                                    <div class="updates-section">
                                        <strong>{{ __('export.updates', [], $locale) }}:</strong>
                                        @foreach($timeline->updates->take(10) as $update)
                                            <div class="update-entry">
                                                <div class="update-date">
                                                    {{ $update->created_at->format($locale === 'ar' ? 'd/m/Y H:i' : 'm/d/Y H:i') }}
                                                </div>
                                                <div class="update-text">
                                                    {{ Str::limit($update->update_text, 500) }}
                                                </div>
                                            </div>
                                        @endforeach
                                        @if($timeline->updates->count() > 10)
                                            <div class="update-entry">
                                                <em>{{ __('export.more_updates', ['count' => $timeline->updates->count() - 10], $locale) }}</em>
                                            </div>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endif
                    @endforeach
                </tbody>
            </table>
        @else
            <div class="no-data">
                {{ __('export.no_timelines_match', [], $locale) }}
            </div>
        @endif
    </main>
</body>
</html>
