@extends('layouts.lo-charts')

@section('descr_charts-select')
<div class="select_profiles-compare_uni-container active flex-column justify-content-between h-100">
    @include('layouts.components.select_compare')

</div>

<div class="select_profiles-compare_bi-container flex-column justify-content-start h-100">
    <div class="profiles_tabs tabs-hidden">
    </div>

    <div class="chart-select_container chart-select_bivarie">
        <div id="menu_compare_bi-abscisse" 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="compareBiAbs_profiles-folder_number" class="folder-white">{{count($menus['bivariate'])}}</span>
                    </div>
                    <div class="select-charts_icon">
                        <img src="{{asset('/img/icons/icon_chevron-up.svg')}}" alt="icône de chevron">
                    </div>
                    <div class="d-flex flex-column">
                        <span id="compareBiAbs_profiles-select-charts_title" class="select-charts_title">Absisse</span>
                        <span id="compareBiAbs_profiles-select-charts_descr" class="select-charts_descr">Veuillez sélectionner une option</span>
                    </div>
                </div>
            </button>
            <div class="dropdown-menu dropdown-wrapper">
                <ul class="list-group" aria-labelledby="dropdownMenuBiAbsisse">
                    @foreach($menus['bivariate'] as $menu)
                        <li class="dropdown-item_container">
                            <button id="compare_bi-select-dropdown_absisse-{{$menu['id']}}"  class="dropdown-item" type="button">{{$menu['name']}}</button>
                        </li>
                    @endforeach
                </ul>
            </div>
            
        </div>
            <div id="menu_compare_bi-ordonnee" 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="compareBiOrd-folder_number" class="folder-white">{{count($menus['bivariate'])}}</span>
                        </div>
                        <div class="select-charts_icon">
                            <img src="{{asset('/img/icons/icon_chevron-up.svg')}}" alt="icône de chevron">
                        </div>
                        <div class="d-flex flex-column">
                            <span id="compareBiOrd_profiles-select-charts_title" class="select-charts_title">Ordonnée</span>
                            <span id="compareBiOrd_profiles-select-charts_descr" class="select-charts_descr">Veuillez sélectionner une option</span>
                        </div>
                    </div>
                </button>
                <div class="dropdown-menu dropdown-wrapper">
                    <ul class="list-group" aria-labelledby="dropdownMenuBiOrdonnee">
                        @foreach($menus['bivariate'] as $menu)
                            <li class="dropdown-item_container">
                                <button id="compare_bi-select-dropdown_ordonnee-{{$menu['id']}}"  class="dropdown-item" type="button">{{$menu['name']}}</button>
                            </li>
                        @endforeach
                    </ul>
                </div>
                
            </div>
    </div>
    
</div>


@overwrite




@section('descr_charts-content')
<div class="chart-content_chart content-chart_uni active">
    <div>
        <div class="d-flex justify-content-end dropdown-select_container">
            <div class="dropdown dropdown-select">
                <button class="select-charts form-floating dropdown-toggle w-100" type="button"  data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="form-control" id="floatingInputunivariate" placeholder="Vue">Univarié</span>
                            <label for="floatingSelect">Vue</label>
                </button>
        
                <ul class="dropdown-menu w-100" aria-labelledby="dropdownMenuSocio">
                    <li><button id="compare_uni-profiles-select-dropdown_univarie"  class="dropdown-item" type="button">Univarié</button></li>
                    <li><button id="compare_uni-profiles-select-dropdown_bivarie"  class="dropdown-item" type="button">Bivarié</button></li>
                </ul>
                <div  class="input_help">
                    <span>Veuillez sélectionner une vue</span>
                </div>
            </div>    
        </div>
        <canvas id="myCompareUniChart" aria-label="Comparatif univarié " role="img">
        </canvas>

    </div>
</div>

<div class="chart-content_chart content-chart_bi">
    <div>
        <div class="d-flex justify-content-end dropdown-select_container bivariate">
            <div class="dropdown dropdown-select">
                <button class="select-charts form-floating dropdown-toggle w-100" type="button"  data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="form-control" id="floatingInputbivariate" placeholder="Vue">Bivarié</span>
                            <label for="floatingSelect">Vue</label>
                </button>
        
                <ul class="dropdown-menu w-100" aria-labelledby="dropdownMenuSocio">
                    <li><button id="compare_bi-profiles-select-dropdown_univarie"  class="dropdown-item" type="button">Univarié</button></li>
                    <li><button id="compare_bi-profiles-select-dropdown_bivarie"  class="dropdown-item" type="button">Bivarié</button></li>
                </ul>
                <div  class="input_help">
                    <span>Veuillez sélectionner une vue</span>
                </div>
            </div>    
        </div>
        <canvas id="myCompareBiChart" aria-label="Comparatif Bivarié" role="img">
        </canvas>

    </div>
</div>

@overwrite