@extends('layouts.app')

@section('title')
    Gestión de módulos
@endsection

@section('modals')
<!-- 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="titulo">Titulo del Módulo</label>
                <input type="text" class="form-control" name="titulo" id="titulo">
            </div>
            <div class="row form-group">
                <label for="descripcion">Descripción</label>
                <input type="text" class="form-control" name="descripcion" id="descripcion">
            </div>
            <div class="row form-group">
                <label for="icono">Icono</label>
                <input type="text" class="form-control" name="icono" id="icono" placeholder="Ejem.- fa fa-edit">
            </div>
            <div class="row form-group">
                <label for="controlador">¿Usa controlador?
                    <input type="checkbox" name="controlador" id="controlador" value="S">
                </label>
            </div>
            <div class="row form-group" id="div-controller-name" style="display: none">
                <label for="nombre_controlador">Nombre del controlador <span class="text-muted"><i>(opcional)</i></span></label>
                <input type="text" name="nombre_controlador" id="nombre_controlador" class="form-control" placeholder="Ejem - ModuloController">
                <label for="existente">User controlador existente
                    <input type="checkbox" id="existente" value="Si">
                </label>
            </div>
            <div class="row form-group" id="div-controller-exist" style="display: none">
                <label for="controlador_existente">Controladores existentes: </span></label>
                <select name="controlador_existente" id="controlador_existente" class="form-control">
                    @foreach ($arrFiles = scandir(base_path('app/Http/Controllers/')) as $item)
                        @if($item != "." && $item != ".." && $item != "Auth" && $item != "Controller.php")
                            <option>{{$item}}</option>
                        @endif
                    @endforeach
                </select>
            </div>
            <div class="row form-group">
                <label for="activo">Activo
                    <input type="checkbox" name="activo" id="activo" value="Si">
                </label>
            </div>
            {{-- Fin Formulario --}}
            <hr>
            <div class="row form-group">
                <div class="col-md-12 text-right">
                    <input type="hidden" name="sistema_id" value="{{$sistema->id}}">
                    <button type="submit" class="btn btn-sucess btn-sm" id="btn-submit">
                        <i class="fa fa-check"></i> Finalizar
                    </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> Módulos registrados del sistema: <br><span class="system-name font-weight-bold">{{$sistema->titulo}}</span></h4>
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="{{route('systems.list')}}" class="btn btn-dark btn-sm shadow"><i class="fas fa-long-arrow-alt-left"></i> Volver</a>
                        <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 módulo</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Título</th>
                                <th>Descripción</th>
                                <th>Controlador</th>
                                <th class="text-right">Acciones</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    $(document).ready(function(){
        var id = "";
        start()
        
        // Formato index(ruta, parametro, botones)
        // Mostrar registros
        async function start (){
           let table =  await index('/modules', {{$sistema->id}}),
               template = "";
           table.forEach(e => {
            template+= `
                <tr>
                    <td class="text-center"><i class="${e.icono}"></i></td>v
                    <td>${e.titulo}</td>
                    <td>${(e.descripcion != null) ? e.descripcion : "Sin descripción"}</td>
                    <td>${(e.controlador != "") ? e.controlador : "No usa controlador"}</td>
                    <td class="text-right">
                        <a href="/submodules/list/all/${e.id}" class="btn btn-dark rounded-circle btn-sm shadow" data-id="${e.id}" data-toggle="tooltip" data-placement="top" data-html="true" title="<p>Ver Submódulos</p>"><i class="fas fa-sitemap"></i></a>
                        <a href="#" data-toggle="modal" data-target="#new-system" class="btn btn-warning rounded-circle btn-sm edit shadow" data-id="${e.id}" data-toggle="tooltip" data-placement="top" data-html="true" title="<p>Editar sistema</p>"><i class="fas fa-edit"></i></a>
                        <a href="#" class="btn btn-danger rounded-circle btn-sm del shadow" data-id="${e.id}" data-toggle="tooltip" data-placement="top" data-html="true" title="<p>Eliminar sistema</p>"><i class="fas fa-trash"></i></a>
                            
                    </td>
                </tr>
            `;
           });

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

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

           $('.table').DataTable({language: translate});

           $(function(){
                $('.btn').tooltip()
            })
        } 


        // 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 módulo');
        });


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

        // Obtener datos de un registro
        $(document).on('click', '.edit', async function(e){
            e.preventDefault();
            id = $(this).attr('data-id');
            let row = await show('/modules/show/', id);
            

            $('input[name=titulo]').val(row.titulo)
            $('input[name=descripcion]').val(row.descripcion)
            $('input[name=icono]').val(row.icono)

            if(row.controlador != ""){
                $('input[name=controlador]').attr('checked', 'checked')
                $('#div-controller-name').show();
                $('input[name=nombre_controlador]').val(row.controlador)
            }

            if(row.activo == "Si"){
                $('input[name=activo]').attr('checked', 'checked')
            }

            $('#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 sistema');
            $('#new-system').modal('show');
        })

        // 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('/modules/update/', form, id);
            start();
            $('#new-system').modal('hide');
        })        

        $(document).on('click', 'input[name=controlador]', function(){
            let controlador = $(this);
            if(controlador.prop('checked')){
                $('#div-controller-name').show();
            }
        })

        $(document).on('click', '#existente', function(){
            let controlador = $(this);
            if(controlador.prop('checked')){
                $('#div-controller-exist').show();
                $('#nombre_controlador').attr('disabled','disabled')
                $('#controlador_existente').removeAttr('disabled')
            }else{
                $('#div-controller-exist').hide();
                $('#controlador_existente').attr('disabled','disabled')
                $('#nombre_controlador').removeAttr('disabled')
            }
        })
    });
  </script>
@endsection