@extends('layouts.menu')

@section('tittle')
    PROYECTOS CAMBIOS IT
@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">PROYECTOS & CAMBIOS IT</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="{{ $date1 }}">
                        </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" title="Crear Nuevo"
                                alt="Crear Nuevo"><i class="fas fa-plus"></i></a>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table id="proyectosTable" 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">Proyecto</th>
                                    <th class="text-center">Descripción</th>
                                    <th class="text-center">ID Tipo</th>
                                    <th class="text-center">Tipo</th>
                                    <th class="text-center">ID Responsable</th>
                                    <th class="text-center">Responsable</th>
                                    <th class="text-center">Tiempo Propuesto</th>
                                    <th class="text-center">Porc Avance</th>
                                    <th class="text-center">Disponibilidad</th>
                                    <th class="text-center">Creado</th>
                                    <th class="text-center">Proceso</th>
                                    <th class="text-center">Pausado</th>
                                    <th class="text-center">Comentario Pausa</th>
                                    <th class="text-center">Reanudado</th>
                                    <th class="text-center">Finalizado</th>
                                    <th class="text-center">Comentario Final</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="modalProyectos" data-bs-keyboard="false" data-bs-backdrop="static" role="dialog"
        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>
                <form id="formProyectos">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="" class="col-form-label">Proyecto:</label>
                                    <input type="text" class="form-control" id="service">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="" class="col-form-label">Tipo de Proyecto:</label>
                                    <select class="form-select" aria-label="Default select example" id="tipo_proyecto"
                                        name="tipo_proyecto">
                                        <option selected>Seleccione una opción</option>
                                        @foreach ($tiposData as $tipos)
                                            <option value="{{ $tipos->pk_tipo }}">{{ $tipos->descripcion_tipo }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="" class="col-form-label">Responsable:</label>
                                    <select class="form-select" aria-label="Default select example" id="responsable"
                                        name="responsable">
                                        <option selected>Seleccione una opción</option>
                                        @foreach ($responsablesData as $responsable)
                                            <option value="{{ $responsable->pkUsuario }}">{{ $responsable->usuario }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="" class="col-form-label">Tiempo Propuesto:</label>
                                    <input type="number" class="form-control" name="tiempo" id="tiempo"
                                        placeholder="Número Semanas">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="" class="col-form-label"
                                        for="motivoTextArea">Descripción:</label>
                                    <textarea name="proyectoTextArea" id="proyectoTextArea" class="form-control" cols="20" rows="3"></textarea>
                                </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>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#indicadoresITMenu, #proyectosMenu').addClass('active');

            var proyecto_id, opcion, invisibleColumns, actionTrigg;
            opcion = 4;

            /*
             * --------------------------- FILL PROYECTOS TABLE ---------------------------
             */
            getProyectosIT();
            $(".pickedDate").change(function(e) {
                e.preventDefault();

                getProyectosIT();
            });

            function getProyectosIT() {
                opcion = 4;
                invisibleColumns2 = [3, 5];

                var periodoInicio = $("#periodoInicio").val();
                var periodoFinal = $("#periodoFinal").val();

                $("#proyectosTable").DataTable().clear().destroy();
                proyectosTable = $("#proyectosTable").DataTable({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                                'content'));
                        }
                    },
                    ajax: {
                        url: "proyectosIT/listProyectos/" + periodoInicio + "/" + periodoFinal,
                        method: "GET",
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_proyecto"
                        },
                        {
                            data: "service_desk",
                            className: "text-wrap"
                        },
                        {
                            data: "descripcion",
                            className: "text-wrap"
                        },
                        {
                            data: "fk_tipo"
                        },
                        {
                            data: "descripcion_tipo",
                            className: "text-wrap"
                        },
                        {
                            data: "id_responsable"
                        },
                        {
                            data: "responsable",
                            className: "text-wrap"
                        },
                        {
                            data: "tiempo_propuesto",
                            className: "text-wrap"
                        },
                        {
                            data: "porc_avance",
                            className: "text-wrap"
                        },
                        {
                            data: "disponibilidad",
                            className: "text-wrap text-center"
                        },
                        {
                            data: "fecha_hora_creado",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_proceso",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_pausado",
                            className: "text-wrap"
                        },
                        {
                            data: "comentario_pausa",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_reanudado",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_finalizado",
                            className: "text-wrap"
                        },
                        {
                            data: "comentario_finalizado",
                            className: "text-wrap"
                        },
                        {
                            data: "estado",
                            render: function(data, type, row) {
                                var badge = "";
                                if (data == "CREADO") {
                                    badge +=
                                        '<span class="badge badge-pill badge-success">' +
                                        data +
                                        "</span>";
                                } else if (data == "PROCESO") {
                                    badge +=
                                        '<span class="badge badge-pill badge-info">' + data +
                                        "</span>";
                                } else if (data == "ANULADO") {
                                    badge +=
                                        '<span class="badge badge-pill badge-danger">' +
                                        data +
                                        "</span>";
                                } else if (data == "PAUSADO") {
                                    badge +=
                                        '<span class="badge badge-pill badge-light">' + data +
                                        "</span>";
                                } else if (data == "FINALIZADO") {
                                    badge +=
                                        '<span class="badge badge-pill badge-warning">' +
                                        data +
                                        "</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='Editar' alt='Editar'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnBorrar' title='Cambiar Estado' alt='Cambiar Estado'><i class='material-icons'>change_circle</i></button></div></div>",
                        },
                    ],
                    columnDefs: [{
                        targets: invisibleColumns2,
                        visible: false,
                    }, ],
                    order: [
                        [17, "DESC"]
                    ],
                });
            }

            var fila;

            /*
             * --------------------------- FUNCTION NEW & EDIT PROYECTOS + OPEN MODAL ---------------------------
             */
            $("#btnNuevo").click(function() {
                opcion = 1;
                actionTrigg = 1;
                proyecto_id = null;
                $("#formProyectos").trigger("reset");
                $(".modal-header").css("background-color", "#17a2b8");
                $(".modal-header").css({
                    color: "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Nuevo Proyecto");
                $("#modalProyectos").modal("show");
            });

            /*
             * --------------------------- F    UNCTION CLOSE MODAL ---------------------------
             */
            $("#btnCancelar").click(function() {
                $("#modalProyectos").modal("hide");
            });

            $("#formProyectos").submit(function(e) {
                e.preventDefault();
                usuarioActual = "{{ Session::get('userName') }}";

                service = $.trim($("#service").val());
                tipo_proyecto = $.trim($("#tipo_proyecto").val());
                id_responsable = $.trim($("#responsable").val());
                tiempo = $.trim($("#tiempo").val());
                proyectoTextArea = $.trim($("#proyectoTextArea").val());

                responsable_select = $.trim($("#responsable option:selected").text());

                if (
                    $.trim(service).length > 0 &&
                    $.trim(tipo_proyecto).length > 0 &&
                    $.trim(id_responsable).length > 0 &&
                    $.trim(proyectoTextArea).length > 0 &&
                    $.trim(tiempo).length > 0
                ) {
                    try {
                        $.ajax({
                            url: "{{ URL::asset('php/proyectosITAPI.php') }}",
                            type: "POST",
                            datatype: "json",
                            data: {
                                proyecto_id: proyecto_id,
                                service: service,
                                tipo_proyecto: tipo_proyecto,
                                proyectoTextArea: proyectoTextArea,
                                usuarioActual: usuarioActual,
                                id_responsable: id_responsable,
                                responsable_select: responsable_select,
                                tiempo: tiempo,
                                opcion: opcion
                            },
                            success: function(data) {
                                if (data.result == "Existe") {
                                    Swal.fire("", "Ya existe este Proyecto!", "warning");
                                } else {
                                    if (opcion == 1) {
                                        Swal.fire("", "Proyecto Creado!", "success");
                                    } else {
                                        Swal.fire("", "Proyecto Editado!", "success");
                                    }
                                    $("#modalProyectos").modal("hide");
                                    proyectosTable.ajax.reload(null, false);
                                }
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }
                } else {
                    Swal.fire("", "¡Llene todos los Campos!", "error");
                }
            });

            /*
             * --------------------------- FUNCTION GET DATA TO EDIT PROYECTOS ---------------------------
             */
            $(document).on("click", ".btnEditar", function() {
                $("#formProyectos").trigger("reset");

                opcion = 2;
                actionTrigg = 2;
                fila = $(this).closest("tr");
                service = $.trim(fila.find("td:eq(1)").text());
                estado = $.trim(fila.find("td:eq(15)").text());

                if (estado == "FINALIZADO" || estado == "ANULADO") {
                    Swal.fire("", "NO puedes editar el Proyecto " + service + "!", "warning");
                } else {
                    opcion = 2;
                    actionTrigg = 2;
                    fila = $(this).closest("tr");

                    proyecto_id = $.trim(parseInt(fila.find("td:eq(0)").text()));
                    service = $.trim(fila.find("td:eq(1)").text());
                    responsable = $.trim(fila.find("td:eq(4)").text());

                    if (estado != "FINALIZADO") {
                        window.location = "proyectosIT/" + proyecto_id + "/" + service + "/" + responsable +
                            "/" + estado + "/edit";
                    } else {
                        Swal.fire("", "Proyecto: " + service + " FINALIZADO!", "warning");
                    }
                }
            });

            /*
             * --------------------------- FUNCTION CHANGE PROYECTOS STATUS ---------------------------
             */
            $(document).on("click", ".btnBorrar", function() {
                fila = $(this).closest("tr");

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

                proyecto_id = $.trim(parseInt(fila.find("td:eq(0)").text()));
                service = $.trim(fila.find("td:eq(1)").text());
                estado = $.trim(fila.find("td:eq(15)").text());
                opcion = 3;

                if (estado == "ON-LINE") {
                    proyecto_status = 3;
                    Swal.fire({
                        title: "¿Está seguro de deshabilitar este Proyecto " + service + "?",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Confirmar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            try {
                                $.ajax({
                                    url: "{{ URL::asset('php/proyectosITAPI.php') }}",
                                    type: "POST",
                                    datatype: "json",
                                    data: {
                                        opcion: opcion,
                                        service: service,
                                        usuarioActual: usuarioActual,
                                        proyecto_status: proyecto_status,
                                        proyecto_id: proyecto_id,
                                    },
                                    success: function() {
                                        Swal.fire("", "Proyecto Deshabilitado!",
                                            "success");
                                        proyectosTable.ajax.reload(null, false);
                                    },
                                });
                            } catch (error) {
                                Swal.fire("", "Error: " + error, "error");
                            }
                        }
                    });
                } else if (estado == "ANULADO") {
                    proyecto_status = 1;
                    try {
                        $.ajax({
                            url: "{{ URL::asset('php/proyectosITAPI.php') }}",
                            type: "POST",
                            datatype: "json",
                            data: {
                                opcion: opcion,
                                service: service,
                                usuarioActual: usuarioActual,
                                proyecto_status: proyecto_status,
                                proyecto_id: proyecto_id,
                            },
                            success: function() {
                                Swal.fire("", "Proyecto Habilitado!", "success");
                                proyectosTable.ajax.reload(null, false);
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }
                } else {
                    Swal.fire(
                        "",
                        "NO puedes cambiar el estado del Proyecto " + service + "!",
                        "warning"
                    );
                }
            });
        });
    </script>
@endsection