@extends('layouts.note_layout')
@section('title', 'EndoCapture')
@section('con-top')

@endsection


@php
$app_name   = app_name();
@endphp

@section('style')
<link href="{{ asset('public/css/note/home.css') }}" rel="stylesheet" type="text/css" />
<style>
    #logo_ipad img{
        height: 2em !important;
    }
    .cn{
        align-items: center;
    }
    .menu_toggle,.menu_toggle i{
        color: rgb(249, 174, 63);
        font-size: 18px;
    }
    .menu_toggle:hover,.menu_toggle i:hover{
        color: rgb(165, 112, 32);
    }
    *{
        font-size: 18px;
    }
    .cssload-thecube {
	width: 73px;
	height: 73px;
	margin: 0 auto;
	margin-top: 49px;
	position: relative;
	transform: rotateZ(45deg);
		-o-transform: rotateZ(45deg);
		-ms-transform: rotateZ(45deg);
		-webkit-transform: rotateZ(45deg);
		-moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
	position: relative;
	transform: rotateZ(45deg);
		-o-transform: rotateZ(45deg);
		-ms-transform: rotateZ(45deg);
		-webkit-transform: rotateZ(45deg);
		-moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
	float: left;
	width: 50%;
	height: 50%;
	position: relative;
	transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
}
.cssload-thecube .cssload-cube:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(43,160,199);
	animation: cssload-fold-thecube 2.76s infinite linear both;
		-o-animation: cssload-fold-thecube 2.76s infinite linear both;
		-ms-animation: cssload-fold-thecube 2.76s infinite linear both;
		-webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
		-moz-animation: cssload-fold-thecube 2.76s infinite linear both;
	transform-origin: 100% 100%;
		-o-transform-origin: 100% 100%;
		-ms-transform-origin: 100% 100%;
		-webkit-transform-origin: 100% 100%;
		-moz-transform-origin: 100% 100%;
}
.cssload-thecube .cssload-c2 {
	transform: scale(1.1) rotateZ(90deg);
		-o-transform: scale(1.1) rotateZ(90deg);
		-ms-transform: scale(1.1) rotateZ(90deg);
		-webkit-transform: scale(1.1) rotateZ(90deg);
		-moz-transform: scale(1.1) rotateZ(90deg);
}
.cssload-thecube .cssload-c3 {
	transform: scale(1.1) rotateZ(180deg);
		-o-transform: scale(1.1) rotateZ(180deg);
		-ms-transform: scale(1.1) rotateZ(180deg);
		-webkit-transform: scale(1.1) rotateZ(180deg);
		-moz-transform: scale(1.1) rotateZ(180deg);
}
.cssload-thecube .cssload-c4 {
	transform: scale(1.1) rotateZ(270deg);
		-o-transform: scale(1.1) rotateZ(270deg);
		-ms-transform: scale(1.1) rotateZ(270deg);
		-webkit-transform: scale(1.1) rotateZ(270deg);
		-moz-transform: scale(1.1) rotateZ(270deg);
}
.cssload-thecube .cssload-c2:before {
	animation-delay: 0.35s;
		-o-animation-delay: 0.35s;
		-ms-animation-delay: 0.35s;
		-webkit-animation-delay: 0.35s;
		-moz-animation-delay: 0.35s;
}
.cssload-thecube .cssload-c3:before {
	animation-delay: 0.69s;
		-o-animation-delay: 0.69s;
		-ms-animation-delay: 0.69s;
		-webkit-animation-delay: 0.69s;
		-moz-animation-delay: 0.69s;
}
.cssload-thecube .cssload-c4:before {
	animation-delay: 1.04s;
		-o-animation-delay: 1.04s;
		-ms-animation-delay: 1.04s;
		-webkit-animation-delay: 1.04s;
		-moz-animation-delay: 1.04s;
}


@keyframes cssload-fold-thecube {
	0%, 10% {
		transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-o-keyframes cssload-fold-thecube {
	0%, 10% {
		-o-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-o-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-o-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-ms-keyframes cssload-fold-thecube {
	0%, 10% {
		-ms-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-ms-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-ms-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-webkit-keyframes cssload-fold-thecube {
	0%, 10% {
		-webkit-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-webkit-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-webkit-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-moz-keyframes cssload-fold-thecube {
	0%, 10% {
		-moz-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-moz-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-moz-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}
.img-pre{
    width: 10em;
}
.ipad-none{
    display: block;
}
.ipad-show{
    display: none;
}
@media (max-width: 1140px) {
  .ipad-none{
      display: none;
  }
  .ipad-show{
        display: block;
    }
}
</style>


<div class="modal fade" id="modal_progress" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog  modal-dialog-centered" role="document">
      <div class="modal-content" style="box-shadow: none; border: none;">
        <div class="modal-body">
            <div class="cssload-thecube mb-5">
                <div class="cssload-cube cssload-c1"></div>
                <div class="cssload-cube cssload-c2"></div>
                <div class="cssload-cube cssload-c4"></div>
                <div class="cssload-cube cssload-c3"></div>
            </div>
            <br>
            <h2 style="text-align: -webkit-center;">กำลังดึงข้อมูล</h2>
        </div>
      </div>
    </div>
</div>



<div class="modal fade" id="showhn" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <h2 class="text-success text-center">ผู้ป่วยนี้มีในระบบแล้ว</h2>
          <h2>HN : <span id="modal_hn"></span></h2>
          <h2>Name : <span id="modal_name"></span></h2>
        </div>
        <div class="modal-footer">
            <div class="row m-0 w-100">
                <div class="col-lg-6"><button type="button" class="btn btn-danger btn-lg w-100" data-dismiss="modal">ไม่ใช่</button></div>
                <div class="col-lg-6"><a href="{{url('')}}/mockup_detail_01?id=1" class="btn btn-primary btn-lg w-100">เลือกผู้ป่วยรายนี้</a></div>
            </div>
        </div>
      </div>
    </div>
  </div>
@endsection



@section('content')
<div class="row m-0 mt-3">
    <div class="col-lg-12">
        <div class="card rounded-0">
            <div class="card-body">

                <form action="{{url('note')}}" method="post">
                    @csrf
                    <input type="hidden" name="event" value="patient_add">

                    <div class="row m-0">
                        <div class="col-xl-2 ipad-none text-center">
                            <img src="{{url('')}}/public/images/avatar.png" alt="งิงิ" srcset="" class="img-fluid">
                            <br>
                            <a href='javascript:;' onclick='get_data();' class="btn btn-primary w-100 rounded-0" id="readcitizencard">อ่านบัตรประชาชน</a>
                        </div>
                        <div class="col-xl-2 ipad-show">
                            <div class="row m-0">

                                <div class="col-12 text-center mb-5">
                                    <div class="image-input image-input-outline image-input-circle" id="kt_image_3">
                                        <div class="image-input-wrapper" id="blah" style="background-image: url({{url('')}}/public/images/avatar.png)"></div>

                                        <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
                                         <i class="fa fa-pen icon-sm text-muted"></i>
                                         <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg" id="imgInp"/>
                                         <input type="hidden" name="profile_avatar_remove"/>
                                        </label>

                                        <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
                                         <i class="ki ki-bold-close icon-xs text-muted"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-10">
                            <div class="row m-0 cn">

                                <div class="col-lg-auto">
                                    <div class="row m-0">
                                        <div class="col-lg-12">
                                            HN <span class="text-danger">*</span>
                                        </div>
                                        <div class="col-lg-12 mt-3">
                                            บัตรประชาชน / Passport
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg">
                                    <div class="row m-0">
                                        <div class="col-lg-12"><input type="text" name="hn" class="form-control" required id="hn"></div>
                                        <div class="col-lg-12 mt-3"><input type="text" name="citizenidcard" class="form-control" id="id_pass" required></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row m-0 mt-3 cn">
                                <div class="col-12">
                                    <div class="row m-0">
                                        <div class="col-lg-auto">
                                            คำนำหน้า
                                        </div>
                                        <div class="col-lg">
                                            <input type="text" name="" class="form-control" id="fix">
                                        </div>
                                        <div class="col-lg-auto">
                                            ชื่อ <span class="text-danger">*</span>
                                        </div>
                                        <div class="col-lg">
                                            <input type="text" name="firstname" class="form-control" id="firstname" required>
                                        </div>
                                        <div class="col-lg-auto">
                                            นามสกุล <span class="text-danger">*</span>
                                        </div>
                                        <div class="col-lg">
                                            <input type="text" name="lastname" class="form-control" id="lastname" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="row m-0 mt-3">
                                        <div class="col-lg-auto">
                                            เพศ <span class="text-danger">*</span>
                                        </div>
                                        <div class="col-lg">
                                            <input type="text" name="gender" class="form-control" id="gender" required>
                                        </div>
                                        <div class="col-lg-auto">
                                            วันเกิด
                                        </div>
                                        <div class="col-lg">
                                            <input type="date" name="birthdate" class="form-control" id="b_date" required>
                                        </div>
                                        <div class="col-lg-auto">
                                            อายุ <span class="text-danger">*</span>
                                        </div>
                                        <div class="col-lg">
                                            <input type="text" name="age" class="form-control" id="b_age" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="row m-0 mt-3">
                                        <div class="col-lg-auto">
                                            ติดต่อ <span class="text-danger">*</span>
                                        </div>
                                        <div class="col-lg">
                                            <input type="text" name="email" class="form-control" required>
                                        </div>
                                        <div class="col-lg-auto">
                                            ติดต่อฉุกเฉิน <span class="text-danger">*</span>
                                        </div>
                                        <div class="col-lg">
                                            <input type="text" name="phone" class="form-control" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="row m-0 mt-5">
                                    <div class="col-lg-12" id="change_menu"><a href="javascript:void(0)" class="menu_toggle" onclick="menu_toggle()">กรอกข้อมูลเพิ่มเติม &nbsp; <i class="fas fa-angle-down icon-x"></i><i class="fas fa-angle-up icon-y"></i></a></div>
                                    <div class="col-lg-12 p-0" id="other_menu">
                                        <div class="row m-0 mt-5">
                                            <div class="col-lg-7">
                                                <label for="">ประวัติการแพ้ยา</label>
                                                <div class="checkbox-inline row m-0">
                                                    <label class="checkbox col-lg-3 p-0">
                                                        <input type="checkbox" name="Checkboxes2"/>
                                                        <span></span>
                                                        ไม่เคยแพ้
                                                    </label>
                                                    <label class="checkbox col-lg-3 p-0">
                                                        <input type="checkbox" name="Checkboxes2"/>
                                                        <span></span>
                                                        เคยแพ้ยา
                                                    </label>
                                                    <div class="col-lg-5 p-0"><input type="text" name="" class="form-control"></div>
                                                </div>
                                            </div>
                                            <div class="col-lg-2">
                                                หมู่เลือด
                                                <select name="" id="" class="form-control form-control"><option value=""></option></select>
                                            </div>
                                        </div>
                                        <div class="row m-0 mt-5">
                                            <div class="col-lg-7">
                                                <label for="">ประวัติโรคประจำตัว</label>
                                                <div class="checkbox-inline row m-0">
                                                    <label class="checkbox col-lg-3 p-0">
                                                        <input type="checkbox" name="Checkboxes2"/>
                                                        <span></span>
                                                        ไม่มี
                                                    </label>
                                                    <label class="checkbox col-lg-3 p-0">
                                                        <input type="checkbox" name="Checkboxes2"/>
                                                        <span></span>
                                                        มี
                                                    </label>
                                                    <div class="col-lg-5 p-0"><input type="text" name="" class="form-control"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row m-0 mt-5">
                                    <div class="col-lg-12">
                                        <button type="submit" class="btn btn-primary btn-block">บันทึก</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


@endsection




@section('script')

    <script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

        // $("#readcitizencard").click(function(){
        //     $('#modal_progress').modal('show');
        //     $.get('{{url("api/readcitizencard")}}',{},function(data,status){
        //         var res = JSON.parse(data);
        //         console.log(res);
        //         // var name = res.th_name.split(" ");
        //         $("#fix").val(res.prefix)
        //         $("#firstname").val(res.firstname)
        //         $("#lastname").val(res.lastname)
        //         $("#id_pass").val(res.cid)
        //         $("#gender").val(res.gender)
        //         var b_date = formatDate(res.dob)
        //         var b_age = diff_date(b_date)
        //         $("#b_date").val(b_date);
        //         $("#b_age").val(b_age)
        //         $('#modal_progress').modal('hide');
        //     });
        // });
        function formatDate(date) {
            var y = date.slice(0, 4)-543;
            var m = date.slice(4, 6);
            var d = date.slice(6, 8);
            return y+'-'+m+'-'+d
        }
        function diff_date(date){
            var date1 = new Date(date);
            var m = new Date();
            var dateString = m.getUTCFullYear() +"-"+ (m.getUTCMonth()+1) +"-"+ m.getUTCDate();
            var date2 = new Date(dateString);
            var diffTime = Math.abs(date2 - date1);
            var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
            var s_age = diffDays/365;
            var age = s_age.toFixed(0)
            return age
        }
    </script>
<script>

imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    // blah.src = URL.createObjectURL(file)
    var this_url = URL.createObjectURL(file)
    console.log(this_url);
    $("#blah").css("background-image","url("+this_url+")")
  }
}
</script>

<script>

    $("#other_menu").slideUp();
    $(".icon-y").hide()
    $(".icon-x").show()
        function menu_toggle(){
            $("#other_menu").toggle(1000);
            $(".icon-y").toggle()
            $(".icon-x").toggle()
        }
</script>
<script>
    var KTBootstrapSwitch = function() {

        // Private functions
        var demos = function() {
        // minimum setup
        $('[data-switch=true]').bootstrapSwitch();
        };

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

    jQuery(document).ready(function() {
        KTBootstrapSwitch.init();
    });
</script>

<script>
    var KTBootstrapDatepicker = function () {

var arrows;
if (KTUtil.isRTL()) {
 arrows = {
  leftArrow: '<i class="la la-angle-right"></i>',
  rightArrow: '<i class="la la-angle-left"></i>'
 }
} else {
 arrows = {
  leftArrow: '<i class="la la-angle-left"></i>',
  rightArrow: '<i class="la la-angle-right"></i>'
 }
}

// Private functions
var demos = function () {
 // minimum setup
 $('#kt_datepicker_1').datepicker({
  rtl: KTUtil.isRTL(),
  todayHighlight: true,
  orientation: "bottom left",
  templates: arrows
 });

 // minimum setup for modal demo
 $('#kt_datepicker_1_modal').datepicker({
  rtl: KTUtil.isRTL(),
  todayHighlight: true,
  orientation: "bottom left",
  templates: arrows
 });

 // input group layout
 $('#kt_datepicker_2').datepicker({
  rtl: KTUtil.isRTL(),
  todayHighlight: true,
  orientation: "bottom left",
  templates: arrows
 });

 // input group layout for modal demo
 $('#kt_datepicker_2_modal').datepicker({
  rtl: KTUtil.isRTL(),
  todayHighlight: true,
  orientation: "bottom left",
  templates: arrows
 });

 // enable clear button
 $('#kt_datepicker_3, #kt_datepicker_3_validate').datepicker({
  rtl: KTUtil.isRTL(),
  todayBtn: "linked",
  clearBtn: true,
  todayHighlight: true,
  templates: arrows
 });

 // enable clear button for modal demo
 $('#kt_datepicker_3_modal').datepicker({
  rtl: KTUtil.isRTL(),
  todayBtn: "linked",
  clearBtn: true,
  todayHighlight: true,
  templates: arrows
 });

 // orientation
 $('#kt_datepicker_4_1').datepicker({
  rtl: KTUtil.isRTL(),
  orientation: "top left",
  todayHighlight: true,
  templates: arrows
 });

 $('#kt_datepicker_4_2').datepicker({
  rtl: KTUtil.isRTL(),
  orientation: "top right",
  todayHighlight: true,
  templates: arrows
 });

 $('#kt_datepicker_4_3').datepicker({
  rtl: KTUtil.isRTL(),
  orientation: "bottom left",
  todayHighlight: true,
  templates: arrows
 });

 $('#kt_datepicker_4_4').datepicker({
  rtl: KTUtil.isRTL(),
  orientation: "bottom right",
  todayHighlight: true,
  templates: arrows
 });

 // range picker
 $('#kt_datepicker_5').datepicker({
  rtl: KTUtil.isRTL(),
  todayHighlight: true,
  templates: arrows
 });

  // inline picker
 $('#kt_datepicker_6').datepicker({
  rtl: KTUtil.isRTL(),
  todayHighlight: true,
  templates: arrows
 });
}

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

jQuery(document).ready(function() {
KTBootstrapDatepicker.init();
});
</script>
<script>
    $("#hn").focusout(function(){
        var hn = $(this).val();
        $.post("{{url('photomove')}}",
        {
            event : 'hn_check',
            value : $('#hn').val(),
        },
        function(data,status){
            if(data.length>6){
                var res = data.split("#");
                $("#showhn").modal('show')
                $("#modal_hn").html(hn)
                $("#modal_name").html(res[0])
            }
        });
    })
</script>

<script src="{{url('')}}/public/socket/socket.io.min.js"></script>
<script>
    const socket = io("http://localhost:3000")

    function get_data() {

        socket.emit('citizencard', 'button click!')
        socket.on('citizencard', (data) => {


            // $('#modal_progress').modal('show');
            let parse = JSON.parse(data)
            // gender
            let gender_int = parse['gender']
            let gen = (gender_int == 1) ? 'ชาย' : 'หญิง'
            // name
            let split     = parse['th_name'].split(" ")
            let length    = split.length
            let prefix    = split[0]
            let fname     = split[1]
            let lname     = split[length-1]

            $('#id_pass').val(parse['cid'])
            $('#fix').val(prefix)
            $('#firstname').val(fname)
            $('#lastname').val(lname)
            $('#gender').val(gen)
            $('#b_date').val(split_str_to_date(parse['dob']))
            // $('#b_age').val(getAge(split_str_to_date(parse['dob'])))
            // $('#modal_progress').modal('hide');

        })

        function split_str_to_date(str){
            let year = str.slice(0,4)
            let month = str.slice(4,6)
            let day = str.slice(6,8)
            return `${year}-${month}-${day}`
        }


    }

</script>
@endsection