{{--@extends('layouts.app')--}}

{{--@section('title', 'Certificat de Travail')--}}

{{--<script src="https://cdn.tailwindcss.com"></script>--}}

{{--@section('content')--}}
{{--    <div class="flex justify-center mt-6">--}}
{{--        <div id="certificate"--}}
{{--             class="relative bg-[#fffdf5] border-8 border-orange-500 rounded-xl shadow-inner w-[90%] h-[80vh] p-12 overflow-hidden font-serif">--}}

{{--            <!-- Bordures décoratives supplémentaires -->--}}
{{--            <div class="absolute top-0 left-0 w-full h-4 bg-gradient-to-r from-transparent via-orange-500 to-transparent"></div>--}}
{{--            <div class="absolute bottom-0 left-0 w-full h-4 bg-gradient-to-r from-transparent via-orange-500 to-transparent"></div>--}}
{{--            <div class="absolute top-0 left-0 w-4 h-full bg-gradient-to-b from-transparent via-orange-500 to-transparent"></div>--}}
{{--            <div class="absolute top-0 right-0 w-4 h-full bg-gradient-to-b from-transparent via-orange-500 to-transparent"></div>--}}

{{--            <!-- Coins décoratifs -->--}}
{{--            <div class="absolute top-6 left-6 w-16 h-16 border-t-4 border-l-4 border-orange-500 rounded-tr-xl"></div>--}}
{{--            <div class="absolute top-6 right-6 w-16 h-16 border-t-4 border-r-4 border-orange-500 rounded-tl-xl"></div>--}}
{{--            <div class="absolute bottom-6 left-6 w-16 h-16 border-b-4 border-l-4 border-orange-500 rounded-br-xl"></div>--}}
{{--            <div class="absolute bottom-6 right-6 w-16 h-16 border-b-4 border-r-4 border-orange-500 rounded-bl-xl"></div>--}}

{{--            <!-- Titre -->--}}
{{--            <div class="text-center mt-4">--}}
{{--                <h1 class="text-4xl font-extrabold uppercase tracking-widest text-orange-600 font-cursive">CERTIFICATE</h1>--}}
{{--                <h2 class="text-2xl font-semibold uppercase tracking-wide mt-1 text-gray-700 italic">OF ACHIEVEMENT</h2>--}}
{{--                <div class="mx-auto mt-4 mb-6 h-1 w-3/4 bg-gradient-to-r from-transparent via-orange-500 to-transparent"></div>--}}
{{--            </div>--}}

{{--            <!-- Sous-titre -->--}}
{{--            <div class="text-center mt-4">--}}
{{--                <p class="text-lg italic text-gray-600">THIS CERTIFICATE IS PROUDLY PRESENTED TO</p>--}}
{{--                <hr class="my-3 w-1/3 border-gray-400 mx-auto">--}}
{{--                <p><strong>{{ $employee->first_name ?? '' }} {{ $employee->last_name ?? '' }}</strong>,</p>--}}
{{--                <br>--}}
{{--            </div>--}}

{{--            @php--}}
{{--             if($employee->gender === 'Male'){--}}
{{--                $title = 'Monsieur';--}}
{{--             } elseif($employee->gender === 'Female'){--}}
{{--                $title = 'Madame';--}}
{{--             } else {--}}
{{--                $title = 'Monsieur/Madame';--}}
{{--             }--}}
{{--             @endphp--}}

{{--            <!-- Corps du certificat -->--}}
{{--            <div class="text-center text-sm text-gray-800 space-y-5" style="font-family: 'Times New Roman', serif;">--}}
{{--                <p class="text-lg">--}}
{{--                    {{$title}} <strong>{{ $employee->first_name ?? 'Nom' }} {{ $employee->last_name ?? '' }}</strong>,--}}
{{--                    titulaire du numéro matricule <strong>{{ $employee->employee_id ?? 'XXXX' }}</strong>.--}}
{{--                </p>--}}
{{--                <p class="text-lg">--}}
{{--                    @php--}}
{{--//                    add e to employee if genre is female--}}
{{--                        if ($employee->gender === 'Female') {--}}
{{--                            $addE = 'employée';--}}
{{--                        } else{--}}
{{--                            $addE = 'employé';--}}
{{--                        }--}}
{{--                    @endphp--}}
{{--                    A été {{ $addE }} au sein de notre entreprise du <strong>{{ $employee->created_at ?? 'JJ-MM-AAAA' }}</strong>--}}
{{--                    au <strong>{{ $employee->end_contract_date ?? 'JJ-MM-AAAA' }}</strong>, en qualité de--}}
{{--                    <strong>{{ $employee->function ?? 'Poste' }}</strong>.--}}
{{--                </p>--}}
{{--                <p class="text-lg">--}}
{{--                    Pendant toute la durée de son contrat, {{$title}} <strong>{{ $employee->first_name ?? 'Nom' }}</strong>--}}
{{--                    a fait preuve de <strong>{{ $employee->remarks ?? 'professionnalisme' }}</strong>.--}}
{{--                </p>--}}
{{--                <p class="text-lg">--}}
{{--                    Ce certificat est délivré à sa demande ou à l'initiative de l'entreprise, afin de faire valoir ce que de droit,--}}
{{--                    suite à l'expiration du contrat à durée déterminée signé entre les deux parties.--}}
{{--                </p>--}}
{{--            </div>--}}

{{--            <div class="border-t-2 mt-6 border-orange-500 w-2/3 mx-auto"></div>--}}

{{--            <!-- Footer -->--}}
{{--            <div class="absolute bottom-19 w-[calc(100%-6rem)]">--}}

{{--                <div class="flex justify-between mt-4 items-center">--}}
{{--                    <!-- Human Resources -->--}}
{{--                    <div class="text-center">--}}
{{--                        <p class="font-bold text-gray-700 uppercase">HUMAN RESOURCES</p>--}}
{{--                        <p class="text-gray-600">BANZA GLORY</p>--}}
{{--                    </div>--}}

{{--                    <!-- Logo + Timbre -->--}}
{{--                    <!-- Logo + timbre -->--}}
{{--                    <div class="text-center relative">--}}
{{--                        <!-- Logo principal -->--}}
{{--                        <img src="{{ asset('logo/logo.png') }}" alt="Logo" class="h-16 mx-auto relative z-10">--}}

{{--                        <!-- Timbre centré et proportionnel -->--}}
{{--                        <img src="{{ asset('logo/trimbre.png') }}" alt="Timbre"--}}
{{--                             class="absolute top-1/2 left-1/2 z-0 opacity-30"--}}
{{--                             style="max-height: 200px; max-width: 200px; width: auto; height: auto; transform: translate(-50%, -50%);">--}}
{{--                    </div>--}}

{{--                    <!-- Manager -->--}}
{{--                    <div class="text-center">--}}
{{--                        <p class="font-bold text-gray-700 uppercase">MANAGER</p>--}}
{{--                        <p class="text-gray-600">KUZO NELLY</p>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}

{{--        </div>--}}
{{--    </div>--}}

{{--    <!-- Bouton Télécharger PDF -->--}}
{{--    <div class="mt-4 text-center">--}}
{{--        <button onclick="downloadPDF()"--}}
{{--                class="px-6 py-2 bg-orange-600 text-white rounded hover:bg-orange-700">--}}
{{--            Télécharger PDF--}}
{{--        </button>--}}
{{--    </div>--}}

{{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>--}}
{{--    <script>--}}
{{--        function downloadPDF() {--}}
{{--            const element = document.getElementById('certificate');--}}
{{--            const opt = {--}}
{{--                margin: 0,--}}
{{--                filename: 'certificat_{{ $employee->first_name ?? "employee" }}.pdf',--}}
{{--                image: { type: 'jpeg', quality: 0.98 },--}}
{{--                html2canvas: { scale: 2, scrollY: -window.scrollY }, // centrer l'élément--}}
{{--                jsPDF: { unit: 'cm', format: 'a4', orientation: 'landscape' }--}}
{{--            };--}}
{{--            html2pdf().set(opt).from(element).save();--}}
{{--        }--}}
{{--    </script>--}}
{{--@endsection--}}


@extends('layouts.app')

@section('title', 'Certificat de Travail')

<script src="https://cdn.tailwindcss.com"></script>

@section('content')
    <div class="flex justify-center mt-6">
        <div id="certificate"
             class="relative bg-[#fffdf5] border-8 border-orange-500 rounded-xl shadow-inner font-serif"
             style="width: 297mm; height: 210mm; padding: 20mm; box-sizing: border-box; overflow: hidden; ">

            <!-- Bordures décoratives supplémentaires -->
            <div class="absolute top-0 left-0 w-full h-4 bg-gradient-to-r from-transparent via-orange-500 to-transparent"></div>
            <div class="absolute bottom-0 left-0 w-full h-4 bg-gradient-to-r from-transparent via-orange-500 to-transparent"></div>
            <div class="absolute top-0 left-0 w-4 h-full bg-gradient-to-b from-transparent via-orange-500 to-transparent"></div>
            <div class="absolute top-0 right-0 w-4 h-full bg-gradient-to-b from-transparent via-orange-500 to-transparent"></div>

            <!-- Coins décoratifs -->
            <div class="absolute top-6 left-6 w-16 h-16 border-t-4 border-l-4 border-orange-500 rounded-tr-xl"></div>
            <div class="absolute top-6 right-6 w-16 h-16 border-t-4 border-r-4 border-orange-500 rounded-tl-xl"></div>
            <div class="absolute bottom-6 left-6 w-16 h-16 border-b-4 border-l-4 border-orange-500 rounded-br-xl"></div>
            <div class="absolute bottom-6 right-6 w-16 h-16 border-b-4 border-r-4 border-orange-500 rounded-bl-xl"></div>

            <!-- Titre -->
            <div class="text-center mt-4">
                <h1 class="text-4xl font-extrabold uppercase tracking-widest text-orange-600 font-cursive">CERTIFICATE</h1>
                <h2 class="text-2xl font-semibold uppercase tracking-wide mt-1 text-gray-700 italic">OF ACHIEVEMENT</h2>
                <div class="mx-auto mt-4 mb-6 h-1 w-3/4 bg-gradient-to-r from-transparent via-orange-500 to-transparent"></div>
            </div>

            <!-- Sous-titre -->
            <div class="text-center mt-4">
                <p class="text-lg italic text-gray-600">THIS CERTIFICATE IS PROUDLY PRESENTED TO</p>
                <hr class="my-3 w-1/3 border-gray-400 mx-auto">
                <p><strong>{{ $employee->first_name ?? '' }} {{ $employee->last_name ?? '' }}</strong>,</p>
                <br>
            </div>

            @php
                if($employee->gender === 'Male' || $employee->gender === 'M'){
                   $title = 'Monsieur';
                } elseif($employee->gender === 'Female' || $employee->gender === 'F'){
                   $title = 'Madame';
                } else {
                   $title = 'Monsieur/Madame';
                }
            @endphp

                <!-- Corps du certificat -->
            <div class="text-center text-sm text-gray-800 space-y-5" style="font-family: 'Times New Roman', serif;">
                <p class="text-lg">
                    {{$title}} <strong>{{ $employee->first_name ?? 'Nom' }} {{ $employee->last_name ?? '' }}</strong>,
                    titulaire du numéro matricule <strong>{{ $employee->employee_id ?? 'XXXX' }}</strong>.
                </p>
                <p class="text-lg">
                    @php
                        if ($employee->gender === 'Female' || $employee->gender === 'F') {
                            $addE = 'employée';
                        } else{
                            $addE = 'employé';
                        }
                    @endphp
                    A été {{ $addE }} au sein de notre entreprise du <strong>{{ $employee->created_at ? $employee->created_at->format('d/m/Y') : 'JJ-MM-AAAA' }}</strong>
                    au <strong>{{ $employee->end_contract_date ? \Carbon\Carbon::parse($employee->end_contract_date)->format('d/m/Y') : 'JJ-MM-AAAA' }}</strong>, en qualité de
                    <strong>{{ $employee->function ?? 'Poste' }}</strong>.
                </p>
                <p class="text-lg">
                    Pendant toute la durée de son contrat, {{$title}} <strong>{{ $employee->first_name ?? 'Nom' }}</strong>
                    a fait preuve de <strong>{{'professionnalisme' }}</strong>.
                </p>
                <p class="text-lg">
                    Ce certificat est délivré à sa demande ou à l'initiative de l'entreprise, afin de faire valoir ce que de droit,
                    suite à l'expiration du contrat à durée déterminée signé entre les deux parties.
                </p>
            </div>

            <div class="border-t-2 mt-6 border-orange-500 w-2/3 mx-auto"></div>

            <!-- Footer -->
            <div class="absolute bottom-20 left-0 right-0 px-24">
                <div class="flex justify-between mt-4 items-center">
                    <!-- Human Resources -->
                    <div class="text-center">
                        <p class="font-bold text-gray-700 uppercase">HUMAN RESOURCES</p>
{{--                        <p class="text-gray-600">BANZA GLORY</p>--}}
                    </div>

                    <!-- Logo + Timbre -->
                    <div class="text-center relative">
                        <img src="{{ asset('logo/logo.png') }}" alt="Logo" class="h-16 mx-auto relative z-10">
                        <img src="{{ asset('logo/trimbre.png') }}" alt="Timbre"
                             class="absolute top-1/2 left-1/2 z-0 opacity-30"
                             style="max-height: 200px; max-width: 200px; width: auto; height: auto; transform: translate(-50%, -50%);">
                    </div>

                    <!-- Manager -->
                    <div class="text-center">
                        <p class="font-bold text-gray-700 uppercase">MANAGER</p>
{{--                        <p class="text-gray-600">KUZO NELLY</p>--}}
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Bouton Télécharger PDF -->
    <div class="mt-4 text-center">
        <button onclick="downloadPDF()"
                class="px-6 py-2 bg-orange-600 text-white rounded hover:bg-orange-700">
            Télécharger PDF
        </button>
    </div>

    <!-- html2pdf -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
        function downloadPDF() {
            const element = document.getElementById('certificate');
            const opt = {
                margin: 0,
                filename: 'certificat_{{ $employee->first_name ?? "employee" }}.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 3, scrollY: 0, useCORS: true },
                jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
            };
            html2pdf().set(opt).from(element).save();
        }
    </script>
@endsection