<?php
    $strModulo = 'centroTrabajo';
    $arrCT = array();
    //$url = 'https://www.solerpalau.mx/plantasyp/datosPlanta.php';
    $url = 'https://www.solerpalau.mx/plantasyp/datosPlanta.php';
    $opciones = array('http' =>
        array(
            'method' => 'GET',
            'max_redirects' => '0',
            'ignore_errors' => '1'
        )
    );

    $contexto = stream_context_create($opciones);
    $flujo = fopen($url, 'r', false, $contexto);
    $arrResultadoPeticion = json_decode(stream_get_contents($flujo), true);

    $arrCT[0]['idCT'] = 'T';
    $arrCT[0]['name'] = 'Todos';
    $contadorCT = 1;
    foreach ($arrResultadoPeticion['datosRespuesta'] as $clave => $valor){
        $arrCT[$contadorCT]['idCT'] = $clave;
        $arrCT[$contadorCT]['name'] = $clave;
        $contadorCT++;
    }

    $jsonCentrosT = json_encode($arrCT);
?>

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <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 idModulo = "<?php echo($strModulo);?>";
                const arrCentrosT = <?php echo($jsonCentrosT); ?>;

                // 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');

                /****************************************************************** Inputs ******************************************************************/
                new FilteringSelect({
                    id: "select_CentroTrabajo",
                    store: new Memory({ idProperty: "idCT", data: arrCentrosT }),
                    autoComplete: true,
                    maxHeight: 300,
                    style: "width: 100%;",
                    placeHolder: "Seleccione una opción",
                    onChange: function(idCt){
                    }
                }, "select_CentroTrabajo");

                /****************************************************************** Botones ******************************************************************/
                new Button({
                    id: "btn_Buscar",
                    label: "Buscar",
                    iconClass: "dijitIconSearch",
                    showLabel: false,
                    onClick: function(){
                        let centroT = dijit.byId('select_CentroTrabajo').value;
                        if(centroT != ""){
                            consultarDatos(centroT);
                        }
                    }
                }, "btn_Buscar").startup();

                /****************************************************************** Funciones ******************************************************************/
                consultarDatos = function(ct){

                    let urlBusqueda = "datosPlanta.php";
                    if(ct != ""){
                        urlBusqueda += "?ct=" + ct;
                    }

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

                                domConstruct.empty("div_Cards");

                                for(var centroTrabajo in datosRecibidos){
                                    var divCol = domConstruct.create("div", {
                                        class: "col  pb-5",
                                    }, "div_Cards");

                                    var div_C = domConstruct.create("div", {
                                        class: "card",
                                    }, divCol);

                                    var img_C = domConstruct.create("img", {
                                        class: "card-img-top",
                                        height: "180px",
                                        src: datosRecibidos[centroTrabajo]['rutaImagenCT']
                                    }, div_C);

                                    var div_Body = domConstruct.create("div", {
                                        class: "card-body"
                                    }, div_C);

                                    var h5_C = domConstruct.create("h5", {
                                        class: "card-title",
                                        innerHTML: "Centro de Trabajo: <b>"+centroTrabajo+"</b>"
                                    }, div_Body);

                                    var urlIr = "maquinaria.php?ct="+centroTrabajo
                                    var a_C = domConstruct.create("a", {
                                        class: "btn btn-link",
                                        innerHTML: "Ver Maquinaria",
                                        href: urlIr
                                    }, div_Body);
                                }
                            }
                        }
                    );
                };


                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-110)+"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-110)+"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);

                    consultarDatos("");

                });
            });
    </script>
    <style>
       .card{
            width:300px;
            height:300px;
            box-shadow: 10px 5px 5px #b0bec5;
            transition: width 2s, height 2s, transform 2s;
            border-radius: 5px;
            border-color: #34495E;
        }

        img{
            opacity: 0.8;

        }

       .card:hover{
            transform: scale(1.1);
       }
       .col{
           flex: 0 0 0%;
       }

    </style>

</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">Centro de Trabajo</div>
            <div id="wrapper_table_body_mod_app">

                <table width="100%" height="auto" border="0" style="border-spacing: 5px;">
                    <tr>
                        <td width="10%" colspan="2" class="etiquetaFormulario">
                            <label class="noTopPadding">Centro de Trabajo:</label>
                        </td>
                        <td width="20%" colspan="4">
                            <input id="select_CentroTrabajo"/>
                        </td>
                        <td width="70%" colspan="14">
                            <button id="btn_Buscar" type="button"></button>
                        </td>
                    </tr>
                </table>

                <div id="djTab" data-dojo-type="dijit/layout/LayoutContainer" style="overflow-y: auto;">
                    <div class="container" style="margin-left: 5px; margin-right: 5px; margin-top: 20px">
                        <div class="row" id="div_Cards">
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

</body>

