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

@section('style')
<style>
    .card{
        border: none;
    }
    .card-body{
        border-radius: 5px;
        background: #2A2B2F;
    }
    .text-larger{
        font-size: x-large
    }
    .text-normal{
        font-size: normal;
    }
    .color-ipad{
        color: #9F9F9F;
    }
    .form-control{
        border: none;
        background-color: #202125;
        color: #9F9F9F;
    }
    th,td{
        color: #9F9F9F;
        font-size: smaller;
    }
    .vtc{
        vertical-align: middle !important;
    }
    br{
        margin: 0;
    }
    .left-checkin{
        position: fixed;
    }
</style>
@endsection

@section('modal')

@endsection

@section('tab-left')
<div class="card">
    <div class="card-body p-3">
        <div class="form-group mt-5 mb-2">
            <div class="input-icon input-icon-right">
                <input type="text" class="form-control form-control-sm" placeholder="HN"/>
                <span><i class="flaticon2-search-1 icon-md"></i></span>
            </div>
        </div>
        @for($i=1;$i<=5;$i++)
        <div class="col-12 text-center mt-3">
            <a class="@if($i!=1) text-light @else text-primary @endif h5">Room {{$i}}</a>
        </div>
        @endfor
        <div class="col-12 text-center mt-3"><a class="text-light text-center h5">Fluoroscopy</a></div>
        <div class="col-12 text-center mt-3"><a class="text-light text-center h5">ERCP</a></div>
        <div class="col-12 text-center mt-3"><a class="text-light text-center h5">Manometry</a></div>
        <br>
    </div>
</div>
@endsection


@section('content')
<div class="card">
    <div class="card-body p-3">
        <table class="table table-borderless">
            <thead>
                <tr>
                    <th class="text-light">Check-in all</th>
                    <th class="text-light">HN (Age) / Name</th>
                    <th class="text-light">Endoscopist</th>
                    <th class="text-light">Procedure</th>
                    <th class="text-light">Remark</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="vtc"><span class="label label-lg label-inline font-weight-bolder label-rounded label-success">Reporting</span></td>
                    <td>1312523 (28)<br>สุรัชณัฏฐ์ จิตรัตน์</td>
                    <td>สุรัชณัฏฐ์ จิตรัตน์</td>
                    <td>EGD</td>
                    <td><textarea name=""class="form-control form-control-sm" rows="2"></textarea></td>
                </tr>
                <tr>
                    <td><span class="label label-lg label-inline font-weight-bolder label-rounded label-info">Operation</span></td>
                    <td>1312523 (28)<br>สุรัชณัฏฐ์ จิตรัตน์</td>
                    <td>สุรัชณัฏฐ์ จิตรัตน์</td>
                    <td>Colonoscopy</td>
                    <td><textarea name=""class="form-control form-control-sm" rows="2"></textarea></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="card mt-5">
    <div class="card-body p-3">
        <table class="table table-borderless">
            <tbody>
                @for ($i=1;$i<=3;$i++)
                <tr class="swirch-tr">
                    <td class="text-center vtc"><i class="la la-angle-up"></i>&emsp;<i class="la la-angle-down"></i></td>
                    <td>{{rand(10000,99999)}} ({{rand(1,20)}})<br>สุรัชณัฏฐ์ จิตรัตน์</td>
                    <td>สุรัชณัฏฐ์ จิตรัตน์</td>
                    <td>EGD, Colonoscopy</td>
                    <td>
                        <textarea name="" class="form-control form-control-sm" rows="2"></textarea>
                    </td>
                </tr>
                @endfor
            </tbody>
        </table>
    </div>
</div>
<br>
@endsection

@section('script')
<script>
    $(document).ready(function(){
        $(".la-angle-up,.la-angle-down").click(function(){
            var row = $(this).parents(".swirch-tr:first");
            if ($(this).is(".la-angle-up")) {
                row.insertBefore(row.prev());
            } else {
                row.insertAfter(row.next());
            }
            switch_tr()
            count_ton()


        });
    });
</script>
@endsection