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

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

        header {
            position: fixed;
            top: -80px;
            left: 0;
            right: 0;
            height: 70px;
            border-bottom: 3px solid #C9C4BA;
            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: #4A4A42;
        }

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

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

        footer {
            position: fixed;
            bottom: -60px;
            left: 0;
            right: 0;
            height: 50px;
            border-top: 2px solid #C9C4BA;
            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: #E8E4DC;
            border: 1px solid #C9C4BA;
            border-radius: 4px;
            padding: 10px 15px;
            margin-bottom: 20px;
        }

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

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

        .summary {
            margin-bottom: 15px;
            color: #4A4A42;
        }

        .summary strong {
            color: #4A4A42;
        }

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

        th {
            background-color: #4A4A42;
            color: #fff;
            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 #C9C4BA;
            text-align: {{ $locale === 'ar' ? 'right' : 'left' }};
            font-size: 9px;
        }

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

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

        .status-pending {
            color: #ffc107;
            font-weight: bold;
        }

        .status-approved {
            color: #17a2b8;
            font-weight: bold;
        }

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

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

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

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

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

        .type-free {
            background-color: #d4edda;
            color: #155724;
        }

        .type-paid {
            background-color: #cce5ff;
            color: #004085;
        }

        .problem-summary {
            max-width: 200px;
            word-wrap: break-word;
            font-size: 8px;
        }

        .no-data {
            text-align: center;
            padding: 40px;
            color: #666;
        }
    </style>
</head>
<body>
    <header>
        <div class="header-content">
            <div class="header-left">
                <div class="brand-name">Libra</div>
                <div class="brand-subtitle">{{ __('export.libra_law_firm', [], $locale) }}</div>
            </div>
            <div class="header-right">
                <div class="report-title">{{ __('export.consultations_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 === 'consultation_type')
                            {{ __('export.consultation_type', [], $locale) }}: {{ $value }}
                        @elseif($key === 'status')
                            {{ __('export.status', [], $locale) }}: {{ $value }}
                        @elseif($key === 'payment_status')
                            {{ __('export.payment_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($consultations->count() > 0)
            <table>
                <thead>
                    <tr>
                        <th>{{ __('export.client_name', [], $locale) }}</th>
                        <th>{{ __('export.date', [], $locale) }}</th>
                        <th>{{ __('export.time', [], $locale) }}</th>
                        <th>{{ __('export.consultation_type', [], $locale) }}</th>
                        <th>{{ __('export.status', [], $locale) }}</th>
                        <th>{{ __('export.payment_status', [], $locale) }}</th>
                        <th>{{ __('export.problem_summary', [], $locale) }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($consultations as $consultation)
                        <tr>
                            <td>{{ $consultation->user->full_name }}</td>
                            <td>{{ $consultation->booking_date->format($locale === 'ar' ? 'd/m/Y' : 'm/d/Y') }}</td>
                            <td>{{ $consultation->booking_time }}</td>
                            <td>
                                <span class="consultation-type type-{{ $consultation->consultation_type->value }}">
                                    {{ __('export.type_' . $consultation->consultation_type->value, [], $locale) }}
                                </span>
                            </td>
                            <td class="status-{{ $consultation->status->value }}">
                                {{ __('export.status_' . $consultation->status->value, [], $locale) }}
                            </td>
                            <td>
                                @php
                                    $paymentLabel = match($consultation->payment_status->value) {
                                        'pending' => __('export.payment_pending', [], $locale),
                                        'received' => __('export.payment_received', [], $locale),
                                        'na' => __('export.payment_not_applicable', [], $locale),
                                    };
                                @endphp
                                {{ $paymentLabel }}
                            </td>
                            <td class="problem-summary">
                                @if(strlen($consultation->problem_summary) > 500)
                                    {{ Str::limit($consultation->problem_summary, 500, '...') }}
                                @else
                                    {{ $consultation->problem_summary }}
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <div class="no-data">
                {{ __('export.no_consultations_match', [], $locale) }}
            </div>
        @endif
    </main>
</body>
</html>
