@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('users.destroy'))
    <form method='POST' id='delete-form' action="{{route('users.destroy')}}">
        @csrf
        @method('DELETE')
        <input type="hidden" name="id" id="user_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>
                                    Usuarios
                                </h1>
                            </div>
                            <div class="col-xs-4 col-sm-2  col-md-2 align-right">
                                @if(auth()->user()->hasRole('users.store'))
                                    <button class='btn bg-blue btn-circle-lg waves-effect waves-circle waves-float' data-color="indigo" data-toggle="modal" data-target="#userModal"><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>Correo</th>
                                        <th>Grupo</th>
                                        <th width='30px'></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!-- Modal Crea user-->
	<div class="modal fade" id="userModal" 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 user </h2>
	            </div>
                <form action="{{route('users.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>Email</b>
                                        <input type="text" class="form-control" name="email" required maxlength="150">
                                    </div>
                                </div>
                            </div>
                            <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="255">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Rut</b>
                                        <input type="text" class="form-control" name="rut" required maxlength="20">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Descuento Maximo</b>
                                        <input type="number" class="form-control" name="descuento_maximo" max="20000" min ="0">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Sucursal Asignada</b>
                                        <select name="sucursal_id" class="form-control">
                                            <option value="">Seleccione Sucursal</option>
                                            @foreach ($sucursales as $sucursal)
                                                <option value="{{$sucursal->id}}">{{$sucursal->nombre}}</option>
                                            @endforeach
                                        </select>

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Grupo</b>
                                        <select name="group_id" class="form-control" onchange="getGroup(this.value,'crea')">
                                            <option value="">Seleccione grupo</option>
                                            @foreach ($grupos as $grupo)
                                                <option value="{{$grupo->id}}">{{$grupo->name}}</option>
                                            @endforeach
                                        </select>

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Password</b>
                                        <input type="password" class="form-control" name="password" required maxlength="255">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Repetir password</b>
                                        <input type="password" class="form-control" name="confirmed_password" required maxlength="255">
                                    </div>
                                </div>
                            </div>
                           
                            <div class="col-md-6">
                                <h5 class="modal-title" >Permisos del Usuario </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 user-->
	<div class="modal fade" id="EditauserModal" 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 user </h2>
	            </div>
                <form action="{{route('users.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>Email</b>
                                        <input type="text" class="form-control" id="edita_email" disabled readonly>
                                    </div>
                                </div>
                            </div>
                            <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="255">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Rut</b>
                                        <input type="text" class="form-control" name="rut" id="edita_rut" required maxlength="20">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Descuento Maximo</b>
                                        <input type="number" class="form-control" name="descuento_maximo" id="edita_descuento_maximo"  max="20000" min ="0">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Sucursal Asignada</b>
                                        <select name="sucursal_id"  id="edita_sucursal_id"  class="form-control">
                                            <option value="">Seleccione Sucursal</option>
                                            @foreach ($sucursales as $sucursal)
                                                <option value="{{$sucursal->id}}">{{$sucursal->nombre}}</option>
                                            @endforeach
                                        </select>

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Grupo</b>
                                        <select name="group_id" id="edita_group_id" class="form-control" onchange="getGroup(this.value,'edita')">
                                            <option value="">Seleccione grupo</option>
                                            @foreach ($grupos as $grupo)
                                                <option value="{{$grupo->id}}">{{$grupo->name}}</option>
                                            @endforeach
                                        </select>

                                    </div>
                                </div>
                            </div>
                           
                            <div class="col-md-6">
                                <h5 class="modal-title" >Permisos del Usuario </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('users.datatable')}}',
                columns: [
                    {data: 'name'},
                    {data: 'email'},
                    {data: 'group.name',defaultContent: ''},
                    {data: 'function_buttons', name: 'function_buttons', orderable: false, searchable: false}
                ],
            });

    function clear(){
        $('#edita_id').val('');
        $('#edita_name').val('');
        $('#edita_email').val('');
        $('#edita_rut').val('');
        $('#edita_descuento_maximo').val('');
        $('#edita_sucursal_id option[value=""]').attr('selected', true);
        $('#edita_group_id option[value=""]').attr('selected', true);
        $('input:checkbox').prop('checked', false);
    }

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

    function getUser(id){
        if(id=='')return;
        clear();
        $.ajax({
            url: '{{route('users.ajax.get', ':id')}}'.replace(':id', id),
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                $('#edita_id').val(data.id);
                $('#edita_name').val(data.name);
                $('#edita_email').val(data.email);
                $('#edita_rut').val(data.rut);
                $('#edita_descuento_maximo').val(data.descuento_maximo);
                if(data.sucursal_id!=null){
                    $('#edita_sucursal_id option[value='+data.sucursal_id+']').attr('selected', true);
                    $('#edita_sucursal_id').trigger('change');
                }
                if(data.group_id!=null){
                    $('#edita_group_id option[value='+data.group_id+']').attr('selected', true);
                    $('#edita_group_id').trigger('change');
                }
                data.roles.forEach(element => {
                   $('#edita_role-'+element.id).prop('checked', true);
                });

                let checked=false
                if(data.see_home=="1")
                    checked=true;
                $('#edita_see_home').prop('checked',checked);

                $('#EditauserModal').modal('show');
            },
            error: function (data) {
                errorDialog(data.responseJSON.msg);
            }
        });
    }


    function getGroup(id,type){
        $('input:checkbox').prop('checked', false);
        if(id=='')return;
        $.ajax({
            url: '{{route('groups.ajax.get', ':id')}}'.replace(':id', id),
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                if(type=='edita'){
                    data.roles.forEach(element => {
                        $('#edita_role-'+element.id).prop('checked', true);
                    });
                }else{
                    data.roles.forEach(element => {
                        $('#role-'+element.id).prop('checked', true);
                    });
                }
            },
            error: function (data) {
                errorDialog(data.responseJSON.msg);
            }
        });
    }

    </script>
@endsection