@extends('layouts.app')

@section('title')
    Privilegios y Roles
@endsection

@section('modals')
<style>
    ul {
    list-style: none;
    }
    a {
        color:black;   
    }
</style>
<!-- Modal Create System -->
<div class="modal fade" id="new-system" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form-add">
            @csrf
            {{-- Formulario --}}
    
            <div class="row form-group">
                <label for="name">Titulo del Rol</label>
                <input id="name_rol" type="text" class="form-control" name="name" required autofocus autocomplete="off">
            </div>
            <div class="row form-group">
                <label for="">Todos los permisos</label>
                <div class="form-group">
                    <div class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio" id="radio" name="customRadio" value="Admin">
                        <label for="radio" class="custom-control-label">Si</label>
                    </div>
                    <div class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio" id="radio2" name="customRadio" checked="web" value="no">
                        <label for="radio2" class="custom-control-label">No</label>
                    </div>
                </div>
            </div>
            <h5>Lista de Permisos</h5>
            @php
            $i = 0;
            @endphp
            <a class="" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false">Ver Todo</a>
            <div class="w-20 border mx-4 my-4">
                <h6 class="pt-3 pl-3">Permisos</h6>
                <hr>
                <ul class="mb-3">
                    @foreach($permisosAgrupados as $nombrePermiso => $permisos)
                        <li>
                        <a data-toggle="collapse" href="#Collapse{{++$i}}" role="button" aria-expanded="false"  data-target="#Collapse{{++$i}}">
                            <i class="fas fa-angle-right down"></i>
                            <strong>{{ $nombrePermiso  }}</strong>
                        </a>
                        <ul class="collapse multi-collapse" id="Collapse{{$i}}">
                            @foreach($permisos as $permiso)
                                <li>
                                <div class="custom-control custom-checkbox">
                                    <input class="custom-control-input check" type="checkbox" name="permisos[]" id="{{$permiso->id}}" value="{{$permiso->id}}">
                                    <label for="{{$permiso->id}}" class="custom-control-label">{{$permiso->description}}</label>
                                </div>
                                </li>
                            @endforeach
                        </ul>
                        </li>
                        
                    @endforeach
                </ul>
            </div>


            {{-- Fin Formulario --}}
            <hr>
            <div class="row form-group">
                <div class="col-md-12 text-right">
                    <button type="submit" class="btn btn-sucess btn-sm" id="btn-submit">
                        <i class="fa fa-check"></i> Agregar
                    </button>
                </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
@endsection

@section('content')
    <div class="container p-5">
        <div class="card card-outline card-danger">
            <div class="card-title p-4 border-bottom">
                <div class="row">
                    <div class="col-md-6">

                        <h4><i class="fa fa-th"></i> Roles Registrados</h4>
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="#" class="btn btn-primary btn-sm shadow" id="btn-add" data-toggle="modal" data-target="#new-system"><i class="fa fa-plus"></i> Nuevo Rol</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <td class="text-center">ID</td>
                            <td class="text-center">Rol</td>
                            <td class="text-center">Acciones</td>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    $(document).ready(function(){
        var id = "";
        start()
        // Formato index(ruta, parametro, botones)
        // Los botones deben ir en formato json dentro de un array, ejemplo:
        async function start (){
           let table =  await index('/roles'),
               template = "";  

           table.forEach(e => {
            template+= `
                <tr>
                    <td class="text-center">${e.id}</td>
                    <td class="text-center">${e.name}</td>
                    <td class="text-right">
                        <a href="#" data-toggle="modal" data-target="#new-system" class="btn btn-warning rounded-circle btn-sm edit shadow" data-id="${e.id}"><i class="fas fa-edit"></i></a>
                        <a href="#" class="btn btn-danger rounded-circle btn-sm del shadow" data-id="${e.id}"><i class="fas fa-trash"></i></a>
                            
                    </td>
                </tr>
            `;
           });

           $('tbody').html(template);

           $('.table').DataTable();
        }

        // Reiniciar formulario de registro
        $('#btn-add').click(function(){
            $('#form-edit').trigger('reset');
            $('#form-add').trigger('reset');
            $('#form-edit').attr('id', 'form-add');
            $('#btn-submit').attr('class', 'btn btn-success btn-lg').html('<i class="fa fa-circle-check"></i> Finalizar');
            $('#modal-title').html('<i class="fa fa-plus"></i> Registrar Rol');
        });


        // Enviar formulario de registro
        $(document).on('submit', '#form-add', function(e){
            e.preventDefault();
            let form = new FormData(this);
                form.delete('_method');
            store('/roles/store', form);
            index('/roles');
        })
        
        // Eliminar registro
        $(document).on('click', '.del', function(e){
            e.preventDefault();
            id = $(this).attr('data-id');
            destroy('/roles/destroy/', id);
            setTimeout(() => {
                index('/roles');
                id = "";
            }, 1500);            
        })

        // Obtener datos de un registro
        $(document).on('click', '.edit', function(e){
            e.preventDefault();
            id = $(this).attr('data-id');
            $('#form-add').attr('id', 'form-edit');
            $('#btn-submit').attr('class', 'btn btn-primary btn-sm').html('<i class="fa fa-check"></i> Modificar registro');
            $('#modal-title').html('<i class="fa fa-edit"></i> Modificar Rol');
            //show('/roles/show/', id);
            $('#new-system').modal('show');

            $.ajax({
            type: "GET",
            url: '/roles/show/'+id,
            dataType: 'json',
            success: function(res){

            $("#name_rol").val(res.data.name)
            $('.check').prop('checked', false);
            res.permisos.forEach(e => {
                    
                    $("#"+e.id).prop('checked', true);
                })

            }, error : function(res) {
                console.log(res)
            },   
        })
        })

        // Enviar formulario de actualización de registro
        $(document).on('submit', '#form-edit', function(e){
            e.preventDefault();
            let form = new FormData(this);
                form.append('_method', 'PUT');
            update('/roles/update/', form, id);
            index('/roles');
            $('#new-system').modal('hide');
        })       
        
        $(document).on('change', 'input[name=customRadio]', function(e){
            var radio = $(this).val();
            if(radio=="Admin"){
                $('.check').prop('checked', true);
            }else{
                $('.check').prop('checked', false);
            }
        })
    });
  </script>
@endsection