@extends('layout.structure')
@section('title-tab')
    {{$ecp->name}}
@endsection
@section('title-page')
    {{$ecp->name}}
@endsection
@section('head')
    @parent

@endsection
@section('content')

    <div class="row">
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-danger shadow h-100 py-2">
                <div class="card-body" id="graduate-percentage-box">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Percentuale Corsi di Laurea</div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800 percentage-text">{{$ecp->percentages->graduate}}%</div>
                                </div>
                                <div class="col">
                                    <div class="progress progress-sm mr-2">
                                        <div class="progress-bar bg-danger" role="progressbar" style="width: {{$ecp->percentages->graduate}}%" aria-valuenow="{{$ecp->percentages->graduate}}" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-percent fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body" id="oc-percentage-box">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Percentuale Corsi Post Laurea o Post diploma</div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800 percentage-text">{{$ecp->percentages->oc}}%</div>
                                </div>
                                <div class="col">
                                    <div class="progress progress-sm mr-2">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: {{$ecp->percentages->oc}}%" aria-valuenow="{{$ecp->percentages->oc}}" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-percent fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body" id="ic-percentage-box">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Percentuale Corsi singoli</div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800 percentage-text">{{$ecp->percentages->ic}}%</div>
                                </div>
                                <div class="col">
                                    <div class="progress progress-sm mr-2">
                                        <div class="progress-bar bg-warning" role="progressbar" style="width: {{$ecp->percentages->ic}}%" aria-valuenow="{{$ecp->percentages->ic}}" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-percent fa-2x text-gray-300"></i>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-xl-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Sedi</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Elenco delle sedi registrate</h6>
                    <p class="card-text">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Tipo Sede</th>
                            <th>Luogo</th>
                            <th>Contatti</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($ecp->locations as $location)
                            <tr>
                                <td>
                                    {{$location->type}}
                                </td>
                                <td>
                                    {{$location->region}}<br>
                                    {{$location->city}} ({{$location->province}})<br>
                                    {{$location->address}} {{$location->postal_code}}<br>
                                </td>
                                <td>
                                    <i class="fa fa-phone"></i> {{$location->phone}}<br>
                                    <i class="fa fa-fax"></i> {{$location->fax}}<br>
                                    <i class="fa fa-mail-bulk"></i> {{$location->email}}<br>
                                    <i class="fa fa-mail-bulk"></i> {{$location->pec}}<br>
                                </td>
                                <td>
                                    @if($location->type != 'sede_legale')
                                        <a class="btn btn-info btn-sm" id="locaton_edit" href="{{route('admin.ecps.location.edit',$location->id)}}" title="Modifica"><i class="fa fa-edit"></i></a>
                                        <button class="btn btn-danger btn-sm locaton_delete"  type="button" title="Cancella" data-location-id="{{$location->id}}" ><i class="fa fa-minus"></i></button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>

                    </table>
                    </p>
                    <a href="{{route('admin.ecps.location.create',$ecp->id)}}" class="btn btn-info btn-sm">Crea nuova sede</a>
                </div>
            </div>
        </div>

        <div class="col-xl-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Utenti</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Lista utenti abilitati alla gestione l'Ecp</h6>
                    <p class="card-text">
                    <table class="table table-bordered" width="100%" cellspacing="0" id="user-table">
                        <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Ruolo</th>
                            <th>Data Associazione</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tfoot>

                        </tbody>
                    </table>
                    </p>
                    <a href="#" id="new_user_assoc" class="btn btn-info btn-sm">Associa nuovo utente</a>
                </div>
            </div>
        </div>

    </div>


    @component('components.stats.ecp',['ecp' => $ecp])
    @endcomponent


    <div class="modal fade" id="modalwindow" tabindex="-1" role="dialog" aria-labelledby="modalwindowTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalwindowTitle"></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" data-dismiss="modal">Chudi</button>
                    <span class="modal-comand">

                    </span>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('footer')
    @parent
    <script>


        var userTable = $('#user-table').DataTable({
            processing:true,
            serverSide:true,
            ajax: '{{route('admin.user.assoc.list',$ecp->id)}}',
            columns:[
                {data: 'name', name:'name'},
                {data: 'role', name:'role'},
                {data: 'created_at', name:'created_at'},
                {data: 'actions', name:'Azioni', orderable: false, searchable: false},
            ]
        });

        $(".locaton_delete").on('click',function(e){
            e.preventDefault();
            let location_id = $(this).data('locationId');
            $('#modalwindow').find('.modal-title').html('Eliminare sede?');
            $('#modalwindow').find('.modal-body').html('Vuoi reamente eliminare la sede selezionata?');
            $('#modalwindow').find('.modal-comand').html('<form action="{{url('admin/ecps/location/destroy/')}}/'+location_id+'" method="post">@csrf @method('DELETE') <button class="btn btn-danger">Elimina</button></form>');
            $('#modalwindow').modal('show');
        })

        $("#new_user_assoc").on('click',function(e){
            e.preventDefault();
            $.ajax(
                '{{route('admin.view.user.list',$ecp->id)}}',
                {
                    method:'POST',
                    data: {
                        _token:Laravel.csrfToken
                    },
                    success:function(res){
                        $('#modalwindow').find('.modal-title').html('Associazione Utente');
                        $('#modalwindow').find('.modal-comand').html('');
                        $('#modalwindow').modal('show');
                        $('#modalwindow').find('.modal-body').html(res);
                        $('#modalwindow').find('.modal-comand').html('<button class="btn btn-success" onclick="add_user_rel()">Associa</button>');
                        $('.selectpicker').selectpicker('refresh');
                    },
                    error:function(res){
                        $('#modalwindow').find('.modal-body').html('Errore di comunicazione col server');
                    }
                }
            )
        });

        function deleteUser(rel_id){
            $('#modalwindow').find('.modal-title').html('Associazione Utente');
            $('#modalwindow').find('.modal-body').html('Eliminare l\'associazione dell\'utete a questo ECP?');
            $('#modalwindow').find('.modal-comand').html('<button class="btn btn-danger" onclick="deleteUserSubmit('+rel_id+')">Elimina</button>');
            $('#modalwindow').modal('show');
        }

        function deleteUserSubmit(rel_id){
            $.ajax(
                '{{route('admin.user.assoc.destroy',$ecp->id)}}',
                {
                    method:'POST',
                    data: {
                        _token:Laravel.csrfToken,
                        rel_id:rel_id
                    },
                    success:function(res){
                        $('#modalwindow').modal('hide');
                        userTable.ajax.reload();
                    },
                    error:function(res){

                    }
                }
            );
        }


        function add_user_rel(){
            var user_id = $("#rel_user").val();
            var role = $("#rel_role").val();
            if(user_id>0 && role.length){
                $.ajax(
                    '{{route('admin.user.assoc.add',$ecp->id)}}',
                    {
                        method:'POST',
                        data: {
                            _token:Laravel.csrfToken,
                            user_id:user_id,
                            role:role
                        },
                        success:function(res){
                            $('#modalwindow').modal('hide');
                            userTable.ajax.reload();
                        },
                        error:function(res){

                        }
                    }
                );
            }
        }

    </script>
@endsection