<!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.users_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;
        }

        tr:hover {
            background-color: #F4F1EA;
        }

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

        .status-deactivated {
            color: #dc3545;
            font-weight: bold;
        }

        .user-type {
            background-color: #F4F1EA;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 8px;
        }

        .no-data {
            text-align: center;
            padding: 40px;
            color: #666;
        }
    </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.users_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 === 'user_type')
                            {{ __('export.user_type', [], $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($users->count() > 0)
            <table>
                <thead>
                    <tr>
                        <th>{{ __('export.name', [], $locale) }}</th>
                        <th>{{ __('export.email', [], $locale) }}</th>
                        <th>{{ __('export.phone', [], $locale) }}</th>
                        <th>{{ __('export.user_type', [], $locale) }}</th>
                        <th>{{ __('export.id_number', [], $locale) }}</th>
                        <th>{{ __('export.status', [], $locale) }}</th>
                        <th>{{ __('export.created_at', [], $locale) }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($users as $user)
                        <tr>
                            <td>{{ $user->user_type->value === 'company' ? $user->company_name : $user->full_name }}</td>
                            <td>{{ $user->email }}</td>
                            <td>{{ $user->phone }}</td>
                            <td><span class="user-type">{{ __('export.type_' . $user->user_type->value, [], $locale) }}</span></td>
                            <td>{{ $user->user_type->value === 'company' ? $user->company_cert_number : $user->national_id }}</td>
                            <td class="{{ $user->status->value === 'active' ? 'status-active' : 'status-deactivated' }}">
                                {{ __('export.status_' . $user->status->value, [], $locale) }}
                            </td>
                            <td>{{ $user->created_at->format($locale === 'ar' ? 'd/m/Y' : 'm/d/Y') }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <div class="no-data">
                {{ __('export.no_users_match', [], $locale) }}
            </div>
        @endif
    </main>
</body>
</html>
