@extends('layout')

@section('contenu')
    @include('partials/modalAjouterProf')
    <section
        style="background-image: url('/img/board.png'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; min-height: 93.2vh;"
        class="section p-3 mt-0 mb-0 mx-2-touch columns mx-0 is-centered is-flex-desktop is-flex-direction-column is-justify-content-center">
        <nav class="panel mx-auto is-info column is-two-thirds p-0">
            <p class="panel-heading">
                Les professeurs
            </p>
            <p class="panel-tabs has-background-white">
                <a id="default" class="tab" onclick="openContent(event, 'tout')">Tout</a>
                <a class="tab" onclick="openContent(event, 'primaire')">Primaire</a>
                <a class="tab" onclick="openContent(event, 'secondaire')">Secondaire</a>
            </p>
            <div class="mb-5" style="background: #E4E9F2; height: 25rem; overflow-y: auto">
                <div class="has-text-centered p-3">
                    <a onclick="openForm('modalAjouterProf')" class="button is-info is-rounded">
                        <strong>Ajouter Professeur</strong>
                    </a>
                </div>
                <div id="tout" class="contenu-block columns mx-0">
                    <div class="column m-2">
                        @foreach ($professeurs as $professeur)
                            <a href="/accueil/professeurs/detailsProf/{{ $professeur->slug }}" class="panel-block">
                                <span class="panel-icon">
                                    <i class="fas fa-chalkboard-teacher" aria-hidden="true"></i>
                                </span>
                                {{ $professeur->prenom }} {{ $professeur->nom }}
                            </a>
                        @endforeach
                    </div>
                </div>
                <div id="primaire" class="contenu-block columns mx-0">
                    <div class="column m-2">
                        @foreach ($professeurs as $professeur)
                            @if ($professeur->niveau == 'Primaire')
                                <a href="/accueil/professeurs/detailsProf/{{ $professeur->slug }}" class="panel-block">
                                    <span class="panel-icon">
                                        <i class="fas fa-chalkboard-teacher" aria-hidden="true"></i>
                                    </span>
                                    {{ $professeur->prenom }} {{ $professeur->nom }}
                                </a>
                            @endif
                        @endforeach
                    </div>
                </div>
                <div id="secondaire" class="contenu-block columns mx-0">
                    <div class="column m-2">
                        @foreach ($professeurs as $professeur)
                            @if ($professeur->niveau == 'Secondaire')
                                <a href="/accueil/professeurs/detailsProf/{{ $professeur->slug }}" class="panel-block">
                                    <span class="panel-icon">
                                        <i class="fas fa-chalkboard-teacher" aria-hidden="true"></i>
                                    </span>
                                    {{ $professeur->prenom }} {{ $professeur->nom }}
                                </a>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="columns"></div>
            <div style="position: relative;" class="is-flex is-justify-content-center">
                <img src="/img/upschool.svg" width="200" alt="">
            </div>
        </nav>
    </section>
    @include('partials/professeursJs')
@endsection
