@extends('layouts.menu')

@section('title', 'Agregar Servicio')

@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>Servicios</b></h2>
                        </div>
                    </div>
                </div>

                <div class="col-2">
                    <div class="row">
                        <div class="btn-group">
                            <button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#servicioModal">
                                <i class="fa-solid fa-building me-1"></i>
                                Servicio
                            </button>
                            <button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#exampleModal">
                                <i class="fa-solid fa-arrow-right-arrow-left me-1"></i>
                                Relacion
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <table id="tabla_listado_servicios" class="table table-striped compact">
                <thead class="table-dark">
                <tr>
                    <td>Servicio</td>
                    <td>Puertas</td>
                    <td class="text-center">Opciones</td>
                </tr>
                </thead>
                <tbody>
                @if(!empty($servicios))
                    @foreach ($servicios as $key => $servicio)
                        <tr>
                            <td>{{$servicio->servicio}}</td>
                            <td>
                                @foreach(puertas_servicio($servicio->id) as $puerta)
                                    <span class="badge rounded-pill text-dark bg-info">{{$puerta->puerta}}</span>
                                @endforeach
                            </td>
                            <td>
                                <div class="d-grid gap-2 d-md-block">
                                    <button class="btn btn-primary mb-1"
                                            onclick="reporteServicio({{$servicio->id}},'{{$servicio->servicio}}')">
                                        <i class="fa-solid fa-clipboard-list"></i>
                                    </button>
                                    <button type="button" class="btn btn-primary mb-1"
                                            onclick="editarServicio({{$key}})">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </button>
                                    <button class="btn btn-danger mb-1" onclick="eliminarServicio({{$servicio->id}})">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
            </table>
        </div>

        <!-- Modal Agregar Relacion Servicio Zona -->
        <div class="modal fade" id="exampleModal" tabindex="-1" 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">AGREGAR SERVICIO - ZONA</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <form enctype="multipart/form-data" method="post" id="formulario_relacion" novalidate>
                                @csrf
                                <div class="row">

                                    <div class="col-12 mb-2">
                                        <label for="servicio" class="form-label">Servicios</label>
                                        <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="fa-solid fa-building"></i>
                                                </span>
                                            <select id="seleccione_servicio" name="seleccione_servicio"
                                                    class='form-control'
                                                    required></select>
                                            <div id="message_error_seleccione_servicio">
                                                <span id='seleccione_servicio_error'></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 mb-2">
                                        <label for="puerta" class="form-label">Zonas</label>
                                        <div class="input-group mb-2">
                                                <span class="input-group-text"><i
                                                            class="fa-solid fa-door-open"></i></span>
                                            <a href="{{route('AgregarPuerta')}}" class="btn btn-primary btn-sm">
                                                Agregar
                                            </a>
                                        </div>
                                        <select id="seleccione_zona" name="seleccione_zona" class="form-control"
                                                required> </select>
                                        <div id="message_error_seleccione_zona">
                                            <span id='seleccione_zona_error'></span>
                                        </div>
                                    </div>

                                </div>

                                <div class="row mt-5" style="display: flex;justify-content: center;">
                                    <div class="col-4">
                                        <div class="d-grid gap-2">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                <i class="fa-solid fa-square-xmark me-1"></i>
                                                Cerrar
                                            </button>
                                            <button type="button" class="btn btn-primary"
                                                    onclick="guardarRelacionServicioZona()"><i
                                                        class="fa-solid fa-floppy-disk"></i> Guardar
                                            </button>
                                        </div>
                                    </div>
                                </div>

                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!-- Modal Agregar Servicio -->
        <div class="modal fade" id="servicioModal" tabindex="-1" aria-labelledby="servicioModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="servicioModalLabel">Agregar Servicio</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <form enctype="multipart/form-data" method="post" id="formulario_servicio" novalidate>
                                @csrf
                                <div class="row">
                                    <div class="col-12 mb-2">
                                        <label for="servicio" class="form-label">Nombre del servicio</label>
                                        <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="fa-solid fa-building me-1"></i>
                                                </span>
                                            <input type="text" class="form-control" id="servicio" name="servicio"
                                                   required>
                                            <div id="message_error_servicio">
                                                <span id='servicio_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-xmark me-1"></i>
                                        Cerrar
                                    </button>
                                    <button type="button" onclick="guardarServicio()" class="btn btn-primary">
                                        <i class="fa-regular fa-floppy-disk me-1"></i>
                                        Guardar
                                    </button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!-- Modal Editar Servicio -->
        <div class="modal fade" id="editar_servicio_modal" tabindex="-1" aria-labelledby="editar_servicio_modal_label"
             aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editar_servicio_modal_label">Editar Servicio</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <form enctype="multipart/form-data" method="post" id="formulario_editar_servicio"
                                  novalidate>
                                @csrf
                                <div class="row">
                                    <div class="col-12 mb-2">
                                        <label class="form-label">Nombre del servicio</label>
                                        <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="fa-solid fa-building me-1"></i>
                                                </span>
                                            <input type="hidden" id="id_servicio_editar">
                                            <input type="text" class="form-control" id="servicio_editar"
                                                   name="servicio_editar"
                                                   required>
                                            <div id="message_error_servicio_editar">
                                                <span id='servicio_editar_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-xmark me-1"></i>
                                        Cerrar
                                    </button>
                                    <button type="button" onclick="actualizarServicio()" class="btn btn-primary">
                                        <i class="fa-regular fa-floppy-disk me-1"></i>
                                        Guardar
                                    </button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>

@stop

@section('scripts')
    <script>
        const token = document.head.querySelector('meta[name="csrf-token"]');
        let PuertaAsignada = {"nombre": '', "Id": ''};
        let arrayServicios = @json($servicios);
        $(document).ready(function () {
            CrearTabla('tabla_listado_servicios');
        })

        function reporteServicio(id_servicio, nombre_servicio) {
            window.location.replace(`generarReporteServicio/${id_servicio}/${nombre_servicio}`);
        }

        function guardarServicio() {
            $('#Loader').fadeIn();
            var datos = new FormData($('#formulario_servicio')[0]);
            fetch("{{route('servicios.crearServicio')}}", {
                headers: {
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "post",
                credentials: "same-origin",
                body: datos
            }).then(res => res.json())
                .catch(function (error) {
                    console.error('Error:', error)
                })
                .then(function (response) {

                    $('#Loader').fadeOut();
                    if (response.status == true) {
                        message('false', 'success', 1500, response.message)
                        setTimeout(function () {
                            location.reload()
                        }, 1500);
                    } else {
                        var errors = response.errors;
                        $.each(errors, function (key, val) {
                            $("#" + key + "_error").text(val[0]);
                            var elemento = document.getElementById(`${key}`);
                            console.log(elemento)
                            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 guardarRelacionServicioZona() {
            $('#Loader').fadeIn();
            datos = new FormData($('#formulario_relacion')[0]);
            console.log(datos);
            fetch("{{route('servicios.crearRelacionServicioZona')}}", {
                headers: {
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "post",
                credentials: "same-origin",
                body: datos
            }).then(res => res.json())
                .catch(function (error) {
                    console.error('Error:', error)
                })
                .then(function (response) {

                    $('#Loader').fadeOut();
                    if (response.status == true) {
                        message(false, 'success', 1500, response.message)
                        setTimeout(function () {
                            location.reload()
                        }, 1500);
                    } else if (response.status == false) {
                        var errors = response.errors;
                        $.each(errors, function (key, val) {
                            $("#" + key + "_error").text(val[0]);
                            var elemento = document.getElementById(`${key}`);
                            console.log(elemento)
                            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);
                        });
                    } else {
                        message(false, 'question', 1500, response.message)
                        $("#seleccione_zona").empty();
                        $("#seleccione_servicio").empty();
                    }
                });
        }

        function editarServicio(key) {
            $("#editar_servicio_modal").modal('toggle')
            document.getElementById('id_servicio_editar').value = arrayServicios[key].id
            document.getElementById('servicio_editar').value = arrayServicios[key].servicio
        }

        function actualizarServicio() {
            $('#Loader').fadeIn();
            var datos = new FormData();
            datos.append('servicio', document.getElementById('servicio_editar').value)
            datos.append('id', document.getElementById('id_servicio_editar').value)
            fetch("{{route('servicios.actualizarServicio')}}", {
                headers: {
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "post",
                credentials: "same-origin",
                body: datos
            }).then(res => res.json())
                .catch(function (error) {
                    console.error('Error:', error)
                })
                .then(function (response) {

                    $('#Loader').fadeOut();
                    if (response.status == true) {
                        message(false, 'success', 1500, response.message)
                        setTimeout(function () {
                            location.reload()
                        }, 1500);
                    } else if (response.status == false) {
                        var errors = response.errors;
                        $.each(errors, function (key, val) {
                            $("#" + key + "_editar" + "_error").text(val[0]);
                            var elemento = document.getElementById(`${key}_editar`);
                            elemento.className += " is-invalid";
                            var elemento = document.getElementById("message_error_" + key + "_editar");
                            elemento.className += " invalid-feedback";
                            setTimeout(function () {
                                $(`#${key}_editar`).removeClass("is-invalid")
                                $(`#message_error_ + ${key} +_editar`).removeClass("invalid-feedback")
                            }, 3000);
                        });
                    } else {
                        message(false, 'question', 1500, response.message)
                        $("#seleccione_zona").empty();
                        $("#seleccione_servicio").empty();
                    }
                });
        }

        function eliminarServicio(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("{{route('servicios.eliminarServicio')}}", {
                        headers: {
                            "Content-Type": "application/json",
                            "Accept": "application/json",
                            "X-Requested-With": "XMLHttpRequest",
                            "X-CSRF-Token": '{{csrf_token()}}',
                        },
                        method: "post",
                        credentials: "same-origin",
                        body: JSON.stringify({
                            id: id
                        })
                    }).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);
                        })

                }
            });
        }

        $(document).ready(function () {

            $("#seleccione_zona").select2({
                placeholder: "Buscar Zona",
                theme: "material",
                dropdownParent: $('#exampleModal'),
                language: {
                    noResults: function () {
                        return "No se encontraron zonas";
                    },
                    searching: function () {
                        return "Buscando...";
                    },
                    errorLoading: function () {
                        return "No se pudieron cargar los resultados.";
                    },
                },
                tags: false,
                ajax: {
                    url: "{{route('puertas.getPuerta')}}",
                    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,
                }
            });
            $("#seleccione_servicio").select2({
                placeholder: "Buscar Servicio",
                theme: "material",
                dropdownParent: $('#exampleModal'),
                language: {
                    noResults: function () {
                        return "No hay resultados";
                    },
                    searching: function () {
                        return "Buscando...";
                    },
                    errorLoading: function () {
                        return "Escribe un servicio.";
                    },
                },
                tags: true,
                ajax: {
                    url: "{{route('servicios.getServicio')}}",
                    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,
                },
            });
        });
    </script>

@stop