@extends('layouts.baseprof')

@section('titre','Ecs')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('assets/extra-libs/datatables.net-bs4/css/responsive.dataTables.min.css')}}">
    <link href="{{asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">
    <style>
        .carousel-indicators{
            margin-bottom: 0px;
        }

        .carousel-caption {
            height: calc(70vh - 20px);
            bottom: 0px;
        }

        .badge-theme {
            background-color: var(--bg-color) !important;
            color: var(--text-color);
            font-weight: 500;
        }
    </style>
@endsection

@section('content')

<div>
    <!-- Bread crumb and right sidebar toggle -->
    <div class="page-breadcrumb border-bottom">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-xs-12">
            </div>
            <div class="col-lg-9 col-md-8 col-xs-12 align-self-center">
                <nav aria-label="breadcrumb" class="mt-2 float-md-right float-left">
                    <ol class="breadcrumb mb-0 justify-content-end p-0">
                        {{-- <li class="breadcrumb-item"><a href="{{ route('pcourse.index')}}">Dashboard</a></li> --}}
                        <li class="breadcrumb-item active" aria-current="page">ECs</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <!-- Banner content  -->
    <div id="carouselExampleIndicators3" class="carousel w-100 mb-3" style="max-height: 70vh; overflow-y: hidden;" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators3" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators3" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators3" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <img class="img-fluid w-100" src="{{asset('assets/images/banner/ban1.jpg')}}" alt="First slide">
                <div class="carousel-caption">
                    <h2 class="text-white font-weight-bold" style="text-shadow: -3px 3px 0px #040404;">Bienvenu cher enseignant</h2>
                    <p style="text-shadow: -2px 2px 0px #040404;">Votre espace de travail vous attends</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="img-fluid w-100" src="{{asset('assets/images/banner/ban2.jpg')}}" alt="Second slide">
                <div class="carousel-caption">
                    <h2 class="text-white font-weight-bold" style="text-shadow: -3px 1px 2px #040404;">Managez vos Cours</h2>
                    <p style="text-shadow: -3px 1px 2px #040404;">Rendez les contenus de vos cours disponible pour vos étudiants et suivez l'évolution de chacun</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="img-fluid w-100" src="{{asset('assets/images/banner/ban3.jpg')}}" alt="Third slide">
                <div class="carousel-caption">
                    <h2 class="text-white font-weight-bold" style="text-shadow: -2px 1px 1px #040404;">GestStudent Elearning... </h2>
                    <p style="text-shadow: -2px 1px 1px #040404;">L'apprentissage en ligne autrement.</p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators3" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators3" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <!-- Start Page Content -->
    <div class="page-content container-fluid" style="">

        <!-- Alert with content -->
        @if(session()->has('success'))
            <div class="alert alert-{{session('success')?'success':'danger'}}">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                <i class="fa fa-{{session('success')?'check':'times'}}-circle"></i> {{session('msg')}}
            </div>
            @php
                session()->pull('success','default'); session()->pull('msg','default');
            @endphp
        @endisset

        <!-- table responsive -->
        <div class="card">
            <div class="card-body col-12">
                <h4 class="card-title">Liste des ECs</h4>
                <h6 class="card-subtitle">Les ECs que vous avez</h6>
                <div class="table-responsive m-t-40" style="overflow-y: hidden;">
                    <table id="config-table" class="table table-bordered table-striped ">
                        <thead>
                            <tr>
                                <th>EC</th>
                                <th>Niveau</th>
                                <th>Filière</th>
                                <th>% Heures effectuées</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($courses as $course)
                                <tr>
                                    <td>
                                        <span class="d-block  mb-1">
                                            {{$course['intituleEcu']}} 
                                        </span>
                                        <span class="badge badge-theme">{{$course['code_ecu']}}</span>
                                    </td>
                                    <td style="font-size: .8em;">{{findNiveau($course['niveauFormation']).' '.$course['annee']}}</td>
                                    <td>{{$course['intituleFilieres']}}</td>
                                    <td style="width: 100px;">
                                        @php
                                            $nbHeureExec = empty($course['Heures_effectuees']) ? 0 : $course['Heures_effectuees'];
                                            $nbHeure = $course['masse_horaire'] ? $course['masse_horaire'] : 1;
                                           
                                            $p = ($nbHeureExec < $nbHeure) ? ($nbHeureExec * 100 / $nbHeure) : 100;
                                        @endphp
                                        <span class="d-block text-right text-muted" style="font-size: .8em;">{{ number_format($p,2) }}%</span>
                                        <div class="progress" style="height: 5px;">
                                            <div class="progress-bar progress-bar-striped {{$p < 50?'bg-danger': (($p < 70)?'bg-warning':(($p < 100)?'bg-info':'bg-success'))}}" role="progressbar" style="width: {{$p}}%; height: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>
                                    <td class="">
                                        <a role="button" class="btn mr-1" href="{{route('pcourse.show', $course['id_EC'])}}"><i class="fas fa-folder-open"></i></a>
                                        <a class="btn btn-theme btn-rounded" href="{{route('pcourse.view',$course['id_EC'])}}"><i class="fa fa-comments"></i></a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- End Page Content -->

</div>
@endsection

@section('script')
    <script src="{{asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('assets/extra-libs/datatables.net-bs4/js/dataTables.responsive.min.js')}}"></script>
	<script src="{{ asset('assets/extra-libs/datatables-rowsgroup/dataTables.rowsGroup.js')}}"></script>
    <script>
        $(function () {
            $('#config-table').DataTable({
                // "responsive": true,
                "language": dtCustomLanguage({
                    name: "EC",
                    plural: "ECs",
                    gender: "M",
                    lang: "fr"
                }),
                "rowsGroup": [0,1],
            });
        });
    </script>
@endsection