@extends('layouts.menu')

@section('tittle')
    ABRIR BREAK
@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">ABRIR BREAK</h3>
                        </div>
                        <div class="col-lg-2 text-end float-end ms-auto download-grp">
                            <label>Desde</label>
                            <input type="date" id="periodoInicio" class="form-control form-control-sm pickedDate"
                                value="{{ $date }}">
                        </div>
                        <div class="col-lg-2 text-end float-end ms-auto download-grp">
                            <label>Hasta</label>
                            <input type="date" id="periodoFinal" class="form-control form-control-sm pickedDate"
                                value="{{ $date }}">
                        </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="breaksTable" 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">Responsable</th>
                                    <th class="text-center">Fecha Hora Iniciado</th>
                                    <th class="text-center">Fecha Hora Esperada</th>
                                    <th class="text-center">Fecha Hora Finalizado</th>
                                    <th class="text-center">Duración Tipo Break (min)</th>
                                    <th class="text-center">Tiempo Restante (min)</th>
                                    <th class="text-center">Duración Final (min)</th>
                                    <th class="text-center">Diferencia (min)</th>
                                    <th class="text-center">Justifación</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>


    <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">
                        <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">Área</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" id="btnCancelar"
                            data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="modalJustificar" 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-justificar">
                    <h5 class="modal-title-justificar" id="exampleModalLabel"></h5>
                </div>
                <div class="modal-body">

                    <div class="row">

                        <input type="hidden" id="hidden_break_id">

                        <div class="form-group">
                            <label for="" class="col-form-label">Justifación:</label>
                            <textarea name="txt_justificacion" id="txt_justificacion" cols="30" rows="10"
                                class="form-control form-control-sm" required></textarea>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="btnJustificar"
                            data-dismiss="modal">Guardar</button>
                    </div>

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

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

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

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

                $("#modalTiposBreaks").modal("hide");
            });

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

                $(".modal-header").css("background-color", "#12a3c8");
                $(".modal-header").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Abrir Nuevo Break");
                $("#modalTiposBreaks").modal("show");
            });

            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/1') }}",
                },
                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: "grupo"
                    },
                    {
                        defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnAbrirBreak' data-aos='fade-in' type='button' title='Abrir Break' alt='Abrir Break'><i class='material-icons'>add</i></button></div></div>",
                    },
                ],
                order: [
                    [1, "asc"]
                ]
            });

            listBreaks();

            $('.pickedeDate').change(function(e) {
                e.preventDefault();

                listBreaks();
            });

            function listBreaks() {
                periodoInicio = $('#periodoInicio').val();
                periodoFinal = $('#periodoFinal').val();

                $("#breaksTable").DataTable().clear().destroy();

                breaksTable = $("#breaksTable").DataTable({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                                'content'));
                        }
                    },
                    scrollX: true,
                    scrollCollapse: true,
                    scrollY: '400px',
                    pageLength: 50,
                    fixedColumns: {
                        left: 3
                    },
                    ajax: {
                        url: "{{ url('/api/list/table/break') }}" + "/" + periodoInicio + "/" +
                            periodoFinal,
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_break"
                        },
                        {
                            data: "descripcion_break"
                        },
                        {
                            data: "usuario_name"
                        },
                        {
                            data: "fecha_hora_inicio_text",
                            className: 'text-wrap'
                        },
                        {
                            data: "fecha_hora_esperado",
                            className: 'text-wrap'
                        },
                        {
                            data: "fecha_hora_final_text",
                            className: 'text-wrap'
                        },
                        {
                            data: "duracion_default",
                            className: "text-center"
                        },
                        {
                            data: "minutos_restantes",
                            className: "text-center"
                        },
                        {
                            data: "duracion_final",
                            className: "text-center"
                        },
                        {
                            data: "diferencia",
                            className: "text-center"
                        },
                        {
                            data: "justificacion",
                        },
                        {
                            data: "grupo"
                        },
                        {
                            data: "estado",
                            className: "text-center",
                            render: function(data, type, row) {
                                var badge = "";
                                if (data == "0") {
                                    badge +=
                                        '<span class="badge badge-pill badge-warning">ACTIVO</span>';
                                } else if (data == "1") {
                                    badge +=
                                        '<span class="badge badge-pill badge-success">FINALIZADO</span>';
                                }

                                return badge;
                            },
                        },
                        {
                            defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnEditar' data-aos='fade-in' type='button' data-toggle='modal' title='Finalizar' alt='Finalizar'><i class='material-icons'>done</i></button><button class='btn btn-danger btn-sm btnBorrar' title='Anular' alt='Anular'><i class='material-icons'>delete</i></button></div></div>",
                        },
                    ],
                    order: [
                        [12, "asc"]
                    ],
                    createdRow: function(row, data) {
                        if (parseFloat(data.diferencia) >= 0) {
                            $('td', row).eq(9).css({
                                'background-color': 'green',
                                'color': 'white',
                                'border-style': 'solid',
                                'border-color': '#bdbdbd',
                            });
                        } else if (parseFloat(data.diferencia) < 0) {
                            $('td', row).eq(9).css({
                                'background-color': 'red',
                                'color': 'white',
                                'border-style': 'solid',
                                'border-color': '#bdbdbd',
                            });
                        }
                    }
                });

            }


            $(document).on('click', '.btnAbrirBreak', function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");

                break_tipo_id = fila.find("td:eq(0)").text();
                break_name = fila.find("td:eq(1)").text();
                tiempo_break = fila.find("td:eq(2)").text();

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    url: "{{ url('/api/abrir/tipo/break') }}",
                    type: "POST",
                    dataType: "json",
                    data: {
                        break_tipo_id: break_tipo_id,
                        break_name: break_name
                    },
                    success: function(data) {
                        if (data.save == 1) {
                            if (data.asistencias == 1 && data.inicio == 1 && data.final == 1) {
                                if (data.existe == 0) {
                                    Swal.fire("", "Break Iniciado, Tienes " + data
                                        .duracion_min + " min. Disponibles!", "success");
                                } else {
                                    Swal.fire("",
                                        "No puedes abrir este Break, Tienes uno Abierto, Finaliza el Anterior!",
                                        "warning");
                                }
                            } else {
                                Swal.fire("",
                                    "No puedes abrir este Break, Revisa los Tiempos y Asistencias Requeridas!",
                                    "warning");
                            }
                        } else {
                            Swal.fire("", "Error A: " + data.error, "error");
                        }

                        listBreaks();
                        $("#modalTiposBreaks").modal("hide");
                    }
                });


            });

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

                var break_id = parseInt(fila.find("td:eq(0)").text());
                var break_name = fila.find("td:eq(1)").text();
                var responsable = fila.find("td:eq(2)").text();
                var break_status = fila.find("td:eq(12)").text();

                $('#hidden_break_id').val(break_id);

                var userName = "{{ Session::get('userName') }}";

                if (responsable != userName) {
                    Swal.fire("", "NO Puedes Finalizar este Break, No eres Propietario!", "warning");
                } else {

                    if (break_status == "Finalizado" || break_status == "FINALIZADO") {
                        Swal.fire("", "NO Puedes Finalizar este Break, Ya esta Finalizado!", "warning");
                    } else {

                        Swal.fire({
                            title: "¿Está seguro de Finalizar este 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/finalizar/break') }}",
                                        type: "POST",
                                        datatype: "json",
                                        data: {
                                            break_id: break_id,
                                            break_name: break_name
                                        },
                                        success: function(data) {
                                            if (data.save == 1) {
                                                if (data.ocupa_justificar == 1) {
                                                    Swal.fire("",
                                                        "Finalizaste muy Tarde este Break, Debes Añadir una Justificación!",
                                                        "warning");


                                                    $(".modal-header-justificar").css(
                                                        "background-color",
                                                        "#f44336");
                                                    $(".modal-header-justificar").css({
                                                        "color": "white",
                                                        "font-weight": "900",
                                                    });
                                                    $(".modal-title-justificar").text(
                                                        "Añadir Justificación");
                                                    $("#modalJustificar").modal("show");
                                                } else {
                                                    Swal.fire("", "Break Finalizado!",
                                                        "success");
                                                }
                                                listBreaks();
                                            } else {
                                                Swal.fire("", "Error L: " + data.error,
                                                    "error");
                                            }
                                        },
                                    });
                                } catch (error) {
                                    Swal.fire("", "Error: " + error, "error");
                                }
                            }
                        });

                    }

                }

            });


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

                var break_id = parseInt(fila.find("td:eq(0)").text());
                var break_name = fila.find("td:eq(1)").text();
                var responsable = fila.find("td:eq(2)").text();
                var break_status = fila.find("td:eq(12)").text();

                var userName = "{{ Session::get('userName') }}";

                if (responsable != userName) {
                    Swal.fire("", "NO Puedes Anular este Break, No eres Propietario!", "warning");
                } else {

                    if (break_status == "Finalizado" || break_status == "FINALIZADO") {
                        Swal.fire("", "NO Puedes Anular este Break, Ya esta Finalizado!", "warning");
                    } else {

                        Swal.fire({
                            title: "¿Está seguro de anular este 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/anular/break') }}",
                                        type: "POST",
                                        datatype: "json",
                                        data: {
                                            break_id: break_id,
                                            break_name: break_name
                                        },
                                        success: function(data) {
                                            if (data.save == 1) {
                                                Swal.fire("", "Break Anulado!",
                                                    "success");
                                                listBreaks();
                                            } else {
                                                Swal.fire("", "Error L: " + data.error,
                                                    "error");
                                            }
                                        },
                                    });
                                } catch (error) {
                                    Swal.fire("", "Error: " + error, "error");
                                }
                            }
                        });

                    }

                }

            });


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

                break_id = $('#hidden_break_id').val();
                texto = $('#txt_justificacion').val();

                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/justificar/break') }}",
                        data: {
                            break_id: break_id,
                            texto: texto
                        },
                        dataType: "json",
                        success: function(data) {
                            if (data.save == 1) {
                                Swal.fire("", "Has Añadido una Justificación!", "success");
                                $("#modalJustificar").modal("hide");
                                listBreaks();
                            } else {
                                Swal.fire("", "Error L: " + data.error, "error");
                            }

                            $('#hidden_break_id').val('');
                            $('#txt_justificacion').val('');
                        }
                    });
                } catch (error) {
                    Swal.fire("", "Error A: " + error, "error");
                }

            });

        });
    </script>
@endsection