@extends('layouts.menu')

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

@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>Zonas</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-door-closed mr-2"></i>
                        Agregar
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">

        <!--<form enctype="multipart/form-data" method="post" id="FormularioPuerta">
                        @csrf
                <div class="row">

                    <div class="col-12 mb-3">
                        <label for="puerta" class="form-label">Nombre de la puerta</label>
                        <div class="input-group mb-3">
                            <span class="input-group-text"><i class="fa-solid fa-door-open"></i></span>
                            <input type="text" class="form-control" id="puerta" name="puerta">
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-12 mb-3">
                        <label for="puestos" class="form-label">Puestos Requeridos</label>
                        <div class="input-group mb-3">
                            <span class="input-group-text"><i class="fa-solid fa-users"></i></span>
                            <input type="tel" class="form-control" id="puestos" name="puestos"
                                   pattern="^[0-9]+([.][0-9]+)?$" onkeypress="return SoloNumeros(event);"
                                           autocomplete="off" onkeyup="ValidarInput(this)">
                                </div>
                            </div>

                            <div class="col-lg-4 col-sm-12 mb-3">
                                <label for="sueldo_general" class="form-label">Sueldo Quincenal Base</label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="fa-solid fa-dollar-sign"></i></span>
                                    <input type="text" class="form-control" id="sueldo_general" name="sueldo_general"
                                           pattern="^[0-9]+([.][0-9]+)?$" onkeypress="return SoloNumeros(event);"
                                           autocomplete="off" onkeyup="ValidarInput(this)">
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-12 mb-3">
                                <label for="bono_general" class="form-label">Bono Base</label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i
                                                class="fa-solid fa-hand-holding-dollar"></i></span>
                                    <input type="text" class="form-control" id="bono_general" name="bono_general"
                                           pattern="^[0-9]+([.][0-9]+)?$" onkeypress="return SoloNumeros(event);"
                                           autocomplete="off" onkeyup="ValidarInput(this)">
                                </div>
                            </div>

                        </div>

                        <div class="row justify-content-center">
                            <div class="col-4">
                                <button type="button" class="btn btn-primary btn-lg" onclick="GuardarPuerta()"><i
                                            class="fa-regular fa-floppy-disk"></i> Guardar
                                </button>
                            </div>
                        </div>

                    </form>--->
            <table id="tabla_listado_puertas" class="table table-striped compact">
                <thead class="table-dark">
                <tr>
                    <td>Zona</td>
                    <td>Puestos</td>
                    <td class="text-center">Opciones</td>
                </tr>
                </thead>
                <tbody>
                @foreach ($puertas as $key => $puerta)
                    <tr>
                        <td>{{$puerta->puerta}}</td>
                        <td>{{$puerta->puestos}}</td>
                        <td align="center">
                            <button type="button" class="btn btn-primary btn-sm me-3" onclick="editarPuerta({{$key}})">
                                <i
                                        class="fa-solid fa-pen-to-square ms-2"></i> Editar
                            </button>
                            <button class="btn btn-danger btn-sm" onclick="eliminarPuerta({{$puerta->id}})">
                                <i class="fa-solid fa-trash ms-1"></i> Eliminar
                            </button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        <!-- Modal Agregar Puerta -->
        <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 Zona</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="FormularioZona"
                              novalidate>
                            @csrf
                            <div class="row">

                                <div class="col-12 mb-3">
                                    <label for="zona" class="form-label">Nombre de la Zona</label>
                                    <div class="input-group mb-3">
                                                <span class="input-group-text"><i
                                                            class="fa-solid fa-door-open"></i></span>
                                        <input type="text" class="form-control" id="zona" name="zona" required>
                                        <div id="message_error_zona">
                                            <span id='zona_error'></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="puestos" class="form-label">Puestos Requeridos</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="fa-solid fa-users"></i></span>
                                        <input type="tel" class="form-control" id="puestos" name="puestos"
                                               pattern="^[0-9]+([.][0-9]+)?$"
                                               onkeypress="return SoloNumeros(event);"
                                               autocomplete="off" onkeyup="ValidarInput(this)" required>
                                        <div id="message_error_puestos">
                                            <span id='puestos_error'></span>
                                        </div>
                                    </div>
                                </div>

                                <!--<div class="col-lg-4 col-sm-12 mb-3">
                                    <label for="sueldo_general" class="form-label">Sueldo Quincenal Base</label>
                                    <div class="input-group mb-3">
                                                <span class="input-group-text"><i
                                                            class="fa-solid fa-dollar-sign"></i></span>
                                        <input type="text" class="form-control" id="sueldo_general"
                                               name="sueldo_general"
                                               pattern="^[0-9]+([.][0-9]+)?$"
                                               onkeypress="return SoloNumeros(event);"
                                               autocomplete="off" onkeyup="ValidarInput(this)" required>
                                        <div id="message_error_sueldo_general">
                                            <span id='sueldo_general_error'></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-12 mb-3">
                                    <label for="bono_general" class="form-label">Bono Base</label>
                                    <div class="input-group mb-3">
                                    <span class="input-group-text"><i
                                                class="fa-solid fa-hand-holding-dollar"></i></span>
                                        <input type="text" class="form-control" id="bono_general"
                                               name="bono_general"
                                               pattern="^[0-9]+([.][0-9]+)?$"
                                               onkeypress="return SoloNumeros(event);"
                                               autocomplete="off" onkeyup="ValidarInput(this)" required>
                                        <div id="message_error_bono_general">
                                            <span id='bono_general_error'></span>
                                        </div>
                                    </div>
                                </div>
                                --->
                            </div>

                            <!--<div class="row justify-content-center">
                                <div class="col-3">
                                    <button type="button" class="btn btn-primary btn-lg"
                                            onclick="GuardarPuerta()"><i
                                                class="fa-regular fa-floppy-disk"></i> Guardar
                                    </button>
                                </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="GuardarPuerta()" class="btn btn-primary">
                                    <i class="fa-regular fa-floppy-disk me-1"></i>
                                    Guardar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal Editar Puerta -->
        <div class="modal fade" id="modal_editar_zona" tabindex="-1" aria-labelledby="modal_editar_zona_label"
             aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modal_editar_zona_label">Editar Zona</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form method="post" id="formulario_editar_zona"
                              novalidate>
                            @csrf
                            <div class="row">
                                <input type="hidden" id="zona_id_editar">
                                <div class="col-12 mb-3">
                                    <label for="zona" class="form-label">Nombre de la zona</label>
                                    <div class="input-group mb-3">
                                                <span class="input-group-text"><i
                                                            class="fa-solid fa-door-open"></i></span>
                                        <input type="text" class="form-control" id="zona_editar" name="zona_editar"
                                               required>
                                        <div id="message_error_zona_editar">
                                            <span id='zona_editar_error'></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-sm-12 mb-3">
                                    <label for="puestos" class="form-label">Puestos Requeridos</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="fa-solid fa-users"></i></span>
                                        <input type="tel" class="form-control" id="puestos_editar" name="puestos_editar"
                                               pattern="^[0-9]+([.][0-9]+)?$"
                                               onkeypress="return SoloNumeros(event);"
                                               autocomplete="off" onkeyup="ValidarInput(this)" required>
                                        <div id="message_error_puestos_editar">
                                            <span id='puestos_editar_error'></span>
                                        </div>
                                    </div>
                                </div>

                                <!---<div class="col-lg-4 col-sm-12 mb-3">
                                    <label for="sueldo_general" class="form-label">Sueldo Quincenal Base</label>
                                    <div class="input-group mb-3">
                                                <span class="input-group-text"><i
                                                            class="fa-solid fa-dollar-sign"></i></span>
                                        <input type="text" class="form-control" id="sueldo_general_editar"
                                               name="sueldo_general_editar"
                                               pattern="^[0-9]+([.][0-9]+)?$"
                                               onkeypress="return SoloNumeros(event);"
                                               autocomplete="off" onkeyup="ValidarInput(this)" required>
                                        <div id="message_error_sueldo_general_editar">
                                            <span id='sueldo_general_editar_error'></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-12 mb-3">
                                    <label for="bono_general" class="form-label">Bono Base</label>
                                    <div class="input-group mb-3">
                                    <span class="input-group-text"><i
                                                class="fa-solid fa-hand-holding-dollar"></i></span>
                                        <input type="text" class="form-control" id="bono_general_editar"
                                               name="bono_general_editar"
                                               pattern="^[0-9]+([.][0-9]+)?$"
                                               onkeypress="return SoloNumeros(event);"
                                               autocomplete="off" onkeyup="ValidarInput(this)" required>
                                        <div id="message_error_bono_general_editar">
                                            <span id='bono_general_editar_error'></span>
                                        </div>
                                    </div>
                                </div>
                                -->
                            </div>

                            <!--<div class="row justify-content-center">
                                <div class="col-3">
                                    <button type="button" class="btn btn-primary btn-lg"
                                            onclick="GuardarPuerta()"><i
                                                class="fa-regular fa-floppy-disk"></i> Guardar
                                    </button>
                                </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="actualizarPuerta()" class="btn btn-primary">
                                    <i class="fa-regular fa-floppy-disk me-1"></i>
                                    Guardar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('scripts')

    <script>
        $(document).ready(function () {
            CrearTabla('tabla_listado_puertas');
        });
        let arrayPuertas = @json($puertas);
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        /*(function () {
            'use strict'

            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.querySelectorAll('.needs-validation')

            // Loop over them and prevent submission
            Array.prototype.slice.call(forms)
                .forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }
                        form.classList.add('was-validated')
                    }, false)
                })
            //GuardarPuerta()
        })()*/
        function editarPuerta(key) {
            console.log(arrayPuertas[key])
            $("#modal_editar_zona").modal('toggle')
            document.getElementById("zona_id_editar").value = arrayPuertas[key].id
            document.getElementById("zona_editar").value = arrayPuertas[key].puerta
            document.getElementById("puestos_editar").value = arrayPuertas[key].puestos
            //document.getElementById("bono_general_editar").value = arrayPuertas[key].bono_general
            //document.getElementById("sueldo_general_editar").value = arrayPuertas[key].sueldo_general
        }

        function actualizarPuerta() {
            $('#Loader').fadeIn();
            var formData = new FormData();
            formData.append('id', document.getElementById("zona_id_editar").value);
            formData.append('zona', document.getElementById("zona_editar").value);
            formData.append('puestos', document.getElementById("puestos_editar").value);
            //formData.append('bono_general', document.getElementById("bono_general_editar").value);
            //formData.append('sueldo_general', document.getElementById("sueldo_general_editar").value);
            console.log(formData);
            fetch("{{route('puertas.actualizarPuerta')}}", {
                headers: {
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "post",
                credentials: "same-origin",
                body: formData
            }).then(res => res.json())
                .catch(function (error) {
                    $('#Loader').fadeOut();
                    console.log(error)
                })
                .then(function (response) {
                    $('#Loader').fadeOut();

                    if (response.success == true) {
                        Swal.fire({
                            title: 'Correcto!',
                            text: response.message,
                            icon: 'success',
                            timer: 1500,
                            timerProgressBar: true,
                            confirmButtonText: 'Entendido',
                            confirmationButton: false,
                            confirmButtonColor: '#F1C40F'
                        })
                        setTimeout(function () {
                            location.reload()
                        }, 1500);
                    } else {
                        var errors = response.errors;
                        $.each(errors, function (key, val) {
                            console.log("#" + key + "_error")
                            console.log(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);
                        });
                        /*Swal.fire({
                            title: 'Error',
                            text: response.message,
                            icon: 'warning',
                            timer: 2000,
                            timerProgressBar: true,
                            showConfirmButton: false,
                            confirmButtonColor: '#F1C40F'
                        })*/

                    }


                }).finally(function () {

            });
        }

        function GuardarPuerta() {

            $('#Loader').fadeIn();
            datos = new FormData($('#FormularioZona')[0]);
            console.log(datos);
            fetch("{{route('puertas.crearPuerta')}}", {
                headers: {
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "post",
                credentials: "same-origin",
                body: datos
            }).then(res => res.json())
                .catch(function (error) {
                    console.log(error.errors)
                    if (error.success == "false") {

                    }
                    console.error('Error:', error)
                })
                .then(function (response) {
                    $('#Loader').fadeOut();
                    console.log("----asignar cargo----------------------------");
                    console.log(response);
                    if (response.error) {
                        setTimeout(function () {
                            Swal.fire({
                                title: 'Error!',
                                text: response.error,
                                icon: 'error',
                                timer: 2000,
                                timerProgressBar: true,
                                confirmButtonText: 'Entendido',
                                confirmButtonColor: '#F1C40F'
                            }).then((result) => {
                                if (result.isConfirmed || result.isDismissed) {
                                    console.log('se cerro')
                                }
                            });
                        }, 500);
                    }
                    if (response.success == true) {
                        setTimeout(function () {
                            Swal.fire({
                                title: 'Correcto!',
                                text: response.message,
                                icon: 'success',
                                timer: 2000,
                                timerProgressBar: true,
                                confirmButtonText: 'Entendido',
                                confirmButtonColor: '#F1C40F'
                            }).then((result) => {
                                if (result.isConfirmed || result.isDismissed) {
                                    location.reload();
                                }
                            });
                            // setTimeout(function() {
                            //   location.reload();
                            // }, 2000);
                        }, 500);
                    } 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);
                        });
                    }


                }).finally(function () {

            });
        }

        function eliminarPuerta(id) {
            console.log(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('puertas.eliminarPuerta')}}", {
                        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();
                            Swal.fire({
                                position: 'center',
                                icon: 'success',
                                title: response.message,
                                showConfirmButton: false,
                                timer: 1500
                            })
                            setTimeout(function () {
                                location.reload();
                            }, 1500);
                        })

                }
            }).finally(function () {

            });

        }
    </script>

@stop