@extends('layouts.menu')

@section('title', 'Horarios')

@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>Horarios</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-clock me-1"></i>
                        Agregar
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <table id="tabla_listado_horarios" class="table table-striped compact">
                <thead class="table-dark">
                <tr class="text-center">
                    <th width="5%">Id</th>
                    <th width="60%">Horario</th>
                    <th width="20%">Opciones</th>
                </tr>
                </thead>
                <tbody>
                @foreach ($horarios as $key => $horario)
                    <tr>
                        <td align="center">{{$horario->id}}</td>
                        <td>{{$horario->horario}}</td>
                        <td align="center">

                            <button type="button" class="btn btn-primary btn-sm me-3" onclick="editarHorario({{$key}})">
                                <i class="fa-solid fa-pen-to-square ms-2"></i> Editar
                            </button>
                            <button class="btn btn-danger btn-sm" onclick="eliminarHorario({{$horario->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 Horario</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="FormularioHorario"
                              novalidate>
                            @csrf
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <label for="puerta" class="form-label">Horario</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="horario" name="horario" required>
                                        <div id="message_error_horario">
                                            <span id='horario_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="guardarHorario()" 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_horario" tabindex="-1" aria-labelledby="modal_editar_horario_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_horario_label">Editar Horario</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_horario"
                              novalidate>
                            @csrf
                            <div class="row">
                                <input type="hidden" id="horario_id_editar">
                                <div class="col-12 mb-3">
                                    <label for="puerta" class="form-label">Horario</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="horario_editar" name="horario_editar"
                                               required>
                                        <div id="message_error_horario_editar">
                                            <span id='horario_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="actualizarHorario()" 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_horarios');
        });
        let arrayHorarios = @json($horarios);

        function editarHorario(key) {
            console.log(key)
            $("#modal_editar_horario").modal('toggle')
            document.getElementById("horario_id_editar").value = arrayHorarios[key].id
            document.getElementById("horario_editar").value = arrayHorarios[key].horario
        }

        function actualizarHorario() {

            $('#Loader').fadeIn();
            var formData = new FormData();
            formData.append('id', document.getElementById("horario_id_editar").value);
            formData.append('horario', document.getElementById("horario_editar").value);
            console.log(formData);
            fetch("{{route('horarios.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();
                    console.log(response)
                    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 guardarHorario() {
            $('#Loader').fadeIn();
            datos = new FormData($('#FormularioHorario')[0]);
            fetch("{{route('horarios.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 eliminarHorario(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('horarios.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',
                                toast: true,
                                icon: 'success',
                                title: response.message,
                                showConfirmButton: false,
                                timer: 1500
                            })
                            setTimeout(function () {
                                location.reload();
                            }, 1500);
                        })

                }
            })
        }

    </script>

@stop