@extends('layouts.menu')

@section('tittle')
    ASISTENCIA ACTIVA
@endsection

@section('contenido')
    <div class="row">
        <div class="col-lg-12">

            <div class="card card-table comman-shadow shadow-lg">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="page-title">ASISTENCIA ACTIVA</h3>
                        </div>
                        <div class="col-auto text-end float-end ms-auto download-grp">
                            <a href="#" type="button" class="btn btn-primary" id="btnNuevo" title="Añadir Nuevo"
                                alt="Crear Nuevo"><i class="fas fa-plus"></i></a>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table id="asistenciasTable" class="table table-hover table-center table-bordered table-striped"
                            style="width:100%">
                            <thead class="thead-light">
                                <tr>
                                    <th colspan="2" class="text-center rightBorderStyle"></th>
                                    <th colspan="2" class="text-center rightBorderStyle">Domingo</th>
                                    <th colspan="2" class="text-center rightBorderStyle">Lunes</th>
                                    <th colspan="2" class="text-center rightBorderStyle">Martes</th>
                                    <th colspan="2" class="text-center rightBorderStyle">Miércoles</th>
                                    <th colspan="2" class="text-center rightBorderStyle">Jueves</th>
                                    <th colspan="2" class="text-center rightBorderStyle">Viernes</th>
                                    <th colspan="2" class="text-center rightBorderStyle">Sábado</th>
                                    <th colspan="2" class="text-center"></th>
                                </tr>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">Usuario</th>

                                    <th class="text-center">Inicio Domingo</th>
                                    <th class="text-center">Final Domingo</th>
                                    <th class="text-center">Inicio Lunes</th>
                                    <th class="text-center">Final Lunes</th>
                                    <th class="text-center">Inicio Martes</th>
                                    <th class="text-center">Final Martes</th>
                                    <th class="text-center">Inicio Miércoles</th>
                                    <th class="text-center">Final Miércoles</th>
                                    <th class="text-center">Inicio Jueves</th>
                                    <th class="text-center">Final Jueves</th>
                                    <th class="text-center">Inicio Viernes</th>
                                    <th class="text-center">Final Viernes</th>
                                    <th class="text-center">Inicio Sábado</th>
                                    <th class="text-center">Final Sábado</th>

                                    <th class="text-center">Estado</th>
                                    <th class="text-center">Acciones</th>

                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- MODAL --}}
    <div class="modal fade" id="modalUsuarioActivo" role="dialog" data-bs-keyboard="false" data-bs-backdrop="static"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="" class="col-form-label">Tipo de First Call:</label>
                                <select class="form-select" aria-label="Default select example" id="usuarioAsistencia"
                                    name="usuarioAsistencia">
                                    <option value="0" selected>Seleccione un usuario</option>
                                    @foreach ($responsablesData as $responsable)
                                        <option value="{{ $responsable->pkUsuario }}">{{ $responsable->fullName }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="btnGuardar" class="btn btn-success">Guardar</button>
                        <button type="button" class="btn btn-danger" id="btnCancelar"
                            data-dismiss="modal">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            var buttons = "Brtlip";

            $('#settingsMenu, #asistenciaActivaSubMenu').addClass('active');

            asistenciasTable = $("#asistenciasTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                scrollX: true,
                scrollCollapse: true,
                scrollY: '450px',
                pageLength: 50,
                fixedColumns: {
                    left: 2
                },
                ajax: {
                    url: "{{ url('/api/configuraciones/asistencia/activa') }}",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_configuracion"
                    },
                    {
                        data: "nombre",
                        className: "text-wrap rightBorderStyle"
                    },
                    /* DOMINGO */
                    {
                        data: "inicio_domingo",
                        className: 'text-center',
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                '<input type="time" class="form-control timeControl inicio_domingo" min="06:00" max="22:00" value="' +
                                data + '">';

                            return badge;
                        },
                    },
                    {
                        data: "final_domingo",
                        className: 'text-center rightBorderStyle',
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                '<input type="time" class="form-control timeControl final_domingo" min="06:00" max="22:00" value="' +
                                data + '">';

                            return badge;
                        },
                    },
                    /* LUNES */
                    {
                        data: "inicio_lunes",
                        className: 'text-center',
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                '<input type="time" class="form-control timeControl inicio_lunes" min="06:00" max="22:00" value="' +
                                data + '">';

                            return badge;
                        },
                    },
                    {
                        data: "final_lunes",
                        className: 'text-center rightBorderStyle',
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                '<input type="time" class="form-control timeControl final_lunes" min="06:00" max="22:00" value="' +
                                data + '">';

                            return badge;
                        },
                    },
                    /* MARTES */
                    {
                        data: "inicio_martes",
                        className: 'text-center',
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                '<input type="time" class="form-control timeControl inicio_martes" min="06:00" max="22:00" value="' +
                                data + '">';

                            return badge;
                        },
                    },
                    {
                        data: "final_martes",
                        className: 'text-center rightBorderStyle',
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                '<input type="time" class="form-control timeControl final_martes" min="06:00" max="22:00" value="' +
                                data + '">';

                            return badge;
                        },
                    },
                    /* MIERCOLES */
                    {
                        data: "inicio_miercoles",
                        className: 'text-center',
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                '<input type="time" class="form-control timeControl inicio_miercoles" min="06:00" max="22:00" value="' +
                                data + '">';

                            return badge;
                        },
                    },
                    {
                        data: "final_miercoles",
                        className: 'text-center rightBorderStyle',
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                '<input type="time" class="form-control timeControl final_miercoles" min="06:00" max="22:00" value="' +
                                data + '">';

                            return badge;
                        },
                    },
                    /* JUEVES */
                    {
                        data: "inicio_jueves",
                        className: 'text-center',
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                '<input type="time" class="form-control timeControl inicio_jueves" min="06:00" max="22:00" value="' +
                                data + '">';

                            return badge;
                        },
                    },
                    {
                        data: "final_jueves",
                        className: 'text-center rightBorderStyle',
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                '<input type="time" class="form-control timeControl final_jueves" min="06:00" max="22:00" value="' +
                                data + '">';

                            return badge;
                        },
                    },
                    /* VIERNES */
                    {
                        data: "inicio_viernes",
                        className: 'text-center',
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                '<input type="time" class="form-control timeControl inicio_viernes" min="06:00" max="22:00" value="' +
                                data + '">';

                            return badge;
                        },
                    },
                    {
                        data: "final_viernes",
                        className: 'text-center rightBorderStyle',
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                '<input type="time" class="form-control timeControl final_viernes" min="06:00" max="22:00" value="' +
                                data + '">';

                            return badge;
                        },
                    },
                    /* SABADO */
                    {
                        data: "inicio_sabado",
                        className: 'text-center',
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                '<input type="time" class="form-control timeControl inicio_sabado" min="06:00" max="22:00" value="' +
                                data + '">';

                            return badge;
                        },
                    },
                    {
                        data: "final_sabado",
                        className: 'text-center rightBorderStyle',
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                '<input type="time" class="form-control timeControl final_sabado" min="06:00" max="22:00" value="' +
                                data + '">';

                            return badge;
                        },
                    },
                    {
                        data: "estado",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">ACTIVO</span>';
                            } else if (data == "2") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">ACTIVO</span>';
                            } else if (data == "3") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">DESACTIVADO</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-warning btn-sm btnStartAsistencia' data-aos='fade-in' type='button' title='Iniciar Asistencia' alt='Iniciar Asistencia'><i class='material-icons'>support_agent</i></button><button class='btn btn-primary btn-sm btnEndAsistencia' data-aos='fade-in' type='button' title='Finalizar Asistencia' alt='Finalizar Asistencia'><i class='material-icons'>done</i></button><button class='btn btn-danger btn-sm btnDelete' data-aos='fade-in' type='button' title='Cambiar Estado' alt='Cambiar Estado'><i class='material-icons'>change_circle</i></button></div></div>",
                    },
                ],
                order: [
                    [1, "asc"]
                ],
                /* columnDefs: [{
                    targets: invisibleColumns,
                    visible: false,
                }, ], */
            });

            $(document).on("click", ".btnStartAsistencia", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");
                id_settings = $.trim(fila.find("td:eq(0)").text());
                name = $.trim(fila.find("td:eq(1)").text());

                Swal.fire({
                    title: "Estás Seguro de Iniciar esta Asistencia?",
                    text: "",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirmar!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        try {
                            $.ajax({
                                beforeSend: function(xhr, type) {
                                    if (!type.crossDomain) {
                                        xhr.setRequestHeader('X-CSRF-Token',
                                            $(
                                                'meta[name="csrf-token"]'
                                            ).attr('content'));
                                    }
                                },
                                url: "{{ url('/api/asistencia/activa/start/end') }}",
                                async: false,
                                data: {
                                    id_settings: id_settings,
                                    opcion: 0
                                },
                                method: "POST",
                                success: function(data) {
                                    if (data.save == 1) {
                                        if (data.asist == 0) {
                                            Swal.fire("", "Asistencia de " + name +
                                                " Iniciada!", "success");
                                        }
                                    } else {
                                        Swal.fire("", "El Usuario " + name +
                                            " ya Inició una Asistencia Activa!",
                                            "warning");
                                    }
                                }
                            });
                        } catch (error) {
                            Swal.fire("", "Error: " + error, "error");
                        }
                    }
                });

            });

            $(document).on("click", ".btnEndAsistencia", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");
                id_settings = $.trim(fila.find("td:eq(0)").text());
                name = $.trim(fila.find("td:eq(1)").text());

                Swal.fire({
                    title: "Estás Seguro de Finalizar esta Asistencia?",
                    text: "",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirmar!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        try {
                            $.ajax({
                                beforeSend: function(xhr, type) {
                                    if (!type.crossDomain) {
                                        xhr.setRequestHeader('X-CSRF-Token',
                                            $(
                                                'meta[name="csrf-token"]'
                                            ).attr('content'));
                                    }
                                },
                                url: "{{ url('/api/asistencia/activa/start/end') }}",
                                async: false,
                                data: {
                                    id_settings: id_settings,
                                    opcion: 1
                                },
                                method: "POST",
                                success: function(data) {
                                    if (data.save == 1) {
                                        if (data.asist == 1) {
                                            Swal.fire("", "Asistencia de " + name +
                                                " Finalizada!", "success");
                                        }
                                    } else {
                                        Swal.fire("", "El Usuario " + name +
                                            " no tiene Ninguna Asistencia Activa!",
                                            "warning");
                                    }
                                }
                            });
                        } catch (error) {
                            Swal.fire("", "Error: " + error, "error");
                        }
                    }
                });

            });

            $(document).on("change", ".timeControl", function() {

                fila = $(this).closest("tr");
                id_settings = $.trim(fila.find("td:eq(0)").text());

                inicio_domingo = fila.find('.inicio_domingo').val();
                final_domingo = fila.find('.final_domingo').val();

                inicio_lunes = fila.find('.inicio_lunes').val();
                final_lunes = fila.find('.final_lunes').val();

                inicio_martes = fila.find('.inicio_martes').val();
                final_martes = fila.find('.final_martes').val();

                inicio_miercoles = fila.find('.inicio_miercoles').val();
                final_miercoles = fila.find('.final_miercoles').val();

                inicio_jueves = fila.find('.inicio_jueves').val();
                final_jueves = fila.find('.final_jueves').val();

                inicio_viernes = fila.find('.inicio_viernes').val();
                final_viernes = fila.find('.final_viernes').val();

                inicio_sabado = fila.find('.inicio_sabado').val();
                final_sabado = fila.find('.final_sabado').val();

                console.log(inicio_domingo + ' ' + final_domingo + ' ' + inicio_lunes + ' ' + final_lunes +
                    ' ' + inicio_martes + ' ' + final_martes + ' ' + inicio_miercoles + ' ' +
                    final_miercoles + ' ' + inicio_jueves + ' ' + final_jueves + ' ' + inicio_viernes +
                    ' ' + final_viernes + ' ' + inicio_sabado + ' ' + final_sabado);

                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        url: "{{ url('/api/save/edit/asistencia/settings') }}",
                        type: "POST",
                        datatype: "json",
                        data: {
                            id_settings: id_settings,
                            inicio_domingo: inicio_domingo,
                            final_domingo: final_domingo,
                            inicio_lunes: inicio_lunes,
                            final_lunes: final_lunes,
                            inicio_martes: inicio_martes,
                            final_martes: final_martes,
                            inicio_miercoles: inicio_miercoles,
                            final_miercoles: final_miercoles,
                            inicio_jueves: inicio_jueves,
                            final_jueves: final_jueves,
                            inicio_viernes: inicio_viernes,
                            final_viernes: final_viernes,
                            inicio_sabado: inicio_sabado,
                            final_sabado: final_sabado
                        },
                        success: function(data) {
                            if (data.save == 1) {
                                toastMixin.fire({
                                    animation: true,
                                    title: "Hora Cambiada!"
                                });
                                asistenciasTable.ajax.reload(null, false);
                            }
                        }
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }
            });

            $('#btnCancelar').click(function(e) {
                e.preventDefault();


                $('#modalUsuarioActivo').modal("hide");
            });

            $('#btnNuevo').click(function(e) {
                e.preventDefault();

                $(".modal-header").css("background-color", "#17a2b8");
                $(".modal-header").css({
                    color: "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Añadir Usuario Asistencia Activa");
                $('#modalUsuarioActivo').modal("show");
            });

            $('#btnGuardar').click(function(e) {
                e.preventDefault();


                var pkUsuario = $.trim($("#usuarioAsistencia").val());
                var fullName = $.trim($("#usuarioAsistencia option:selected").text());

                if (pkUsuario != 0) {
                    try {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader('X-CSRF-Token', $(
                                            'meta[name="csrf-token"]')
                                        .attr(
                                            'content'));
                                }
                            },
                            url: "{{ url('/api/new/asistencia/settings') }}",
                            type: "POST",
                            datatype: "json",
                            data: {
                                pkUsuario: pkUsuario,
                                fullName: fullName
                            },
                            success: function(data) {
                                if (data.save == 1) {
                                    if (data.exist == 0) {
                                        Swal.fire("", "Usuario Agregado!", "success");

                                        asistenciasTable.ajax.reload(null, false);
                                        $("#modalUsuarioActivo").modal("hide");
                                    } else if (data.exist == 1) {
                                        Swal.fire("", "Ya has Agregado a este Usuario!",
                                            "warning");
                                    }
                                }
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }
                } else {
                    Swal.fire("", "¡Seleccione un Usuario!", "error");
                }
            });

            $(document).on("click", ".btnDelete", function() {

                fila = $(this).closest("tr");
                id_settings = $.trim(fila.find("td:eq(0)").text());
                name = $.trim(fila.find("td:eq(1)").text());

                Swal.fire({
                    title: "Estás seguro de Cambiar el Estado de la Asistencia Activa de: " + name +
                        "?",
                    text: "",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirmar!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        try {
                            $.ajax({
                                beforeSend: function(xhr, type) {
                                    if (!type.crossDomain) {
                                        xhr.setRequestHeader('X-CSRF-Token', $(
                                                'meta[name="csrf-token"]')
                                            .attr(
                                                'content'));
                                    }
                                },
                                type: "POST",
                                url: "{{ url('/api/change/status/asistencia/settings') }}",
                                data: {
                                    id_settings: id_settings
                                },
                                success: function(data) {
                                    if (data.save == 1) {
                                        Swal.fire("", "Estado Cambiado!", "success");
                                        asistenciasTable.ajax.reload(null, false);
                                    }
                                }
                            });
                        } catch (error) {
                            Swal.fire("", "Error: " + error, "error");
                        }
                    }
                });


            });
        });
    </script>
@endsection