@extends('layouts.front')
@section('content')

@isset($entities)
<section class="bg-white py-2 mt-5">
    <div class="container my-5">
        <h3 class="section-title py-2 mb-3">Organismes & Fil Info</h3>
        <div class="row d-flex align-items-stretch">

            {{-- Colonne Organismes --}}
            <div class="col-md-8 d-flex flex-column">
                <div class="row flex-grow-1">
                    @if ($entities)
                        @foreach ($entities as $entite)
                            @php
                                if ($entite['id']) {
                                    try {
                                        $entity = \App\Models\Entity::findOrFail($entite['id']);
                                    } catch (\Illuminate\Database\Eloquent\ModelNotFoundException $e) {
                                        continue;
                                    }
                                }
                            @endphp
                            @if ($entity)
                                <div class="col-md-6 d-flex">
                                    <div class="card mb-3 flex-fill card-organisme">
                                        <div class="row g-0">
                                            <div class="col-md-3">
                                                @if ($entity->logo)
                                                    <img src="https://backoffice.africaverify.com/cdn/uploads/logos/{{ $entity->logo }}"
                                                        alt="" class="rounded-circle img-fluid" width="100%">
                                                @else
                                                    <br />
<b>Warning</b>:  file_get_contents(images/entity.svg): Failed to open stream: No such file or directory in <b>/home/trombinoo/public_html/maroc.trombinoo.org/resources/views/front/search.blade.php</b> on line <b>33</b><br />
                                                @endif
                                            </div>
                                            <div class="col-md-9">
                                                <div class="card-body">
                                                    <a href="{{ route('select.entity', ['id' => $entity->id, 'slug' => Illuminate\Support\Str::slug($entity->libelle, '-')]) }}">
                                                        <h5 class="card-title">{{ $entity->libelle }}</h5>
                                                    </a>
                                                    @if (isset($entite['parent']))
                                                        <p class="card-text parent-text"><i class='bx bxs-folder-open'></i> {{ $entite['parent'] }}</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    @else
                        <p>Merci de affiner votre recherche</p>
                    @endif
                </div>
            </div>

            {{-- Colonne Fil Info --}}
            <div class="col-md-4 d-flex flex-column">
                <div class="filinfo-frame flex-fill d-flex flex-column">
                    <div class="filinfo-header">
                        <img src="/images_new/icone_flash_actu.png" alt="">
                        <span>News</span>
                    </div>

                    <div class="filinfo-body flex-fill" id="serper-news">
                        <p class="loading">Chargement des actualités...</p>
                    </div>

                    <!-- <div class="filinfo-footer">
                        <a href="#">Afficher plus</a>
                    </div> -->
                </div>
            </div>

        </div>
    </div>
</section>

<style>
/* Organismes : réduire hauteur et troncature texte */
.card-organisme {
    max-height: 120px; /* ajustable */
    overflow: hidden;
}

.parent-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fil info : réduire hauteur et scroll si trop long */
.filinfo-frame {
    border: 1px solid #ddd;
    background: #fff;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    height: 400px; /* ajustable */
}

.filinfo-header {
    background: #f5f5f5;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #ddd;
}

.filinfo-body {
    padding: 10px 15px;
    flex: 1;
    overflow-y: auto;
    border-radius: 10px;
}

.filinfo-item {

    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #ddd;
}

.filinfo-item:last-child {
    border-bottom: none;
}

.filinfo-time {
    min-width: 65px;
    color: #888;
    font-size: 13px;
    font-weight: bold;
}

.filinfo-item a {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
}

.filinfo-item a:hover {
    text-decoration: underline;
}

.filinfo-item p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* ... pour le texte long */
}

.filinfo-footer {
    padding: 10px 15px;
    text-align: right;
    background: #fafafa;
    border-top: 1px solid #ddd;
}

.filinfo-footer a {
    color: #0066cc;
    text-decoration: none;
    font-size: 14px;
}

.loading {
    color: #888;
}
</style>


@endisset

{{-- Section Personnes --}}
@isset($persons)
<section class="bg-light-1 py-2">
    <div class="container my-5">
        <h3 class="section-title py-2 mb-3">Personnes</h3>
        <div class="row">
            @if ($persons)
                @foreach ($persons as $person)
                    @if ($person)
                        @php
                            $profil = App\Models\Function_::findOrFail($person['entites'][0]['profil_id']);
                        @endphp
                        <div class="col-md-4 mb-3">
                            <div class="card h-100" style="max-width: 540px;">
                                <div class="row g-0">
                                    <div class="col-md-3">
                                        @if ($person['portrarit'])
                                            <img src="https://backoffice.africaverify.com/cdn/uploads/portraits/{{ $person['portrarit'] }}"
                                                alt="Company" class="rounded-circle img-fluid p-3" width="100%" height="auto" />
                                        @else
                                            <img src="https://nocdn.trombino.org/img/contact.png" alt=""
                                                class="p-3" style="border-radius: 10px;" width="100%" height="auto">
                                        @endif
                                    </div>
                                    <div class="col-md-9">
                                        <div class="card-body d-flex flex-column">
                                            <a href="{{ route('select.entity', ['id' => $person['entites'][0]['entity_id'], 'slug' => Illuminate\Support\Str::slug($person['entites'][0]['libelle'], '-')]) }}">
                                                <h5 class="card-title">{{ $person['prenom'] }} {{ $person['nom'] }}</h5>
                                            </a>
                                            <p class="card-text">
                                                - {{ $profil->libelle }} <span class="primary-color">({{ $person['entites'][0]['libelle'] }})</span>
                                            </p>
                                            <a href="{{ route('select.entity', ['id' => $person['entites'][0]['entity_id'], 'slug' => Illuminate\Support\Str::slug($person['entites'][0]['libelle'], '-')]) }}"
                                                class="card-text"><small class="text-muted">Voir plus</small></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
            @else
                <p>Merci de affiner votre recherche</p>
            @endif
        </div>
    </div>
</section>
@endisset

{{-- Styles Fil Info --}}
<style>
.filinfo-frame {
    border: 1px solid #ddd;
    background: #fff;
    font-family: Arial, sans-serif;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.filinfo-header {
    border-radius: 10px;
    background: #014c38;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #ddddddff;
}

.filinfo-body {
    padding: 10px 15px;
    flex: 1;
    overflow-y: auto;
}

.filinfo-item {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #ddd;
}

.filinfo-item:last-child {
    border-bottom: none;
}

.filinfo-time {
    min-width: 65px;
    color: #888;
    font-size: 13px;
    font-weight: bold;
}

.filinfo-item a {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
}

.filinfo-item a:hover {
    text-decoration: underline;
}

.filinfo-footer {
    padding: 10px 15px;
    text-align: right;
    background: #fafafa;
    border-top: 1px solid #ddd;
}

.filinfo-footer a {
    color: #0066cc;
    text-decoration: none;
    font-size: 14px;
}

.loading {
    color: #888;
}
.filinfo-time {
    min-width: 65px;
    color: #014c38; /* date en vert */
    font-size: 13px;
    font-weight: bold;
}
.filinfo-item {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #ddd;
    /* overflow: hidden; nécessaire pour cacher le texte qui dépasse */
}

.filinfo-content {
    white-space: nowrap; /* empêcher le texte de passer à la ligne */
    overflow: hidden;
     /* 3 points à la fin */
    transition: transform 10s linear; pour l'animation
}

.filinfo-item:hover .filinfo-content {
    transform: translateX(-100%); /* défiler vers la gauche */
}

.highlight {
    background-color: #00ff40; /* couleur de surbrillance */
    font-weight: bold;
}


</style>

{{-- Script Fil Info --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const keyword = "{{ request('q') ?? 'aziz akhannouch' }}";

    function highlightKeyword(text, keyword) {
    if (!keyword) return text;
    const regex = new RegExp(`(${keyword})`, 'gi'); // insensible à la casse
    return text.replace(regex, '<span class="highlight">$1</span>');
}

    function formatFilInfoDate(dateStr) {
        if (!dateStr) return '--:--';
        const d = new Date(dateStr);
        if (!isNaN(d.getTime())) {
            return d.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
        }
        return dateStr;
    }

    fetch(`/ajax/serper-news?q=${encodeURIComponent(keyword)}`)
    .then(res => res.json())
    .then(json => {
        const container = document.getElementById('serper-news');
        container.innerHTML = '';

        if (!json.success || json.data.length === 0) {
            container.innerHTML = '<p>Aucune actualité trouvée.</p>';
            return;
        }

        json.data.forEach(item => {
            const date = formatFilInfoDate(item.date);
            container.innerHTML += `
                <div class="filinfo-item">
                    <div class="filinfo-time" style="color: #014c38;">${date}</div>
                    <div class="filinfo-content">
                        <a href="${item.link}" target="_blank">${highlightKeyword(item.title, keyword)}</a>
                        <span> - ${highlightKeyword(item.snippet ?? '', keyword)}</span>
                    </div>
                </div>
            `;
        });
    })
    .catch(() => {
        document.getElementById('serper-news').innerHTML =
            '<p>Erreur lors du chargement.</p>';
    });
});
</script>

@endsection