<?php
$strModulo = 'PRUEBA';
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Poppins:400,500,700,300,600">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
    <link media="screen" rel="stylesheet" type="text/css" href="css/principal.css" />
    <!--<link media="screen" rel="stylesheet" type="text/css" href="css/pagination.css"  />--> <!--Paginador-->
    <link rel="shortcut icon" type="image/x-icon" href="css/layout/global/sp.ico" />

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.14.1/dijit/themes/claro/claro.css">
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.14.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad:true"></script>

    <script type="application/javascript">
        // Cargamos los complementos de dojo
        require(["dojo/dom", "dojo/_base/fx", "dojo/_base/array", "dojo/query", "dojo/dom-construct", "dijit/registry", "dojo/dom-style", "dojo/ready", "dojo/on", "dojo/window",
                "dojo/store/Memory", "dijit/form/FilteringSelect", "dijit/form/Button", "dojo/dom-class", "dijit/Dialog",
                "dojo/_base/lang", "dojox/grid/DataGrid", "dojo/data/ItemFileWriteStore", "dojox/grid/enhanced/plugins/DnD", "dojox/grid/EnhancedGrid", "dojox/grid/enhanced/plugins/Selector", "dojox/grid/enhanced/plugins/IndirectSelection", "dojox/grid/enhanced/plugins/NestedSorting",
                "dijit/ProgressBar", "dijit/ConfirmDialog", "dojo/dom-style", "dijit/form/ComboButton", "dijit/Menu", "dijit/MenuItem", "dijit/MenuSeparator", "dijit/Tooltip", "dijit/form/Form", "dijit/form/TextBox",
                "dojox/grid/enhanced/plugins/Filter", "dijit/form/ValidationTextBox", "dijit/form/NumberSpinner", "dojo/request", "dojo/parser"],
            function(dom, fx, array, query, domConstruct, dijit, style, ready, on, win,
                     Memory, FilteringSelect, Button, domClass, Dialog,
                     lang, DataGrid, ItemFileWriteStore, DnDConfig, EnhancedGrid, Selector, indirectSelection, nestedSorting,
                     ProgressBar, ConfirmDialog, style, ComboButton, Menu, MenuItem, MenuSeparator, Tooltip, Form, TextBox, filter, ValidationTextBox, NumberSpinner, request) {

                const urlPeticiones = "plantillaEjemplo_DO.php";
                const idModulo = "<?php echo($strModulo);?>";

                // Para Mostrar de Mensajes de "error o éxito"
                var dgEjecuta = new Dialog({title: 'Procesando...', style: 'width:300px'});
                var pbMarcar = new ProgressBar({value: Number.POSITIVE_INFINITY, layoutAlign: 'left'});
                dgEjecuta.setContent(pbMarcar);
                dgResultadoError = new ConfirmDialog({ title:"<b>Error</b>", style: "min-width:300px; heigth; auto" });
                style.set(dgResultadoError.cancelButton.domNode, 'display', 'none');
                dgResultadoExito = new ConfirmDialog({ title:"<b>Éxito</b>", style: "min-width:300px; heigth; auto" });
                style.set(dgResultadoExito.cancelButton.domNode, 'display', 'none');


                /****************************************************************** Botones ******************************************************************/
                // Limpiar
                new Button({
                    label: "Limpiar",
                    iconClass: "dijitEditorIcon dijitEditorIconRemoveFormat",
                    showLabel: true,
                    onClick: function() {
                        dijit.byId("frm").submit();
                    }
                }, "BTNLIMPIAR").startup();

                // Buscar
                new Button({
                    id: "BTNBUSCAR",
                    label: "Buscar",
                    iconClass: "dijitIcon dijitIconDatabase",
                    showLabel: true,
                    onClick: function(){
                        alert("Buscando");
                    }
                }, "BTNBUSCAR").startup();

                // Buscar
                new Button({
                    id: "BTNPETICION",
                    label: "Realizar Petición",
                    iconClass: "dijitIconFunction",
                    showLabel: true,
                    onClick: function(){

                        realizaAccion("buscarDatos");

                    }
                }, "BTNPETICION").startup();

                /****************************************************************** Acciones ******************************************************************/
                realizaAccion = function (accion){
                    dgEjecuta.set("title", "Consultando...");
                    dgEjecuta.show();

                    request.post(urlPeticiones, {
                        data: {
                            accion: accion,
                            idModulo: idModulo,
                            dato1: "prueba"
                        }
                    }).then(
                        function (response) {
                            var objResponse = JSON.parse(response);
                            if (objResponse['estatus'] == "ERROR") {
                                dgEjecuta.hide();
                                dgResultadoError.setContent(objResponse['errorDescripcion']);
                                dgResultadoError.show();
                            } else {
                                let datosRecibidos = objResponse["datosRecibidos"];

                                console.log(datosRecibidos);

                                dgEjecuta.hide();
                            }
                        }
                    );


                };

                ready(function() {
                    // Actualizar el tamaño del TabContainer en función del tamaño de página
                    var ventana = win.getBox();
                    var strVentana = (ventana.h-75-100)+"px";
                    style.set(dijit.byId("djTab").id, { height:strVentana });
                    dijit.byId("djTab").resize();

                    // Actualizar el tamaño del TabContainer en función del tamaño de página
                    on(window, "resize", function() {
                        var ventana = win.getBox();
                        var strVentana = (ventana.h-75-100)+"px";
                        style.set(dijit.byId("djTab").id, { height:strVentana });
                        dijit.byId("djTab").resize();
                    });
                    // Eliminar la cortina de entrada
                    fx.fadeOut({node: dom.byId("loadingOverlay"), duration: 1}).play();
                    setTimeout(function () {
                        domConstruct.destroy("loadingOverlay");
                    }, 1);

                });
            });
    </script>

</head>

<body class="claro">
<div id="loadingOverlay" class="loadingOverlay pageOverlay">
    <div class="loadingMessage">Espere...</div>
</div>

<div id="wrapper_container_module">
    <div id="wrapper_table" style="position:relative;">
        <div data-dojo-type="dijit/form/Form" id="frm" data-dojo-id="frm" encType="multipart/form-data"
             action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" style="position:relative;">
            <script type="dojo/on" data-dojo-event="submit">return true;</script>
            <div id="wrapper_table_head">Ejemplo</div>
            <div id="wrapper_table_body_mod_app">
                <table width="100%" height="auto">
                    <tr>
                        <td width="100%" colspan="20" align="center">
                    </tr>

                    <tr>
                        <td width="100%" colspan="20" align="center">
                            <button id="BTNBUSCAR" type="button"></button>
                            <button id="BTNLIMPIAR" type="button"></button>
                            <button id="BTNPETICION" type="button"></button>
                        </td>
                    </tr>
                </table>


                <div id="djTab" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="tabPosition:'top'" style="width:100%;">
                    <div data-dojo-type="dijit/layout/ContentPane" title="Ejemplo" data-dojo-props="selected:true">
                        <div style="margin-top: 15px">
                            <div id="div_GridPrincipal"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

