<!-- Creado: Félix Ricardo Oliva Alonso, 10/07/2017. Se crea la vista para la visualización de camas (PRUEBA) -->
<!-- Modificado: Félix Ricardo Oliva Alonso, 11/07/2017. Se modifica la distribución de los elemnentos -->
<!-- Modificado: Félix Ricardo Oliva Alonso, 12/07/2017. Se modifica la distribución de los elemnentos -->
<!-- Modificado: Adrian Fabian Sanchez Galicia, 22/08/2017. Se modifica el menu, se agregan funciones para la manipulacion de camas -->
<?php
use App\Libraries\ejLib;
$var = ejLib::getInstance();
$soapclient = $var->getWs();
$wsClave = $var->get_wsClave();
//ID_DOC  CS
$Admision_listaServicios = $soapclient->Admision_listaServicios('51001', '1', $wsClave);
$fe_Admision_listaServicios = new SimpleXMLElement(utf8_encode($Admision_listaServicios));
//echo '[ '.$Admision_listaServicios.' ]';
//ID_ESP  CS
//$Admision_listaCamasServicio = $soapclient->Admision_listaCamasServicio('1','1',$wsClave);
//$Camas_Admision_listaCamasServicio = new SimpleXMLElement(utf8_encode($Admision_listaCamasServicio));
//echo '<br><br><br><label>Mis camas: </label>'.'[ '.$Admision_listaCamasServicio.' ]';
?>

@extends('layouts.master')
@section('titulo')
    {{ 'Asignar Camas' }}
@endsection

@section('navegacion')
    @include('layouts.navegacion')
@endsection

@section('titulo_pagina')
    <div class="titulo_pagina"><h2>ADMISIÓN HOSPITALARIA</h2></div>
@endsection

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/usuarioGeneral.css">
<link rel="stylesheet" href="css/usuariocm.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.js"></script>

<script type="text/javascript">

    var jqGetAjax = function (php_url_post, objetoHTML, array_datos) {
        var request = $.ajax({url: php_url_post, method: "POST", data: array_datos, dataType: "html"});
        request.done(function (msg) {
            $("#" + objetoHTML).html(msg);
        });
        request.fail(function (jqXHR, textStatus) {
            $("#" + objetoHTML).html("Request failed: " + textStatus);
        });
    }

    $(document).ready(function () {
        $("#menu_panel").hide();
        $("#menu_panel_2").hide();
    });

    $(document).on("click", ".id_servicios", function () {
        var idEspecialidad = $(this).attr('id');
        var idNombreEsp = $(this).find('.idNombreEsp').text();
        $('.especialidadSeleccionada').removeClass('especialidadSeleccionada');
        $(this).addClass('especialidadSeleccionada');
        //alert("Mi id esp: "+idEspecialidad+" Nombre: "+idNombreEsp);
        $("#menu_panel").show();
        jqGetAjax("asignarcama-opcirugia", "menu_panel", {idEspecialidad: idEspecialidad, idNombreEsp: idNombreEsp});
    });

    function activarCama(elemento) {
        $('.camaSeleccionada').removeClass('camaSeleccionada');
        $(elemento).closest('.camaWidget').addClass('camaSeleccionada');
    }

    $(document).on("dblclick", ".datos_paciente  .ingresar", function () {
        var idespecialidad = $('#idespecialidad').val();
        var idEspecialidad = $(this).attr('id');
        var idNombreEsp = $(this).find('.idNombreEsp').text();
        var nocama = $(this).closest('.datos_paciente').attr('data-nocama');
        var idtiposervicio = $(this).closest('.datos_paciente').attr('data-idtiposervicio');
        $("#menu_panel_2").show();
        jqGetAjax("asignarcama-busqueda", "formulario_paciente", {
            nocama: nocama,
            idtiposervicio: idtiposervicio,
            idespecialidad: idespecialidad
        });
        cambiarVistaLista();
        activarCama(this);
    });


    $(document).on("dblclick", ".datos_paciente_lista  .ingresar", function () {
        var idespecialidad = $('#idespecialidad').val();
        $("#menu_panel_2").show();
        var nocama = $(this).closest('.mosaico_dp ').attr('data-nocama');
        var idtiposervicio = $(this).closest('.datos_paciente').attr('data-idtiposervicio')
        jqGetAjax("asignarcama-busqueda", "formulario_paciente", {
            nocama: nocama,
            idtiposervicio: idtiposervicio,
            idespecialidad: idespecialidad
        });
        $("#menu_foto22").hide();
        activarCama(this);
    });

    $(document).on("dblclick", ".datos_paciente  .reservar, .datos_paciente_lista  .reservar", function () {
        var id = $(this).attr('data-idadmision');
        $("#menu_panel_2").show();
        jqGetAjax("modificar_cama", "formulario_paciente", {
            IDADMISION: id
        });
        cambiarVistaLista();
        activarCama(this);
    });

    $(document).on("click", ".altaCama", function () {
        var id = $(this).attr('data-idadmision');
        $("#menu_panel_2").show();
        jqGetAjax("alta_cama", "formulario_paciente", {
            IDADMISION: id
        });
        cambiarVistaLista();
        activarCama(this);
    });

    $(document).on("click", ".paseA", function () {
        var id = $(this).attr('data-idadmision');
        $("#menu_panel_2").show();
        jqGetAjax("pasea_cama", "formulario_paciente", {
            IDADMISION: id
        });
        cambiarVistaLista();
        activarCama(this);
    });

    function cambiarVistaLista() {
        $('.mosaico_dp').removeClass('datos_paciente').addClass('datos_paciente_lista');
        $('.mosaico_np').removeClass('nombre_paciente').addClass('nombre_paciente_lista');
        $('.mosaico_fp').removeClass('foto_paciente').addClass('foto_paciente_lista');
        $('.mosaico_ep').removeClass('estado_paciente').addClass('estado_paciente_lista');
        $('.mosaico_io').removeClass('ingresar_opcion').addClass('ingresar_opcion_lista');
        $("#menu_foto22").hide();
        $('.curp-click').hide();
    }

    $(document).on('click', '#cerrar_tabla', function () {
        $('#formulario_paciente').html('');
        $("#menu_panel_2").hide();
        $('#mosaico').click();
        $("#menu_foto22").show();
    });

    $(document).on("click", "#lista", function () {
        $('.mosaico_dp').removeClass('datos_paciente').addClass('datos_paciente_lista');
        $('.mosaico_np').removeClass('nombre_paciente').addClass('nombre_paciente_lista');
        $('.mosaico_fp').removeClass('foto_paciente').addClass('foto_paciente_lista');
        $('.mosaico_ep').removeClass('estado_paciente').addClass('estado_paciente_lista');
        $('.mosaico_io').removeClass('ingresar_opcion').addClass('ingresar_opcion_lista');
        $('.curp-click').hide();
    });

    $(document).on("click", "#mosaico", function () {
        $('.mosaico_dp').removeClass('datos_paciente_lista').addClass('datos_paciente');
        $('.mosaico_np').removeClass('nombre_paciente_lista').addClass('nombre_paciente');
        $('.mosaico_fp').removeClass('foto_paciente_lista').addClass('foto_paciente');
        $('.mosaico_ep').removeClass('estado_paciente_lista').addClass('estado_paciente');
        $('.mosaico_io').removeClass('ingresar_opcion_lista').addClass('ingresar_opcion');

    });

    $(document).on("click", "#ocultar_menu", function () {
        $("#menu_foto22").toggle();
    });

    $(document).on("click", "#ocultar_menu_seccion", function () {
        $(".menu_panel").toggle();
        $('#menu_panel_2').removeClass('menu_panel_2').addClass('menu_panel_3');
    });

    $(document).on("click", "#ocultar_menu_seccion_2", function () {
        $(".menu_panel_2").toggle();
        $(".menu_panel_3").toggle();
    });


    $(document).on("mouseover", ".datos_paciente", function () {
        $(this).find(".curp-click").show();
    });
    $(document).on("mouseleave", ".datos_paciente", function () {
        $(this).find(".curp-click").hide();
    });

</script>

<style media="screen">

    .curp-click {
        font-size: 9pt;
        text-align: center;
        color: rgba(0, 0, 0, 0.9);
        border-radius: 0px 0px 5px 0px;
        word-wrap: break-word;
        position: absolute;
        width: 80px;
        bottom: 0px;
        cursor: copy;
        box-sizing: border-box;
        transform: scale(1.05);
        -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.75);
        position: absolute;
        bottom: 90;

        background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
        background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
        background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
        background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
    }

    #menu_foto22 {
        width: 110px;
        min-height: 260px;
        box-sizing: border-box;
        float: left;
        background-color: #ffffff;
        text-align: left;
        margin-right: 10px;
        font-size: 9pt;
    }

    #menu_foto22 nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #menu_foto22 nav ul li {
        text-align: center;
        border-right: solid 1px rgba(204, 204, 204, 0.5);
        border-left: solid 1px rgba(204, 204, 204, 0.5);
    }

    #menu_foto22 nav ul li a {
        padding: 8.5px 5px;
        display: block;
        color: #555555;
        text-decoration: none;
        font-weight: bold;
        font-size: 9pt;
        word-wrap: break-word;
    }

    #menu_foto22 nav ul li a:hover, .especialidadSeleccionada {
        color: black;
        background: rgba(0, 0, 0, 0.0225);
        border-top: 0.5px solid rgba(0, 0, 0, 0.06);
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    }

    /*=====================================*/
    .menu_panel_principal {
        box-sizing: border-box;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

    .menu_panel {
        background-color: #ffffff;
        float: left;
        box-sizing: border-box;
        resize: horizontal;
        overflow: scroll;
        min-width: 190px;
        max-width: 865px;
        min-height: 475px;
        max-height: 550px;
        margin-left: 3px;
        display: inline-block;

    }

    .menu_panel_2 {
        background-color: #ffffff;
        float: left;
        box-sizing: border-box;
        overflow: scroll;
        min-width: 190px;
        max-width: 865px;
        min-height: 475px;
        max-height: 550px;
        margin-left: 3px;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

    }

    .menu_panel_2 > *, .menu_panel_3 > * {
        transform: scale(0.9566);
    }

    .menu_panel_3 {
        background-color: #ffffff;
        float: left;
        box-sizing: border-box;
        overflow: auto;
        width: 100%;
        min-height: 475px;
        max-height: 550px;
        margin-left: 3px;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

    }

    .menu_titulo {
        font-size: 9pt;
        text-align: center;
        font-weight: bold;
    }

    .datos_paciente {
        display:inline-table;
        max-height: 160px;
        max-width: 80px;
        border-radius: 0px 0px 5px 0px;
        border: 0px;
        margin-left: 4px;
        margin-bottom: 10px;
        cursor: pointer;
        position: relative;
        -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.75);
    }

    .nombre_paciente {
        font-size: 8.5pt;
        font-weight: bold;
        text-align: center;
        height: 17px;
        padding-top: 3px;
        margin-bottom: 10px;
    }

    .estado_paciente {
        font-size: 8.5pt;
        font-weight: bold;
        text-align: center;
        height: 32px;
        padding-top: 3px;
        color: rgba(0, 0, 0, 0.9);
        border-radius: 0px 0px 5px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .foto_paciente {
        margin-top: -18;
        height: 65px;
        width: 65px;
        padding: 15px 10px 10px 8px;
    }

    .ingresar {
        background: linear-gradient(
                to left,
                white 0,
                white 10%,
                rgba(1, 46, 52, 0.60) 10%,
                rgba(1, 46, 52, 0.60) 90%,
                white 90%,
                white) no-repeat;
        background-size: 100% 3.75px;
    }

    .datos_paciente > .ingresar:hover {
        background: linear-gradient(
                to left,
                white 0,
                white 1%,
                rgba(1, 46, 52, 0.60) 1%,
                rgba(1, 46, 52, 0.60) 99%,
                white 99%,
                white) no-repeat;
        background-size: 100% 3.85px;

    }

    .alta {
        background: linear-gradient(
                to left,
                white 0,
                white 10%,
                rgba(85, 6, 0, 0.60) 10%,
                rgba(85, 6, 0, 0.60) 90%,
                white 90%,
                white) no-repeat;
        background-size: 100% 3.75px;
    }

    .datos_paciente > .alta:hover {
        background: linear-gradient(
                to left,
                white 0,
                white 1%,
                rgba(85, 6, 0, 0.60) 1%,
                rgba(85, 6, 0, 0.60) 99%,
                white 99%,
                white) no-repeat;
        background-size: 100% 3.85px;

    }

    .reservar {
        background: linear-gradient(
                to left,
                white 0,
                white 10%,
                rgba(212, 157, 106, 0.90) 10%,
                rgba(212, 157, 106, 0.90) 90%,
                white 90%,
                white) no-repeat;
        background-size: 100% 3.75px;
    }

    .datos_paciente > .reservar:hover {
        background: linear-gradient(
                to left,
                white 0,
                white 1%,
                rgba(212, 157, 106, 0.90) 1%,
                rgba(212, 157, 106, 0.90) 99%,
                white 99%,
                white) no-repeat;
        background-size: 100% 3.85px;

    }

    .ingresar_opcion {
        width: 76px;
        height: 14px;
        margin: 2px;
        background: rgba(70, 70, 69, 0.4);
        color: white;
        font-size: 8pt;
        text-align: center;
    }

    /* ==================== MOSAICOS ======================= */
    .datos_paciente_lista {
        height: 36px;
        width: 165px;
        margin: 10px 4px 4px 4px;
        -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.75);
        cursor: pointer;
        border-radius: 0px 0px 10px 0px;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

    .nombre_paciente_lista {
        float: right;
        font-size: 8.5pt;
        height: 28px;
        width: 75px;
        text-align: left;
        margin-left: 0;
        order: 2;
        font-weight: bold;
        padding-top: 9px;
    }

    .foto_paciente_lista {
        position: left;
        height: 34px;
        width: 34px;
        margin-right: 0px;
        margin-top: 2px;
        order: 1;
    }

    .estado_paciente_lista {
        font-size: 8.5pt;
        font-weight: bold;
        text-align: center;
        height: 26px;
        width: 60px;
        color: rgba(0, 0, 0, 0.9);
        order: 3;
        margin-top: 0px;
        padding: 6px 5px 0px 5px;
        border-radius: 0px 0px 10px 0px;
    }

    .ingresar_opcion_lista {
        display: none;
    }

    .ocultar_menu_contenedor {
        padding-top: 5px;
        height: 25px;
        margin-top: 20px;
        margin-bottom: 40px;
        border-top: 1px solid rgba(204, 204, 204, 0.5);
        border-bottom: 1px solid rgba(204, 204, 204, 0.5);
    }

    .ocultar_menu {
        cursor: pointer;
        margin-bottom: 20px;
        margin-left: 10px;
        display: inline-block;
    }

    .ocultar_menu:hover {
        font-weight: bold;
    }

    .menu_opciones {
        display: inline-block;
        margin-bottom: 10px;
    }

    .menu_opciones:hover {
        transform: scale(1.06);
    }

    .datos_paciente:hover, .datos_paciente_lista:hover, .camaSeleccionada {
        transform: scale(1.0175);
        z-index: 10;
        -webkit-box-shadow: 0.5px 0.5px 5px 0px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0.5px 0.5px 5px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0.5px 0.5px 5px 0px rgba(0, 0, 0, 0.5);
    }

    .border_ocultar {
        transform: scale(1.025);
        z-index: 10;
    }

    .row_priv {
        margin-right: 0px;
        margin-left: 0px;
        display: flex;
    }

    /* ==================== NUEVA TABLA ======================= */
    #contenedor_tabla_asignar_cama {
        overflow: auto;
        width: 100%;
        margin-top: 20px;
    }

    #contenedor_tabla_asignar_cama table {
        width: 100%;
        height: auto;
        font-size: 9.3pt;
    }

    #contenedor_tabla_asignar_cama th {
        background-color: rgba(204, 204, 204, 0.35);
        color: #5e5e5e;
    }

    #contenedor_tabla_asignar_cama th, td {
        text-align: left;
        border: 0;
        height: 9.3pt;
    }

    #contenedor_tabla_asignar_cama tr:nth-child(even) {
        background-color: rgba(244, 244, 244, 0.3);
    }

    #contenedor_tabla_asignar_cama tr:hover {
        background-color: rgba(240, 239, 239, 0.4);
    }
</style>


@section('content')
    <div id="contenedor">

        <div class="ocultar_menu_contenedor">
            <div class="ocultar_menu" id="ocultar_menu"><img src="Img/menu.png" width="20px"> MENÚ PRINCIPAL</div>
            <div class="ocultar_menu" id="ocultar_menu_seccion"><img src="Img/menu_izq.png" width="20px"> SECCIÓN</div>
            <div class="ocultar_menu" id="ocultar_menu_seccion_2"><img src="Img/menu_der.png" width="20px"> SECCIÓN
            </div>
        </div>

        <div id="menu_foto22">
            <nav>
                <ul>

                    @foreach ($fe_Admision_listaServicios->respuesta as $fe_als)
                        @if ($fe_als->baja_log==0)
                            <li><a class="id_servicios" id="{!! $fe_als->idservicio !!}" href="#">
                                    <div class="idNombreEsp">{!! utf8_decode($fe_als->nombre) !!}</div>
                                </a></li>
                        @endif
                    @endforeach

                </ul>
            </nav>
        </div>

        <div class="menu_panel_principal">
            <div class="menu_panel" id="menu_panel"> {{-- Aquí se inserta la primera área de trabajo  --}}</div>
            <div class="menu_panel_2" id="menu_panel_2">
                <div class="formulario_paciente" id="formulario_paciente"
                     name="formulario_paciente">{{-- Aquí se inserta la primera área de trabajo  --}} </div>
            </div>
        </div>

    </div>

@endsection
