@extends('layouts.app')

@section('css')
    <link href="{{ asset('plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css') }}" rel="stylesheet">
    <link href="{{ asset('css/responsive.dataTables.min.css') }}" rel="stylesheet">
    <link href="{{ asset('plugins/select2/select2.min.css') }}" rel="stylesheet" />
@endsection


@section('contenido')

    @if(auth()->user()->hasRole('groups.destroy'))
        <form method='POST' id='delete-form' action="{{route('groups.destroy')}}">
            @csrf
            @method('DELETE')
            <input type="hidden" name="id" id="group_id">
        </form>
    @endif
        <div class="container-fluid">
            <div class="row clearfix">
                <div class="card">
                    <div class="header">
                    <div class="user-info">
        <div class="image">
            <img src="{{ asset('img/logo.png') }}" width="250" height="100" alt="Logo" />
        </div>
    </div>
    <P></P>
                        <div class="row clearfix">
                            <div class="col-xs-8 col-sm-10 col-md-10">
                                <h1>
                                    Grupos
                                </h1>
                            </div>
                            <div class="col-xs-4 col-sm-2  col-md-2 align-right">
                                @if(auth()->user()->hasRole('groups.store'))
                                    <button class='btn bg-blue btn-circle-lg waves-effect waves-circle waves-float' data-color="indigo" data-toggle="modal" data-target="#groupModal"><i class="material-icons">add</i></button>
                                @endif
                            </div>
                        </div>
                        <div class="body">
                            <table id="dataTable" class="table table-striped table-bordered table-condensed table-hover dt-responsive nowrap" style="width: 100%">
                                <thead>
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Descripcion</th>
                                        <th width='30px'></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!-- Modal Crea group-->

	<div class="modal fade" id="groupModal" role="dialog" style="display: none;">
	    <div class="modal-dialog modal-lg" role="document">
	        <div class="modal-content">
	            <div class="modal-header">
	                <h2 class="modal-title" id="largeModalLabel">Crea Grupo </h2>
	            </div>
                <form action="{{route('groups.store')}}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Nombre</b>
                                        <input type="text" class="form-control" name="name" required maxlength="150">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Descripcion</b>
                                        <input type="text" class="form-control" name="description" required maxlength="200">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h5 class="modal-title" >Permisos del Grupo </h5>
                                <ul class="nav nav-tabs tab-nav-right nav-stacked" style="border-bottom:none !important" role="tablist">
                                    @foreach ($roles_group as $key => $role)
                                        <li role="presentation" class="@if($key==0) active @endif"><a href="#{{$role->global_group}}" data-toggle="tab">{{$role->global_group}}</a></li>
                                    @endforeach
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <div class="tab-content">
                                    <br><br><br>
                                    @foreach ($roles_group as $key => $role_group)
                                        <div role="tabpanel" class="tab-pane fade class=@if($key==0) active in @endif" id="{{$role_group->global_group}}">
                                            @foreach ($roles->where('global_group',$role_group->global_group) as $role)
                                                <input type="checkbox" id="role-{{$role->id}}" class="filled-in" name="roles[]" value="{{$role->id}}" >
                                                <label for="role-{{$role->id}}">{{$role->description}}</label><br>
                                            @endforeach
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success waves-effect">GUARDAR</button>
                        <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CERRAR</button>
                    </div>
                </form>
	        </div>
	    </div>
    </div>

    <!-- Modal Edita group-->
	<div class="modal fade" id="EditagroupModal" role="dialog" style="display: none;">
	    <div class="modal-dialog modal-lg" role="document">
	        <div class="modal-content">
	            <div class="modal-header">
	                <h2 class="modal-title" id="largeModalLabel">Edita Grupo </h2>
	            </div>
                <form action="{{route('groups.update')}}" method="POST">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="id" id="edita_id">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Nombre</b>
                                        <input type="text" class="form-control" name="name" id="edita_name" required maxlength="150">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Descripcion</b>
                                        <input type="text" class="form-control" name="description" id="edita_description" required maxlength="200">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h5 class="modal-title" >Permisos del Grupo </h5>
                                <ul class="nav nav-tabs tab-nav-right nav-stacked" style="border-bottom:none !important" role="tablist">
                                    @foreach ($roles_group as $key => $role)
                                        <li role="presentation" class=@if($key==0) "active" @endif ><a href="#edita_{{$role->global_group}}" data-toggle="tab">{{$role->global_group}}</a></li>
                                    @endforeach
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <div class="tab-content">
                                    <br><br><br>
                                    @foreach ($roles_group as $key => $role_group)
                                        <div role="tabpanel" class="tab-pane fade @if($key==0) active in @endif" id="edita_{{$role_group->global_group}}">
                                            @foreach ($roles->where('global_group',$role_group->global_group) as $role)
                                                <input type="checkbox" id="edita_role-{{$role->id}}" class="filled-in" name="roles[]" value="{{$role->id}}" >
                                                <label for="edita_role-{{$role->id}}">{{$role->description}}</label><br>
                                            @endforeach
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success waves-effect">EDITAR</button>
                        <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CERRAR</button>
                    </div>
                </form>
	        </div>
	    </div>
    </div>

@endsection

@section('scripts')
    <script src="{{ asset('plugins/jquery-datatable/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js') }}"></script>
    <script src="{{ asset('plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
    <script src="{{ asset('plugins/select2/select2.min.js') }}"></script>
    <script src="{{ asset('plugins/select2/es.js') }}"></script>
    <script>

            $('#dataTable').DataTable({
                dom: 'Bfrltip',
                stateSave: false,
                pageLength: 50,
                processing: true,
                serverSide: true,
                responsive: true,
                deferRender: true,
                order: [0, 'asc'],
                buttons: [
                    'excel'
                ],
                ajax: '{{route('groups.datatable')}}',
                columns: [
                    {data: 'name'},
                    {data: 'description'},
                    {data: 'function_buttons', name: 'function_buttons', orderable: false, searchable: false}
                ],
            });

    function clear(){
        $('#edita_id').val('');
        $('#edita_name').val('');
        $('#edita_description').val('');
        $('input:checkbox').prop('checked', false);
    }

    function deleteGroup(id){
        if(id=='')return;
        $('#group_id').val(id);
        deleteDialog('delete-form','¿Esta seguro de eliminar este Grupo?');
    }

    function getGroup(id){
        if(id=='')return;
        clear();
        $.ajax({
            url: '{{route('groups.ajax.get', ':id')}}'.replace(':id', id),
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                $('#edita_id').val(data.id);
                $('#edita_name').val(data.name);
                $('#edita_description').val(data.description);
                data.roles.forEach(element => {
                   $('#edita_role-'+element.id).prop('checked', true);
                });
                $('#EditagroupModal').modal('show');
            },
            error: function (data) {
                errorDialog(data.responseJSON.msg);
            }
        });
    }

    </script>
@endsection