@extends('layouts.menu')

@section('title', 'Puestos')

@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>Puestos</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-id-card-clip me-1"></i>
                        Agregar
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <table id="tabla_listado_puertos" class="table table-striped compact">
                <thead class="table-dark">
                <tr>
                    <th width="5%">Id</th>
                    <th width="30%">Puesto</th>
                    <th width="30%">Sueldo</th>
                    <th width="20%" class="text-center">Opciones</th>
                </tr>
                </thead>
                <tbody>
                @foreach ($puestos as $key => $puesto)
                    <tr>
                        <td align="center">{{$puesto->id}}</td>
                        <td>{{$puesto->puesto}}</td>
                        <td>{{$puesto->sueldo}}</td>
                        <td align="center">

                            <button type="button" class="btn btn-primary btn-sm me-3" onclick="editarPuesto({{$key}})">
                                <i
                                        class="fa-solid fa-pen-to-square ms-2"></i> Editar
                            </button>
                            <button class="btn btn-danger btn-sm" onclick="eliminarPuesto({{$puesto->id}})">
                                <i class="fa-solid fa-trash ms-1"></i> Eliminar
                            </button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        <!-- Modal Agregar Puesto -->
        <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 Puesto</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="FormularioPuesto"
                              novalidate>
                            @csrf
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <label for="puerta" class="form-label">Nombre del puesto</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="puesto" name="puesto" required>
                                        <div id="message_error_puesto">
                                            <span id='puesto_error'></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <label for="sueldo" class="form-label">Sueldo</label>
                                    <div class="input-group mb-3">
                                                <span class="input-group-text">
                                                    <i class="fa-solid fa-sack-dollar"></i>
                                                </span>
                                        <input type="text" class="form-control" id="sueldo" name="sueldo" required>
                                        <div id="message_error_sueldo">
                                            <span id='sueldo_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="guardarPuesto()" class="btn btn-primary">
                                    <i class="fa-regular fa-floppy-disk me-1"></i>
                                    Guardar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal Editar Puesto -->
        <div class="modal fade" id="modal_editar_puesto" tabindex="-1" aria-labelledby="modal_editar_puesto_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_puesto_label">Editar Puesto</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_puesto"
                              novalidate>
                            @csrf
                            <div class="row">
                                <input type="hidden" id="puesto_id_editar">
                                <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="puesto_editar" name="puesto_editar"
                                               required>
                                        <div id="message_error_puesto_editar">
                                            <span id='puesto_editar_error'></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <label for="sueldo_editar" class="form-label">Sueldo</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="sueldo_editar" name="sueldo_editar"
                                               required>
                                        <div id="message_error_sueldo_editar">
                                            <span id='sueldo_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="actualizarPuesto()" 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_puertos');
        });
        let arrayPuestos = @json($puestos);

        function editarPuesto(key) {
            $("#modal_editar_puesto").modal('toggle')
            document.getElementById("puesto_id_editar").value = arrayPuestos[key].id
            document.getElementById("puesto_editar").value = arrayPuestos[key].puesto
            document.getElementById("sueldo_editar").value = arrayPuestos[key].sueldo
        }

        function actualizarPuesto() {

            $('#Loader').fadeIn();
            var formData = new FormData();
            formData.append('id', document.getElementById("puesto_id_editar").value);
            formData.append('puesto', document.getElementById("puesto_editar").value);
            formData.append('sueldo', document.getElementById("sueldo_editar").value);
            console.log(formData);
            fetch("{{route('puestos.actualizar')}}", {
                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);
                        });
                    }
                })
        }

        function guardarPuesto() {
            $('#Loader').fadeIn();
            datos = new FormData($('#FormularioPuesto')[0]);
            fetch("{{route('puestos.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.success == true) {
                        setTimeout(function () {
                            Swal.fire({
                                title: 'Correcto!',
                                toast: true,
                                text: response.message,
                                icon: 'success',
                                timer: 2000,
                                timerProgressBar: true,
                                confirmButtonText: 'Entendido',
                                confirmButtonColor: '#F1C40F'
                            }).then((result) => {
                                if (result.isConfirmed || result.isDismissed) {
                                    location.reload();
                                }
                            });
                        }, 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);
                        });
                    }


                })
        }

        function eliminarPuesto(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('puestos.eliminar')}}", {
                        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);
                        })

                }
            })
        }

    </script>

@stop