@extends('layouts.layout_mornitor')
@section('title', 'EndoCapture')

@section('style')
<style>
    .menu-h70{
        height: 70%;
    }
    #menu_comment{
        border: none;
        background: #2A2B2F;
        color: #fff;
    }
    .menu-detail{
        display: -webkit-box;
        overflow-y: auto;
        width: 100%;
    }
    .detail-list{
        width: 300px;
        max-width: 25%;
        min-width: 25%;
        height: 100%;
        padding: 5px;
        padding-bottom: 1em;
        display: none;
    }
    .detail-list.active{
        display: block;
    }
    .card{
        height: 100%;
        border: none;
    }
    .card-body{
        border-radius: 5px;
        background: #2A2B2F;
    }
    .text-larger{
        font-size: x-large
    }
    .text-normal{
        font-size: normal;
    }
</style>
@endsection

@section('modal')

@endsection

@section('tab-left')
<div class="row m-0">
    <div class="col text-light"><font class="under-line">Operation Room</font></div>
    <div class="col-auto"><a href="{{url('ipad_manage')}}" class="text-ipad"><i class="flaticon-interface-7"></i></a></div>
</div>
@for($i=1;$i<=5;$i++)
<div class="row m-0 mt-3">
    <div class="col-auto">
        <span class="switch switch-sm switch-outline switch-success">
            <label>
             <input type="checkbox" checked="checked" name="select" class="check-room" sub="room_{{$i}}"/>
             <span></span>
            </label>
        </span>
    </div>
    <div class="col">
        <font class="text-switch">Room {{$i}}</font>
    </div>
</div>
@endfor
<div class="row m-0 mt-3">
    <div class="col-auto">
        <span class="switch switch-sm switch-outline switch-success">
            <label>
             <input type="checkbox" checked="checked" name="select" class="check-room" sub="fluoroscopy"/>
             <span></span>
            </label>
        </span>
    </div>
    <div class="col">
        <font class="text-switch">Fluoroscopy</font>
    </div>
</div>
<div class="row m-0 mt-3">
    <div class="col-auto">
        <span class="switch switch-sm switch-outline switch-success">
            <label>
             <input type="checkbox" checked="checked" name="select" class="check-room" sub="ercp"/>
             <span></span>
            </label>
        </span>
    </div>
    <div class="col">
        <font class="text-switch">ERCP</font>
    </div>
</div>
<div class="row m-0 mt-3">
    <div class="col-auto">
        <span class="switch switch-sm switch-outline switch-success">
            <label>
             <input type="checkbox" checked="checked" name="select" class="check-room" sub="manometry"/>
             <span></span>
            </label>
        </span>
    </div>
    <div class="col">
        <font class="text-switch">Manometry</font>
    </div>
</div>
<div class="row m-0 mt-5 pt-4 border-top broder-mornitor">
    <div class="col text-light"><font class="under-line">Incharge</font></div>
    <div class="col-auto"><a href="{{url('ipad_manage')}}" class="text-ipad"><i class="flaticon-interface-7"></i></a></div>
</div>
<div class="row m-0 mt-1">
    @for($i=0;$i<4;$i++)
    <div class="col-6 pr-0 mt-2 text-light">พว.สุรัชณัฏฐ์  จ.</div>
    @endfor
</div>
<div class="row m-0 mt-3">
    <div class="col text-light"><font class="under-line">Recovery</font></div>
</div>
<div class="row m-0 mt-1">
    @for($i=0;$i<4;$i++)
    <div class="col-6 pr-0 mt-2 text-light">พว.สุรัชณัฏฐ์  จ.</div>
    @endfor
</div>
<div class="row m-0 mt-3">
    <div class="col text-light"><font class="under-line">Reprocess</font></div>
</div>
<div class="row m-0 mt-1">
    @for($i=0;$i<4;$i++)
    <div class="col-6 pr-0 mt-2 text-light">พว.สุรัชณัฏฐ์  จ.</div>
    @endfor
</div>
@endsection


@section('content')
<div class="row m-0 menu-h70">
    <div class="menu-detail">
        @for($i=1;$i<=5;$i++)
        <div class="detail-list active" id="room_{{$i}}">
            <div class="card">
                <div class="card-body p-3">
                    <h3 class="text-light text-center">Room {{$i}} <i class="fas fa-podcast text-danger"></i></h3>
                    <font class="under-line text-light text-normal mt-3">Operation Room</font>
                    <br>
                    <div class="text-light mt-3"><font class="text-larger">3</font>/15</div>
                    <br>
                    <font class="under-line text-light text-normal mt-3 mb-2">แพทย์</font>
                    <div class="text-light mt-2">นพ.สุรัชณัฏฐ์  จิตรัตน์</div>
                    <div class="text-light mt-2">นพ.สุรัชณัฏฐ์  จิตรัตน์</div>
                    <br>
                    <font class="under-line text-light text-normal mt-3 mb-2">แพทย์</font>
                    @for($x=1;$x<=5;$x++)
                    <div class="text-light mt-2">พว.สุรัชณัฏฐ์  จิตรัตน์</div>
                    @endfor
                </div>
            </div>
        </div>
        @endfor
        <div class="detail-list active" id="fluoroscopy">
            <div class="card">
                <div class="card-body p-3">
                    <h3 class="text-light text-center">Fluoroscopy <i class="fas fa-podcast text-danger"></i></h3>
                    <font class="under-line text-light text-normal mt-3">Operation Room</font>
                    <br>
                    <div class="text-light mt-3"><font class="text-larger">3</font>/15</div>
                    <br>
                    <font class="under-line text-light text-normal mt-3 mb-2">แพทย์</font>
                    <div class="text-light mt-2">นพ.สุรัชณัฏฐ์  จิตรัตน์</div>
                    <div class="text-light mt-2">นพ.สุรัชณัฏฐ์  จิตรัตน์</div>
                    <br>
                    <font class="under-line text-light text-normal mt-3 mb-2">แพทย์</font>
                    @for($x=1;$x<=5;$x++)
                    <div class="text-light mt-2">พว.สุรัชณัฏฐ์  จิตรัตน์</div>
                    @endfor
                </div>
            </div>
        </div>
        <div class="detail-list active" id="ercp">
            <div class="card">
                <div class="card-body p-3">
                    <h3 class="text-light text-center">ERCP <i class="fas fa-podcast text-danger"></i></h3>
                    <font class="under-line text-light text-normal mt-3">Operation Room</font>
                    <br>
                    <div class="text-light mt-3"><font class="text-larger">3</font>/15</div>
                    <br>
                    <font class="under-line text-light text-normal mt-3 mb-2">แพทย์</font>
                    <div class="text-light mt-2">นพ.สุรัชณัฏฐ์  จิตรัตน์</div>
                    <div class="text-light mt-2">นพ.สุรัชณัฏฐ์  จิตรัตน์</div>
                    <br>
                    <font class="under-line text-light text-normal mt-3 mb-2">แพทย์</font>
                    @for($x=1;$x<=5;$x++)
                    <div class="text-light mt-2">พว.สุรัชณัฏฐ์  จิตรัตน์</div>
                    @endfor
                </div>
            </div>
        </div>
        <div class="detail-list active" id="manometry">
            <div class="card">
                <div class="card-body p-3">
                    <h3 class="text-light text-center">Manometry <i class="fas fa-podcast text-danger"></i></h3>
                    <font class="under-line text-light text-normal mt-3">Operation Room</font>
                    <br>
                    <div class="text-light mt-3"><font class="text-larger">3</font>/15</div>
                    <br>
                    <font class="under-line text-light text-normal mt-3 mb-2">แพทย์</font>
                    <div class="text-light mt-2">นพ.สุรัชณัฏฐ์  จิตรัตน์</div>
                    <div class="text-light mt-2">นพ.สุรัชณัฏฐ์  จิตรัตน์</div>
                    <br>
                    <font class="under-line text-light text-normal mt-3 mb-2">แพทย์</font>
                    @for($x=1;$x<=5;$x++)
                    <div class="text-light mt-2">พว.สุรัชณัฏฐ์  จิตรัตน์</div>
                    @endfor
                </div>
            </div>
        </div>


    </div>
</div>
<div class="row m-0 mt-5">
    <textarea name="" id="menu_comment" class="form-control" rows="7"></textarea>
</div>
@endsection

@section('script')
    <script>
        $(".check-room").click(function(){
            var sub_id = $(this).attr('sub')
            if ($(this).is(':checked')) {
                $("#"+sub_id).addClass('active')
            }else{
                $("#"+sub_id).removeClass('active')
            }
        })
    </script>
@endsection