@extends('layouts.app')
@section('title', 'EndoCapture')
@section('style')
<style>
    @media (min-width: 992px){
        .header-fixed.subheader-fixed.subheader-enabled .wrapper {
            padding-top: 65px;
        }
        .table_mobile{
            display: none;
        }
    }
    @media (max-width: 992px){
        #table_web{
            display: none;
        }
    }
    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background: #B5B5C3;
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #0071bb;
    }
    .label-pill{
        font-size: 1em;
    }
    td,th{
        vertical-align: inherit !important;
    }
    @keyframes ldio-vfu9b3lacsh {
      0% { opacity: 1 }
      50% { opacity: .5 }
      100% { opacity: 1 }
    }
    .ldio-vfu9b3lacsh div {
      position: absolute;
      width: 20px;
      height: 20px;
      top: 15px;
      animation: ldio-vfu9b3lacsh 1s cubic-bezier(0.5,0,0.5,1) infinite;
    }.ldio-vfu9b3lacsh div:nth-child(1) {
      transform: translate(30px,0);
      background: #93dbe9;
      animation-delay: -0.6s;
    }.ldio-vfu9b3lacsh div:nth-child(2) {
      transform: translate(70px,0);
      background: #689cc5;
      animation-delay: -0.4s;
    }.ldio-vfu9b3lacsh div:nth-child(3) {
      transform: translate(110px,0);
      background: #5e6fa3;
      animation-delay: -0.2s;
    }.ldio-vfu9b3lacsh div:nth-child(4) {
      transform: translate(150px,0);
      background: #3b4368;
      animation-delay: -1s;
    }
    .loadingio-spinner-bars-zy9i70wgs1m {
      width: 200px;
      height: 50px;
      display: inline-block;
      overflow: hidden;
      background: #ffffff;
    }
    .ldio-vfu9b3lacsh {
      width: 100%;
      height: 100%;
      position: relative;
      transform: translateZ(0) scale(1);
      backface-visibility: hidden;
      transform-origin: 0 0; /* see note above */
    }
    .ldio-vfu9b3lacsh div { box-sizing: content-box; }
    /* generated by https://loading.io/ */
    #kt_content{
        min-height: 970px;
    }
    .product-scroll{
        height: 5em;;
    }
    .dontnew{
        width: 50%;
        /* white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; */
    }
    #show_procedure_list:hover{
        color: #0071bb;
    }
    .row_ct{
        align-items: center;
    }
    form{
        width: 100%;
    }
    .form-control:disabled, .form-control[readonly] {
        background-color: #fff;
        border: none;
    }
    input[type='color']{
        padding: 0;
    }
</style>
@endsection

@section('modal')

@endsection

@section('content')


<div class="row">
    <div class="col-3">
        <div class="card">
            <div class="card-body">
                <form action="{{url('users')}}" method="POST" class="row row_ct">
                    @method('POST')
                    @csrf
                    <input type="hidden" name="type" value="add_user">
                    <div class="col-lg-8"><input name="email" type="text" class="form-control form-control-sm"></div>
                    <div class="col-lg-4"><button type="submit" class="btn btn-success btn-sm" style="width: 100%;"><i class="fas fa-plus"></i> Add User</button></div>
                </form>
                <div class="row">
                    <div class="col-12"><hr></div>
                </div>
                <form action="{{url('home/create')}}" method="POST" class="row row_ct">
                    @method('GET')
                    @csrf
                    <div class="col-lg-8"><input type="text" name="search_all" class="form-control form-control-sm"></div>
                    <div class="col-lg-4"><button type="submit" class="btn btn-primary btn-sm" style="width: 100%;"><i class="flaticon2-search-1 icon-md"></i> Search</button></div>
                </form>
                <div class="row">
                    <div class="col-12"><hr></div>
                    <div class="col-12 text-center"><h3>Users</h3></div>
                </div>
                <ul class="nav flex-column nav-pills">
                    @foreach ($users as $us)
                    <li class="nav-item mb-2">
                        <a class="nav-link" id="home-tab-5" data-toggle="tab" href="#tab{{$us->id}}" thisname="{{$us->email}}" thispass="{{$us->password}}">
                            <span class="nav-text">{{$us->email}}</span>
                            <i class="fas fa-angle-right"></i>
                        </a>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>

    </div>
    <div class="col-9">
        <div class="tab-content" id="myTabContent5">
            @foreach ($users as $us)
            @php
                $wd[0]=array('book_user',$us->id);
                $wd[1]=array('book_doctor','!=',null);
                $wd[2]=array('book_status',0);
                $doctor = DB::table('tb_casebooking')->where($wd)->get();

                $wr[0]=array('book_user',$us->id);
                $wr[1]=array('book_room','!=',null);
                $wr[2]=array('book_status',0);
                $room = DB::table('tb_casebooking')->where($wr)->get();

                $wp[0]=array('book_user',$us->id);
                $wp[1]=array('book_procedure','!=',null);
                $wp[2]=array('book_status',0);
                $procedure = DB::table('tb_casebooking')->where($wp)->get();
            @endphp














                <div class="tab-pane fade" id="tab{{$us->id}}" role="tabpanel" aria-labelledby="home-tab-5">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-body">
                                    <form action="{{url('users')}}/{{$us->id}}" method="POST" class="row">
                                        @method('PUT')
                                        @csrf
                                        <div class="col-2"><h3>Username</h3></div>
                                        <div class="col-3"><input type="text" name="email" class="form-control form-control-sm username" value="{{$us->email}}" id="us{{$us->id}}" disabled></div>
                                        <div class="col-2 text-right"><h3>Password</h3></div>
                                        <div class="col-3"><input type="password" name="password" class="form-control form-control-sm password" value="------" id="ps{{$us->id}}" disabled></div>
                                        <div class="col-1">
                                            <a href="#" class="btn btn-warning btn-sm brn_user" sent="{{$us->id}}">Edit</a>
                                            <button type="submit" class="btn btn-success btn-sm btn_edit_user" id="btnu_{{$us->id}}" sent="{{$us->id}}">confirm</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row mb-2 row_ct">
                                        <div class="col-4"><h4>Doctor</h4></div>
                                        <div class="col-8">
                                            <div class="input-icon input-icon-right">
                                                <input type="text" class="form-control form-control-sm doctor_search" dcid="{{$us->id}}" placeholder="Search..."/>
                                                <span><i class="flaticon2-search-1 icon-md"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <form action="{{url('users')}}" method="POST" class="row mb-5 row_ct">
                                        @method('POST')
                                        @csrf
                                        <input type="hidden" name="user_id" value="{{$us->id}}">
                                        <input type="hidden" name="type" value="tb_bookdoctor">
                                        <div class="col-7"><input type="text" name="bookdoctor_name" class="form-control form-control-sm" placeholder="" required></div>
                                        <div class="col-5"><button type="submit" class="btn btn-primary btn-sm" style="width: 100%;"><i class="fas fa-plus"></i> Add Doctor</button></div>
                                    </form>
                                    <div class="table-responsive" style="height: 35em;">
                                        <table class="table">
                                            <tbody class="doctor_table" id="doctor_table{{$us->id}}">
                                                @foreach ($doctor as $dt)
                                                    @php
                                                        $name_doc = DB::table('tb_bookdoctor')->where('bookdoctor_id',$dt->book_doctor)->first();
                                                    @endphp
                                                    <tr>
                                                        <td style="width: 80%;">
                                                            <input type="text" name="bookdoctor_name" class="form-control form-control-sm text_dc" value="{{$name_doc->bookdoctor_name}}" id="dc{{$name_doc->bookdoctor_id}}" disabled>
                                                            <input type="hidden" name="bookdoctor_id" value="{{$name_doc->bookdoctor_id}}">
                                                        </td>
                                                        <td style="width: 20%;"><button class="btn btn-warning btn-sm btn_dc_edit" user_id="{{$us->id}}" dc_id="{{$name_doc->bookdoctor_id}}" book_id="{{$dt->book_id}}">Edit</button></td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row mb-2 row_ct">
                                        <div class="col-4"><h4>Room</h4></div>
                                        <div class="col-8">
                                            <div class="input-icon input-icon-right">
                                                <input type="text" class="form-control form-control-sm room_search" rmid="{{$us->id}}" placeholder="Search..." id=""/>
                                                <span><i class="flaticon2-search-1 icon-md"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <form action="{{url('users')}}" method="POST" class="row mb-5 row_ct">
                                        @method('POST')
                                        @csrf
                                        <input type="hidden" name="user_id" value="{{$us->id}}">
                                        <input type="hidden" name="type" value="tb_bookroom">
                                        <div class="col-6"><input type="text" name="bookroom_name" class="form-control form-control-sm" placeholder="" required></div>
                                        <div class="col-2"><input type="color" name="bookroom_color" value="#FFF" class="form-control form-control-sm" style="padding: 0;" ></div>
                                        {{-- data-jscolor="{}" --}}
                                        <div class="col-4"><button type="submit" class="btn btn-primary btn-sm" style="width: 100%;"><i class="fas fa-plus"></i> Add Room</button></div>
                                    </form>
                                    <div class="table-responsive" style="height: 35em;">
                                        <table class="table">
                                            <tbody id="room_table{{$us->id}}">
                                                @foreach ($room as $rm)
                                                @php
                                                    $name_room = DB::table('tb_bookroom')->where('bookroom_id',$rm->book_room)->first();
                                                @endphp
                                                <tr>
                                                    <td style="width: 70%;">
                                                        <input type="text" name="bookroom_name" class="form-control form-control-sm" value="{{$name_room->bookroom_name}}"  id="rm{{$name_room->bookroom_id}}" disabled>
                                                        <input type="hidden" name="bookroom_id" value="{{$name_room->bookroom_id}}">
                                                    </td>
                                                    <td style="width: 10%;">
                                                        {{-- data-jscolor="{}" --}}
                                                        <input type="color" name="bookroom_color" class="form-control form-control-sm" style="padding: 0;" value="{{$name_room->bookroom_color}}"  id="cl{{$name_room->bookroom_id}}" disabled>
                                                    </td>
                                                    <td style="width: 20%;"><button class="btn btn-warning btn-sm btn_room_edit" user_id="{{$us->id}}" rm_id="{{$name_room->bookroom_id}}" book_id="{{$rm->book_id}}">Edit</button></td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row mb-2 row_ct">
                                        <div class="col-4"><h4>Procedure</h4></div>
                                        <div class="col-8">
                                            <div class="input-icon input-icon-right">
                                                <input type="text" class="form-control form-control-sm procedure_search" pdid="{{$us->id}}" placeholder="Search..." id="procedure_search"/>
                                                <span><i class="flaticon2-search-1 icon-md"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <form action="{{url('users')}}" method="POST" class="row mb-5 row_ct">
                                        @method('POST')
                                        @csrf
                                        <input type="hidden" name="user_id" value="{{$us->id}}">
                                        <input type="hidden" name="type" value="tb_bookprocedure">
                                        <div class="col-7"><input type="text" name="bookprocedure_name" class="form-control form-control-sm" placeholder="" required></div>
                                        <div class="col-5"><button type="submit" class="btn btn-primary btn-sm" style="width: 100%;"><i class="fas fa-plus"></i> Add Procedure</button></div>
                                    </form>
                                    <div class="table-responsive" style="height: 35em;">
                                        <table class="table">
                                            <tbody id="procedure_table{{$us->id}}">
                                                @foreach ($procedure as $pcd)
                                                @php
                                                    $name_procedure = DB::table('tb_bookprocedure')->where('bookprocedure_code',$pcd->book_procedure)->first();
                                                @endphp
                                                <tr>
                                                    <td style="width: 80%;">
                                                        <input type="text" name="bookprocedure_name" class="form-control form-control-sm" value="{{$name_procedure->bookprocedure_name}}" id="pcd{{$name_procedure->bookprocedure_code}}" disabled>
                                                        <input type="hidden" name="bookprocedure_code" value="{{$name_procedure->bookprocedure_code}}">
                                                    </td>
                                                    <td style="width: 20%;"><button class="btn btn-warning btn-sm btn_pcd_edit" user_id="{{$us->id}}" pcd_id="{{$name_procedure->bookprocedure_code}}" book_id="{{$pcd->book_id}}">Edit</button></td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>



@endsection
@section('script')
<script src="{{url('public/js/jscolor.js')}}"></script>
<script src="{{asset('public/plugins/jquery-ui/jquery-ui.min.js')}}"></script>
<script>
    $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
</script>


<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>
<script>
    $(".nav-link").click(function(){
        var thisname = $(this).attr("thisname");
        var thispass = $(this).attr("thispass");
        $(".username").val(thisname);
        $(".password").val(thispass);
    });
    function btn_edit(){
    $(".btn_dc_edit").click(function(){
        var dc_id   = $(this).attr('dc_id');
        var user_id = $(this).attr('user_id');
        var book_id = $(this).attr('book_id');
        var text_val= $("#dc"+dc_id).val();
        if($(this).text() != 'confirm'){
            $("#dc"+dc_id).attr('disabled',false);
            $(this).text("confirm");
            $(this).removeClass("btn-warning").addClass("btn-success");
        }else{
            $.post('{{url('jquery')}}',{
            event       : 'edit_doc',
            this_id     : dc_id,
            user_id     : user_id,
            book_id     : book_id,
            text_val    : text_val,
            },function(data,status){
                console.log(data);
            });
            $("#dc"+dc_id).attr('disabled',true);
            $(this).text("edit");
            $(this).removeClass("btn-success").addClass("btn-warning");
        }
    });

    $(".btn_room_edit").click(function(){
        var rm_id   = $(this).attr('rm_id');
        var user_id = $(this).attr('user_id');
        var book_id = $(this).attr('book_id');
        var text_val = $("#rm"+rm_id).val();
        var color_val = $("#cl"+rm_id).val();
        if($(this).text() != 'confirm'){
            $("#rm"+rm_id).attr('disabled',false);
            $("#cl"+rm_id).attr('disabled',false);
            $(this).text("confirm");
            $(this).removeClass("btn-warning").addClass("btn-success");
        }else{
            $.post('{{url('jquery')}}',{
            event       : 'edit_room',
            this_id     : rm_id,
            user_id     : user_id,
            book_id     : book_id,
            text_val    : text_val,
            color_val   : color_val,
            },function(data,status){
                console.log(data);
            });
            $("#rm"+rm_id).attr('disabled',true);
            $("#cl"+rm_id).attr('disabled',true);
            $(this).text("edit");
            $(this).removeClass("btn-success").addClass("btn-warning");
        }
    });

    $(".btn_pcd_edit").click(function(){
        var pcd_id  = $(this).attr('pcd_id');
        var user_id = $(this).attr('user_id');
        var book_id = $(this).attr('book_id');
        var text_val= $("#pcd"+pcd_id).val();
        if($(this).text() != 'confirm'){
            $("#pcd"+pcd_id).attr('disabled',false);
            $(this).text("confirm");
            $(this).removeClass("btn-warning").addClass("btn-success");
        }else{
            $.post('{{url('jquery')}}',{
            event       : 'edit_pcd',
            this_id     : pcd_id,
            user_id     : user_id,
            book_id     : book_id,
            text_val    : text_val,
            },function(data,status){
                console.log(data);
            });
            $("#pcd"+pcd_id).attr('disabled',true);
            $(this).text("edit");
            $(this).removeClass("btn-success").addClass("btn-warning");
        }
    });
    }
    btn_edit();
    $(".btn_edit_user").hide();
    $(".brn_user").click(function(){
        var this_id = $(this).attr('sent');
        if($(this).text() != 'confirm'){
            $("#us"+this_id).attr('disabled',false);
            $("#ps"+this_id).attr('disabled',false);
            $(this).hide();
            $("#btnu_"+this_id).show();
            // $(this).text("confirm");
            // $(this).attr('type','submit');
            // $(this).removeClass("btn-warning").addClass("btn-success");
        }else{
            $("#us"+this_id).attr('disabled',true);
            $("#ps"+this_id).attr('disabled',true);
            // $(this).text("edit");
            // $(this).removeClass("btn-success").addClass("btn-warning");
        }
    })

    $(".doctor_search").keyup(function(){
        var this_val = $(this).val();
        var dc_id    = $(this).attr('dcid');
        $.post('{{url('jquery')}}',{
            event       : 'doctor_search',
            this_id     : this_val,
            },function(data,status){
                $("#doctor_table"+dc_id).html(data);
                btn_edit();
            });
    });
    $(".room_search").keyup(function(){
        var this_val = $(this).val();
        var rm_id    = $(this).attr('rmid');
        $.post('{{url('jquery')}}',{
            event       : 'room_search',
            this_id     : this_val,
            },function(data,status){
                $("#room_table"+rm_id).html(data);
                btn_edit();
            });
    });
    $(".procedure_search").keyup(function(){
        var this_val = $(this).val();
        var pd_id    = $(this).attr('pdid');
        $.post('{{url('jquery')}}',{
        event       : 'procedure_search',
        this_id     : this_val,
        },function(data,status){
            $("#procedure_table"+pd_id).html(data);
            btn_edit();
        });
    });

</script>
@endsection