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

@section('style')
<style>
    .header-menu-line{
        font-weight: 600;
        font-size: larger;
        color: #fff;
        text-decoration: underline;
    }
    .text-ipad{
        color: #9F9F9F !important;
    }
    .btn-blue{
        background: #1BC5BD;
    }
    .btn-blue:hover{
        background: #0f817c;
    }
    .btn-confirm{
        width: fit-content;
        padding: 0.5em 4em;
        position: fixed;
        right: 5em;
        bottom: 10%;
    }
    .text-left-menu{
        font-size: large;
        color: #fff;
    }
    .alc{
        align-items: center;
    }
    .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple{
        border: none;
        background-color: #2a2b2f !important;
        color: #fff;
    }
.line-ipad{
    margin-top: 1.5em;
    padding-bottom: 0.5em;
    border-top: 1px solid #707070;
}
</style>
@endsection

@section('modal')

@endsection

@section('content')
@php
    $data1 = ['Incharge','Recovery','Reprocess'];
    $data2 = ['Room 1','Room 2','Room 3','Room 4','Room 5','Fluoroscopy','ERCP','Manometry'];
@endphp
<div class="row m-0 mt-2">
    <div class="col-6" style="white-space: nowrap;">
        <a href="{{ url()->previous() }}"><i class="fas fa-angle-left text-light icon-lg"></i> <font class="header-menu-line text-light"> Manage</font></a>
    </div>
    <div class="col-6 text-right">
        <a href="{{ url()->previous() }}"><i class="fas fa-check text-light"></i></a>
    </div>
</div>
<div class="col-12">
    <br><br>
    @foreach ($data1 as $d1)
    <div class="row m-0 mt-5 alc">
        <div class="col-3 text-left-menu">{{$d1}}</div>
        <div class="col-9">
            <select class="form-control selectpicker2" multiple>
                <option>Mustard</option>
                <option>Ketchup</option>
                <option>Relish</option>
            </select>
        </div>
    </div>
    @endforeach
    <div class="row m-0">
        <div class="col-12">
            <div class="line-ipad"></div>
        </div>
    </div>
    @foreach ($data2 as $d2)
    <div class="row m-0 mt-5 alc">
        <div class="col-3 text-left-menu">{{$d2}}</div>
        <div class="col-4">
            <select class="form-control selectpicker3" multiple>
                <option>Mustard</option>
                <option>Ketchup</option>
                <option>Relish</option>
            </select>
        </div>
        <div class="col-5">
            <select class="form-control selectpicker2" multiple>
                <option>Mustard</option>
                <option>Ketchup</option>
                <option>Relish</option>
            </select>
        </div>
    </div>
    @endforeach
</div>


@endsection

@section('script')
<script>
// Class definition
var KTSelect2 = function() {
 // Private functions
 var demos = function() {

  $('.selectpicker2').select2({
   placeholder: "พยาบาลเเละผู้ช่วย",
  });
  $('.selectpicker3').select2({
   placeholder: "แพทย์",
  });

 }



 // Public functions
 return {
  init: function() {
   demos();
  }
 };
}();

// Initialization
jQuery(document).ready(function() {
 KTSelect2.init();
});
</script>
@endsection