@extends('layout.structure')
@section('title-page')
    Elenco Richieste di immatricolazione
@endsection
@section('title-tab')
    Richieste di immatricolazione
@endsection
@section('content')
    <div class="card shadow mb-1">
        <div class="card-body tab-content p-1 text-right" >
            <div class="btn-group" role="group">
                <a class="btn btn-success btn-sm" href="" id="new_enrolment"><i class="fa fa-plus-circle"></i> Iscrivi studente</a>
                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#filterModal">
                    <i class="fa fa-filter"></i> Filtra
                </button>
            </div>
        </div>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header p-0">
            <ul class="nav nav-tabs border-bottom-0" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="home-tab" data-toggle="tab" role="tab" data-tab-name="graduate" >Corsi di Laurea</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="profile-tab" data-toggle="tab"  role="tab" data-tab-name="oc" >Corsi Post Laurea/Post Diploma</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="contact-tab" data-toggle="tab"  role="tab" data-tab-name="ic" >Corsi Singoli</a>
                </li>
            </ul>
        </div>
        <div class="card-body tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">


                <div class="table-responsive">
                    <table class="table table-bordered table-sm table-striped" width="100%" cellspacing="0" id="users-table">
                        <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Cognome</th>
                            <th>Generalità</th>
                            <th>Corso</th>
                            <th>Stato immatricolzione</th>
                            <th>Azioni</th>
                        </tr>
                        </thead>
                        <tfoot>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="filterModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Filtro</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 class="" id="searchForm">
                        <div class="form-group my-3">
                            <label for="keyword">Studente</label>
                            <input class="form-control" type="text" placeholder="Cerca" id="keyword" aria-label="Cerca" autocomplete="off">
                        </div>
                        <div class="form-group my-3">
                            <label for="keyword">Corso</label>
                            <select class="form-control" id="course_code">
                                <option value="">--</option>
                            </select>
                        </div>
                        <div class="form-group my-3">
                            <label for="keyword">Stato immatricolazione</label>
                            <select class="form-control" id="secretary_status">
                                <option value="">--</option>
                                <option value="0">In attesa dei documenti necessari all'immatricolazione</option>
                                <option value="1">Immatricolazione in attesa</option>
                                <option value="2">Immatricolato</option>
                            </select>
                        </div>
                        <div class="form-group my-3 search-input-graduate" >
                            <label for="keyword">Stato piano di studi</label>
                            <select class="form-control" id="status_pds">
                                <option value="">--</option>
                                <option value="1">In attesa dei documenti necessari per la convalida dei cfu</option>
                                <option value="2">Piano di studi in fase di valutazione</option>
                                <option value="3">Piano di studi errato contattare l'ufficio valutazioni</option>
                                <option value="2">Piano di studi creato</option>
                            </select>
                        </div>
                        <div class="form-group my-3">
                            <label for="keyword">Anno accademico</label>
                            <select class="form-control" id="accademic_year">
                                <option value="">--</option>
                                @for($i=date('Y');$i>=2006;$i--)
                                    <option value="{{$i}}/{{$i+1}}">{{$i}}/{{$i+1}}</option>
                                @endfor
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
                    <button type="button" class="btn btn-primary" onclick="$('#searchForm').submit()">Cerca</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="registrationInfo" tabindex="-1" role="dialog" aria-labelledby="registrationInfoLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Info registrazione</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Chiudi</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('head')
    @parent
    <style>
        #myTab a{
            cursor: pointer;
        }

        #myTab .active{
            background-color: #3B62D1;
            color: white;
        }
    </style>
@endsection
@section('footer')
    @parent
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
    <script>
        var datatable;

        function graduateEnrolments(){
            $("#new_enrolment").attr('href','{{route('new.graduate.enrolment')}}');

            datatable = $('#users-table').DataTable({
                destroy: true,
                // processing:true,
                serverSide:true,
                searching: false,
                autoWidth: false,
                ajax: {
                    url: '{{route('auth.get.enrolments.graduate')}}',
                    data: function ( d ) {
                        d.keyword = $("#keyword").val();
                        d.course_code = $("#course_code").val();
                        d.secretary_status = $("#secretary_status").val();
                        d.status_pds = $("#status_pds").val();
                        d.accademic_year = $("#accademic_year").val();
                    }
                },
                columns:[
                    {data: 'firstname', name:'firstname',width:'100px'},
                    {data: 'lastname', name:'lastname',width:'100px'},
                    {data: 'registry', name:'course_code_text',width:'auto'},
                    {data: 'details', name:'details',width:'auto'},
                    {data: 'status', name:'status',width:'150px'},
                    {data: 'actions', name:'Azioni', orderable: false, searchable: false,width:'100px'},
                ]
            });
        }

        function ocEnrolments(){
            $("#new_enrolment").attr('href','{{route('new.oc.enrolment')}}');

            datatable = $('#users-table').DataTable({
                destroy: true,
                // processing:true,
                serverSide:true,
                searching: false,
                ajax: {
                    url: '{{route('auth.get.enrolments.oc')}}',
                    data: function ( d ) {
                        d.keyword = $("#keyword").val();
                        d.course_code = $("#course_code").val();
                        d.secretary_status = $("#secretary_status").val();
                        d.accademic_year = $("#accademic_year").val();
                    }
                },
                columns:[
                    {data: 'firstname', name:'firstname',width:'100px'},
                    {data: 'lastname', name:'lastname',width:'100px'},
                    {data: 'registry', name:'course_code_text',width:'auto'},
                    {data: 'details', name:'details',width:'auto'},
                    {data: 'status', name:'status',width:'150px'},
                    {data: 'actions', name:'Azioni', orderable: false, searchable: false,width:'100px'},
                ]
            });
        }

        function icEnrolments(){
            $("#new_enrolment").attr('href','{{route('new.ic.enrolment')}}');
            datatable = $('#users-table').DataTable({
                destroy: true,
                // processing:true,
                serverSide:true,
                searching: false,
                ajax: {
                    url: '{{route('auth.get.enrolments.ic')}}',
                    data: function ( d ) {
                        d.keyword = $("#keyword").val();
                        d.course_code = $("#course_code").val();
                        d.secretary_status = $("#secretary_status").val();
                        d.accademic_year = $("#accademic_year").val();
                    }
                },
                columnDefs: [
                    { width: '200px', targets: 0 }
                ],
                columns:[
                    {data: 'firstname', name:'firstname',width:'100px'},
                    {data: 'lastname', name:'lastname',width:'100px'},
                    {data: 'registry', name:'course_code_text',width:'auto'},
                    {data: 'details', name:'details',width:'auto',class:'p-0'},
                    {data: 'status', name:'status',width:'150px'},
                    {data: 'actions', name:'Azioni', orderable: false, searchable: false,width:'100px'},
                ]
            });
        }

        $("#searchForm").on('submit',function(e){
            e.preventDefault();

            var badge_keyword = $("#keyword").val().length ? '<span class="badge badge-secondary ml-1">'+$("#keyword").val()+'</span>' : '';
            var badge_course_code = $("#course_code").val().length ? '<span class="badge badge-secondary ml-1">'+$("#course_code").find("option:selected").html()+'</span>' : '';
            var badge_secretary_status = $("#secretary_status").val().length ? '<span class="badge badge-secondary ml-1">'+$("#secretary_status").find("option:selected").html()+'</span>' : '';
            var badge_status_pds = $("#status_pds").val().length ? '<span class="badge badge-secondary ml-1">'+$("#status_pds").find("option:selected").html()+'</span>' : '';
            var badge_accademic_year = $("#accademic_year").val().length ? '<span class="badge badge-secondary ml-1">'+$("#accademic_year").find("option:selected").html()+'</span>' : '';

            $("#box-filter").html(badge_keyword+badge_course_code+badge_secretary_status+badge_status_pds+badge_accademic_year);

            $("#filterModal").modal("hide");

            datatable.ajax.reload();
        });



        function courseFilter(type){
            $.ajax(
                '{{route('auth.all.courses.list.filter')}}',
                {
                    method:'POST',
                    data:{
                        _token:window.Laravel.csrfToken,
                        type:type
                    },
                    success:function(msg){
                        var text = "<option value=''>--</option>";
                        var x;
                        for (x in msg) {
                            text += "<option value='" + x + "'>"+ msg[x] + "</option>";
                        }
                        $('#course_code').html(text);
                    }
                }
            )
        }

        graduateEnrolments();
        courseFilter('graduate');

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            var tab = $(this).data('tabName');
            $('#searchForm').trigger("reset");
            $('#box-filter').html("");
            $('.search-input-graduate').hide();
            courseFilter(tab);
            switch (tab) {
                case 'graduate':
                    $('.search-input-graduate').show();
                    graduateEnrolments();
                    break;
                case 'oc':
                    ocEnrolments();
                    break;
                case 'ic':
                    icEnrolments();
                    break;
            }
        });


    </script>
@endsection