@extends('layouts.app')
@section('content')
    <div class="nk-content">
        <div class="container-fluid">
            <div class="nk-content-inner">
                <div class="nk-content-body">
                    <div class="nk-block">
                        <div class="row g-gs">
                            <div class="col-12">
                                <div class="card">
                                    <div class="nk-ecwg nk-ecwg6">
                                        <div class="card-inner">
                                            <div class="card-title-group">
                                                <div class="card-title">
                                                    <h6 class="titulo mb-1"><em class="icon ni ni-setting-alt"></em>
                                                        Mantenimiento: <span>Tecnicas</span></h6>
                                                    <button type="button" class="btn btn-sm btn-primary mb-2"
                                                        data-bs-toggle="modal" data-bs-target="#modalCrear">
                                                        <em class="icon ni ni-setting"></em><span>Crear</span>
                                                    </button>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="data">
                                                <div id="miTabla" style="height: 650px" class="ag-theme-alpine">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal para crear un registro --}}
    <div class="modal fade" id="modalCrear">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            @livewire('crear-tecnica')
        </div>
    </div>

    {{-- Modal para editar un registro --}}
    <div class="modal fade" id="modalEditar">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            @livewire('editar-tecnica')
        </div>
    </div>

    {{-- Modal para clonar un registro --}}
    <div class="modal fade" id="modalClonar">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            {{-- Llamamos al componente Livewire --}}
            @livewire('clonar-tecnica')
        </div>
    </div>

@section('css')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
@endsection
@section('js1')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
    <script src="{{ asset('js/modulos/parametro.js') }}"></script>

    {{-- Escuchando evento de Livewire --}}
    <script>
        document.addEventListener('livewire:init', () => {
            renderizarTabla();
            const Toast = Swal.mixin({
                toast: true,
                position: "top-end",
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.onmouseenter = Swal.stopTimer;
                    toast.onmouseleave = Swal.resumeTimer;
                }
            });
            Livewire.on('alert', (message) => {

                //nos debe llegar como parametros ['type' => 'success', 'message' => 'Registro guardado']
                Toast.fire({
                    icon: message[0].type, // 'success', 'error', etc.
                    title: message[0].message // El mensaje que quieres mostrar
                });
            });

            Livewire.on('cerrarModal', () => {
                $('#modalCrear').modal('hide');
                $('#modalEditar').modal('hide');
                $('#modalClonar').modal('hide');
                //emitir evento para limpiar errores
                Livewire.dispatch("limpiar-errores");
            });

            Livewire.on('actualizarTabla', () => {
                console.log('Renderizando la tabla despues de clonar');
                renderizarTabla();
            });
        });
    </script>
@endsection
@endsection