@extends('layouts.layout_empty')


@section('title', 'Terralink - Viewer')

@section('style')
<style>
    nav{
        height: fit-content;
        background-color: black;
        width: 100%;
    }
    nav .row{
        display: none;
        height: 0;
        transition: 0.5s;
    }
    nav.active .row{
        height: 4.5em;
        align-items: center;
        display: inline-flex;
        width: 100%;
    }

    body{
        background: #202020;
    }
    nav *{
        font-size: 1.2em;
    }
    .menu-top{
        background: white;
        width: 100%;
        text-align: center;
        border-radius: 0px 0px 15px 15px;
        z-index:2;
    }
    .menu-top i{
        color: black;
    }
    .menu-top:hover{
        transition: 0.5s;
        background: black;
    }
    .menu-top:hover i{
        color: white;
    }
    .set-iframe{
        width: 100%;
        position: fixed;
        height: 100%;
        top: 0;
        padding-top: 0em;
        transition: 0.5s;
        z-index: -1;
    }
    .set-iframe.active{
        padding-top: 5.5em;
    }

</style>

@endsection

@section('modal')

@endsection


@section('content')
<nav class="active">
    <div class="row m-0">
        <div class="col-1"></div>
        <div class="col-auto text-white">ENDOSCOPIST : นพ.สุรัชณัฏฐ์ จิตรัตน์</div>
        <div class="col-auto text-white">Room : Endoscopy Room7</div>
        <div class="col-auto text-white">Procedure : EGD</div>
        <div class="col"></div>
        <div class="col-auto text-white"><a href="{{url('')}}" class="btn btn-outline-dark waves-effect waves-light rounded-0"><i class="mdi mdi-exit-to-app"></i> Exit</a></div>
        <div class="col-1"></div>
    </div>
</nav>
<div class="row m-0">
    <div class="col"></div>
    <div class="col-3"><div class="menu-top position-absolute"  onclick="set_menutop()"><i class="mdi mdi-chevron-up mdi-18px"></i></div></div>
    <div class="col"></div>
</div>
<div class="set-iframe active">
    <div class="col-12">
        <img src="{{url('')}}/public/images/2462_1_2563_10_07_12_15_57.png" frameborder="0" class="h-100 w-100"></iframe>
    </div>
</div>
@endsection









@section('script')
<script src="{{asset('public/js/jquery.min.js')}}"></script>
<script>
    function set_menutop(){
        if($(".set-iframe").hasClass('active')){
            $(".set-iframe, nav").removeClass('active')
        }else{
            $(".set-iframe, nav").addClass('active')
        }
    }
</script>
@endsection