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

@endsection


@section('style')
<style>
    .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;
	}
}
</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>
@endsection



@section('content')
<div class="row m-0">
    <div class="col-lg-12">
        <div class="card rounded-0">
            <div class="card-body">
                <div class="row m-0">
                    <div class="col-lg-2">
                        <img src="{{url('')}}/public/image/bot.jpg" alt="งิงิ" srcset="" class="img-fluid">
                        <br>
                        <button class="btn btn-primary w-100 rounded-0" id="readcitizencard">อ่านบัตรประชาชน</button>
                    </div>
                    <div class="col-lg-10">
                        <div class="row m-0 cn">
                            <div class="col-lg-3">HN <span class="text-danger">*</span></div>
                            <div class="col-lg-5"><input type="text" name="" class="form-control"></div>
                        </div>
                        <div class="row m-0 mt-4">
                            <div class="col-lg-3">บัตรประชาชน / Passport</div>
                            <div class="col-lg-5"><input type="text" name="" class="form-control" id="id_pass"></div>
                        </div>
                        <div class="row m-0 mt-4 cn">
                            <div class="col-lg-1">
                                คำนำหน้า
                                <input type="text" name="" class="form-control" id="fix">
                            </div>
                            <div class="col-lg-4">
                                ชื่อ <span class="text-danger">*</span>
                                <input type="text" name="" class="form-control" id="firstname">
                            </div>
                            <div class="col-lg-4">
                                นามสกุล <span class="text-danger">*</span>
                                <input type="text" name="" class="form-control" id="lastname">
                            </div>
                            <div class="col-lg-3">
                                 เพศ <span class="text-danger">*</span>
                                {{-- <div class="row"> --}}
                                    <div class="">

                                        <input id="ck_gender" data-switch="true" type="checkbox"  data-on-color="primary" data-off-color="warning" data-on-text="ชาย" data-off-text="หญิง"/>
                                    </div>
                                    {{-- <input id="ck_gender" data-switch="true" data-on-text="ชาย" data-off-text="หญิง" data-on-color="success"  data-off-color="success"/> --}}
                                {{-- </div> --}}
                            </div>
                        </div>
                        <div class="row m-0 mt-4 cn">
                            <div class="col-lg-3">
                                วันเกิด
                                <input type="date" name="" class="form-control" id="b_date">
                            </div>
                            <div class="col-lg-1">
                                อายุ <span class="text-danger">*</span>
                                <input type="text" name="" class="form-control" id="b_age">
                            </div>
                        </div>
                        <div class="row m-0 mt-4">
                            <div class="col-lg-4">
                                ติดต่อ <span class="text-danger">*</span>
                                <input type="text" name="" class="form-control">
                            </div>
                            <div class="col-lg-4">
                                ติดต่อฉุกเฉิน <span class="text-danger">*</span>
                                <input type="text" name="" class="form-control">
                            </div>
                        </div>
                        <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-3"><a href="javascript:void(0)" class="btn btn-light-primary font-weight-bold mr-2 w-100">บันทึก</a></div>
                            <div class="col-lg-3"><a href="javascript:void(0)" class="btn btn-light-success font-weight-bold mr-2 w-100">บันทึกและนัดหมาย</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection




@section('script')


    <script>
        $("#readcitizencard").click(function(){
            $('#modal_progress').modal('show');
            $.get('{{url('readcitizencard')}}',{},function(data,status){
                var res = JSON.parse(data);
                console.log(res);
                var name = res.th_name.split(" ");
                $("#fix").val(name[0])
                $("#firstname").val(name[1])
                $("#lastname").val(name[2])
                $("#id_pass").val(res.cid)

                if(res.gender==1){
                    $("#ck_gender").click()
                }else{
                    // $("#ck_gender").prop("checked",false)
                }
                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>
    $("#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>

@endsection