@extends('layouts.app')

@section('title')
    Gestión de menus
@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 Sistema</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">
                <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">
                    <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> Gestión de Menú</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 sistema</a> --}}
                        
                    </div>
                </div>
            </div>
            <div class="card-body">
                
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    $(document).ready(function(){
        var id = "";

        // Formato index(ruta, parametro, botones)
        // Los botones deben ir en formato json dentro de un array, ejemplo:
        /* 
            [{
                url: "/systems", // Ruta del boton,
                style: "danger", // Color del boton,
                modal: true, // Determina si el botón usará un modal,
                modalId: "#miModal", // Determina si el botón usará un modal,
                icon:  "edit", // Coloca el icono del botón (utilizar solo la ultimas palabras de las clases de Font Awesome v5.15),
            }]
        */

        // Mostrar registros
        index('/systems');

        // 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 sistema');
        });


        // Enviar formulario de registro
        $(document).on('submit', '#form-add', function(e){
            e.preventDefault();
            let form = new FormData(this);
                form.delete('_method');
            store('/systems/store', form);
            index('/systems');
        })
        
        // Eliminar registro
        $(document).on('click', '.del', function(e){
            e.preventDefault();
            id = $(this).attr('data-id');
            destroy('/systems/destroy/', id);
            setTimeout(() => {
                index('/systems');
                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 sistema');
            show('/systems/show/', id);
            $('#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('/systems/update/', form, id);
            index('/systems');
            $('#new-system').modal('hide');
        })        
    });
  </script>
@endsection