@extends('layouts.menu')

@section('tittle')
    TITLE
@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">Editar Proyecto: {{ $descripcion_proyecto }}</h3>
                        </div>
                    </div>
                    <br>
                    <form id="formInfraestructura">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-lg-3">
                                    <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 value="{{ $responsable_desc }}">Seleccione una opción</option>
                                            @foreach ($responsablesData as $responsable)
                                                <option value="{{ $responsable->pkUsuario }}">{{ $responsable->usuario }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <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 class="col-lg-3">
                                    <div class="form-group">
                                        <label for="" class="col-form-label">Estado:</label>
                                        <select class="form-select" aria-label="Default select example" id="estado"
                                            name="estado">
                                            <option value="1" id="infalla">Creado</option>
                                            <option value="3" id="inanular">Anular</option>
                                            <option value="4" id="inrepair">En Proceso</option>
                                            <option value="5" id="inpause">Pausar</option>
                                            <option value="7" id="inreanudar">Reanudar</option>
                                            <option value="6" id="inend">Finalizar</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <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-6">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="motivoTextArea">Comentario
                                            Pausa:</label>
                                        <textarea name="commentPausaTextArea" id="commentPausaTextArea" class="form-control" cols="20" rows="3"></textarea>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="motivoTextArea">Comentario
                                            Finalizado:</label>
                                        <textarea name="commentFinalizadoTextArea" id="commentFinalizadoTextArea" 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>
                            </div>
                    </form>
                </div>
            </div>

        </div>
    </div>


    {{-- MODAL AUTORIZACION ESPECIAL --}}
    <div class="modal fade" data-bs-keyboard="false" data-bs-backdrop="static" id="modalAutoEspecial" 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>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="userAutoEspecial" class="col-form-label">Usuario:</label>
                                <input type="text" class="form-control" name="userAutoEspecial"
                                    id="userAutoEspecial">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="" class="col-form-label" for="passAutoEspecial">Contraseña:</label>
                                <input type="password" class="form-control" name="passAutoEspecial"
                                    id="passAutoEspecial">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="btnAccess" class="btn btn-success">Aceptar</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() {
            $('#indicadoresITMenu, #proyectosMenu').addClass('active');

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

            /*
             * --------------------------- FILL VALUES ---------------------------
             */
            getDataAlerta();

            function getDataAlerta() {
                proyecto_id = "{{$id_secuencia}}";

                try {
                    $.ajax({
                        url: "{{ URL::asset('php/proyectosITAPI.php') }}",
                        method: "POST",
                        data: {
                            proyecto_id: proyecto_id,
                            opcion: opcion,
                        },
                        success: function(data) {
                            $("#responsable").val(data.id_responsable).change();
                            $("#estado").val(data.estado).change();
                            $("#tiempo").val(data.tiempo_propuesto);
                            $("#tipo_proyecto").val(data.fk_tipo);
                            $("#commentPausaTextArea").val(data.comentario_pausa);
                            $("#commentFinalizadoTextArea").val(data.comentario_finalizado);

                            if (data.id_solucionado_por != "SIN SOLUCIONAR AÚN") {
                                $("#responsable").prop("disabled", true);
                            }

                            if (data.estado == 3 || data.estado == 6) {
                                $("#responsable").prop("disabled", true);
                                $("#estado").prop("disabled", true);
                                $("#tipo_proyecto").prop("disabled", true);
                                $("#tiempo").prop("readonly", true);
                                $("#commentPausaTextArea").prop("readonly", true);
                                $("#commentFinalizadoTextArea").prop("readonly", false);
                            } else if (data.estado == 1) {
                                $("#responsable").prop("disabled", false);
                                $("#estado").prop("disabled", false);
                                $("#tipo_proyecto").prop("disabled", false);
                                $("#tiempo").prop("disabled", false);
                                $("#commentPausaTextArea").prop("readonly", true);
                                $("#commentFinalizadoTextArea").prop("readonly", true);
                            } else if (data.estado == 4) {
                                $("#responsable").prop("disabled", true);
                                $("#tipo_proyecto").prop("disabled", true);
                                $("#tiempo").prop("readonly", true);
                                $("#commentPausaTextArea").prop("readonly", true);
                                $("#commentFinalizadoTextArea").prop("readonly", true);
                            } else if (data.estado == 5) {
                                $("#responsable").prop("disabled", true);
                                $("#tipo_proyecto").prop("disabled", true);
                                $("#tiempo").prop("readonly", true);
                                $("#commentPausaTextArea").prop("readonly", false);
                                $("#commentFinalizadoTextArea").prop("readonly", true);
                            } else {
                                $("#responsable").prop("disabled", true);
                                $("#tipo_proyecto").prop("disabled", true);
                                $("#tiempo").prop("readonly", true);
                            }

                            if (data.estado == 1) {
                                $("#inpause").css("display", "none");
                                $("#inreanudar").css("display", "none");
                                $("#inend").css("display", "none");
                            } else if (data.estado == 4) {
                                $("#infalla").css("display", "none");
                                $("#inanular").css("display", "none");
                            } else if (data.estado == 5) {
                                $("#infalla").css("display", "none");
                                $("#inanular").css("display", "none");
                                $("#inrepair").css("display", "none");
                                $("#inend").css("display", "none");
                            }
                        },
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }
            }

            /*
             * --------------------------- FUNCTION OPEN AUTORIZACION ESPECIAL MODAL ---------------------------
             */
            $("#estado").click(function(e) {
                e.preventDefault();

                var estado = $.trim($("#estado").val());

                if (estado == 5) {
                    $("#commentPausaTextArea").prop("readonly", false);
                    $("#commentFinalizadoTextArea").prop("readonly", true);
                } else if (estado == 7) {
                    $("#commentPausaTextArea").prop("readonly", true);
                    $("#commentFinalizadoTextArea").prop("readonly", true);
                } else if (estado == 6) {
                    $("#commentPausaTextArea").prop("readonly", true);
                    $("#commentFinalizadoTextArea").prop("readonly", false);
                }
            });

            /*
             * --------------------------- FUNCTION OPEN AUTORIZACION ESPECIAL MODAL ---------------------------
             */
            $("#tiempo").click(function(e) {
                e.preventDefault();

                var project_status = $.trim($("#project_status").val());

                if (project_status != "CREADO") {
                    $(".modal-header").css("background-color", "#007bff");
                    $(".modal-header").css({
                        color: "white",
                        "font-weight": "900",
                    });
                    $(".modal-title").text("Autorización Cambiar Tiempo Propuesto");
                    $("#modalAutoEspecial").modal("show");
                }
            });

            /*
             * --------------------------- FUNCTION CLOSE MODAL ---------------------------
             */
            $("#btnCancelar").click(function() {
                $("#modalFirstCall").modal("hide");
            });

            /*
             * --------------------------- FUNCTION VALIDATE AUTORIZACION ESPECIAL ---------------------------
             */
            $("#btnAccess").click(function() {
                opcion = 10;
                var userAutoEspecial = $.trim($("#userAutoEspecial").val());
                var passAutoEspecial = $.trim($("#passAutoEspecial").val());

                if (
                    $.trim(userAutoEspecial).length > 0 &&
                    $.trim(passAutoEspecial).length > 0
                ) {
                    try {
                        $.ajax({
                            url: "{{ URL::asset('php/proyectosITAPI.php') }}",
                            type: "POST",
                            datatype: "json",
                            data: {
                                userAutoEspecial: userAutoEspecial,
                                passAutoEspecial: passAutoEspecial,
                                opcion: opcion,
                            },
                            success: function(data) {
                                console.log(data.conteo);

                                if (data.conteo == 0 || data.conteo == "0") {
                                    Swal.fire("", "¡Usuario y/o Contraseña NO Válidos!", "error");
                                } else if (data.conteo == 1 || data.conteo == "1") {
                                    $("#modalAutoEspecial").modal("hide");
                                    Swal.fire("", "Ya puedes Cambiar el Tiempo Propuesto!",
                                        "success");
                                    $("#tiempo").prop("readonly", false);
                                }
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }
                } else {
                    Swal.fire("", "¡Ingrese su Usuario y/o Contraseña!", "error");
                }
            });

            /*
             * --------------------------- FUNCTION SAVE CHANGES ON PROJECT ---------------------------
             */
            $("#btnGuardar").click(function(e) {
                e.preventDefault();

                var proyecto_id = "{{$id_secuencia}}";
                var service = "{{$descripcion_proyecto}}";

                var tipo_proyecto = $.trim($("#tipo_proyecto").val());
                var id_responsable = $.trim($("#responsable").val());
                var responsable_select = $.trim($("#responsable option:selected").text());
                var estadoProyecto = $.trim($("#estado").val());
                var tiempo = $.trim($("#tiempo").val());
                usuarioActual = $.trim("{{Session::get('userName')}}");
                commentPausaTextArea = $.trim($("#commentPausaTextArea").val());
                commentFinalizadoTextArea = $.trim($("#commentFinalizadoTextArea").val());

                opcion = 9;

                if (estado == 1) {
                    Swal.fire("", "No puede elegir el mismo Estado!", "warning");
                } else {
                    try {
                        $.ajax({
                            url: "{{ URL::asset('php/proyectosITAPI.php') }}",
                            method: "POST",
                            data: {
                                proyecto_id: proyecto_id,
                                tipo_proyecto: tipo_proyecto,
                                estadoProyecto: estadoProyecto,
                                tiempo: tiempo,
                                id_responsable: id_responsable,
                                responsable_select: responsable_select,
                                usuarioActual: usuarioActual,
                                commentPausaTextArea: commentPausaTextArea,
                                commentFinalizadoTextArea: commentFinalizadoTextArea,
                                service: service,
                                opcion: opcion,
                            },
                            success: function(data) {
                                Swal.fire("", "Estado Actualizado!", "success");
                                window.location = "/TICKETIT/public/admin/indicadores/proyectosIT"
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }
                }
            });
        });
    </script>
@endsection