@php
    use Illuminate\Support\Facades\Request;

    $empIdEncrypted = Request::get('emp');

    try {
        $empId = decrypt($empIdEncrypted);
    } catch (\Exception $e) {
        abort(403, 'Invalid Employee ID');
    }

    // الحصول على اللغة من الـ request أو استخدام اللغة الحالية للتطبيق
    $locale = Request::get('lang', app()->getLocale());
    app()->setLocale($locale);

    function convertToArabicNumbers($string)
    {
        $western = range(0, 9);
        $eastern = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
        return str_replace($western, $eastern, $string);
    }

    function formatYear($date)
    {
        global $locale;
        if (empty($date)) {
            return '-';
        }
        try {
            $year = \Carbon\Carbon::parse($date)->format('Y');
            return $locale === 'ar' ? convertToArabicNumbers($year) : $year;
        } catch (\Exception $e) {
            return $date;
        }
    }

    /**
     * Render a compact period string: "2018 — 2020 (2 سنوات)" or "2018 — الآن" when end missing.
     */
    function renderPeriod($start, $end, $locale = 'ar')
    {
        $startYear = formatYear($start);
        $endYear = empty($end) ? ($locale === 'ar' ? 'الآن' : 'Present') : formatYear($end);

        if ($startYear === '-') {
            return $endYear === ($locale === 'ar' ? 'الآن' : 'Present') ? '-' : $endYear;
        }

        // حساب عدد السنوات
        $years = '';
        if (!empty($start)) {
            try {
                $startDate = \Carbon\Carbon::parse($start);
                $endDate = empty($end) ? \Carbon\Carbon::now() : \Carbon\Carbon::parse($end);

                // حساب الفرق الكامل بالشهور ثم تقسيمه
                $totalMonths = $startDate->diffInMonths($endDate);
                $diffYears = floor($totalMonths / 12);
                $diffMonths = $totalMonths % 12;

                if ($diffYears > 0 || $diffMonths > 0) {
                    $parts = [];

                    // إضافة السنوات
                    if ($diffYears > 0) {
                        $yearText = $locale === 'ar' ?
                            ($diffYears == 1 ? 'سنة' : ($diffYears == 2 ? 'سنتان' : 'سنوات')) :
                            ($diffYears == 1 ? 'year' : 'years');
                        $yearsNum = $locale === 'ar' ? convertToArabicNumbers($diffYears) : $diffYears;
                        $parts[] = "{$yearsNum} {$yearText}";
                    }

                    // إضافة الأشهر
                    if ($diffMonths > 0) {
                        $monthText = $locale === 'ar' ?
                            ($diffMonths == 1 ? 'شهر' : ($diffMonths == 2 ? 'شهران' : 'أشهر')) :
                            ($diffMonths == 1 ? 'month' : 'months');
                        $monthsNum = $locale === 'ar' ? convertToArabicNumbers($diffMonths) : $diffMonths;
                        $parts[] = "{$monthsNum} {$monthText}";
                    }

                    // دمج السنوات والأشهر
                    $separator = $locale === 'ar' ? ' و ' : ' and ';
                    $years = ' (' . implode($separator, $parts) . ')';
                }
            } catch (\Exception $e) {
                // في حالة فشل الحساب، نكمل بدون عدد السنوات
            }
        }

        return $startYear . ' — ' . $endYear . $years;
    }

    $dateAr = convertToArabicNumbers(\Carbon\Carbon::now()->locale('ar')->translatedFormat('d F Y - h:i A'));
    $website = env('APP_URL', 'https://orascom.com');
    $documentId = 'DOC-' . now()->format('Ymd-His') . '-' . Str::upper(Str::random(4));

    $employee = \App\Models\User\UserEmployee::with('user')->findOrFail($empId);
    $cv = is_array($employee->cv) ? $employee->cv : json_decode($employee->cv, true);

    $full_name = $locale === 'ar' ? ($employee->full_name['ar'] ?? '') : ($employee->full_name['en'] ?? '');
    $email = $employee->user?->email ?? '';
    $profile_picture_path = $cv['profile_picture'] ?? null;
    $experience_roads = $cv['work_experience']['roads'] ?? [];
    $experience_airports = $cv['work_experience']['airports'] ?? [];
    $experience_concrete = $cv['work_experience']['concrete'] ?? [];
    $skills = $cv['skills'] ?? [];
    $phone = $employee->phone ? json_decode($employee->phone, true)[0] ?? '' : '';
    $job = $locale === 'ar' ? optional($employee->jobTitle)->title_ar : optional($employee->jobTitle)->title_en;
    $job_title = $job ?? ($locale === 'ar' ? 'موظف' : 'Employee');
    $languages = $cv['languages'] ?? [];
    $certificates = $cv['certificates'] ?? [];
    $graduation_project = $cv['graduation_project'] ?? '';
    $qualification = $cv['qualification'] ?? ($employee->qualification ?? '');
    $graduation_year = $cv['graduation_year'] ?? ($employee->graduation_year ?? '');
    $military_status = $cv['military_status'] ?? ($employee->military_status ?? '');
    $national_id = $employee->national_id ?? '';
    $governorate = $locale === 'ar' ? $employee->governorate_name : ($employee->governorate_name_en ?? $employee->governorate_name);
@endphp

<!DOCTYPE html>
<html lang="{{ $locale }}" dir="{{ $locale === 'ar' ? 'rtl' : 'ltr' }}">

<head>
    <meta charset="UTF-8">
    <title>{{ __('frontend.cv') }}</title>
    @vite('resources/css/app.css')
    {{-- Load Arabic-friendly web font for better print rendering when locale is Arabic --}}
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        /* --- Base / Typography --- */
        :root {
            --accent: #0ea5a4;
            --muted: #6b7280;
            --border: #e6e9ef;
            --card-bg: #ffffff;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            color: #111827;
            font-family: {{ $locale === 'ar' ? "'Cairo', 'Segoe UI', Roboto, \"Helvetica Neue\", Arial, sans-serif" : "'Segoe UI', Roboto, \"Helvetica Neue\", Arial, sans-serif" }};
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background: transparent;
            font-size: 11px;
            line-height: 1.3;
        }

        .email-text,
        .description-text {
            word-wrap: break-word;
            word-break: break-word;
            white-space: pre-line;
        }

        /* Page container - تقليل الحواف */
        .page {
            box-sizing: border-box;
            width: 190mm;
            min-height: auto;
            padding: 6mm;
            margin: 6mm auto;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 4px;
            display: flex;
            flex-wrap: wrap;
            gap: 6mm;
        }

        /* Left sidebar - تقليل العرض والمسافات */
        .cv-left {
            width: 28%;
            max-width: 28%;
            box-sizing: border-box;
            padding: 6px 4px;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
            border-right: 1px solid rgba(0, 0, 0, 0.06);
        }

        .cv-right {
            width: calc(72% - 6mm);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        /* تقليل حجم الصورة */
        .profile-picture {
            width: 90px;
            height: 90px;
            border-radius: 9999px;
            object-fit: cover;
            border: 3px solid #fff;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
            margin: 0 auto 6px;
            display: block;
        }

        /* تقليل حجم العناوين */
        h1 {
            font-size: 20px;
            margin: 0 0 4px 0;
            line-height: 1.1;
        }

        h2 {
            font-size: 13px;
            font-weight: 700;
            margin: 0 0 6px 0;
            padding-bottom: 4px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }

        h3 {
            font-size: 11px;
            font-weight: 700;
            margin: 0 0 4px 0;
        }

        .section-title {
            font-size: 12px;
            font-weight: 700;
            color: #111827;
            padding-bottom: 4px;
            margin-bottom: 6px;
            border-bottom: 1px solid #eef2f7;
        }

        /* تقليل padding في الـ cards */
        .card {
            background: #fff;
            border: 1px solid #f1f5f9;
            padding: 6px 8px;
            border-radius: 6px;
        }

        .tag {
            display: inline-block;
            background: #f8fafc;
            color: #111827;
            padding: 2px 6px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 600;
            margin: 2px;
        }

        /* تحسين الـ Experience Grid */
        .experience-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
        }

        .experience-column {
            padding-inline: 4px;
            box-sizing: border-box;
            border-inline-start: 1px solid rgba(15, 23, 42, 0.06);
        }

        .experience-column:first-child {
            border-inline-start: 0;
        }

        .experience-item {
            padding: 6px 4px;
            border-bottom: 1px dashed #eef2f7;
            margin-bottom: 4px;
            font-size: 10px;
        }

        .experience-item:last-child {
            border-bottom: 0;
            margin-bottom: 0;
        }

        .experience-item strong {
            font-size: 10px;
            display: block;
            margin-bottom: 2px;
        }

        .period {
            font-size: 9px;
            color: var(--muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
        }

        /* تقليل المسافات في القائمة الجانبية */
        .cv-left p {
            margin: 0 0 4px 0;
            font-size: 10px;
            line-height: 1.3;
        }

        .cv-left .w-full {
            margin-bottom: 6px;
        }

        /* تحسين header */
        .bg-zinc-100 {
            background: #f4f4f5;
            border-radius: 8px;
            padding: 10px;
            text-align: center;
            margin-bottom: 6px;
        }

        .bg-zinc-100 h1 {
            margin-bottom: 2px;
        }

        .bg-zinc-100 .text-lg {
            font-size: 12px;
        }

        /* Prevent breaking */
        .avoid-break,
        .basic-info,
        .card {
            page-break-inside: avoid;
            break-inside: avoid;
        }

        footer {
            font-size: 9px;
            color: var(--muted);
            padding: 8px;
            margin-top: 0;
            width: 190mm;
            margin-left: auto;
            margin-right: auto;
            box-sizing: border-box;
        }

        /* Print rules */
        @page {
            size: A4 portrait;
            margin: 6mm;
        }

        @media print {
            * {
                -webkit-print-color-adjust: exact;
                color-adjust: exact;
            }

            html,
            body {
                width: 210mm;
                height: auto;
                margin: 0;
                padding: 0;
                background: white;
                font-size: 10px;
            }

            .page {
                margin: 0;
                width: auto;
                min-height: auto;
                height: auto;
                padding: 6mm;
                border: none;
                box-shadow: none;
                display: flex;
                gap: 6mm;
                page-break-after: avoid;
                page-break-inside: avoid;
            }

            .cv-left {
                width: 28%;
                border-right: 1px solid rgba(0, 0, 0, 0.06);
            }

            .cv-right {
                width: calc(72% - 6mm);
            }

            img.profile-picture {
                -webkit-filter: none !important;
                filter: none !important;
            }

            .no-print {
                display: none !important;
            }

            footer {
                position: relative;
                margin-top: 4mm;
                padding: 3mm 6mm;
                background: white;
                font-size: 8px;
                border-top: 1px solid #ddd;
                page-break-inside: avoid;
                page-break-after: avoid;
                width: 100%;
                max-width: 198mm;
                margin-left: auto;
                margin-right: auto;
                box-sizing: border-box;
            }

            .avoid-break {
                page-break-inside: avoid;
                break-inside: avoid;
            }

            /* منع الصفحات الفاضية */
            body::after {
                content: "";
                display: block;
                page-break-after: avoid;
            }
        }
    </style>

</head>

<body class="bg-white text-zinc-800 font-sans">
    <div class="page">

        <!-- Left Column -->
        <div
            class="cv-left left-column w-1/3 bg-zinc-800 text-white rounded-lg p-4 flex flex-col items-center shadow-lg">

            <!-- Profile Picture -->
            @if (!empty($profile_picture_path) && file_exists(public_path('storage/' . $profile_picture_path)))
                <img src="{{ asset('storage/' . $profile_picture_path) }}" alt="Profile Picture"
                    class="profile-picture">
            @else
                <img src="{{ asset('assets/img/default-avatar.png') }}" alt="Profile Picture"
                    class="profile-picture">
            @endif


            <!-- Contact Info -->
            <div class="w-full">
                <h2 class="text-lg font-bold border-b border-white pb-1 mb-2">
                    {{ __('frontend.information') }}</h2>
                <p class="mb-1">{{ __('frontend.governorate') . ': ' . $governorate }}</p>
                @if ($employee->birth_date)
                    <p class="mb-1">
                        {{ __('frontend.birth_date') . ': ' }}
                        {{ $locale === 'ar'
                            ? convertToArabicNumbers($employee->birth_date->locale('ar')->translatedFormat('d F Y'))
                            : $employee->birth_date->locale('en')->translatedFormat('d F Y') }}
                        ({{ $locale === 'ar' ? convertToArabicNumbers($employee->birth_date->age) : $employee->birth_date->age }} {{ __('frontend.years') }} )

                    </p>
                @endif
                <div class="row">
                    <p class="mb-1">{{ __('frontend.national_id') }}: {{ $national_id ?: '-' }}</p>
                </div>
                <div class="row">
                    <p class="mb-1">{{ __('backend.qualification') }}: {{ $qualification ?: '-' }}</p>
                </div>
                <div class="row">
                    <p class="mb-1">{{ __('backend.graduation_year') }}: {{ $graduation_year ?: '-' }}</p>
                </div>
                <div class="row">
                    <p class="mb-1">{{ __('frontend.hire_date') }}:
                        {{ $employee->hiring_date
                            ? ($locale === 'ar'
                                ? convertToArabicNumbers(\Carbon\Carbon::parse($employee->hiring_date)->translatedFormat('d F Y'))
                                : \Carbon\Carbon::parse($employee->hiring_date)->translatedFormat('d F Y'))
                            : '-' }}</p>
                </div>
                <div class="row">
                    <p class="mb-1">{{ __('frontend.contract_date') }}:
                        {{ $employee->contract_date
                            ? ($locale === 'ar'
                                ? convertToArabicNumbers(\Carbon\Carbon::parse($employee->contract_date)->translatedFormat('d F Y'))
                                : \Carbon\Carbon::parse($employee->contract_date)->translatedFormat('d F Y'))
                            : '-' }}</p>
                </div>
                @if (!empty($graduation_project))
                    <div class="row">
                        <p class="mb-1">{{ __('frontend.graduation_project') }}: {{ $graduation_project }}</p>
                    </div>
                @endif
                <div class="row">
                    <p class="mb-1"> {{ __('backend.military_status') }}:
                        {{ $military_status ? __("backend.{$military_status}") : '-' }}</p>
                </div>
            </div>

            <!-- Contact Info -->
            <div class="w-full">
                <h2 class="text-lg font-bold border-b border-white pb-1 mb-2">
                    {{ __('frontend.contact_information') }}</h2>
                <p class="mb-1">📱 +20{{ $phone }}</p>
                <p class="email-text">📧 {{ $email }}</p>
            </div>

            <!-- Skills -->
            <div class="w-full">
                <h2 class="text-lg font-bold border-b border-white pb-1 mb-2">{{ __('frontend.skills') }}</h2>
                @if (!empty($skills))
                    <ul class="flex flex-wrap gap-2">
                        @foreach ($skills as $skill)
                            <li class="bg-white text-zinc-800 px-3 py-1 rounded-full text-sm font-semibold">
                                {{ $skill }}</li>
                        @endforeach
                    </ul>
                @else
                    <p>{{ __('frontend.no_skills') }}</p>
                @endif
            </div>

            <!-- Languages -->
            <div class="w-full">
                <h2 class="text-lg font-bold border-b border-white pb-1 mb-2">{{ __('frontend.languages') }}</h2>
                @if (!empty($languages))
                    <ul class="flex flex-wrap gap-2">
                        @foreach ($languages as $lang)
                            <li class="bg-white text-zinc-800 px-3 py-1 rounded-full text-sm font-semibold">
                                {{ $lang }}</li>
                        @endforeach
                    </ul>
                @else
                    <p>{{ __('frontend.no_languages') }}</p>
                @endif
            </div>

            <!-- Certificates -->
            <div class="w-full">
                <h2 class="text-lg font-bold border-b border-white pb-1 mb-2">{{ __('frontend.certificates') }}
                </h2>
                @if (!empty($certificates))
                    <ul class="flex flex-wrap gap-2">
                        @foreach ($certificates as $cert)
                            <li class="bg-white text-zinc-800 px-3 py-1 rounded-full text-sm font-semibold">
                                {{ $cert }}</li>
                        @endforeach
                    </ul>
                @else
                    <p>{{ __('frontend.no_certificates') }}</p>
                @endif
            </div>

            <!-- ...existing left column content without the basic meta (moved to right column) ... -->

        </div>

        <!-- Right Column -->
        <div class="cv-right right-column w-2/3 flex flex-col space-y-6">

            <!-- Header -->
            <div class="bg-zinc-100 rounded-2xl p-6 shadow-lg text-center">
                <h1 class="text-3xl font-bold text-zinc-800 mb-2">{{ $full_name }}</h1>
                <div class="text-zinc-500 font-semibold text-lg">{{ $job_title }}</div>
            </div>

            <div class="bg-white rounded-2xl p-6 shadow-lg">
                <h2 class="text-xl font-bold border-b border-zinc-200 pb-2 mb-4">{{ __('frontend.work_experience') }}
                </h2>

                <div class="experience-grid">

                    <!-- خبرات الطرق -->
                    <div class="experience-column">
                        <h3 class="text-lg font-bold mb-2">{{ __('frontend.roads_experience') }}</h3>
                        @forelse($experience_roads as $exp)
                            <div class="experience-item bg-zinc-50 rounded avoid-break">
                                <strong class="block mb-1">{{ $exp['name'] }}</strong>
                                <p class="period">📅 {{ renderPeriod($exp['start_date'], $exp['end_date'], $locale) }}</p>
                                @if (!empty(trim($exp['description'] ?? '')))
                                    <p class="text-sm description-text">📝 <em>{{ $exp['description'] }}</em></p>
                                @endif
                            </div>
                        @empty
                            <p>{{ __('frontend.no_experience') }}</p>
                        @endforelse
                    </div>

                    <!-- خبرات المطارات -->
                    <div class="experience-column">
                        <h3 class="text-lg font-bold mb-2">{{ __('frontend.airports_experience') }}</h3>
                        @forelse($experience_airports as $exp)
                            <div class="experience-item bg-zinc-50 rounded avoid-break">
                                <strong class="block mb-1">{{ $exp['name'] }}</strong>
                                <p class="period">📅 {{ renderPeriod($exp['start_date'], $exp['end_date'], $locale) }}</p>
                                @if (!empty(trim($exp['description'] ?? '')))
                                    <p class="text-sm description-text">📝 <em>{{ $exp['description'] }}</em></p>
                                @endif
                            </div>
                        @empty
                            <p>{{ __('frontend.no_experience') }}</p>
                        @endforelse
                    </div>

                    <!-- خبرات الخرسانة -->
                    <div class="experience-column">
                        <h3 class="text-lg font-bold mb-2">
                            {{ __('frontend.concrete_experience') ?? 'Concrete Experience' }}</h3>
                        @forelse($experience_concrete as $exp)
                            <div class="experience-item bg-zinc-50 rounded avoid-break">
                                <strong class="block mb-1">{{ $exp['name'] }}</strong>
                                <p class="period">📅 {{ renderPeriod($exp['start_date'], $exp['end_date'], $locale) }}</p>
                                @if (!empty(trim($exp['description'] ?? '')))
                                    <p class="text-sm description-text">📝 <em>{{ $exp['description'] }}</em></p>
                                @endif
                            </div>
                        @empty
                            <p>{{ __('frontend.no_experience') }}</p>
                        @endforelse
                    </div>

                </div>
            </div>




        </div>

    </div>

    <!-- Footer خارج الـ page لكن مع الصفحة -->
    <footer class="bg-zinc-100 text-center text-sm text-zinc-600 py-2 border-t border-zinc-300"
        style="width: 190mm; margin: 0 auto; box-sizing: border-box; padding: 8px;">
        {{ __('frontend.hrmanager') }} - {{ __('backend.eng_name') }} |
        {{ __('frontend.document_id') }} {{ $documentId }} |
        🌐 {{ $website }} |
        📄 1/1
    </footer>

    <!-- Print Button -->
    <div class="no-print fixed bottom-6 right-6">
        <button onclick="window.print()"
            class="bg-blue-600 text-white px-5 py-2 rounded-full shadow-lg hover:bg-blue-700 transition">
            🖨️ {{ __('frontend.printpage') }}
        </button>
    </div>


</body>

</html>