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

@section('style')
<style>
    .nav.nav-pills .nav-link{
        border-radius: 0;
        justify-content: center;
        padding: 0.8em 0;
        margin: 0 !important;
        width: 100%;
        font-weight: 400;
        font-size: larger;
    }
    .nav-item{
        padding: 0 !important;
        margin: 0 !important;
    }
    br{
        margin: 0;
    }
    .table-borderless td,.text-ipad{
        color: #9F9F9F;
    }
</style>
@endsection

@section('modal')

@endsection

@section('content')




<ul class="nav nav-light-light nav-bold nav-pills row m-0">
    <li class="nav-item col">
        <a class="nav-link active" data-toggle="tab" href="#manage">Manage</a>
    </li>
    <li class="nav-item col">
        <a class="nav-link" data-toggle="tab" href="#registered">Registered</a>
    </li>
    <li class="nav-item col">
        <a class="nav-link" data-toggle="tab" href="#room1">Room 1</a>
    </li>
    <li class="nav-item col">
        <a class="nav-link" data-toggle="tab" href="#room2">Room 2</a>
    </li>
    <li class="nav-item col">
        <a class="nav-link" data-toggle="tab" href="#room3">Room 3</a>
    </li>
    <li class="nav-item col">
        <a class="nav-link" data-toggle="tab" href="#recovery">Recovery</a>
    </li>
    <li class="nav-item col">
        <a class="nav-link" data-toggle="tab" href="#discharge">Discharge</a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade show active" id="manage" role="tabpanel" aria-labelledby="manage">
        <table class="table table-borderless mt-3">
            <thead>
                <tr>
                    <td></td>
                    <td>ห้อง</td>
                    <td>แพทย์</td>
                    <td>พยาบาล</td>
                    <td>ผู้ช่วย</td>
                    <td class="text-center">Remaining</td>
                    <td class="text-center">Manage</td>
                </tr>
            </thead>
            <tbody>
                @for ($i=1;$i<=5;$i++)
                <tr>
                    <td>
                        <span class="switch switch-sm switch-icon">
                            <label>
                             <input type="checkbox" checked="checked" name="select"/>
                             <span></span>
                            </label>
                        </span>
                    </td>
                    <td>Room {{$i}}</td>
                    <td>
                        นพ.สุรัชณัฏฐ์  จิตรัตน์<br>
                        นพ.สุรัชณัฏฐ์  จิตรัตน์
                    </td>
                    <td>
                        พว.สุรัชณัฏฐ์  จิตรัตน์<br>
                        พว.สุรัชณัฏฐ์  จิตรัตน์
                    </td>
                    <td>
                        คุณสุรัชณัฏฐ์  จิตรัตน์<br>
                        คุณสุรัชณัฏฐ์  จิตรัตน์
                    </td>
                    <td class="text-center">5/10</td>
                    <td class="text-center"><a href="{{url('ipad_manage')}}" class="text-ipad"><i class="flaticon-interface-7"></i></a></td>
                </tr>
                @endfor
                <tr>
                    <td>
                        <span class="switch switch-sm switch-icon">
                            <label>
                             <input type="checkbox" checked="checked" name="select"/>
                             <span></span>
                            </label>
                        </span>
                    </td>
                    <td>Recovery</td>
                    <td>
                        นพ.สุรัชณัฏฐ์  จิตรัตน์<br>
                        นพ.สุรัชณัฏฐ์  จิตรัตน์
                    </td>
                    <td>
                        พว.สุรัชณัฏฐ์  จิตรัตน์<br>
                        พว.สุรัชณัฏฐ์  จิตรัตน์
                    </td>
                    <td>
                        คุณสุรัชณัฏฐ์  จิตรัตน์<br>
                        คุณสุรัชณัฏฐ์  จิตรัตน์
                    </td>
                    <td class="text-center">5/10</td>
                    <td class="text-center"><i class="flaticon-interface-7"></i></td>
                </tr>
                <tr>
                    <td>
                        <span class="switch switch-sm switch-icon">
                            <label>
                             <input type="checkbox" checked="checked" name="select"/>
                             <span></span>
                            </label>
                        </span>
                    </td>
                    <td>Discharge</td>
                    <td>
                        นพ.สุรัชณัฏฐ์  จิตรัตน์<br>
                        นพ.สุรัชณัฏฐ์  จิตรัตน์
                    </td>
                    <td>
                        พว.สุรัชณัฏฐ์  จิตรัตน์<br>
                        พว.สุรัชณัฏฐ์  จิตรัตน์
                    </td>
                    <td>
                        คุณสุรัชณัฏฐ์  จิตรัตน์<br>
                        คุณสุรัชณัฏฐ์  จิตรัตน์
                    </td>
                    <td class="text-center">5/10</td>
                    <td class="text-center"><i class="flaticon-interface-7"></i></td>
                </tr>
            </tbody>
        </table>
        <div class="row m-0 mt-3 mb-4">
            <div class="col-6 text-ipad">Freetext</div>
            <div class="col-6 text-right">
                <button class="btn btn-sm btn-warning text-light">Edit</button>
            </div>
            <div class="col-12 mt-2">
                <textarea name="" class="form-control" rows="7"></textarea>
            </div>
        </div>

    </div>

    <div class="tab-pane fade" id="registered" role="tabpanel" aria-labelledby="registered">
        CCC
    </div>

    <div class="tab-pane fade" id="room1" role="tabpanel" aria-labelledby="room1">
        ...
    </div>

    <div class="tab-pane fade" id="room2" role="tabpanel" aria-labelledby="room2">
        ...
    </div>

    <div class="tab-pane fade" id="room3" role="tabpanel" aria-labelledby="room3">
        ...
    </div>

    <div class="tab-pane fade" id="recovery" role="tabpanel" aria-labelledby="recovery">
        ...
    </div>

    <div class="tab-pane fade" id="discharge" role="tabpanel" aria-labelledby="discharge">
        ...
    </div>


</div>
@endsection

@section('script')

@endsection