@extends('template')

@section('script')
{!! Html::script('js/filtrage_banque.js') !!}
@endsection

@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">Creation Station</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')

        <!-- Form !-->
<div id="progress" class="progress" style="display:none">
    <div class="indeterminate"></div>
</div>
<form action="add" method="post">

    {!! csrf_field() !!}

    <div class="row">
        <div class="col s12 m9 l10">

            <!-- Filtrage !-->
            <div id="Filtarge" class="section scrollspy">

                <!-- Domaine !-->
                <h4 class="light-blue-text text-darken-1 center">Domaine</h4>

                <div class="input-field col s12">

                    <select name="id_domaine" id="id_domaine" onchange="onChangeFiltre()">
                        <option value="" selected></option>
                        @foreach ($domaines as $domaine)
                            <option value={!! $domaine->id_Domaine !!} >{!! $domaine->nom !!}</option>
                        @endforeach
                    </select>
                </div>
                <!-- Domaine !-->

                <!-- Critére !-->
                <h5 class="light-blue-text text-darken-1 center">Critere</h5>

                <div class="input-field col s12">

                    <select name="id_critere" id="id_critere" onchange="onChangeFiltre()">
                        <option value="" selected></option>
                        @foreach ($criteres as $critere)
                            <option value={!! $critere->id_Critere !!} >{!! $critere->nom !!}</option>
                        @endforeach
                    </select>
                </div>
                <!-- Critére !-->

                <!-- Contexte !-->
                <h5 class="light-blue-text text-darken-1 center">Contexte</h5>

                <div class="input-field col s12">

                    <select name="id_contexte" id="id_contexte" onchange="onChangeFiltre()">
                        <option value="" selected></option>
                        @foreach ($contextes as $contexte)
                            <option value={!! $contexte->id_Contexte !!} >{!! $contexte->nom !!}</option>
                        @endforeach
                    </select>
                </div>
                <!-- Contexte !-->

                <!-- Systeme !-->
                <h5 class="light-blue-text text-darken-1 center">Systeme</h5>

                <div class="input-field col s12">

                    <select name="id_systeme" id="id_systeme" onchange="onChangeFiltre()">
                        <option value="" selected></option>
                        @foreach ($systemes as $systeme)
                            <option value={!! $systeme->id_Systeme !!} >{!! $systeme->nom !!}</option>
                        @endforeach
                    </select>
                </div>
                <!-- Systeme !-->

                <!-- Competence  !-->
                <h5 class="light-blue-text text-darken-1 center">Competence</h5>
                <table class="highlight">
                    <thead class="thead">
                    <tr>
                        <th data-field="nom">Nom</th>
                        <th data-field="prefix">Prefix</th>
                        <th data-field="check"></th>
                        <th></th>

                    </tr>
                    </thead>


                    <tbody class="tbody">
                    @foreach ($competences as $competence)
                        <tr>
                            <td>{!! $competence->nom !!}</td>
                            <td>{!! $competence->prefix !!}</td>
                            <td>
                                <input type="checkbox" value="yes"
                                       name={!! $competence->id_Competence."" !!} id={!! "checkbox".$competence->id_Competence !!} onclick="onChangeFiltre()"/>
                                <label for={!! "checkbox".$competence->id_Competence !!} >Check</label>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>

                <!-- Competence  !-->
            </div>


            <!-- Selection !-->
            <div id="Selection_Station" class="section scrollspy">

                <h4 class="light-blue-text text-darken-1 center">Liste des Station</h4>
                <table class="highlight" id="table_banque">
                    <thead class="thead">
                    <tr>
                        <th data-field="nom">Label</th>
                        <th data-field="domaine">Domaine</th>
                        <th data-field="Critere">Critere</th>
                        <th data-field="Systeme">Systeme</th>
                        <th data-field="Contexte">Contexte</th>
                        <th data-field="Competence">Competence</th>
                        <th data-field="SitCliq">Instruction</th>
                        <th data-field="SitCliq">Ponderation</th>
                        <th data-field="check"></th>
                        <th></th>

                    </tr>
                    </thead>


                    <tbody class="tbody" id="tbody_banque">
                    <?php $i = 0 ?>
                    @foreach ($banques as $banque)
                        <tr id="{{$banque->id_Banque}}tr">
                            <td>{!! $banque->label !!}</td>
                            <td>{!! $banque->code_domaine !!}</td>
                            <td>{!! $banque->code_critere !!}</td>
                            <td>{!! $banque->code_systeme !!}</td>
                            <td>{!! $banque->code_contexte !!}</td>
                            <td> {!! json_encode($competenceBanque[$i])  !!}</td>
                            <td>
                                <!-- Modal Trigger -->
                                <a class="modal-trigger" href="#model{!! $banque->id_Banque!!}"><i
                                            class="material-icons">toc</i> </a>

                                <!-- Modal Structure -->
                                <div id="model{!! $banque->id_Banque!!}" class="modal modal1">
                                    <div class="modal-content darken-1">

                                        <div class="card-panel hoverable ">
                                            <h5 class="center"><u>Situation Clinique </u></h5>
                                            {{$banque->situation_Clinique}}
                                        </div>
                                        <br>
                                        <div class="card-panel hoverable ">
                                            <h5 class="center"><u>Instructions aux etudiants</u></h5>
                                            {{$banque->instruction_Etudiant}}
                                        </div>
                                    </div>
                                    <div class="modal-footer darken-1 ">
                                        <a href="#!"
                                           class=" modal-action modal-close waves-effect waves-green btn-flat white ">Close</a>
                                    </div>
                                </div>

                            </td>
                            <td>
                                <div class="input-field col s6">
                                    <input id="first_name" type="number" class="validate" max="100" min="0"
                                           name={!! $banque->id_Banque."P" !!}>
                                </div>
                            </td>
                            <td>
                                <input type="checkbox" value="yes"
                                       name={!! $banque->id_Banque."B" !!} id={!! $banque->id_Banque."B" !!} />
                                <label for={!! $banque->id_Banque."B" !!} >Check</label>
                            </td>
                        </tr>
                        <?php $i++ ?>
                    @endforeach
                    </tbody>
                </table>
            </div>
            <!-- Selection !-->
            <div class="row center">
                <input type="submit" class="waves-effect waves-light btn" onclick="show()"/>
            </div>
        </div>

        <div class="col hide-on-small-only m3 l2">
            <div class="toc-wrapper pinned">

                <ul class="section table-of-contents">
                    <li><a href="#Filtarge">Filtarge</a></li>
                    <li><a href="#Selection_Station">Selection des Station</a></li>
                </ul>
            </div>
        </div>

    </div>

</form>

<div class="fixed-action-btn" style="bottom: 50%; right: 50%;">
    <div class="preloader-wrapper big active" style="display:none" id="progress_cercle">
        <div class="spinner-layer spinner-blue-only">
            <div class="circle-clipper left">
                <div class="circle"></div>
            </div>
            <div class="gap-patch">
                <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
                <div class="circle"></div>
            </div>
        </div>
    </div>
</div>


<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();
    });

    $(document).ready(function () {
        // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
        $('.modal-trigger').leanModal();
        $('.modal1').closeModal();
    });


            <?php  echo "var banques = ".$banques."\n";?>
            <?php  echo "var competenceBanque = ".json_encode($competenceBanque)."\n";?>
            <?php  echo "var competenceBanqueId = ".json_encode($competenceBanqueId)."\n";?>
            <?php  echo "var competences = ".json_encode($competences)."\n";?>
            var array = [];
</script>
    <script type="text/javascript">
        function show() {
            document.getElementById('progress').style.display = 'block';
        }
    </script>
@endsection