@extends('layouts.lo-charts')

@section('descr_charts-select')
<div class="profiles_tabs" id="profiles_tabs-profiles_stats">
    <div class="d-flex justify-content-between">
        <h2 class="tab-selection tab_selection-first active">
            Socio-démographie
        </h2>
        <h2 class="tab-selection tab_selection-second">
            Comportement
        </h2>
    </div>
    <div class="tab-underline tab-underline_select"></div>
</div>

<div class="chart-select_container h-100 p_scroll">
    <div class="tab_content-first active flex-column h-100 w-100">
        
        @foreach($menus['sociodemo'] as $indexStatsSocio => $menuStatsSocio)
        <div id="menu_socio-{{$indexStatsSocio+1}}" class="dropdown">
            <button class="select-charts dropdown-toggle d-flex justify-content-between align-items-center w-100" type="button"  data-bs-toggle="dropdown" aria-expanded="false">
                <div class="d-flex">
                    <div class="select-charts_icon active justify-content-center align-items-center">
                        <img src="{{asset('/img/icons/icon_folder.svg')}}" alt="icône de dossier">
                        <span id="stats_profiles-folder_number" class="folder-white">{{count($menuStatsSocio['content'])}}</span>
                    </div>
                    <div class="select-charts_icon icon_arrow">
                        <img src="{{asset('/img/icons/icon_chevron-up.svg')}}" alt="icône de chevron">
                    </div>
                    <div class="d-flex flex-column">
                        <span class="select-charts_title">{{$menuStatsSocio['name']}}</span>
                        <span class="select-charts_descr">Veuillez sélectionner une option</span>
                    </div>
                </div>
            </button>
            <div class="dropdown-menu dropdown-wrapper">
                <ul class="list-group flex-column" aria-labelledby="dropdownMenuSocio" >
                    @foreach($menuStatsSocio['content'] as $indexStatsSocioSub => $submenuStats)
    
                    <li class="dropdown-item_container">
                        <button id="stats_profiles-select-dropdown-{{$submenuStats['id']}}"  class="dropdown-item" type="button">{{$submenuStats['name']}}</button>
                    </li>
                    @endforeach
                </ul>
            </div>
            
        </div>
        @endforeach
    </div> 
    
    <div class="tab_content-second flex-column h-100">


        <div class="tab-content" id="stats-pagination-tabContent">
            <div class="tab-pane fade show active" id="stats-pagContent-1" role="tabpanel" aria-labelledby="page-1">
                @foreach(array_slice($menus['behavior'], 0, 5) as $indexStatsBehavior => $menuStatBehavior)
                <div id="menu_socio-{{$indexStatsBehavior+1}}" class="dropdown">
                    <button class="select-charts dropdown-toggle d-flex justify-content-between align-items-center w-100" type="button"  data-bs-toggle="dropdown" aria-expanded="false">
                        <div class="d-flex">
                            <div class="select-charts_icon active justify-content-center align-items-center">
                                <img src="{{asset('/img/icons/icon_folder.svg')}}" alt="icône de dossier">
                                <span id="stats_profiles-folder_number" class="folder-white">{{count($menuStatBehavior['content'])}}</span>
                            </div>
                            <div class="select-charts_icon icon_arrow">
                                <img src="{{asset('/img/icons/icon_chevron-up.svg')}}" alt="icône de chevron">
                            </div>
                            <div class="d-flex flex-column">
                                <span class="select-charts_title">{{$menuStatBehavior['name']}}</span>
                                <span class="select-charts_descr">Veuillez sélectionner une option</span>
                            </div>
                        </div>
                    </button>
                    

                    <div class="dropdown-menu dropdown-wrapper">
                        <ul class="list-group flex-column" aria-labelledby="dropdownMenuSocio" data-bs-display="static" data-bs-popperConfig="null">
                            @foreach($menuStatBehavior['content'] as $indexStatsBehaviorSub => $submenuStatBehavior)
            
                            <li class="dropdown-item_container">
                                <button id="stats_profiles-select-dropdown-{{$submenuStatBehavior['id']}}"  class="dropdown-item" type="button">{{$submenuStatBehavior['name']}}</button>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    
                </div>
                @endforeach
            </div>
            <div class="tab-pane fade" id="stats-pagContent-2" role="tabpanel" aria-labelledby="page-2">
                @foreach(array_slice($menus['behavior'], 5, 5) as $indexStatsBehavior => $menuStatBehavior)
                <div id="menu_socio-{{$indexStatsBehavior+1}}" class="dropdown">
                    <button class="select-charts dropdown-toggle d-flex justify-content-between align-items-center w-100" type="button"  data-bs-toggle="dropdown" aria-expanded="false">
                        <div class="d-flex">
                            <div class="select-charts_icon active justify-content-center align-items-center">
                                <img src="{{asset('/img/icons/icon_folder.svg')}}" alt="icône de dossier">
                                <span id="stats_profiles-folder_number" class="folder-white">{{count($menuStatBehavior['content'])}}</span>
                            </div>
                            <div class="select-charts_icon icon_arrow">
                                <img src="{{asset('/img/icons/icon_chevron-up.svg')}}" alt="icône de chevron">
                            </div>
                            <div class="d-flex flex-column">
                                <span class="select-charts_title">{{$menuStatBehavior['name']}}</span>
                                <span class="select-charts_descr">Veuillez sélectionner une option</span>
                            </div>
                        </div>
                    </button>
        
                    <div class="dropdown-menu dropdown-wrapper">
                        <ul class="list-group flex-column" aria-labelledby="dropdownMenuSocio" data-bs-display="static" data-bs-popperConfig="null">
                            @foreach($menuStatBehavior['content'] as $indexStatsBehaviorSub => $submenuStatBehavior)
            
                            <li class="dropdown-item_container">
                                <button id="stats_profiles-select-dropdown-{{$submenuStatBehavior['id']}}"  class="dropdown-item" type="button">{{$submenuStatBehavior['name']}}</button>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="tab-pane fade" id="stats-pagContent-3" role="tabpanel" aria-labelledby="page-3">
                @foreach(array_slice($menus['behavior'], 10, 5) as $indexStatsBehavior => $menuStatBehavior)
                <div id="menu_socio-{{$indexStatsBehavior+1}}" class="dropdown">
                    <button class="select-charts dropdown-toggle d-flex justify-content-between align-items-center w-100" type="button"  data-bs-toggle="dropdown" aria-expanded="false">
                        <div class="d-flex">
                            <div class="select-charts_icon active justify-content-center align-items-center">
                                <img src="{{asset('/img/icons/icon_folder.svg')}}" alt="icône de dossier">
                                <span id="stats_profiles-folder_number" class="folder-white">{{count($menuStatBehavior['content'])}}</span>
                            </div>
                            <div class="select-charts_icon icon_arrow">
                                <img src="{{asset('/img/icons/icon_chevron-up.svg')}}" alt="icône de chevron">
                            </div>
                            <div class="d-flex flex-column">
                                <span class="select-charts_title">{{$menuStatBehavior['name']}}</span>
                                <span class="select-charts_descr">Veuillez sélectionner une option</span>
                            </div>
                        </div>
                    </button>
        
                    <div class="dropdown-menu dropdown-wrapper">
                        <ul class="list-group flex-column" aria-labelledby="dropdownMenuSocio" data-bs-display="static" data-bs-popperConfig="null">
                            @foreach($menuStatBehavior['content'] as $indexStatsBehaviorSub => $submenuStatBehavior)
            
                            <li class="dropdown-item_container">
                                <button id="stats_profiles-select-dropdown-{{$submenuStatBehavior['id']}}"  class="dropdown-item" type="button">{{$submenuStatBehavior['name']}}</button>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                @endforeach
            </div>
          </div>
        <ul class="tab-pagination nav nav-pills justify-content-center" id="compareUni-pag" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active p_page" id="stats-pag-1" data-bs-toggle="pill" data-bs-target="#stats-pagContent-1" type="button" role="tab" aria-controls="pills-home" aria-selected="true">1</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link p_page" id="stats-pag-2" data-bs-toggle="pill" data-bs-target="#stats-pagContent-2" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">2</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link p_page" id="stats-pag-3" data-bs-toggle="pill" data-bs-target="#stats-pagContent-3" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">3</button>
            </li>
          </ul>
          












        
       
    </div> 
</div>

@endsection




@section('descr_charts-content')
<div>
    <canvas id="myStatChart" aria-label="Statistiques" role="img">
        <img src="{{asset('/img/EmptyState.svg')}}" alt="Graphique vide" class="chartEmptyState" id="chartEmptyState">
    </canvas>
</div>

@endsection