@extends('front._.app')

@section('content')


<section class="section-page">
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="card-home mb-4">
                    <h2 class="fontTitle">Félicitation vous avez terminer votre test</h2>
                    <div class="desc mt-3">
                        <ul class="contact">
                            <li>
                                {{ $qiUser['firstname'] }} {{ $qiUser['lastname'] }}
                            </li>
                            <li>
                                {{ $qiUser['email'] }}
                            </li>
                            <li>
                                {{ $qiUser['phone'] }}
                            </li>
                        </ul>
                        <hr>
                        <div class="text-justify">
                            Selon le test d'Howard Gadner voici les formes d'intelligences dominantes chez vous.
                            Elles déterminent souvent vos métiers futurs. Vos meilleurs scores sont classés ci-dessous. Cliquez sur chaque escale pour connaitre vos intelligences dominantes et quelques métiers qui vous sont destinés. Ne négligez surtout pas les conseils pour developper vos intelligences.
                        </div>
                    </div>
                    <i class="fas fa-user-check"></i>
                </div>
            </div>
        </div>

        <div class="row">
            @foreach ($finalResult as $escale)
            <div class="col-md" data-toggle="modal" data-target="#escalR-{{ $escale->id }}">
                <div>
                    <div class="cardIcon">
                        <div class="icon">
                            <i class="fas fa-book-reader"></i>
                        </div>
                        <div class="text">
                            {{ $escale->name }}
                            <hr>
                            <b>Points : {{ $escale->total }}</b>
                        </div>
                    </div>
                </div>
                <!-- Modal Documents à fournir -->
                <div class="modal fade bd-example-modal-lg" id="escalR-{{ $escale->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-body">
                            <h4 class="fontTitle colorPrimary mb-3">
                                {{ $escale->name }} :: {{ $escale->description }}
                            </h4>
                            <iframe class="movie" width="100%" height="350"
                            frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
                            src="{{ $escale->getFile() }}">
                            </iframe>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>


@endsection