@extends('layouts.layouts_ipad.layouts_Newipad')

@section('style')
    <style>
        body {
            height: 100vh;
            color: #bbbbbb;
            font-style: normal;
        }

        .border-bottom {
            border-bottom: 3px solid #fff;

        }

        .badge-dark {
            background: #000;
            color: #fff;
        }

        table {
            table-layout: fixed;
        }

        .btn-case-control {
            background: #245788;
            color: #fff
        }

        .btn-case-control:hover {
            background: #153858;
            color: #fff
        }

        .select2-container--default .select2-selection--multiple {
            background: #2B2F34 !important;
            border: 0px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background: #245788 !important;
            color: #fff !important;
            border: 0px !important;
        }

        .select2-dropdown {
            background: #2B2F34;
            border: 0px;
        }

        .table-room td td:nth-child(1) {
            width: 10%
        }

        .text-area-dark {
            background: #222529;
        }

        .btn-white-custom {
            color: #222529;
            background: #bbbbbb;
        }

        .btn-white-custom:hover {
            color: #222529;
            background: #bbbbbb;
        }

        .card-ipad {
            height: 78vh;
        }

        .footer-casemonitor {
            position: absolute;
            bottom: 18%;

        }

        .bg-table-detail {}

        .text-detail {
            font-size: 13px;
        }

        .text-dot {
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .list-item {
            background: rgba(255, 0, 0, 0.1);
            margin-left: 10px;
            display: inline-block;
        }

        .scroll {
            display: inline-block;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            width: 660px;
        }

        .table-scroll {
            overflow: auto;
            height: 60.3vh;
        }

        .table-scroll thead tr {
            position: sticky;
            top: 0;
            z-index: 1;
            background: #222529;
        }

        tr.border_bottom td {
            border-bottom: 1px solid rgb(255, 255, 255);
        }

        #table_alloffice_ipad tr:nth-child(odd) {
            background: #22252980;

        }

        #table_alloffice_ipad tr:nth-child(even) {
            background: #000000;

        }

        .txt-ipad-doctor {
            font-size: 11.5px;
            width: 200px;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
@endsection
@section('tophead')
    Case Control
@endsection

@section('offcanvas')
    @include('EndoCAPTURE.ipad.casemonitor.component.cmt_offcanvas')
@endsection
@section('modal')
    @include('EndoCAPTURE.ipad.casemonitor.component.modal_selectRoom')
    @include('EndoCAPTURE.ipad.casemonitor.component.modal_edit_status')
    @include('EndoCAPTURE.ipad.casemonitor.component.modal_cancel')
    @include('EndoCAPTURE.ipad.casemonitor.component.modal_location')
    @include('EndoCAPTURE.ipad.casemonitor.component.modal_descript')
@endsection
</div>

@section('content')
    @php
        use App\Models\Mongo;

    @endphp
    <div class="row">
        {{-- @dd(1); --}}
        <div class="col-4">
            {{-- <div class="col-12">
                <a href="{{url("casemonitor/control")}}" class="btn btn-case-control w-100 mb-3"> <i class="ri-list-settings-line"></i> Case Control</a>
            </div> --}}
            <div class="row">
                <div class="col-4 text-center">
                    <h5 class="text-white" style="font-size: 19px; font-weight: 100;">Total Cases</h5>
                    <span class="h1" style="font-size: 30px; font-weight: 100;">{{ @$count_case }}</span>

                </div>
                <div class="col-4 text-center">
                    <h5 class="text-white" style="font-size: 19px; font-weight: 100;">Discharged </h5>
                    <span class="h1" style="font-size: 30px; font-weight: 100;">{{ @$count_discharged }}</span>

                </div>
                <div class="col-4 text-center">
                    <h5 class="text-white" style="font-size: 18px; font-weight: 100;">Room Active</h5>
                    <span class="h1 " style="font-size: 30px; font-weight: 100;">{{ @$count_roomready }}/</span>
                    <span class="d-inline  h3" style="font-size: 20px; font-weight: 100;">{{ @$count_roomall }}</span>
                </div>
                <div class="row mt-4">
                    <div class="col-6 ">
                        <h4 class="text-white mb-3 ms-4">Officer</h4>
                    </div>
                    <div class="col-6 text-end">
                        <button type="button" class="btn btn-primary btn-label waves-effect waves-light btn-sm me-4"
                            data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
                            <i class="ri-list-settings-line label-icon align-middle fs-16 me-2"></i>
                            User Setting
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-10" style="border-top: 1px solid #bbbbbb; margin: 0 auto;">
                    </div>
                </div>
                <div class="col-10 ms-5">
                    {{-- @dd($tb_casemonitor) --}}
                    <table class="table table-nowrap table-borderless mt-2" id="table_alloffice_ipad">
                        <tbody>
                            {{-- @dd($room_shows) --}}
                            @foreach ($room_shows as $room_show)
                                @if ($room_show['room_type'] != 'capture')
                                    <tr class="bg-table-dark text-detail">
                                        <td width="20%"> {{ $room_show['room_name'] }}</td>
                                        <td>
                                            <div class="row">
                                                @foreach ($room_show['room_user'] ?? [] as $users)
                                                    @php
                                                        $user = Mongo::table('users')
                                                            ->where('id', intval(@$users))
                                                            ->get();
                                                        //  dd($user);
                                                    @endphp

                                                    @foreach ($user ?? [] as $data)
                                                        <div class="col-6 ">
                                                            <div class="txt-ipad-doctor">
                                                                <span class="">{{ fullname(@$data) }}</span>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @endforeach
                                            </div>

                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>


                <div class="col-12  ">
                    <h4 class="text-white ms-4">Noted</h4>
                </div>
                <div class="row">
                    <div class="col-10" style="border-top: 1px solid #bbbbbb; margin: 0 auto;">
                    </div>
                </div>
                <div class="col-10 ms-5 mt-3">
                    <textarea name="" id="save_textarea_casemonitor" class="w-100 form-control"
                        style="border: 0px; background:#22252980; resize: none;" placeholder="Freetext" rows="9"
                        oninput="limitLines(this, 8)">{{ @$writeboard }}</textarea>
                </div>
            </div>
        </div>
        <div class="col-8" style=" overflow: auto;">

            {{-- @dd($tb_casemonitor); --}}
            <div class="tab-content text-muted book-tap">
                <div class="tab-pane nav-book-show" id="pill-justified-home-1" role="tabpanel">
                    @include('EndoCAPTURE.ipad.casemonitor.component.cmt_m_booking')
                </div>

                {{-- @dd($room_captures); --}}
                @foreach ($room_captures as $room_tap)
                    @php
                        $users = [];
                        $nurses = $room_tap['room_nurse'] ?? [];
                        $nurse_assist = $room_tap['room_nurse_assist'] ?? [];

                        $nurse = array_merge($nurses, $nurse_assist);

                        $view['room_tap'] = $room_tap;
                        $view['tb_casemonitor'] = $tb_casemonitor;
                        $view['room_doctor'] = @$room_tap['room_doctor'];
                        $view['room_nurse'] = @$nurse;
                        // dd($room_tap['room_user']);
                    @endphp



                    <div class="tab-pane" id="pill-justified-profile-{{ $room_tap['room_id'] }}" role="tabpanel">
                        @component('EndoCAPTURE.ipad.casemonitor.component.cmt_m_room', ['view' => $view])
                        @endcomponent
                    </div>
                @endforeach
                <div class="tab-pane" id="pill-justified-messages-1" role="tabpanel">
                    @include('EndoCAPTURE.ipad.casemonitor.component.cmt_m_recovery')


                </div>

            </div>
            <ul class="nav nav-pills scroll " role="tablist" style="margin-top: 4%;">
                <li class="nav-item waves-effect waves-light ">
                    <a class="nav-link nav-book fs-16 " data-bs-toggle="tab" href="#pill-justified-home-1" role="tab">
                        Booking
                    </a>
                </li>
                @foreach ($room_captures as $room)
                    @php
                        $active = '';
                        if (isset($_GET['room'])) {
                            if ($_GET['room'] == $room['room_id']) {
                                $active = 'active';
                            }
                        }
                    @endphp



                    <li class="nav-item waves-effect waves-light ms-2">
                        <a class="nav-link  list-item {{ $active }} fs-16" data-bs-toggle="tab"
                            href="#pill-justified-profile-{{ $room['room_id'] }}" role="tab">
                            {{ $room['room_name'] }}
                        </a>
                    </li>
                @endforeach

                <li class="nav-item waves-effect waves-light ms-2">
                    <a class="nav-link fs-16" data-bs-toggle="tab" href="#pill-justified-messages-1" role="tab">
                        Recovery
                    </a>
                </li>

            </ul>
            <!-- Tab panes -->


        </div>
    </div>
@endsection

@section('script')
    <script>
        function limitLines(textarea, maxLines) {
            const lines = textarea.value.split('\n');
            if (lines.length > maxLines) {
                textarea.value = lines.slice(0, maxLines).join('\n');
            }
        }

        $('#multi_confirm_hide_btn').on('click', function() {
            let caseuniq = $('#muti_hide_caseid').val()
            console.log(caseuniq);

            $.post('{{ url('tablet/casemonitor') }}', {
                event: 'hide_multicase',
                caseuniq: caseuniq
            }, function(data, status) {
                socket.emit('chat message', 'casemonitor');
            });
        })




        function cancel_case(id_json) {


            if (id_json != '' && id_json != undefined) {
                let ids = JSON.parse(id_json)
                // console.log(ids);

                ids = ids != undefined && ids != '' && Array.isArray(ids) ? ids : []
                // console.log(ids);

                $.post('{{ url('tablet/casemonitor') }}', {
                    event: 'get_casemonitor_detail',
                    caseuniq: id_json
                }, function(data, status) {
                    let parse = JSON.parse(data)
                    $(`#render_cancelcase`).empty()
                    // console.log(parse);
                    parse.forEach((e, i) => {
                        let physician_name = e.monitor_doctorname != undefined && e.monitor_doctorname !=
                            '' ? e.monitor_doctorname : ''
                        let procedure = e.monitor_procedure != undefined && e.monitor_procedure != '' ? e
                            .monitor_procedure : ''
                        let patient_name = e.monitor_patientname != undefined && e.monitor_patientname !=
                            '' ? e.monitor_patientname : ''
                        let hn = e.monitor_hn != undefined && e.monitor_hn != '' ? e.monitor_hn : ''
                        $(`#hidden_hn`).html(hn)
                        $(`#hidden_name`).html(patient_name)
                        $(`#case_cancel_doctor`).html(physician_name)
                        $(`#render_cancelcase`).append(`

                <div class="form-check ">
                    <input type="checkbox" class="form-check-input hidden-case-ck" id="${e.caseuniq}" data-caseuniq="${e.caseuniq}">
                    <label class="form-check-label" for="${e.caseuniq}">
                        ${procedure}
                    </label>
                </div>


            `)
                    })

                    $(`#confirm_hide_modal`).modal('show')

                    $(`.hidden-case-ck`).on('click', function() {
                        let main = []
                        for (let i = 0; i < $(`.hidden-case-ck`).length; i++) {
                            let is_checked = $($(`.hidden-case-ck`)[i]).is(':checked')
                            let this_caseuniq = $($(`.hidden-case-ck`)[i]).data('caseuniq')

                            if (is_checked) {
                                main.push(this_caseuniq)
                            }
                        }



                        $(`#muti_hide_caseid`).val(main)
                    })

                });





                $('#confirm_hide_modal').modal('show')

            }
            $('#hide_caseid').val(id_json)


        }
    </script>


    <script src="http://{{ webconfig('server_name') }}:3000/socket.io/socket.io.js"></script>
    <script>
        var socket = io.connect('http://{{ webconfig('server_name') }}:3000');
        socket.on('chat message', function(msg) {
            if (msg == "casemonitor") {
                location.reload();
                // $("#btn_notification").trigger('click');
            }
        });
    </script>

    <script>
        function get_casemonitor_detail(caseuniq_json, type) {
            $.post('{{ url('casemonitor') }}', {
                event: 'get_casemonitor_detail',
                caseuniq: caseuniq_json
            }, function(data, status) {
                let parse = JSON.parse(data)
                $(`#${type}_detail_tbody`).empty()
                // console.log(parse);
                parse.forEach((e, i) => {
                    let physician_name = e.monitor_doctorname != undefined && e.monitor_doctorname != '' ? e
                        .monitor_doctorname : ''
                    let procedure = e.monitor_procedure != undefined && e.monitor_procedure != '' ? e
                        .monitor_procedure : ''
                    let patient_name = e.monitor_doctorname != undefined && e.monitor_doctorname != '' ? e
                        .monitor_doctorname : ''
                    let hn = e.monitor_hn != undefined && e.monitor_hn != '' ? e.monitor_hn : ''
                    $(`#${type}_hn`).html(hn)
                    $(`#${type}_name`).html(patient_name)
                    $(`#${type}_detail_tbody`).append(`
                        <tr>
                            <td>
                                <input type="checkbox" class="form-check-input ${type}-case-ck" data-caseuniq="${e.caseuniq}">
                            </td>
                            <td>${physician_name}</td>
                            <td>${procedure}</td>
                        </tr>
                    `)
                })

                $(`#multi_confirm_${type}_modal`).modal('show')

                $(`.${type}-case-ck`).on('click', function() {
                    let main = []
                    for (let i = 0; i < $(`.${type}-case-ck`).length; i++) {
                        let is_checked = $($(`.${type}-case-ck`)[i]).is(':checked')
                        let this_caseuniq = $($(`.${type}-case-ck`)[i]).data('caseuniq')
                        if (is_checked) {
                            main.push(this_caseuniq)
                        }
                        // alert(main);
                    }
                    $(`#muti_${type}_caseid`).val(main)
                })

            });
        }
    </script>

    <script>
        // $(document).ready(function() {
        //     $(".nav-book").addClass("active");
        //     $(".nav-book-show").addClass("active");
        // });
        $(document).ready(function() {

            let activeTab = localStorage.getItem('activeTab');

            if (activeTab) {

                $('.nav-link').removeClass('active');
                $('.tab-pane').removeClass('active show');

                $('.nav-link[href="' + activeTab + '"]').addClass('active');
                $(activeTab).addClass('active show');
            } else {

                $(".nav-book").addClass("active");
                $(".nav-book-show").addClass("active show");
                $("#pill-justified-home-1").addClass("active show");
            }

            // เมื่อคลิก tab
            $('.nav-link').on('click', function() {

                $('.nav-link').removeClass('active');
                $('.tab-pane').removeClass('active show');


                $(this).addClass('active');
                let tabId = $(this).attr('href');
                $(tabId).addClass('active show');


                localStorage.setItem('activeTab', tabId);
            });
        });


        $(document).ready(function() {
            $('#save_textarea_casemonitor').focusout(function() {
                var value = $(this).val();
                console.log(value);
                $.post('{{ url('tablet/casemonitor') }}', {
                    event: 'save_booking_textarea',
                    value: value,
                }, function(data, status) {

                });
            });
        });
    </script>
    <script>
        function edit_room(monitorid) {
            // alert(monitorid)
            let id = $("#book_id").val();
            $(".model_monitorid").val(monitorid);
            $('#select_room').modal('show')

        }

        function create_description(monitorid) {

            let id = $("#book_id").val();
            $(".model_monitorid").val(monitorid);
            $("#select_descript").modal('show')


        }

        function edit_location(monitorid) {
            console.log(111);

            let id = $("#book_id").val();
            $(".model_monitorid").val(monitorid);
            $.post('{{ url('tablet/casemonitor') }}', {
                event: 'get_location',
                monitorid: monitorid
            }, function(data, status) {


                $("#sel_locate").val(parse.location)
            });
            $('#select_localtion').modal('show')

        }
    </script>
    <script>
        function edit_case(id_json) {
            // alert(1);
            if (id_json != '' && id_json != undefined) {
                let ids = JSON.parse(id_json)
                ids = ids != undefined && ids != '' && Array.isArray(ids) ? ids : []
                if (ids.length == 1) {

                    $.post('{{ url('api/casemonitor') }}', {
                        event: 'get_case_detail',
                        caseuniq: id_json
                    }, function(data, status) {
                        console.log(data);
                        let casemonitor_patient = JSON.parse(data)
                        console.log(casemonitor_patient);
                        $('#modal_editcase_hn').html(casemonitor_patient.monitor_hn);
                        $('#modal_editcase_fullname').html(casemonitor_patient.monitor_patientname)
                        $('#modal_editcase_procedure').html(casemonitor_patient.monitor_procedure)
                        $('#modal_editcase_doctor').html(casemonitor_patient.monitor_doctorname)
                        $("#modal_editstatus_caseuniq").val(id_json);
                        // alert(id_json)
                        // socket.emit('chat message', 'casemonitor');
                    });



                    $('#modal_editstatus').modal('show')
                } else {

                    $.post('{{ url('api/casemonitor') }}', {
                        event: 'get_case_detail',
                        caseuniq: id_json
                    }, function(data, status) {
                        console.log(data);
                        let casemonitor_patient = JSON.parse(data)
                        console.log(casemonitor_patient);
                        $('#modal_editcase_hn').html(casemonitor_patient.monitor_hn);
                        $('#modal_editcase_fullname').html(casemonitor_patient.monitor_patientname)
                        $('#modal_editcase_procedure').html(casemonitor_patient.monitor_procedure)
                        $('#modal_editcase_doctor').html(casemonitor_patient.monitor_doctorname)
                        $("#modal_editstatus_caseuniq").val(id_json);
                    });
                    $('#modal_editstatus').modal('show');

                }
                $('#hide_caseid').val(id_json)


            }
        }
    </script>
@endsection
