@extends('layouts.menu')

@section('title', 'Grupos')

@section('contenido')

    <div class="card bg-light shadow-none p-3 mb-5 bg-light rounded">
        <div class="card-header card-header-pr77 mb-3">
            <div class="row justify-content-between">
                <div class="col-8">
                    <div class="row justify-content-between">
                        <div class="col-6">
                            <h2><b>Grupos</b></h2>
                        </div>
                        <div class="col-6" style=" display: flex; justify-content: center; align-items: center; ">

                        </div>
                    </div>
                </div>
                <div class="col-2" style="display: flex; justify-content: end;">
                    <button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal"
                            data-bs-target="#exampleModal">
                        <i class="fa-solid fa-users me-1"></i>
                        Agregar
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <table id="tabla_listado_grupos" class="table table-striped compact">
                <thead class="table-dark">
                <tr class="text-center">
                    <th >Id</th>
                    <th >Usuario</th>
                    <th >Encargados</th>
                    <th >Opciones</th>
                </tr>
                </thead>
                <tbody>
                @if(!empty($listado))
                    @foreach ($listado as $key => $item)
                        <tr>
                            <td align="center">{{$item->id}}</td>
                            <td>{{$item->usuario->usuario}}</td>
                            <td>{{$item->empleado->nombre}} {{$item->empleado->apellido_paterno}} {{$item->empleado->apellido_materno}}</td>
                            <td>
                                <div class="d-grid gap-2 d-md-block">
                                    <button type="button" class="btn btn-primary mt-1 mb-1" onclick="">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </button>
                                    <button class="btn btn-danger" onclick="eliminarRelacion({{$item->id}})">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
            </table>
        </div>

        <!-- Modal Agregar Empleado -->
        <div class="modal fade" id="exampleModal" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Crear Grupo</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form enctype="multipart/form-data" method="post" id="formulario_grupo"
                              novalidate>
                            @csrf
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <label for="usuario" class="form-label">Usuario</label>
                                    <div class="input-group mb-3">
                                        <a href="#" class="btn btn-primary btn-sm">
                                            Agregar
                                        </a>
                                        <span class="input-group-text">
                                                    <i class="fa-solid fa-user"></i>
                                        </span>
                                    </div>
                                    <div class="input-group mb-3">
                                        <select id="usuario" class="form-select md-form">
                                        </select>
                                        <div id="message_error_usuario">
                                            <span id='usuario_error'></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <label for="puerta" class="form-label">Empleado</label>
                                    <div class="input-group mb-3">
                                        <a href="" class="btn btn-primary btn-sm">
                                            Agregar
                                        </a>
                                        <span class="input-group-text">
                                                    <i class="fa-solid fa-user"></i>
                                                </span>
                                    </div>
                                    <div class="input-group mb-3">
                                        <select id="empleado" class="form-select md-form">
                                        </select>
                                        <div id="message_error_empleado">
                                            <span id='empleado_error'></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                    <i class="fa-solid fa-square-mark me-1"></i>
                                    Cerrar
                                </button>
                                <button type="button" class="btn btn-primary" onclick="guardarGrupo()">
                                    <i class="fa-regular fa-floppy-disk me-1"></i>
                                    Guardar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
@stop

@section('scripts')
    <script>
        const token = document.head.querySelector('meta[name="csrf-token"]');
        $(document).ready(function () {
            CrearTabla('tabla_listado_grupos');
        });

        $(document).ready(function () {
            $("#usuario").select2({
                dropdownParent: $('#exampleModal'),
                theme: "material",
                placeholder: "Buscar Usuario",
                language: {
                    noResults: function () {
                        return "No hay resultados";
                    },
                    searching: function () {
                        return "Buscando...";
                    },
                    errorLoading: function () {
                        return "No se pudieron cargar los resultados.";
                    },
                },
                tags: false,
                ajax: {
                    url: "{{route('grupos.usuarios')}}",
                    type: "POST",
                    dataType: "json",
                    delay: 250,
                    data: function (params) {
                        return {
                            _token: token.content,
                            search: params.term, // search term
                        };
                    },
                    processResults: function (response) {
                        console.log(response);
                        return {
                            results: response,
                        };
                    },
                    cache: true,
                }
            });
            $("#empleado").select2({
                dropdownParent: $('#exampleModal'),
                theme: "material",
                placeholder: "Buscar Empleado",
                language: {
                    noResults: function () {
                        return "No hay resultados";
                    },
                    searching: function () {
                        return "Buscando...";
                    },
                    errorLoading: function () {
                        return "No se pudieron cargar los resultados.";
                    },
                },
                tags: true,
                ajax: {
                    url: "{{route('grupos.empleados')}}",
                    type: "POST",
                    dataType: "json",
                    delay: 250,
                    data: function (params) {
                        return {
                            _token: token.content,
                            search: params.term, // search term
                        };
                    },
                    processResults: function (response) {
                        console.log(response);
                        return {
                            results: response,
                        };
                    },
                    cache: true,
                },
            });
        });

        function guardarGrupo() {
            $('#Loader').fadeIn();
            let datos = new FormData();
            datos.append('usuario', document.getElementById('usuario').value)
            datos.append('empleado', document.getElementById('empleado').value)
            fetch("{{route('grupos.crear')}}", {
                headers: {
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "post",
                credentials: "same-origin",
                body: datos
            }).then(res => res.json())
                .catch(function (error) {
                    console.log(error.errors)
                })
                .then(function (response) {
                    $('#Loader').fadeOut();
                    console.log(response)
                    if (response.status == true) {
                        message(true, 'success', 1500, response.message)
                        setTimeout(function () {
                            location.reload()
                        }, 1500)
                    } else {
                        var errors = response.errors;
                        $.each(errors, function (key, val) {
                            console.log("#" + key + "_error")
                            console.log(val)
                            $("#" + key + "_error").text(val[0]);
                            var elemento = document.getElementById(`${key}`);
                            elemento.className += " is-invalid";
                            var elemento = document.getElementById("message_error_" + key);
                            elemento.className += " invalid-feedback";
                            setTimeout(function () {
                                $(`#${key}`).removeClass("is-invalid")
                                $(`#message_error_ + ${key}`).removeClass("invalid-feedback")
                            }, 3000);
                        });
                    }


                })
        }

        function eliminarRelacion(id) {
            Swal.fire({
                title: 'Esta seguro?',
                text: "Este proceso es irreversible!",
                icon: 'warning',
                toast: true,
                showCancelButton: true,
                cancelButtonColor: '#808080',
                confirmButtonColor: '#e62e1b',
                confirmButtonText: 'Si, eliminar!',
                cancelButtonText: 'Cancelar',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#Loader').fadeIn();
                    fetch(`/eliminarGrupo/${btoa(id)}`, {
                        headers: {
                            "Content-Type": "application/json",
                            "Accept": "application/json",
                            "X-CSRF-Token": '{{csrf_token()}}',
                        },
                        method: "delete",
                        credentials: "same-origin",
                    }).then(res => res.json())
                        .catch(function (error) {
                            console.log(error)
                        })
                        .then(function (response) {
                            console.log(response)
                            $('#Loader').fadeOut();
                            message(true, 'success', 1500, response.message)
                            setTimeout(function () {
                                location.reload();
                            }, 1500);
                        })

                }
            });
        }

    </script>

@stop