@extends('layout.structure')
@section('title-tab')
    Diario Esami
@endsection
@section('content')
    <div class="card shadow">
        <div class="card-header">
            Opzioni di ricerca
        </div>
        <div class="card-body">
            <div class="form-group">
                <label for="tipologia">Tipologia</label>
                <select class="form-control" id="tipologia">
                    <option value="">--</option>
                    <option value="graduate">Corsi di Laurea</option>
                    <option value="oc">Corsi PostLaurea - PostDiploma</option>
                    <option value="ic">Corsi Singoli</option>
                </select>
            </div>
            <div class="form-group">
                <label for="category-course">Categoria</label>
                <select class="form-control" id="category-course">
                    <option value="">--</option>
                </select>
            </div>
        </div>
    </div>
    <div class="card shadow mt-3">
        <div class="card-header">
            Corsi
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-6 p-1">
                    <div class="card-title bg-primary text-white p-1">Lista corsi</div>
                    <select multiple="multiple" id="courses" name="courses[]" class="form-control" size="8">
                    </select>
                    <button type="button" id="courses_rightSelected" class="btn btn-info btn-block p-0"><i class="fa fa-chevron-right" aria-hidden="true"></i></button>
                </div>

                <div class="col-6 p-1">
                    <div class="card-title bg-warning text-white p-1">Corsi selezionati</div>
                    <select name="to[]" id="courses_to" class="form-control" multiple="multiple" size="8"></select>
                    <button type="button" id="courses_leftSelected" class="btn btn-info btn-block p-0"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>
    </div>
    <div class="card shadow mt-3">
        <div class="card-header">
            Sedi
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-6 p-1">
                    <div class="card-title bg-primary text-white p-1">Lista sedi</div>
                    <select multiple="multiple" id="locations" name="locations[]"  class="form-control" size="8">
                        @foreach($locations as $key=>$location)
                            <option  value="{{$location->id_location}}">{{$location->city}} ({{$location->place_ext}}) {{$location->name_location}}</option>
                        @endforeach
                    </select>
                    <button type="button" id="locations_rightAll" class="btn btn-info btn-block p-0" ><i class="fa fa-forward" aria-hidden="true"></i></button>
                </div>
                <div class="col-6 p-1">
                    <div class="card-title bg-warning text-white p-1">Sedi selezionate </div>
                    <select name="to[]" id="locations_to" class="form-control" multiple="multiple" size="8"></select>
                    <button type="button" id="locations_leftAll" class="btn btn-info btn-block p-0" ><i class="fa fa-backward" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>
    </div>
    <div class="card shadow mt-3">
        <div class="card-body">
            <button type="button" class="btn btn-success" style="width: 100%" onclick="getExams()">Cerca</button>
        </div>
    </div>



    <div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Risultato ricerca</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="dialog-container">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">chiudi</button>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('head')
    @parent
    {{--<style>--}}
    {{--.my-custom-scrollbar {--}}
    {{--position: relative;--}}
    {{--height: 400px;--}}
    {{--overflow: auto;--}}
    {{--}--}}
    {{--.table-wrapper-scroll-y {--}}
    {{--display: block;--}}
    {{--}--}}
    {{--</style>--}}

@endsection
@section('footer')
    @parent
    <script src="{{url('js/multiselect-master/dist/js/multiselect.js')}}"></script>
    <script>
        function resetLocationBox(){
            $("#box_locations").width(460);
            $("#box_locations_to").width(460);
        }

        function resetCoursesBox(){
            $("#box_courses").width(460);
            $("#box_courses_to").width(460);
        }


        function coursesMultiselect(){
            $('#courses').multiselect({
                search: {
                    left: '<input type="text" name="q" class="form-control" placeholder="Cerca corsi" autocomplete="off" />',
                    right: '<input type="text" name="q" class="form-control" placeholder="Cerca corsi selezionati" autocomplete="off" />',
                },
                fireSearch: function(value) {
                    return value.length > 3;
                },
                beforeMoveToRight: function(){
                    var count = 0;
                    $('#courses_to').find('option').each(function(){
                        count++;
                    });

                    if(count>7){
                        console.log(count);
                        return false;
                    }
                    return true;

                }
            });
        }

        function locationsMultiselect() {
            $('#locations').multiselect({
                search: {
                    left: '<input type="text" name="q" class="form-control" placeholder="Cerca sedi" autocomplete="off"/>',
                    right: '<input type="text" name="q" class="form-control" placeholder="Cerca sedi selezionate" autocomplete="off"  />',
                },
                fireSearch: function(value) {
                    return value.length > 3;
                }
            });
        }

        $("#tipologia").change(function(){
            var tipologia = $(this).val();
            $("#category-course").html('<option value="">--</option>');

            $("#courses").html("");
            $("#courses_to").html("");
            $.ajax({
                method: "POST",
                url: "{{route('web.get.course.category')}}",
                data: { _token: Laravel.csrfToken,tipologia: tipologia  },
                success:function( msg ) {
                    var html = '<option value="">--</option>';
                    for(var i=0;i<msg.length;i++){
                        var id = msg[i]['id'];
                        var option = msg[i]['name'];
                        html += '<option value="'+id+'">'+option+'</option>';
                    }
                    $("#category-course").html(html);

                }
            })
        });

        $("#category-course").change(function(){
            getCourses();
        });

        $(function(){
            locationsMultiselect();
        });

        function getCourses(){
            var categoria = $("#category-course").val();
            var tipologia = $("#tipologia").val();
            $("#courses").html("");
            $("#courses_to").html("");
            $.ajax({
                method: "POST",
                url: "{{route('web.get.courses')}}",
                data: { _token: Laravel.csrfToken,categoria: categoria,tipologia:tipologia  },
                success: function( msg ) {

                    var html = '';
                    for(var i=0;i<msg.length;i++){
                        var id = msg[i]['code'];
                        var option = msg[i]['title'];
                        html += '<option value="'+id+'">'+option+' ('+id+')</option>';
                    }
                    $("#courses").html(html);
                    coursesMultiselect();

                }
            });
        }

        function getExams(){

            var locations = new Array();
            var key = 0;
            $("#locations_to").find('option').each(function(){
                locations[key] = $(this).val();
                key++;
            });

            var courses = new Array();
            var key = 0;
            $("#courses_to").find('option').each(function(){
                courses[key] = $(this).val();
                key++;
            });


            if(!courses.length){
                return false;
            }
            if(!locations.length){
                return false;
            }


            $.ajax({
                method: "POST",
                url: "{{route('auth.get.table.exams')}}",
                data: { _token: Laravel.csrfToken,courses: courses,locations:locations },
                success:function( msg ) {
                    $("#dialog-container").html(msg);
                    $("#dialog").modal( "show" );
                }
            });
        }
    </script>
@endsection