<?php use_helper('UrlFunctions'); ?>
<?php use_helper( 'IncludePartial' ); ?>
<?php use_helper( 'UtilFunctions' ); ?>

<style type="text/css">

/*
@font-face 
{
    font-weight: normal;
    font-style: normal;
    font-family: 'feathericons';
    src:url('../fonts/feathericons/feathericons.eot?-8is7zf');
    src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
        url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
        url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
        url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');
}
*/

.grid 
{
    position: relative;
    margin: 0 auto;
    /*padding: 1em 0 4em;*/
    /*max-width: 1000px;*/
    list-style: none;
    /*text-align: center;*/
    border: none;
}

/* Common style */
.grid figure 
{
    position: initial; /*relative;*/
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    min-width: 210px;
    max-width: 210px;
    max-height: 21 0px;
    width: 24%;
    /*background: #3085a3;*/
    /*text-align: center;*/
    cursor: pointer;	border:solid;
}

.grid figure:hover
{
    /*-webkit-box-shadow: -1px 9px 40px -12px black;*/
    
    -webkit-box-shadow: -1px 10px 10px 1px rgba(0,0,0,0.75);
    -moz-box-shadow:    -1px 10px 10px 1px rgba(0,0,0,0.75);
    box-shadow:         -1px 10px 10px 1px rgba(0,0,0,0.75);

    /*-webkit-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75);
    box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75);*/
}

.grid figure img 
{
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.8;
    width: 90px;
    text-align: left;
    float: inherit;
}

.grid figure figcaption 
{
    position: absolute;
    display: initial;
    /*padding: 2em;*/
    padding-top: 4px;
    padding-left: 4px;
    color: #ffff;
    text-transform: uppercase;
    /*font-size: 1.25em;*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after 
{
    pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a 
{
    
    /*top: 0;
    left: 0;*/
    /*width: 100%;
    height: 100%;*/
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a 
{
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    /*font-size: 0;*/
    /*opacity: 0;*/
}

/*.grid figure h2 
{
    word-spacing: -0.15em;
    font-weight: 300;
}

.grid figure h2 span 
{
    font-weight: 800;
}*/

/*.grid figure h2,*/
.grid figure p 
{
    
}

.grid figure p 
{
    margin: 0;
    letter-spacing: 1px;
    font-size: 68.5%;
    color: #000;
}
.grid figure label
{
    margin-bottom: 0px;
    font-size: 1.1em;
    color: #000;
}
</style>

<style type="text/css">

/*---------------*/
/***** Milo *****/
/*---------------*/

figure.effect-milo 
{
    /*background: #45A14E;*/
}

figure.effect-milo img {
    /*max-width: none;*/
    /*width: -webkit-calc(100% + 60px);*/
    /*width: calc(100% + 60px);*/
    width: 90px;
    opacity: 0.7;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    /*-webkit-transform: translate3d(-30px,0,0) scale(1.12);*/
    /*transform: translate3d(-30px,0,0) scale(1.12);*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/*figure.effect-milo h2 
{
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 1em 1.2em;
}*/

figure.effect-milo p {
    /*padding: 0 10px 0 0;*/
    /*width: 50%;*/
    /*border-right: 1px solid #fff;*/
    /*text-align: right;*/
    /*opacity: 0;*/
    font-size: smaller; /*larger;*/
    opacity: 1;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    /*-webkit-transform: translate3d(-40px,0,0);*/
    /*transform: translate3d(-40px,0,0);*/
}

figure.effect-milo:hover img {
    opacity: 2;
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
}

/*figure.effect-milo:hover h2 
{
    font-weight: bold;
}*/

figure.effect-milo:hover label
{
    font-weight: bold;
}

figure.effect-milo:hover p {
    /*opacity: 1;*/
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    font-weight: bold;
}
</style>


<style type="text/css">
#body-row {
    margin-left:0;
    margin-right:0;
}
#sidebar-container {
    min-height: 100vh;   
    background-color: #333;
    padding: 0;
}

/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
    width: 230px;
}
.sidebar-collapsed {
    width: 60px;
}

/* Menu item*/
#sidebar-container .list-group a {
    height: 50px;
    color: white;
}

/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
    height: 45px;
    padding-left: 30px;
}
.sidebar-submenu {
    font-size: 0.9rem;
}

/* Separators */
.sidebar-separator-title {
    background-color: #333;
    height: 35px;
}
.sidebar-separator {
    background-color: #333;
    height: 25px;
}
.logo-separator {
    background-color: #333;    
    height: 60px;
}

/* Closed submenu icon */
/*
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
  content: " \f0d7";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 10px;
}
*/
/* Opened submenu icon */
/*
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
  content: " \f0da";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 10px;
}
*/
/*
@media (max-width: 800px) 
{
    #sidebar-container
    {
        display: none !important;
    }
}
*/

</style>

<script type="text/javascript">
buscarSaunas = function()
{
    var a_Params = [];

    $( 'input, select' ).each
    (
        function(index)
        {  
            var input = $( this );

            switch ( input.prop( "type" ) )
            {
                case "checkbox":
                    var s_Check = input.is( ":checked" ) ? "is check" : "not check";
                    //pr( 'Type: ' + input.prop( "tagName" ) + '( '+ input.prop( "type" ) +' ) | Name: ' + input.attr( 'name' ) + ' | Value: ' + input.val() + ' | ' + s_Check );

                    if( input.is( ":checked" ) )
                    {
                        a_Params.push( input.attr( 'name' ) + "=" + input.val() );
                    }
                break;
                case "search":
                case "select-one":
                    //pr( 'Type: ' + input.prop( "tagName" ) + '( '+ input.prop( "type" ) +' ) | Name: ' + input.attr( 'name' ) + ' | Value: ' + input.val() + ' | ' );
                    //a_Params.push( input.attr( 'name' ) + "=" + input.val() );  
                break;
            }
        }
    );

    var s_param = a_Params.join( "&" );
    s_param = s_param + '&cbo_tipo=3';  //2 habitaciones

    pr( s_param );

    actualizarAjax( 'content_sauna', s_param );
}
buscarHabitaciones = function()
{
    var a_Params = [];

    $( 'input, select' ).each
    (
        function(index)
        {  
            var input = $( this );

            switch ( input.prop( "type" ) )
            {
                case "checkbox":
                    var s_Check = input.is( ":checked" ) ? "is check" : "not check";
                    //pr( 'Type: ' + input.prop( "tagName" ) + '( '+ input.prop( "type" ) +' ) | Name: ' + input.attr( 'name' ) + ' | Value: ' + input.val() + ' | ' + s_Check );

                    if( input.is( ":checked" ) )
                    {
                        a_Params.push( input.attr( 'name' ) + "=" + input.val() );
                    }
                break;
                case "search":
                case "select-one":
                    //pr( 'Type: ' + input.prop( "tagName" ) + '( '+ input.prop( "type" ) +' ) | Name: ' + input.attr( 'name' ) + ' | Value: ' + input.val() + ' | ' );
                    a_Params.push( input.attr( 'name' ) + "=" + input.val() );  
                break;
            }
        }
    );

    var s_param = a_Params.join( "&" );
    s_param = s_param + '&cbo_tipo=2';  //2 habitaciones

    pr( s_param );

    actualizarAjax( 'content_habitaciones', s_param );
}

actualizarAjax = function( id_elm, param )
{
    blockContent( id_elm );

    executeAjaxUpdater
    ( 
        id_elm, 
        "<?php echo buildUrl( 'recephabit/buscarHabitaciones' ) ?>", 
        param, 
        function( response )
        {
            //unBlockContent( 'content_buttons' );
        } 
    );
}

actualizarTotales = function()
{
    blockContent( 'content_totales' );

    executeAjaxUpdater
    ( 
        'content_totales', 
        "<?php echo buildUrl( 'recephabit/requestUbicacion' ) ?>", 
        "tipo_proc=recuperarTotales", 
        function( response )
        {
            //unBlockContent( 'content_buttons' );
        } 
    );
}

limpiarParametros = function()
{
    $( "#txt_buscar" ).val( "" );
    $( "#cbo_categoria" ).val( "" );
    $( "#cbo_tipo" ).val( "" );
    $( "#cbo_piso" ).val( "" );
}
</script>

<!-- Bootstrap NavBar -->
<!-- https://www.codeply.com/go/7XYosZ7VH5 -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
<!--<nav class="navbar navbar-expand-lg navbar-dark bg-dark">-->
    <!--<a class="navbar-brand" href="#" style="margin-right: 40px;" onclick="">
        Estados
    </a>-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">

            <li class="nav-item dropdown active" style="margin-right: 5px;">
                <select class="custom-select my-1 mr-sm-2" id="cbo_piso" name="cbo_piso">
                    <option value="" selected=""> - PISO - </option>
                    <?php foreach ( MST_UbicacionFN::getUbicacionPadre() as $o_MST_UbicacionBN ) { ?>
                        <option value="<?=$o_MST_UbicacionBN->getIdUbicacion()?>" > <?=$o_MST_UbicacionBN->getNombre()?> </option>
                    <?php } ?>
                </select>
            </li>
            <!--
            <li class="nav-item dropdown active" style="margin-right: 5px;">
                <select class="custom-select my-1 mr-sm-2" id="cbo_tipo" name="cbo_tipo">
                    <option value="" selected=""> - TIPO - </option>
                    <?php foreach ( MST_TipoUbicacionFN::selectActivos( 1 ) as $o_MST_TipoUbicacionBN ) { ?>
                        <option value="<?=$o_MST_TipoUbicacionBN->getIdTipoUbicacion()?>" > <?=$o_MST_TipoUbicacionBN->getNombre()?> </option>
                    <?php } ?>
                </select>
            </li>
            -->
            <li class="nav-item dropdown active">
                <select class="custom-select my-1 mr-sm-2" id="cbo_categoria" name="cbo_categoria">
                    <option value="" selected=""> - CATEGORIA - </option>
                    <?php foreach ( MST_CategoriaHabitacionMastFN::selectActivos() as $o_MST_CategoriaHabitacionMastBN ) { ?>
                        <?php 
                        if( $o_MST_CategoriaHabitacionMastBN->getIdCategoria() == 7 ) continue;
                        ?>
                        <option value="<?=$o_MST_CategoriaHabitacionMastBN->getIdCategoria()?>" > <?=$o_MST_CategoriaHabitacionMastBN->getDescripcion()?> </option>
                    <?php } ?>
                </select>
            </li>
			<li style="padding:5px" ><button class="btn btn-outline-info my-2 my-sm-0" type="button" onclick="buscarHabitaciones();">BUSCAR-HABITACION</button>&nbsp;<button class="btn btn-danger  my-2 my-sm-0" type="button" onclick="abrirAlerta();">ALERTA</button>&nbsp;</li>
        </ul>
        <form class="form-inline">
            <!--<input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Bucar" id="txt_buscar" name="txt_buscar" value="" title="A demo of simple tooltip">-->
            
			
            <button class="btn btn-outline-info my-2 my-sm-0" type="button" onclick="buscarSaunas();">BUSCAR-SAUNA</button>
            <!--<button class="btn btn-outline-info my-2 my-sm-0" type="button" onclick="limpiarParametros();">LIMPIAR</button>-->
        </form>
    </div>
</nav>

<script type="text/javascript">
$( '#txt_buscar' ).tooltip();
</script>

<!-- NavBar END -->

<div class="" style="margin-top: 80px;" id="content_totales">
    <div class="container">
        <div class="row">
            <div class="col-sm">
                <h5> &nbsp; </h5>
            </div>
            <div class="col-sm">
                <h5> &nbsp; </h5>
            </div>
            <div class="col-sm">
                <h5> &nbsp; </h5>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap row -->
<div class="row" id="body-row">
    <!-- Sidebar -->
    <!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
    <div id="sidebar-container" class="sidebar-expanded d-none d-md-block " style=""> <!--min-height: 0px;-->
        <!-- Bootstrap List Group -->
        <ul class="list-group position-fixed">

            <!-- Separator with title -->
            <!--
            <li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed">
                <small>OPCIONES</small>
            </li>
            -->
            <!-- /END Separator -->
            <?php foreach ( MST_EstadosHabitacionMastFN::selectActivos() as $o_MST_EstadosHabitacionMastBN ) { ?>
                <?php 
                $s_CodigoColor     = $o_MST_EstadosHabitacionMastBN->getCodigoColorPrincipal() ? $o_MST_EstadosHabitacionMastBN->getCodigoColorPrincipal()." !important" : "#ffffff";
                $s_BackgroundColor = $o_MST_EstadosHabitacionMastBN->getCodigoColorPrincipal() ? "background-color: ".$o_MST_EstadosHabitacionMastBN->getCodigoColorPrincipal()." !important;" : "#ffffff";
                ?>
            <a href="javascript:void(0);" style="<?=$s_BackgroundColor?>" class="list-group-item list-group-item-action title_estados" title="<?=$o_MST_EstadosHabitacionMastBN->getNombre()?>" ><!-- bg-dark -->
                <div class="custom-control custom-checkbox mr-sm-2">
                    <input type="checkbox" class="custom-control-input" id="chk_estado_<?=$o_MST_EstadosHabitacionMastBN->getNombre()?>" 
                            name="chk_estado[<?=$o_MST_EstadosHabitacionMastBN->getNombre()?>]" value="<?=$o_MST_EstadosHabitacionMastBN->getIdEstados()?>"  
                            title="Tooltip on top" checked
                            >
                    <label class="custom-control-label menu-collapsed-label" for="chk_estado_<?=$o_MST_EstadosHabitacionMastBN->getNombre()?>" 
                            style="color: #FFFFFF; cursor: pointer;">&nbsp;&nbsp;&nbsp;<?=$o_MST_EstadosHabitacionMastBN->getNombre()?></label>
                </div>
            </a>
            <?php } ?>
            <script type="text/javascript">
            $( '.title_estados' ).tooltip();
            </script>
            <!-- Separator without title -->
            <li class="list-group-item sidebar-separator menu-collapsed"></li>
            <!-- /END Separator -->
            <a href="javascript:void(0);" data-toggle="sidebar-colapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
                <div class="d-flex w-100 justify-content-start align-items-center">
                    <span id="collapse-icon" class="fa fa-2x mr-3"></span>
                    <span id="collapse-text" class="menu-collapsed">Collapse</span>
                </div>
            </a>
        </ul>
    </div>

    <!-- MAIN -->
    <div class="col" style="padding-top: 15px; z-index: 100; background-color: #fff; padding-right: 0; padding-left: 0;" id="content_habitaciones">

        <!-- aqui va el contenido de la buscarqueda de las habitaciones -->

    </div><!-- Main Col END -->

    <div class="col" style="padding-top: 15px; z-index: 100; background-color: #fff; padding-right: 0; padding-left: 0;" id="content_sauna">

    </div>
    
</div><!-- body-row END -->


<!-- Button trigger modal -->
<!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>-->

<!--<a href="javascript:void(0);" class="btn" id="openBtn" onclick="agregarComprobantes(3);">Open modal</a>-->

<style type="text/css">
.modal
{
 padding: 0 !important;
}
.modal-dialog {
  max-width: 95% !important;
  height: 90%;
/*  padding: 0;
  margin: 0;*/
}

.modal-content {
  /*border-radius: 0 !important;*/
  height: 90%;
}
</style>

<!-- Modal -->
<div class="modal hide fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">&nbsp;</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <iframe id="iframe_id" src="" style="zoom:0.60" width="99.6%" height="99.6%" frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <!--<button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
        </div>
    </div>
</div>

<?php //crearFuentePopupIframe( array( "div_id"=>"dialogwww",  "iframe_id"=>"myIframewww",  "popup_title"=>"Buscar Producto", "modal"=>true ) ) ?>


<script type="text/javascript">
seleccionarHabitacion = function( id_habitacion )
{
    location.href = "<?php echo buildUrl( 'recephabit/asociarCliente' ) ?>idhabitacion/" + id_habitacion;
    /*x = confirm( "Esta seguro de asociar a un Cliente?" );
    if( x )
    {
        location.href = "<?php echo buildUrl( 'recephabit/asociarCliente' ) ?>idhabitacion/" + id_habitacion;
    }*/
}
abrirAlerta = function()
{
	 var frameSrc = "<?=buildUrl( 'recephabit/rptUbicacion', '' )?>" ;
    $( '#iframe_id' ).attr( "src", frameSrc );
    $( '#exampleModalCenter' ).modal( { show:true } );
}
agregarComprobantes = function( id_habitacion )
{
    var frameSrc = "<?=buildUrl( 'recephabit/comprobantesCliente', 'idhabitacion=' )?>" + id_habitacion;

    $( '#iframe_id' ).attr( "src", frameSrc );
    /*$('#exampleModalCenter').on
    (
        'show', function () 
        {
            pr( "Se carga iframe" );
            $( '#iframe_id' ).attr( "src", frameSrc );
        }
    );*/

    $( '#exampleModalCenter' ).modal( { show:true } );
}

asignarNuevoEstado = function( id_ubicacion )
{
    var frameSrc = "<?=buildUrl( 'recephabit/asignarEstado', 'idubicacion=' )?>" + id_ubicacion;

    $( '#iframe_id' ).attr( "src", frameSrc );

    $( '#exampleModalCenter' ).modal( { show:true } );
}

ocultarModal = function()
{
    $( '#exampleModalCenter' ).modal( 'hide' );
}
</script>

<script type="text/javascript">
// Hide submenus
$( '#body-row .collapse' ).collapse( 'hide' ); 

// Collapse/Expand icon
$( '#collapse-icon' ).addClass( 'fa-angle-double-left' ); 

// Collapse click
$( '[data-toggle=sidebar-colapse]' ).click
(
    function() 
    {
        SidebarCollapse();
    }
);

function SidebarCollapse() 
{
    //$( '.menu-collapsed' ).toggleClass( 'd-none' );
    //$( '.sidebar-submenu' ).toggleClass( 'd-none' );
    //$( '.submenu-icon' ).toggleClass( 'd-none' );
    //$( '.menu-collapsed-label' ).toggleClass( 'd-none' );
    
    var b_Control = true;
    var ancho = $( window ).width();
    if( ancho <= 750 )
    {
        //ajustar_icono
        if( !$( '.sidebar-separator' ).hasClass( 'd-flex' ) )
        {
            $( '.sidebar-separator' ).addClass( 'd-flex' );
            $( '#sidebar-container' ).toggleClass( 'sidebar-expanded sidebar-collapsed', 500 );
            $( '#collapse-icon' ).toggleClass( 'fa-angle-double-left fa-angle-double-right' );
        }
        return false;
    }
    
    // Treating d-flex/d-none on separators with title
    //var SeparatorTitle = $('.sidebar-separator-title');
    var SeparatorTitle = $( '.sidebar-separator' );

    if ( SeparatorTitle.hasClass( 'd-flex' ) ) 
    {
        pr( "ajustar_completo" );
        SeparatorTitle.removeClass( 'd-flex' );
        $( '#sidebar-container' ).toggleClass( 'sidebar-expanded sidebar-collapsed', 500 );
    }
    else 
    {
        pr( "ajustar_iconos" );
        SeparatorTitle.addClass( 'd-flex' );
        $( '#sidebar-container' ).toggleClass( 'sidebar-expanded sidebar-collapsed', 500 );
    }
    
    // Collapse/Expand icon
    $( '#collapse-icon' ).toggleClass( 'fa-angle-double-left fa-angle-double-right' );
}
</script>

<script type="text/javascript">
revisarAncho = function()
{
    var alto  = $( window ).height();
    var ancho = $( window ).width();
    
    if( ancho <= 750 )
    {
        pr( " ancho:" + ancho );
        pr( "se mantiene el display" );
        $( '#sidebar-container' ).attr( "style", "display: block !important" );
        SidebarCollapse();
    }

    if( ancho <= 331 )
    {
        //$( '#sidebar-container' ).attr( "style", "display: block !important" );
    }
}
$( window ).resize
(
    function()
    {
        revisarAncho();
    }
);
revisarAncho();

$( document ).on
(
    "click", 
    ".navbar-right .sidebar-container", 
    function( e )
    {
        e.stopPropagation();
    }
);
</script>

<script type="text/javascript">
//valores por defecto
$( "#cbo_tipo" ).val( 2 );
$( "#chk_estado_DISPONIBLE" ).prop( 'checked', true );
buscarHabitaciones();
buscarSaunas();
SidebarCollapse();
actualizarTotales();
</script>

<script type="text/javascript">
////aqui se agrega el procedimiento de levantar el popup de alerta cuando ya estan proximo a terminar, por ahora es de 15 antes de terminar 2020-02-27
//s1 1000 es un segundo
var tid = setInterval
(
    function()
    {
        buscarHabitaciones();
        buscarSaunas();
    }, 
    300000 //5 minutos
    //60000 //1 minuto
);
abortTimer = function() 
{
    clearTimeout( tid );
}
</script>