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

@section('style')
<style>
    body{
        background-color: #fff;
    }
    .h-4em{
        height: 4em;
    }
    .header-kiosk{
        font-size: 1.7em;
        color: #2A849C;
        font-weight: 800;
    }
    .cn{
        align-items: center;
    }
    .card-body{
        background: #2A849C;
        border-radius: 10px;
        box-shadow: 2px 4px 5px #c4c1c1;
    }
    .btn{
        border-radius: 5px;
    }
    .btn-cancel{
        text-align: center;
        margin-top: 5px;
        background: #FFE2E5;
        color: #F76383;
        font-size: 1.3em;
    }
    .btn-cancel:hover{
        color: #d14463;
    }
    .btn-confirm{
        font-size: 1.3em;
        text-align: center;
        margin-top: 5px;
        background: #C9F7F5;
        color: #1BC9D1;
    }
    .btn-confirm:hover{
        color: #17a3aa;
    }
    .img-user{
        width: 5em;
        height: 5em;
        border-radius: 50%;
    }
    .img-user2{
        width: 4em;
        height: 4em;
        border-radius: 50%;
    }
    .endo{
        width: 4em;
    }
    .box-data{
        width: 100%;
        height: 15em;
        overflow-x: auto;
    }
    .box-data td{
        font-size: 1.5em;
        font-weight: 800;
        color: #fff;
        line-height: 1em;
    }
    .table-list td{
        font-size: 1.2em;
        font-weight: 600;
        color: #fff;
        line-height: 1em;
    }
    .line-hr{
        height: 1px;
        width: 100%;
        background: #fff;
    }
    .line-dot{
        width: 1em;
        height: 1em;
        border-radius: 50%;
        border: 1px solid #fff;
    }
    .line-dot.active{
        background: #fff;
    }
    .hf{
        height: 48em;
        overflow-x: auto;
    }
    .hf h2{
        margin: 0;
    }
    .hf td{
        /* line-height: 4em; */
        padding: 0.5em 1em;
    }
    .hf td:nth-child(1){
        width: 5em;
    }
    .hf td:nth-child(2){width: 15em;}
    .hf td:nth-child(3){width: 20em;}
    .hf td:nth-child(6),.hf th:nth-child(6){width: 10em;text-align: center;}
    .hf .card-body{
        height: 8em;
        box-shadow: none;
        background: #707070;
        color: white;
        font-size: 1.8em;
    }
    .hf .card-body:hover,.hf .card-body.active{
        background: #C9F7F5;
        color: #1BC9D1;
    }
    @media (max-width: 1800px) {
        .hf{
            height: 40em;
        }
        .hf .card-body{
            height: 6.3em;
        }
    }
    @media (max-width: 1500px) {
        .hf{
            height: 39em;
        }
        .hf .card-body{
            height: 6.2em;
        }
    }
    @media (max-width: 1300px) {
        .hf{
            height: 39em;
        }
        .hf .card-body{
            height: 6em;
        }
    }

    /* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 1px grey;
  border-radius: 0;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #2A849C;
  border-radius: 0;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #2A849C;
}
::-webkit-scrollbar {
  width: 1px;
}
</style>
@endsection

@section('modal')

<div class="modal fade" id="modal_nodata">
    <div class="modal-dialog  modal-xl">
        <div class="modal-content">
            <div class="modal-body text-center size-modal01">
                <i class="fa fa-check fa-2x" aria-hidden="true"></i><br>
                CLEAR DATA COMPLETE !!
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal_repair">
    <div class="modal-dialog  modal-xl">
        <div class="modal-content">
            <div class="modal-body text-center size-modal02">
                <i class="fa fa-info-circle fa-2x" aria-hidden="true"></i><br>
                Endoscope Repair !!
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal_recordcomplete">
    <div class="modal-dialog  modal-xl">
        <div class="modal-content">
            <div class="modal-body text-center size-modal03">
                <i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i><br>
                Record Success
            </div>
        </div>
    </div>
</div>

@endsection


@section('content')
<form action="{{url('trackstation')}}" method="post">
    @csrf
    <input name="event" value="record_cleaning" type="hidden">
    <input name="station_id" value="{{$id}}" type="hidden">
    <input name="process" value="{{$station_type}}" type="hidden">
<div class="row m-0 py-2 cn">
    <div class="col-lg-4"><img src="{{url('public/image/logo_tack.png')}}" class="h-4em"></div>
    <div class="col-lg-4 text-center">
        <label class="header-kiosk">{{@$room_name->room_name}}</label>
    </div>
    <div class="col-lg-4 text-right">
        <span id="date">
            <span id="dayname"></span>
            <span id="day"></span>
            <span id="month"></span>
            <span id="year"></span>
        </span>
        <span id="clock">
            <span id="h"></span>
            <span class="span"> : </span>
            <span id="m"></span>
        </span>
    </div>
</div>
<div class="col-12">
    <div class="card border-0">
        <div class="card-body pb-0">
            <div class="row m-0">
                <div class="col-12 p-2">

                    <div class="row m-0">
                        <div class="col-4">
                            <div class="row m-0 cn">
                                <div class="col-auto"><img src="{{configTYPE('admin','store_url')}}user/avatar.png" class="img-user" id="user_pic"></div>
                                <div class="col">
                                    <input type="hidden" name="user_id" id="user_id" value="">

                                    <h2 class="text-light"><font id="user_prefix"></font>&nbsp;<font id="user_firstname"></font>&emsp;<font id="user_lastname"></font></h2>
                                    <h6 class="text-light">Position : Reprocessor</h6>
                                </div>
                            </div>
                            <table class="table table-borderless table-list">
                                <tr>
                                    <td></td>
                                    <td class="text-center">Today</td>
                                </tr>
                                <tr>
                                    <td>Preparation</td>
                                    <td class="text-center">0</td>
                                </tr>
                                <tr>
                                    <td>Reprocess</td>
                                    <td class="text-center">0</td>
                                </tr>
                                <tr>
                                    <td>Storage</td>
                                    <td class="text-center">0</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-1">
                            <img src="{{url('public/image/Endoscope_white.png')}}" class="endo mt-2">
                        </div>
                        <div class="col">
                            <div class="box-data">
                                <table class="table table-borderless" id="cameralist">
                                </table>
                            </div>

                        </div>
                        <div class="col-2">
                            <div class="">
                                <button class="btn w-100 btn-cancel">
                                    <span class="svg-icon svg-icon-danger svg-icon-5x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\Code\Stop.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24"/>
                                            <path d="M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 Z M19.0710678,4.92893219 L19.0710678,4.92893219 C19.4615921,5.31945648 19.4615921,5.95262146 19.0710678,6.34314575 L6.34314575,19.0710678 C5.95262146,19.4615921 5.31945648,19.4615921 4.92893219,19.0710678 L4.92893219,19.0710678 C4.5384079,18.6805435 4.5384079,18.0473785 4.92893219,17.6568542 L17.6568542,4.92893219 C18.0473785,4.5384079 18.6805435,4.5384079 19.0710678,4.92893219 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                        </g>
                                    </svg><!--end::Svg Icon--></span>
                                    <br>
                                    Cancel
                                </button>
                            </div>
                            <div class="">
                                <button class="btn w-100 btn-confirm" id="confirm">
                                    <span class="svg-icon svg-icon-success svg-icon-5x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\Code\Done-circle.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24"/>
                                            <circle fill="#000000" opacity="0.3" cx="12" cy="12" r="10"/>
                                            <path d="M16.7689447,7.81768175 C17.1457787,7.41393107 17.7785676,7.39211077 18.1823183,7.76894473 C18.5860689,8.1457787 18.6078892,8.77856757 18.2310553,9.18231825 L11.2310553,16.6823183 C10.8654446,17.0740439 10.2560456,17.107974 9.84920863,16.7592566 L6.34920863,13.7592566 C5.92988278,13.3998345 5.88132125,12.7685345 6.2407434,12.3492086 C6.60016555,11.9298828 7.23146553,11.8813212 7.65079137,12.2407434 L10.4229928,14.616916 L16.7689447,7.81768175 Z" fill="#000000" fill-rule="nonzero"/>
                                        </g>
                                    </svg><!--end::Svg Icon--></span>
                                    <br>
                                    Confirm
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="w-100 p-3 hf">
                <div class="row">
                    @for($i=1;$i<=12;$i++)
                    <div class="col-3 mt-3">
                        <div class="card">
                            <div class="card-body align-items-center d-flex justify-content-center @if($i==1) active @endif">
                                Room {{$i}}
                            </div>
                        </div>
                    </div>
                    @endfor
                </div>
            </div>
        </div>
    </div>
</div>

</form>
@endsection

@section('script')

<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</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=="endocapture_home"){
            location.reload();
        }
    });

    socket.on('track', function(msg) {
        json = JSON.parse(msg);
        if(json.room=={{$id}}){
            var ck_user_ori   = $('#user_id').val();

            if(json.type=="nodata"){
                $('#modal_nodata').modal('show');
                setTimeout(function(){
                    window.location.reload();
                }, 2000);
            }

            if(json.type=="Endoscope repair"){
                $('#modal_repair').modal('show');
                setTimeout(function(){
                    // window.location.reload();
                    $('#modal_repair').modal('hide');
                }, 2000);
            }

            if(json.type=="scope"){
                var scope1 = $('#scope_id').val();
                var txt = "";
                txt += '<tr>';
                txt += '<td>'+json.scope_name+'</td>';
                txt += '<input type="hidden" name="scope_id[]" value="'+json.id+'">';
                txt += '<td>'+json.scope_model+'</td>';
                txt += '<td>'+json.scope_serial+'</td>';
                txt += '</tr>';
                $('#cameralist').append(txt);
            }

            if(json.type=="user"){
                $('#user_pic').attr('src','{{configTYPE('admin','store_url')}}user/'+json.user_pic);
                $('#user_id').val(json.id);
                $('#user_prefix').html(json.user_prefix);
                $('#user_firstname').html(json.user_firstname);
                $('#user_lastname').html(json.user_lastname);

                var ck_user = $('#user_id').val();
                if(ck_user == ck_user_ori){
                    setTimeout(function(){
                        $('#modal_recordcomplete').modal('show');
                        $('#confirm').trigger('click');
                    }, 2000);
                }
            }

            var ck_camera = $('#cameralist').html();
            var ck_user   = $('#user_id').val();

            if(ck_camera.length>30 && ck_user!=""){
                $('#confirm').show();
                $('#confirm').removeAttr("disabled");
            }
        }
    });



    socket.emit('chat message','track');
</script>
{{-- <script>
    function add_scope(){
        var count = $("#scope tr").length
        var tr  = "<tr>"
            tr += "<td>G0"+count+"</td>"
            tr += "<td>GIF-HQ190</td>"
            tr += "<td>1243523</td>"
            tr += "</tr>"
        $("#scope").append(tr)
    }
</script> --}}
<script>
    window.onload = displayClock();
    window.onload = displayDates();


function displayClock(){
    var d = new Date();
    var hour = d.getHours();
    var minute = d.getMinutes();
    // var second = d.getSeconds();

    // console.log(typeof(hour));
    // console.log(minute);
    // console.log(second);

    if(hour < 10){
      document.getElementById('h').innerHTML = "0" + hour;
    }else{
     document.getElementById('h').innerHTML = hour;
    }

    if(minute < 10){
      document.getElementById('m').innerHTML = "0" + minute;
    }else{
     document.getElementById('m').innerHTML = minute;
    }

    // if(second < 10){
    //   document.getElementById('s').innerHTML = "0" + second;
    // }else{
    //  document.getElementById('s').innerHTML = second;
    // }
  window.setInterval(displayClock, 60000);
}


function displayDates(){

  var dateObj = new Date();
  var date = dateObj.getDate()
  var month = dateObj.getUTCMonth();
  var day = dateObj.getDay();
  var year = dateObj.getUTCFullYear();

const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
];
const dayName = ["Sunday", "Monday","Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

   document.getElementById('day').innerHTML = date;
   document.getElementById('month').innerHTML = monthNames[month];
   document.getElementById('year').innerHTML = year;
   document.getElementById('dayname').innerHTML = dayName[day];

}


    setTimeout(() => {
        window.location.reload();
    }, 300000);



</script>
@endsection