@extends("layouts.master")

@section("content")
    <main class="main-wrapper" id="app">
        <div class="our_breadcrumbs">
            <div class="container">
                <nav aria-label="breadcrumb">
{{--                    <ol class="breadcrumb">--}}
{{--                        <li class="breadcrumb-item"><a href="{{route('home')}}"><i class="fa fa-home"></i> {{__('Accueil')}}</a></li>--}}
{{--                        <li class="breadcrumb-item active" aria-current="page">{{$titre}}</li>--}}
{{--                    </ol>--}}
                </nav>
            </div>
        </div>
        <div class="container">
            <div class="layout-box">
                <form action="{{route('etudiants.filter')}}" method="post">
                    @csrf
                    <div class="form-row">
                        <div class="col-lg-3 col-12">
                            <div class="form-group">
                                <label for="niveau_id">{{__('Année')}}</label>
                                <select id="niveau_id" class="form-control" name="niveau_id">
                                    <option value="">{{__('Choisis')}}</option>
                                    @foreach($niveaux as $niveau)
                                        <option value="{{$niveau->id}}" @if(isset($filter) && $filter['niveau_id'] == $niveau->id) selected @endif > {{$niveau->libelle}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3 col-12">
                            <div class="form-group">
                                <label for="specialite_id">{{__('Filière')}}</label>
                                <select id=specialite_id" class="form-control select2" name="specialite_id">
                                    <option value="">{{__('Choisis')}}</option>
                                    @foreach($specialites as $specialite)
                                        <option value="{{$specialite->id}}" @if(isset($filter) && $filter['specialite_id'] == $specialite->id) selected @endif > {{$specialite->libelle}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-auto col-12">
                            <button class="btn btn-save mt-30">{{__('recherche')}}</button>
                        </div>
                    </div>
                </form>
                <div class="text-right"><a href="{{route('etudiants.create')}}" class="btn btn-default">{{__('Ajouter')}} <i class="fa fa-plus"></i></a></div>

                <div class="row">
                    <div class="col-3">
                        <form method="post" action="{{route('etudiants.exportEtudiantsList')}}"  enctype="multipart/form-data">
                            @csrf
                            <input class="etudiants_ids" type="hidden" name="etudiants_ids" value="">
                            <button class="btn btn-success"><i class="fa fa-file-excel-o"></i> Génération du fichier Excel</button>
                        </form>
                    </div>
                    <div class="col-3">
                        <form method="post" action="{{route('etudiants.createManyCards')}}"  enctype="multipart/form-data">
                            @csrf
                            <input class="etudiants_ids" type="hidden" name="etudiants_ids" value="">
                            <button class="btn btn-dark"><i class="fa fa-id-card"></i> Cartes des étudiants</button>
                        </form>
                    </div>
                    <div class="col-3">
                        <form method="post" action="{{route('etudiants.generateManyLivretFormation')}}"  enctype="multipart/form-data">
                            @csrf
                            <input class="etudiants_ids" type="hidden" name="etudiants_ids" value="">
                            <button class="btn btn-primary"><i class="fa fa-book"></i> Livret de formation</button>
                        </form>
                    </div>
                    <div class="col-3">
                        <button id="button" type="button" class="btn btn-warning" data-toggle="modal" data-target="#convocationModal" > <i class="fa fa-list"></i> Génération des convocations</button>
                    </div>
                </div>

                <div class="table-responsive">
                    <table id="maintable" class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th><input type="checkbox" id="checkAll"></th>
                            <th scope="col">Numéro d'inscription</th>
                            <th scope="col">{{__('Image')}}</th>
                            <th scope="col">{{__('nom')}}</th>
                            <th scope="col">{{__('CIN/Passport')}}</th>
                            <th scope="col">{{__('Téléphone')}}</th>
                            <th scope="col">{{__('Nationalité')}}</th>
                            <th scope="col">{{__('Niveau')}}{{--{{__('Filière')}}--}}</th>
                            <th scope="col">{{__('Filière')}}{{--{{__('Spécialité')}}--}}</th>
                            <th scope="col">{{__('Année')}}{{--{{__('Niveau')}}--}}</th>
                            <th scope="col" style="width:17%">{{__('Action')}}</th>
                            <!--                            <th style="width: 3%"></th>-->
                        </tr>
                        </thead>
                        <tbody id="sortable">
                        @foreach($etudiants as $etudiant)
                            <tr id="{{$etudiant->id}}" data-ordre="{{$etudiant->ordre}}">
                                <td><input type="checkbox" name="etudiant_id" value="{{$etudiant->id}}"></td>
                                <td>{!! getImage($etudiant->photo,90) !!}</td>
                                <td>{{$etudiant->num_inscription}}</td>
                                <td>{{$etudiant->full_name}}</td>
                                <td>{{$etudiant->cin}}</td>
                                <td>{{$etudiant->telephone}}</td>
                                <td>{{$etudiant->nationalite->libelle ?? null}}</td>
                                <td>{{$etudiant->filiere->libelle ?? null}}</td>
                                <td>{{$etudiant->specialite->libelle ?? null}}</td>
                                <td>{{$etudiant->niveau->libelle ?? null}}</td>
                                <td>
                                    {{--<button id="top{{$etudiant->id}}" class="btn btn-fav @if($etudiant->top) red @endif"  @click="updateTop({{$etudiant->id}})"><i class="fa fa-heart"></i></button>
                                    <button id="pub{{$etudiant->id}}" class="btn btn-active @if($etudiant->pub) green @endif"  @click="updatePub({{$etudiant->id}})"><i class="fa fa-check"></i></button>--}}
                                    <a href="{{ route('etudiants.generateAttestationFile', ['etudiant' => $etudiant->id,]) }}" target="_blank" class="btn btn-edit" title="ATTESTATION DE SCOLARITE"><i class="fa fa-print"></i></a>
                                    <a href="{{ route('etudiants.generateAttestationInscription', ['etudiant' => $etudiant->id,]) }}" target="_blank" class="btn btn-edit" title="ATTESTATION D'INSCRIPTION"><i class="fa fa-file-word-o"></i></a>
                                    {{--<a href="{{ route('etudiants.generateLivretFormation', ['etudiant' => $etudiant->id,]) }}" target="_blank" class="btn btn-edit" title="LIVRET INDIVIDUEL DE FORMATION"><i class="fa fa-book"></i></a>--}}
                                {{--<a href="{{ route('etudiants.generateCarteEtudiant', ['etudiant' => $etudiant->id,]) }}" target="_blank" class="btn btn-edit" title="CARTE ETUDIANT"><i class="fa fa-address-card"></i></a>--}}
                                <a href="{{ route('etudiants.edit', ['etudiant' => $etudiant->id,]) }}" class="btn btn-edit"><i class="fa fa-pencil"></i></a>
                                <button class="btn btn-del"  @click="destroy({{$etudiant->id}})"><i class="fa fa-trash-o"></i></button>
                            </td>
                            {{--<td class="bg-move" style="width: 3%" ><a href="#" class="btn desable"><i class="fa fa-arrows-alt fa-fw"></i></a></td>--}}
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
                <button id="button1" type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal1" > <i class="fa fa-edit"></i> Mettre à jours le niveau et  l'année scolaire</button>
            </div>
        </div>
        {{--Modal mise à jours année scolaire--}}
        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modifier</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="{{route('etudiants.update_niveau')}}"  enctype="multipart/form-data">
                            @csrf
                            <input id="etudiants_ids_modal" type="hidden" name="etudiants_ids" value="">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="niveau_id2">{{__('Niveaux')}}</label>
                                        <select id="niveau_id2" class="form-control select2" name="niveau_id">
                                            <option value="">{{__('Choisis')}}</option>
                                            @foreach($niveaux as $niveau)
                                                <option value="{{$niveau->id}}"> {{$niveau->libelle}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="annee_scolaire_id">{{__('Année de scolarité')}}</label>
                                        <select id="annee_scolaire_id" class="form-control select2" name=annee_scolaire_id>
                                            <option value="">{{__('Choisis')}}</option>
                                            @foreach(annees_scolaires() as $annee_scolarite)
                                                <option value="{{$annee_scolarite->id}}"> {{$annee_scolarite->libelle}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-12 text-right">
                                    <button class="btn btn-save mt-4">{{__('Valider')}}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {{--Convocations--}}
        <div class="modal fade" id="convocationModal" tabindex="-1" role="dialog" aria-labelledby="convocationModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="convocationModalLabel">Convocations</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="{{route('etudiants.createConvocations')}}"  enctype="multipart/form-data">
                            @csrf
                            <input class="etudiants_ids" type="hidden" name="etudiants_ids" value="">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="titre">{{__('titre')}}</label>
                                        <input id="titre" class="form-control" name="titre" value="Examen du 3ème Trimestre 2023/2024"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="date">{{__('date')}}</label>
                                        <input id="date" class="form-control" name="date" value="Du 15/07 Au 22/07/2024"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="niveau_id3">{{__('Niveaux')}}</label>
                                        <select id="niveau_id3" class="form-control" name="niveau_id3">
                                            <option value="">{{__('Choisis')}}</option>
                                            <option value="1">{{__(' 1ère Année')}}</option>
                                            <option value="2">{{__(' 2ème et 3ème Année')}}</option>
                                            {{--@foreach($niveaux as $niveau)
                                                <option value="{{$niveau->id}}"> {{$niveau->libelle}}</option>
                                            @endforeach--}}
                                        </select>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-12 text-right">
                                    <button class="btn btn-save mt-4">{{__('Valider')}}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <input type="hidden" id="_token" value="{{csrf_token()}}">
@endsection

@section('script')

    {{-- multi checkbox modal --}}
    <script>
        $(document).ready(function(){
            $('#checkAll').click(function () {
                $('input:checkbox').prop('checked', this.checked);
                fill_etudiants_ids();
            });

            {{--modal--}}
            $("#button1").click(function() {
                var etudiants_ids = '';
                $.each($("input[name='etudiant_id']:checked"), function() {
                    console.log($(this).val());
                    etudiants_ids += $(this).val() +',';
                });
                $('#etudiants_ids_modal').val(etudiants_ids);
            });

            {{--generation Excel--}}
            $("input[name='etudiant_id']").change(function() {
                fill_etudiants_ids();
            });
            function fill_etudiants_ids(){
                var etudiants_ids = '';
                $.each($("input[name='etudiant_id']:checked"), function() {
                    etudiants_ids += $(this).val() +',';
                });
                $('.etudiants_ids').val(etudiants_ids);
            }
        });
    </script>


    <script>
        var app = new Vue({
            el: '#app',
            data: {
                //id: 0,
            },
            methods:{
                updatePub: function (id) {
                    axios.get('/etudiants/pub/'+id)
                    .then(response =>{
                        data = response.data;
                        if (data.pub){
                            $('#pub'+data.id).addClass('green');
                        }else {
                            $('#pub'+data.id).removeClass('green');
                        }
                    })
                    .catch(error => {
                        console.log('error: '+error);
                    })
                },
                updateTop: function (id) {
                    axios.get('/etudiants/top/'+id)
                        .then(response =>{
                            data = response.data;
                            if (data.top){
                                $('#top'+data.id).addClass('red');
                            }else {
                                $('#top'+data.id).removeClass('red');
                            }
                        })
                        .catch(error => {
                            console.log('error: '+error);
                        })
                },
                destroy: function (id) {
                    swal({
                        title: "Confirmation de la suppression.",
                        text: "Voullez vous vraiment supprimer cet enregistrement ?",
                        icon: "warning",
                        buttons: {
                            cancel: {
                                text: "Non",
                                value: null,
                                visible: true,
                                className: "btn-success",
                                closeModal: true,
                            },
                            confirm: {
                                text: "Oui",
                                value: true,
                                visible: true,
                                className: "btn-danger",
                                closeModal: true
                            }
                        }
                    }).then(isConfirm => {
                        if (isConfirm) {
                            axios.delete('/etudiants/' + id)
                                .then(response => {
                                    data = response.data;
                                    if (data.remove) {
                                        $('#' + data.id).remove();
                                    }
                                })
                                .catch(error => {
                                    console.log('error: ' + error);
                                })
                        }
                    })
                }
            }

        });
    </script>

    {{---------------Ordre-----------}}
    {{--<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>--}}
    <script src="{{asset('js/jquery-ui_1.12.1.js')}}"></script>
    <script>
        $( function() {
            $('#sortable').sortable({
                handle: ".bg-move",
                placeholder:  {
                    element: function(currentItem) {
                        var classname = currentItem[0].className.toLowerCase();
                        var heightval = currentItem.height();
                        var widthval = currentItem.width();
                        var tr='';
                        $(this).parent().find("thead tr th").each(function(){
                            tr = '<td> </td>'+tr;
                        });
                        return $("<tr  class='"+classname+" ' style='height:"+heightval+"px; width:"+widthval+"px; left: 0px;right: auto'>"+tr+" </tr>")[0];
                    },
                    update: function(container, p) {
                        return;
                    }
                },
                update  : function(event, ui)
                {
                    var ids = [];
                    var ordres = [];
                    var token = $('#_token').val();
                    $('tbody tr').each(function(){
                        ids.push($(this).attr("id"));
                        ordres.push($(this).data("ordre"));
                    });
                    axios.post('/etudiants/ordre',{ids: ids, ordres:ordres, _token: token})
                        .then(response => {
                            //console.log(response);
                            /*if(response.data.etat){
                                // alert('ok');
                            }*/
                        })
                        .catch(error => {
                            console.log('error: '+error);
                        })
                }
            });
        });
    </script>
@endsection