@extends('layouts.front')
@section('content')
    <style>
        .popup {
            display: none;
            position: absolute;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            border-radius: 10px;
        }

        path:hover {
            fill: #a1a1a1;
        }
    </style>
    <div class="container-xxl flex-grow-1 container-p-y">
        <!-- Breadcrumb -->
        @include('includes.bread')
        <!--/ Breadcrumb -->
        <div class="row">
            @if ($entity->type != 'presidency_of_the_country')
                <div class="col-lg-12 mb-4 order-0">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-center">
                                @if ($entity->logo)
                                    @if ($entity->logo == '1511969365.png' || $entity->logo == '1581499938.png')
                                        <img src="/uploads/multiple/trombinos/armoiries/MR.png" width="70" alt=""
                                            class="me-3">
                                    @elseif($entity->logo == 'afriqueorganismes_1503049577.png')
                                        <img src="https://nocdn.trombino.org/uploads/thumbs/50x50-1564998690.jpg"
                                            width="70" alt="" class="me-3">
                                    @else
                                        <img src="https://backoffice.africaverify.com/cdn/uploads/logos/{{ $entity->logo }}"
                                            width="70" alt="" class="me-3">
                                    @endif
                                    {{-- <img src="https://backoffice.africaverify.com/cdn/uploads/logos/{{ $entity->logo }}" width="70"
                                        alt="" class="me-3"> --}}
                                @endif
                                <h3>{{ $entity->libelle }}</h3>
                                @if ($entity->drapeau_droite)
                                    <img src="https://backoffice.africaverify.com/cdn/uploads/logos/{{ $entity->drapeau_droite }}"
                                        width="70" alt="" class="ms-3">
                                @endif
                            </div>
                            {{-- <h3 style="color: #feffff;" class="text-center">
                                <img src="https://backoffice.africaverify.com/cdn/uploads/logos/{{ $entity->logo }}" alt="" width="70" height="auto">
                                <h3>{{ $entity->libelle }}</h3>
                            </h3> --}}

                        </div>
                    </div>
                </div>
            @else
                <div class="col-lg-12 mb-4 order-0">
                    <div class="card"
                        style="background-image: url('/uploads/multiple/trombinos/presidence/{{ $dataByClefs['code_country'] }}.jpg')">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-center">
                                @if ($entity->logo)
                                    {{-- <img src="/uploads/multiple/trombinos/presidence/logo_{{ $dataByClefs['code_country'] }}.png"
                                        width="130" alt="" class="me-3"> --}}
                                <img src="https://backoffice.africaverify.com/cdn/uploads/logos/{{ $entity->logo }}" width="70"
                                    alt="" class="me-3">
                                @endif
                                <h3>{{ $entity->libelle }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            @if (!isset($dataByClefs['part']) || $entity->type != $dataByClefs['part'])
                <div class="col-lg-12 mb-4 order-0">
                    @php $hasContent = false; @endphp
                    @foreach ($cols as $col)
                        @php
                            $colName = __($col->pivot->libelle);
                            $colValue = App\Helpers\Helper::getAttrs_front($col, $colName, $entity);
                        @endphp
                        @if (
                            $colValue &&
                                $colName != 'Drapeau droit' &&
                                $colName != 'Présentation Générale' &&
                                $colName != 'Administration' &&
                                $colName != 'Description' &&
                                $colName != 'cglu')
                            @php $hasContent = true; @endphp
                        @break
                    @endif
                @endforeach
                @if ($hasContent)
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <table class="table table-borderless">
                                        <tbody>
                                            <tr>
                                                @php  $count = 0 @endphp
                                                @foreach ($cols as $col)
                                                    @php
                                                        $colName = __($col->pivot->libelle);
                                                        $colValue = App\Helpers\Helper::getAttrs_front(
                                                            $col,
                                                            $colName,
                                                            $entity,
                                                        );
                                                    @endphp

                                                    @if (
                                                        $colValue &&
                                                            $colName != 'Drapeau droit' &&
                                                            $colName != 'Présentation Générale' &&
                                                            $colName != 'Administration' &&
                                                            $colName != 'File' &&
                                                            $colName != 'Missions' &&
                                                            $colName != 'cglu')
                                                        <td>
                                                            @if (strlen($colValue) > 300)
                                                                {!! substr($colValue, 0, 300) !!} <a href="#">Voir plus</a>
                                                            @else
                                                                {!! $colValue !!}
                                                                {{-- @php echo file_get_contents('uploads/multiple/trombinos/tabler/Standard.svg'); @endphp --}}
                                                            @endif
                                                        </td>
                                                        @php $count++ @endphp
                                                        @if ($count == 2)
                                            </tr>
                                            <tr>
                                                @php $count = 0 @endphp
                @endif
        @endif
        @endforeach
        </tr>
        </tbody>
        </table>
    </div>
</div>
</div>
</div>
@endif
</div>
@else
<div class="row mb-4">
    <div class="col-lg-4">
        <div class="card">
            @php
                echo @file_get_contents('uploads/multiple/trombinos/country_map/' . $dataByClefs['code_country'] . '.svg');
            @endphp
        </div>
    </div>
    <div class="col-lg-4">
        <div class="popup-container">
            <div id="popup" class="popup d-flex">
                {{-- <img src="" alt="" maxWidth=""> --}}
                <h4 id="popup-title"></h4>
                <p id="popup-content"></p>
            </div>
        </div>
        <div class="card">
            @php
                echo @file_get_contents('uploads/multiple/trombinos/region_map/' . $entity->id . '.svg');
            @endphp
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body overflow-auto">
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-borderless">
                            <tbody>
                                @if ($entity->presentation_generale)
                                    <tr>
                                        <td colspan="2">
                                            <p><b>Présentation Générale :</b> {{ $entity->presentation_generale }}
                                            </p>
                                        </td>
                                    </tr>
                                @endif
                                @if ($entity->presentation)
                                    <tr>
                                        <td colspan="2">
                                            <p><b>Présentation :</b> {{ $entity->presentation }}
                                            </p>
                                        </td>
                                    </tr>
                                @endif
                                <tr>
                                    @if ($entity->superficie && $entity->superficie != ' ')
                                        <td>
                                            <p><b>Superficie :</b> {{ $entity->superficie }} </p>
                                        </td>
                                    @endif
                                    @if ($entity->densite)
                                        <td>
                                            <p><b>Densité :</b> {{ $entity->densite }} </p>
                                        </td>
                                    @endif
                                </tr>
                                @if ($entity->population)
                                    <tr>
                                        <td colspan="2">
                                            <p><b>Population :</b> {{ $entity->population }} </p>
                                        </td>
                                    </tr>
                                @endif
                                @if ($entity->chemin_de_fer)
                                    <tr>
                                        <td colspan="2">
                                            <p><b>Chemin de Fer :</b> {{ $entity->chemin_de_fer }} </p>
                                        </td>
                                    </tr>
                                @elseif ($entity->administration)
                                    <tr>
                                        <td colspan="2">
                                            <p><b>Administration :</b> {{ $entity->administration }} </p>
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @if($entity->id == 10540864 )
            <a class="btn bg-primary-color ms-2 mt-3" href="/flip-book" target="_blank">ANNUAIRE FEC 2023</a>
        @endif
    </div>
</div>
@endif

@if (isset($entite[0]['persons']))
    @php
        $i = 0;
    @endphp
    @foreach ($entite[0]['persons'] as $index => $person)
        @if ($index === 0)
            <div class="row">
                <div class="col-lg-8 mb-4 order-0">
                    <div class="card">
                        <div class="container py-3 h-100">
                            <div class="d-flex text-black">
                                <div class="flex-shrink-0">
                                    @if ($person['portrait'])
                                        <img src="https://backoffice.africaverify.com/cdn/uploads/portraits/{{ $person['portrait'] }}"
                                            alt="Generic placeholder image" class="img-fluid"
                                            style="width: 180px; border-radius: 10px;">
                                    @else
                                        <img src="https://nocdn.trombino.org/img/contact.png" alt=""
                                            style="width: 180px; border-radius: 10px;">
                                    @endif
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5 class="mb-1">
                                        {{ $person['prenom'] }} {{ $person['nom'] }}
                                        {{-- ({{ $person['fonctionnaire_id'] }}) --}}
                                    </h5>
                                    <div class="float-right" style="float: right">
                                        <a href="https://fr.wikipedia.org/wiki/{{ $person['prenom'] }}_{{ $person['nom'] }}"
                                            target="_blank">Wikipedia | </a>
                                        <a href="https://www.google.com/search?q={{ $person['prenom'] }}+{{ $person['nom'] }}"
                                            target="_blank">Google</a>
                                    </div>
                                    <p class="mb-2 pb-1" style="color: #2b2a2a;">{{ html_entity_decode($person['fonction']) }}
                                    </p>
                                    {{-- {{ $person['fonctionnaire_id'] }} --}}
                                    <div id="additionalElement{{ $person['fonctionnaire_id'] }}">
                                        @if ($person['biographie'])
                                            <div class="d-flex justify-content-start rounded-3 p-2 mb-2"
                                                style="background-color: #efefef;">
                                                <div>
                                                    <p class="small text-muted mb-1"><b>Biographie</b></p>
                                                    <p class="mb-0">
                                                        {{ Str::substr($person['biographie'], 0, 160) }}...
                                                    </p>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                    <p class="demo-inline-spacing">
                                        @if ($person['biographie'])
                                            <a class="btn bg-primary-color me-1 collapsed toggle-biographie-button"
                                                data-bs-toggle="collapse"
                                                href="#biographieCollapse{{ $person['fonctionnaire_id'] }}"
                                                role="button" aria-expanded="false"
                                                aria-controls="biographieCollapse{{ $person['fonctionnaire_id'] }}">Biographie</a>
                                        @else
                                            <a class="btn bg-primary-color me-1 collapsed toggle-biographie-button disabled"
                                                data-bs-toggle="collapse"
                                                href="#biographieCollapse{{ $person['fonctionnaire_id'] }}"
                                                role="button" aria-expanded="false"
                                                aria-controls="biographieCollapse{{ $person['fonctionnaire_id'] }}">Biographie</a>
                                        @endif
                                        @if ($person['mail'] || $person['fax'] || $person['phone_work'])
                                            <a class="btn bg-primary-color me-1 collapsed toggle-biographie-button"
                                                data-bs-toggle="collapse"
                                                href="#coordinatesCollapse2{{ $person['fonctionnaire_id'] }}"
                                                role="button" aria-expanded="false"
                                                aria-controls="multiCollapseExample1">Coordonnées</a>
                                        @else
                                            <a class="btn bg-primary-color me-1 collapsed toggle-biographie-button disabled"
                                                data-bs-toggle="collapse"
                                                href="#coordinatesCollapse2{{ $person['fonctionnaire_id'] }}"
                                                role="button" aria-expanded="false"
                                                aria-controls="multiCollapseExample1">Coordonnées</a>
                                        @endif

                                    </p>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-12 col-md-12 mb-2 mb-md-0">
                                    <div class="multi-collapse collapse"
                                        id="biographieCollapse{{ $person['fonctionnaire_id'] }}" style="">
                                        <div class="d-grid d-sm-flex p-3 border">
                                            <span>
                                                {{ $person['biographie'] }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-12 mb-2 mb-md-0">
                                    <div class="multi-collapse collapse"
                                        id="coordinatesCollapse2{{ $person['fonctionnaire_id'] }}" style="">
                                        <div class="d-grid d-sm-flex p-3 border">
                                            <span>

                                                <ul class="mb-1">
                                                    @if ($person['phone_work'])
                                                        <li>Téléphone :
                                                            {{ $person['phone_work'] }}
                                                        </li>
                                                    @endif
                                                    @if ($person['fax'])
                                                        <li>Fax :
                                                            {{ $person['fax'] }}
                                                        </li>
                                                    @endif
                                                    @if ($person['mail'])
                                                        <li>E-mail :
                                                            {{ $person['mail'] }}
                                                        </li>
                                                    @endif

                                                </ul>

                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                @if ($person['fonctionnaire_id'] != 46439)
                    <div class="col-12 col-md-8 col-lg-4 order-3 order-md-2">
                        <div class="row">
                            <div class="col-12 mb-3">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-title">
                                            <h5 class="text-nowrap mb-2">Fonctions: </h5>
                                            {{-- <span
                                        class="badge bg-label-primary rounded-pill">{{ $dataByClefs['forme_etat'] }}</span> --}}
                                        </div>
                                        <ul class="p-3 overflow-auto">
                                            <li class="flex items-center gap-2">
                                                @php

                                                @endphp
                                                <h6 class="mb-4 active poste">{{ html_entity_decode($person['fonction']) }}
                                                    (<a class="active poste fw-bold">{{ $entity->libelle }}</a>)
                                                    <i class='bx bxs-pin'></i>
                                                </h6>
                                            </li>

                                            @if (isset($entite[0]['entites'][0]))
                                                @foreach ($entite[0]['entites'][$i] as $entity_in)
                                                    @if ($entity_in['libelle'] !== $entity->libelle)
                                                        <li class="flex items-center gap-2">
                                                            <h6 class="mb-4">{{ $entity_in['fonction'] }}
                                                                (<a href="{{ route('select.entity', ['id' => $entity_in['entity_id'], 'slug' => Illuminate\Support\Str::slug($entity_in['libelle'], '-')]) }}"
                                                                    class="poste primary-color">{{ $entity_in['libelle'] }}</a>)
                                                            </h6>
                                                        </li>
                                                    @endif
                                                @endforeach
                                            @endif

                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                @endif
            </div>
        @else
            <div class="col-lg-6 mb-4 order-0">
                <div class="card">
                    <div class="container py-4 h-100">
                        <div class="d-flex text-black">
                            <div class="flex-shrink-0">
                                @if ($person['portrait'])
                                    <img src="https://backoffice.africaverify.com/cdn/uploads/portraits/{{ $person['portrait'] }}"
                                        alt="Generic placeholder image" class="img-fluid"
                                        style="width: 180px; border-radius: 10px;">
                                @else
                                    <img src="https://nocdn.trombino.org/img/contact.png" alt=""
                                        style="width: 180px; border-radius: 10px;">
                                @endif
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="mb-1">
                                    {{ $person['prenom'] }} {{ $person['nom'] }}
                                    {{-- ({{ $person['fonctionnaire_id'] }}) --}}
                                </h5>
                                <div class="float-right" style="float: right">
                                    <a href="https://fr.wikipedia.org/wiki/{{ $person['prenom'] }}_{{ $person['nom'] }}"
                                        target="_blank">Wikipedia | </a>
                                    <a href="https://www.google.com/search?q={{ $person['prenom'] }}+{{ $person['nom'] }}"
                                        target="_blank">Google</a>
                                </div>
                                <p class="mb-2 pb-1" style="color: #2b2a2a;">{{ html_entity_decode($person['fonction']) }}
                                </p>
                                <div id="additionalElement{{ $person['fonctionnaire_id'] }}">
                                    @if ($person['biographie'])
                                        <div class="d-flex justify-content-start rounded-3 p-2 mb-2"
                                            style="background-color: #efefef;">
                                            <div>
                                                <p class="small text-muted mb-1"><b>Biographie</b></p>
                                                <p class="mb-0">
                                                    {{ Str::substr($person['biographie'], 0, 160) }}...
                                                </p>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                                <p class="demo-inline-spacing">
                                    @if ($person['biographie'])
                                        <a class="btn bg-primary-color me-1 collapsed toggle-biographie-button"
                                            data-bs-toggle="collapse"
                                            href="#biographieCollapse{{ $person['fonctionnaire_id'] }}"
                                            role="button" aria-expanded="false"
                                            aria-controls="biographieCollapse{{ $person['fonctionnaire_id'] }}">Biographie</a>
                                    @else
                                        <a class="btn bg-primary-color me-1 collapsed toggle-biographie-button disabled"
                                            data-bs-toggle="collapse"
                                            href="#biographieCollapse{{ $person['fonctionnaire_id'] }}"
                                            role="button" aria-expanded="false"
                                            aria-controls="biographieCollapse{{ $person['fonctionnaire_id'] }}">Biographie</a>
                                    @endif
                                    @if ($person['mail'] || $person['fax'] || $person['phone_work'])
                                        <a class="btn bg-primary-color me-1 collapsed toggle-biographie-button"
                                            data-bs-toggle="collapse"
                                            href="#coordinatesCollapse2{{ $person['fonctionnaire_id'] }}"
                                            role="button" aria-expanded="false"
                                            aria-controls="multiCollapseExample1">Coordonnées</a>
                                    @else
                                        <a class="btn bg-primary-color me-1 collapsed toggle-biographie-button disabled"
                                            data-bs-toggle="collapse"
                                            href="#coordinatesCollapse2{{ $person['fonctionnaire_id'] }}"
                                            role="button" aria-expanded="false"
                                            aria-controls="multiCollapseExample1">Coordonnées</a>
                                    @endif
                                    <a class="btn bg-primary-color me-1 collapsed toggle-biographie-button"
                                        data-bs-toggle="collapse"
                                        href="#coordinatesCollapse3{{ $person['fonctionnaire_id'] }}" role="button"
                                        aria-expanded="false" aria-controls="multiCollapseExample1">Fonctions</a>

                                </p>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12 col-md-12 mb-2 mb-md-0">
                                <div class="multi-collapse collapse"
                                    id="biographieCollapse{{ $person['fonctionnaire_id'] }}" style="">
                                    <div class="d-grid d-sm-flex p-3 border">
                                        <span>
                                            {{ $person['biographie'] }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12 mb-2 mb-md-0">
                                <div class="multi-collapse collapse"
                                    id="coordinatesCollapse2{{ $person['fonctionnaire_id'] }}" style="">
                                    <div class="d-grid d-sm-flex p-3 border">
                                        <span>

                                            <ul class="mb-1">
                                                @if ($person['mail'])
                                                    <li>E-mail :
                                                        {{ $person['mail'] }}
                                                    </li>
                                                @endif
                                                @if ($person['fax'])
                                                    <li>Fax :
                                                        {{ $person['fax'] }}
                                                    </li>
                                                @endif
                                                @if ($person['phone_work'])
                                                    <li>Téléphone :
                                                        {{ $person['phone_work'] }}
                                                    </li>
                                                @endif

                                            </ul>

                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12 mb-2 mb-md-0">
                                <div class="multi-collapse collapse"
                                    id="coordinatesCollapse3{{ $person['fonctionnaire_id'] }}" style="">
                                    <div class="d-grid d-sm-flex p-3 border">
                                        <span>

                                            <ul class="p-3 overflow-auto">
                                                <li class="flex items-center gap-2">
                                                    @php

                                                    @endphp
                                                    <h6 class="mb-4 active poste">{{ html_entity_decode($person['fonction']) }}
                                                        (<a class="active poste fw-bold">{{ $entity->libelle }}</a>)
                                                        <i class='bx bxs-pin'></i>
                                                    </h6>
                                                </li>

                                                @if (isset($entite[0]['entites'][0]))
                                                    @foreach ($entite[0]['entites'][$i] as $entity_in)
                                                        @if ($entity_in['libelle'] !== $entity->libelle)
                                                            <li class="flex items-center gap-2">
                                                                <h6 class="mb-4">{{ $entity_in['fonction'] }}
                                                                    (<a href="{{ route('select.entity', ['id' => $entity_in['entity_id'], 'slug' => Illuminate\Support\Str::slug($entity_in['libelle'], '-')]) }}"
                                                                        class="poste primary-color">{{ $entity_in['libelle'] }}</a>)
                                                                </h6>
                                                            </li>
                                                        @endif
                                                    @endforeach
                                                @endif

                                            </ul>

                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @php
            $i++;
        @endphp
    @endforeach
@endif

<div class="row">
    @if (isset($childs) &&
            $entity->type != 'presidency_of_the_country' &&
            $entity->type != 'bank' &&
            $entity->type != 'association')
        @foreach ($childs as $child)
            @php
                $entityChild = $child->entity;
            @endphp
            @if ($entityChild)
                <x-entity-card :entity="$entityChild" :dataByClefs="$dataByClefs" />
            @elseif($child->symlink)
                @php
                    try {
                        $category = \App\Models\Category::findOrFail($child->symlink);
                    } catch (\Illuminate\Database\Eloquent\ModelNotFoundException $e) {
                        continue;
                    }
                @endphp
                @if ($category)
                    <x-entity-card :entity="$category->entity" :dataByClefs="$dataByClefs" />
                @endif
            @endif
        @endforeach
    @endif
    @if ($childs->count() == 18)
        <div class="col-md-12">
            <div class="text-center">
                <button type="button" class="btn btn-primary text-nowrap" data-bs-toggle="popover"
                    data-bs-offset="0,14" data-bs-placement="bottom" data-bs-html="true"
                    data-bs-content="<h5>Merci de affiner votre recherche!</h5>">
                    Voir plus
                </button>
            </div>
        </div>
    @endif
</div>
</div>
<!-- / Content -->
</div>
<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
    <script>
        document.getElementById('flip').addEventListener('click', async () => {
            const url = 'assets/pdf/ANNUAIRE-FEC-2023.pdf'; // Change this to the path of your specific PDF
            const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer());
            const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes);

            const pages = pdfDoc.getPages();
            for (const page of pages) {
                const { width, height } = page.getSize();
                page.scaleContent(-1, 1); // Flip horizontally
                page.translateContent(width, 0); // Translate to keep content in view
            }

            const pdfBytes = await pdfDoc.save();
            const blob = new Blob([pdfBytes], { type: 'application/pdf' });
            const blobUrl = URL.createObjectURL(blob);

            const downloadLink = document.getElementById('download');
            downloadLink.href = blobUrl;
            downloadLink.download = 'flipped.pdf';
            downloadLink.style.display = 'block';
            downloadLink.textContent = 'Download Flipped PDF';
        });
    </script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('.toggle-biographie-button').on('click', function() {
            var personId = $(this).attr('href').replace('#biographieCollapse', '');
            var additionalElement = $('#additionalElement' + personId);

            if ($(this).attr('aria-expanded') === 'true') {
                // The collapse is expanded (open), so hide the additional element.
                additionalElement.hide();
            } else {
                // The collapse is collapsed (closed), so show the additional element.
                additionalElement.show();
            }
        });
    });
</script>
<script>
    const paths = document.querySelectorAll('#svgRegion .target-path');
    const popup = document.getElementById('popup');
    const popupTitle = document.getElementById('popup-title');
    const popupContent = document.getElementById('popup-content');
    const svgs = document.querySelectorAll('svg');

    paths.forEach(path => {
        path.addEventListener('mouseover', () => {
            // Fetch person data based on the path ID
            fetch(`/get-person/${path.id}`)
                .then(response => response.json())
                .then(data => {
                    const person = data.person;
                    const profil = data.profil;
                    console.log(data);

                    // Update the popup content dynamically
                    popupContent.textContent = person.name;

                    // Add an image before the content
                    const img = document.createElement('img');
                    if (person.img_perso_url) {
                        img.src = 'https://backoffice.africaverify.com/cdn/uploads/portraits/' + person
                            .img_perso_url;
                    } else {
                        img.src = 'https://nocdn.trombino.org/img/contact.png';
                    }
                    img.style.width = '70px';
                    img.classList.add('img-fluid', 'border', 'rounded', 'border-3', 'text-center');
                    popupContent.appendChild(img);

                    const nameDiv = document.createElement('h5');
                    nameDiv.textContent = person.prenom + ' ' + person.nom;
                    nameDiv.style.marginLeft = '-80px';
                    nameDiv.classList.add('float-end');
                    popupContent.appendChild(nameDiv);

                    const libelleDiv = document.createElement('span');
                    libelleDiv.textContent = profil.libelle;
                    libelleDiv.style.marginLeft = '6px';
                    popupContent.appendChild(libelleDiv);

                    // Show the popup
                    popup.style.display = 'block';
                })
                .catch(error => console.error('Error fetching person data:', error));
        });
    });

    // Add mouseout event listener for each SVG to hide the popup
    svgs.forEach(svg => {
        svg.addEventListener('mouseout', () => {
            // Hide the popup when not hovering on any path
            popup.style.display = 'none';
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var entityId =
            {{ $entity->id }}; // Replace with the actual way to get the ID from the Blade template
        console.log(entityId);
        var paths = document.querySelectorAll('#svgCountry .target-path');

        paths.forEach(function(path) {
            var pathId = path.id;

            if (entityId == pathId) {
                path.setAttribute('fill',
                ''); // Change the color to red or any desired color
                // You can also update other attributes here if needed
            }
        });
    });
</script>
@endsection