{{-- VIEW SAMPLE --}}
@extends('layouts.menu')

@section('tittle')
    TIPOS DE BREAKS
@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">TIPOS DE BREAKS</h3>
                        </div>
                        <div class="col-auto text-end float-end ms-auto download-grp">
                            <a href="#" type="button" class="btn btn-primary" id="btnNuevo" data-toggle="modal"
                                title="Crear Nuevo" alt="Crear Nuevo"><i class="fas fa-plus"></i></a>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table id="tiposBreaksTable" class="table table-hover table-center table-bordered table-striped"
                            style="width:100%">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">Tipo Break</th>
                                    <th class="text-center">Duración (min)</th>
                                    <th class="text-center">Intervalo Inicio (min)</th>
                                    <th class="text-center">Intervalo Final (min)</th>
                                    <th class="text-center">Requiere Asistencia Act.</th>
                                    <th class="text-center">ID Área</th>
                                    <th class="text-center">Área</th>
                                    <th class="text-center">Estado</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

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

        </div>
    </div>



    {{-- TIPO BREAKS MODAL --}}
    <div class="modal fade" id="modalTiposBreaks" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
        data-bs-keyboard="false" data-bs-backdrop="static">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                </div>
                <div class="modal-body">

                    <div class="row">

                        <form id="formBreak">

                            <input type="hidden" class="form-control form-control-sm" id="break_id" name="break_id">

                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label for="">Descripción del Break:</label>
                                        <input type="text" class="form-control form-control-sm" id="break_name"
                                            name="break_name">
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label for="">Duración (Min)</label>
                                        <input type="number" class="form-control form-control-sm" id="valor_break"
                                            name="valor_break" value="0">
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label for="">Grupo:</label>
                                        <select type="text" class="form-select form-select-sm" name="selectAreas"
                                            id="selectAreas">
                                            <option value="#">Seleccione un Grupo</option>
                                            @foreach ($gruposDataNew as $grupo)
                                                <option value="{{ $grupo->id_grupo }}">{{ $grupo->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label for="">Limite luego de Abrir (Min)</label>
                                        <input type="number" class="form-control form-control-sm" id="valor_inicio"
                                            name="valor_inicio" value="0">
                                        <small id="cant_bodegas_help" class="form-text text-muted">Si NO necesita validar
                                            para abrir luego de cierto tiempo dejar valor en 0.</small>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label for="">Limite antes de Cierre (Min)</label>
                                        <input type="number" class="form-control form-control-sm" id="valor_final"
                                            name="valor_final" value="0">
                                        <small id="cant_bodegas_help" class="form-text text-muted">Si NO necesita validar
                                            para cerrar antes de cierto tiempo dejar valor en 0.</small>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label for="">Asistencia Activa</label>
                                        <select type="text" class="form-select form-select-sm" name="valor_asistencia"
                                            id="valor_asistencia">
                                            <option value="0">NO necesita otro en Asistencia</option>
                                            <option value="1">SI necesita otro en Asistencia</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="submit" id="btnGuardarTipo" class="btn btn-success">Guardar</button>
                                <button type="button" class="btn btn-secondary" id="btnCancelarTipo"
                                    data-dismiss="modal">Cancelar</button>
                            </div>
                        </form>

                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

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

            $('#breaksMenu, #tiposBreaksMenu').addClass('active');

            tiposBreaksTable = $("#tiposBreaksTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "{{ url('/api/list/table/tipos/break/0') }}",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_tipo_break"
                    },
                    {
                        data: "descripcion_break"
                    },
                    {
                        data: "duracion_min",
                        className: "text-center"
                    },
                    {
                        data: "intervalo_inicio",
                        className: "text-center"
                    },
                    {
                        data: "intervalo_final",
                        className: "text-center"
                    },
                    {
                        data: "validar_asistencia_activa",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">REQUIERE</span>';
                            } else {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">NO REQUIERE</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "id_grupo"
                    },
                    {
                        data: "grupo"
                    },
                    {
                        data: "estado",
                        className: "text-center",
                        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">ANULADO</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnEditar btnEditarTipo' data-aos='fade-in' type='button' title='Editar' alt='Editar'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnAnular btnAnularTipo' 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: [6],
                    visible: false,
                    searchable: true
                }],
            });

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

                opcion = 1;
                break_id = null;

                $('#formBreak').trigger('reset');
                $(".modal-header").css("background-color", "#17a2b8");
                $(".modal-header").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Nuevo Tipo de Break");
                $("#modalTiposBreaks").modal("show");
            });

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

                $('#formBreak').trigger('reset');
                $("#modalTiposBreaks").modal("hide");
            });

            $(document).on('click', '.btnEditarTipo', function() {
                $("#formBreak").trigger("reset");
                opcion = 2;
                fila = $(this).closest("tr");

                var data = $("#tiposBreaksTable").DataTable().row(fila).data();
                var break_id = parseInt(fila.find("td:eq(0)").text());
                var break_name = data['descripcion_break'];
                var valor_break = data['duracion_min'];
                var valor_inicio = data['intervalo_inicio'];
                var valor_final = data['intervalo_final'];
                var valor_asistencia = data['validar_asistencia_activa'];
                var id_grupo = data['id_grupo'];

                $('#break_id').val(break_id);
                $('#break_name').val(break_name);
                $('#valor_break').val(valor_break);
                $('#selectAreas').val(id_grupo).change();
                $('#valor_inicio').val(valor_inicio);
                $('#valor_final').val(valor_final);
                $('#valor_asistencia').val(valor_asistencia).change();

                $(".modal-header").css("background-color", "#17a2b8");
                $(".modal-header").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Editar Tipo de Break " + break_name);
                $("#modalTiposBreaks").modal("show");
            });

            $(document).on('click', '.btnAnularTipo', function() {
                opcion = 2;
                fila = $(this).closest("tr");

                var data = $("#tiposBreaksTable").DataTable().row(fila).data();
                var break_id = parseInt(fila.find("td:eq(0)").text());
                var break_name = fila.find("td:eq(1)").text();
                var break_status = data['estado'];

                if (break_status == 1 || break_status == 2) {
                    break_status_value = 3;
                    Swal.fire({
                        title: "¿Está seguro de deshabilitar este Tipo de Break " + break_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'));
                                        }
                                    },
                                    url: "{{ url('/api/change/break/status') }}",
                                    type: "POST",
                                    datatype: "json",
                                    data: {
                                        break_id: break_id,
                                        break_name: break_name,
                                        break_status_value: break_status_value
                                    },
                                    success: function(data) {
                                        Swal.fire("", "Tipo de Break Deshabilitado!",
                                            "success");
                                        tiposBreaksTable.ajax.reload(null, false);
                                    },
                                });
                            } catch (error) {
                                Swal.fire("", "Error: " + error, "error");
                            }


                        }
                    });
                } else {
                    break_status_value = 2;
                    try {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader('X-CSRF-Token', $(
                                            'meta[name="csrf-token"]')
                                        .attr(
                                            'content'));
                                }
                            },
                            url: "{{ url('/api/change/break/status') }}",
                            type: "POST",
                            datatype: "json",
                            data: {
                                break_id: break_id,
                                break_name: break_name,
                                break_status_value: break_status_value
                            },
                            success: function(data) {
                                Swal.fire("", "Tipo de Break Habilitado!",
                                    "success");
                                tiposBreaksTable.ajax.reload(null, false);
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }
                }

            });

            /* FORM BREAK */
            $('#formBreak').submit(function(e) {
                e.preventDefault();

                break_id = $('#break_id').val();
                break_name = $('#break_name').val();
                valor_break = $('#valor_break').val();
                area_id = $('#selectAreas').val();
                valor_inicio = $('#valor_inicio').val();
                valor_final = $('#valor_final').val();
                valor_asistencia = $('#valor_asistencia').val();

                if (!$('#break_name').val() || !$('#valor_break').val() || !$('#valor_inicio').val() || !$(
                        '#valor_final').val() || !$('#valor_asistencia').val() || $('#selectAreas').val() ==
                    '#') {
                    Swal.fire("", "Debes llenar o seleccionar todos los campos!", "warning");
                } else {
                    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/save/edit/tipo/break') }}",
                            data: {
                                opcion: opcion,
                                break_id: break_id,
                                break_name: break_name,
                                valor_break: valor_break,
                                valor_inicio: valor_inicio,
                                valor_final: valor_final,
                                valor_asistencia: valor_asistencia,
                                area_id: area_id,
                            },
                            dataType: "json",
                            success: function(data) {
                                if (data.save == 1) {
                                    if (opcion == 1) {
                                        Swal.fire("", "Tipo Break Creado!", "success");
                                    } else {
                                        Swal.fire("", "Tipo Break Editado!", "success");
                                    }

                                    $('#formBreak').trigger('reset');
                                    $("#modalTiposBreaks").modal("hide");
                                    tiposBreaksTable.ajax.reload(null, false);
                                } else {
                                    Swal.fire("", "Error L: " + data.error, "error");
                                }
                            }
                        });
                    } catch (error) {
                        Swal.fire("", "Error A: " + error, "error");
                    }
                }
            });

        });
    </script>
@endsection