@extends('layouts.lo-pres')

@section('descr_pres-content')
<div class="pres-descr_content d-flex justify-content-between h-100">
    <div class="descr-descr d-flex flex-column justify-content-between">
        <div class="d-flex justify-content-between">
            <div>
                <img id="descr_profile-picture" src="{{asset($description['picture'])}}" alt="Photo de couverture du {{ ($isProfile  ? 'Profil' : 'Portrait'). ' ' .$description['profile']['profile']}}">
            </div>
            <div class="descr-qui h-100 d-flex flex-column align-items-end">
                    <h2 class="display-5 text-center align-self-center">Qui sont-ils&nbsp;?</h2>
                    <div class=" d-flex flex-wrap justify-content-center">                
                            <div class="descr-qui_tag p_border d-flex flex-column" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="right" title="<span class='tooltip-title'>Indice</span><br>Un indice base 100 reflète une sur / sous-représentation par rapport à la moyenne nationale (égale à 100).">
                                <h3 class="p_color">Âge</h3>
                                <p id="desc_profiles-tag_age" class="display-6">{{$description['description']['age']}}</p>
                                <span id="desc_profiles-tag_age-grade">Indice - {{$description['description']['ageGrade']}}</span>
                            </div>
                            <div class="descr-qui_tag p_border d-flex flex-column" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="right" title="<span class='tooltip-title'>Indice</span><br>Un indice base 100 reflète une sur / sous-représentation par rapport à la moyenne nationale (égale à 100).">
                                <h3 class="p_color">Logement</h3>
                                <p id="desc_profiles-tag_housing" class="display-6">{{$description['description']['housing']}}</p>
                                <span id="desc_profiles-tag_housing-grade">Indice - {{$description['description']['housingGrade']}}</span>
                            </div>
                            <div class="descr-qui_tag p_border d-flex flex-column" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="right" title="<span class='tooltip-title'>Indice</span><br>Un indice base 100 reflète une sur / sous-représentation par rapport à la moyenne nationale (égale à 100).">
                                <h3 class="p_color">Revenu</h3>
                                <p id="desc_profiles-tag_income" class="display-6">{{$description['description']['income']}}</p>
                                <span id="desc_profiles-tag_income-grade">Indice - {{$description['description']['incomeGrade']}}</span>
                            </div>
                            <div class="descr-qui_tag p_border d-flex flex-column" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="right" title="<span class='tooltip-title'>Indice</span><br>Un indice base 100 reflète une sur / sous-représentation par rapport à la moyenne nationale (égale à 100).">
                                <h3 class="p_color">CSP</h3>
                                <p id="desc_profiles-tag_sec" class="display-6">{{$description['description']['sec']}}</p>
                                <span id="desc_profiles-tag_sec-grade">Indice - {{$description['description']['secGrade']}}</span>
                            </div>
                            <div class="descr-qui_tag p_border d-flex flex-column" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="right" title="<span class='tooltip-title'>Indice</span><br>Un indice base 100 reflète une sur / sous-représentation par rapport à la moyenne nationale (égale à 100).">
                                <h3 class="p_color">Cycle de vie famille</h3>
                                <p id="desc_profiles-tag_family" class="display-6">{{$description['description']['family']}}</p>
                                <span id="desc_profiles-tag_family-grade">Indice - {{$description['description']['familyGrade']}}</span>
                            </div>
                    </div>
              
            </div>
        </div>
       <div class="d-flex justify-content-between">
           <div class="descr-ou">
            <h2 class="display-5 text-center">Où vivent-ils&nbsp;?</h2>
            <div class="d-flex justify-content-between">
                <img id="descr_profiles-localisation_picture"src="{{asset($description['map'])}}" alt="Top localisation du {{ ($isProfile  ? 'Profil' : 'Portrait'). ' ' .$description['profile']['profile']}}">
                <div class="d-flex flex-column justify-content-around descr_localisation w-100">              
                    @foreach($description['departments'] as $number => $department)
                    <div class="d-flex flex-column align-items-center w-100">
                        <h3 id="descr_profiles-localisation_department-number" class="p_color">{{$number+1}}</h3>
                        <p id="descr_profiles-localisation_department-{{$number+1}}">{{$department}}</p>
                    </div>
                    @endforeach
                </div>
            </div>
           </div>

           <div class="descr-wordcloud d-flex align-items-center">
            <img id="descr_profiles-wordcloud" src="{{asset($description['wordcloud'])}}" alt="Nuage de mots représentant le {{ ($isProfile  ? 'Profil' : 'Portrait'). ' ' .$description['profile']['profile']}}">

           </div>

           <div class="descr-comment">
                <h2 class="display-5 text-center">Comment se comportent-ils&nbsp;?</h2>

                <div class="d-flex flex-wrap justify-content-between">
                   
                            <div class="descr_comportement-bar d-flex flex-column align-items-start">
                                <h3>Intérêt Publicité</h3>
                                <div class="descr_comportement_bg p_clair p_border">
                                    <div  id="descr_profiles-behavior_advertisement" class="descr_comportement_note p_bg {{$description['behavior']['advertisementInterest']}}"></div>
                                </div>
                            </div>
                            <div class="descr_comportement-bar d-flex flex-column align-items-start">
                                <h3>Activité en ligne</h3>
                                <div class="descr_comportement_bg p_clair p_border">
                                    <div  id="descr_profiles-behavior_onlineActivity" class="descr_comportement_note p_bg {{$description['behavior']['onlineActivity']}}"></div>
                                </div>
                            </div>
                            <div class="descr_comportement-bar d-flex flex-column align-items-start">
                                <h3>Fidélité à la marque</h3>
                                <div class="descr_comportement_bg p_clair p_border">
                                    <div  id="descr_profiles-behavior_brandLoyalty" class="descr_comportement_note p_bg {{$description['behavior']['brandLoyalty']}}"></div>
                                </div>
                            </div>
                            <div class="descr_comportement-bar d-flex flex-column align-items-start">
                                <h3>Promotions</h3>
                                <div class="descr_comportement_bg p_clair p_border">
                                    <div  id="descr_profiles-behavior_specialOffers" class="descr_comportement_note p_bg {{$description['behavior']['specialOffers']}}"></div>
                                </div>
                            </div>
                 
                </div>
           </div>
       </div>  
    </div>


    <div class="descr_gallerie p_scroll">
        <div class="d-flex flex-column">
            @foreach (array_slice($gallery, 0,5) as $index => $gallerie)
                <img id="descr_profiles-gallery-{{$index+1}}" src="{{asset($gallerie)}}" alt="Image {{$index+1}} de la galerie">
            @endforeach
        </div>
    </div>
</div>

@endsection