@extends('template')


@section('nav')
        <!-- nav Bar !-->
<div class="navbar-fixed">
    <ul id="dropdown1" class="dropdown-content" style="top : 20px">
        <li><a href="/auth/logout" class="logout">Logout</a></li>
    </ul>
    <nav>
        <div class="nav-wrapper">
            <a href="#" class="brand-logo center breadcrumb" >Affectation Des Stages</a>
            <ul class="right hide-on-med-and-down">
                <li><a class="dropdown-button" href="#!"
                       data-activates="dropdown1">{{ \Illuminate\Support\Facades\Auth::user()->login  }}<i
                                class="material-icons right">more_vert</i></a></li>
            </ul>
        </div>
    </nav>
</div>
<!-- nav Bar !-->
@endsection

@section('contenu')
<div id="progress" class="progress" style="display:none">
        <div class="indeterminate"></div>
    </div>
    <form action="add" method="post">

        {!! csrf_field() !!}

        <!-- Selection du service !-->
        <h5 class="light-blue-text text-darken-1 center">Selection du service</h5>
        <select name="id_Service" onchange="onChangeStage()" id="select_service">
            <option value="" disabled selected>Choisir un service</option>
            @foreach($services as $service)
                <option value={!! $service->id_Service !!} >{!! $service->nom !!}</option>
            @endforeach
        </select>
        <!-- Selection des encadrant !-->

        <!-- Liste des Etudiant !-->
        <h5 class="light-blue-text text-darken-1 center">Liste des etudiants</h5>
        <div class="input-field">
                        <input id="search" type="search" >
                        <label for="search"><i class="material-icons">search</i></label>
                    </div>
        <table class="highlight">
            <thead>
            <tr>
                <th data-field="cin">CIN</th>
                <th data-field="nom">Nom</th>
                <th data-field="prenom">Prenom</th>
                <th data-field="prenom">Niveau</th>
                <th></th>
            </tr>
            </thead>
            <tbody id="tbody_etudiant">
            @foreach ($etudiants as $etudiant)
                <tr id={!! $etudiant->id_Etudiant."css" !!}>
                    <td>{!! $etudiant->CIN !!}</td>
                    <td>{!! $etudiant->nom !!}</td>
                    <td>{!! $etudiant->prenom !!}</td>
                    <td>{!! $etudiant->niveau !!}</td>
                    <td>
                        <input type="checkbox" value="yes"
                               name={!! $etudiant->id_Etudiant."" !!} id={!! $etudiant->id_Etudiant."" !!} />
                        <label for={!! $etudiant->id_Etudiant !!} >Check</label>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
        <div class="row center">
            <input type="submit" class="waves-effect waves-light btn" onclick="show()"/>
        </div>

        <!-- Liste des Etudiant !-->


        <script type="text/javascript">
            $(document).ready(function () {
                $('.scrollspy').scrollSpy();
            });
            $('.datepicker').pickadate({
                selectMonths: true, // Creates a dropdown to control month
                selectYears: 15 // Creates a dropdown of 15 years to control year
            });
            $(document).ready(function () {
                $('.tooltipped').tooltip({delay: 50});
            });
            $(document).ready(function () {
                $('select').material_select();
            });
            <?php  echo "var etudiants = ".$etudiants."\n";?>
            <?php  echo "var stage_Encadrant_Etudiant = ".$stage_Encadrant_Etudiant."\n";?>
        </script>
        
        {!! Html::script('http://localhost/js/filtrage_stage.js') !!}
<script type="text/javascript">
        function show() {
            document.getElementById('progress').style.display = 'block';
        }
    </script>
     <script type="text/javascript">

        <?php  echo "var etudiants = ".$etudiants."\n";?>
        var $_token = $('input[name=_token]').val();
        $(function () {
              function verif(id_etudiant,data){
                for(i=0;i<data.length;i++){
                    if(id_etudiant==data[i]['id_Etudiant']){
                        return true;
                    }
                }
                return false;
            }
            //A chaque changement du input search il va une requéte ajax 
            $('#search').on('input', function () {
                var rech = $('#search').val();
                $.ajax({
                    url: 'store',
                    type: "post",
                    dataType : 'json' ,
                    data: {'_token': $_token, 'rech': rech},
                    success: function (data) {

                        for(var i=0;i<etudiants.length;i++){
                            
                            if(verif(etudiants[i]['id_Etudiant'],data)){
                                $('#'+etudiants[i]['id_Etudiant']+"css").css('display','table-row');
                            }else {
                                $('#'+etudiants[i]['id_Etudiant']+"css").css('display','none');
                            }
                        }
                   
                     
                    }
                });
            });

        });
    </script>

@stop

