@extends('layouts.master')
@section('css')
    <link rel="stylesheet" href="stylesheets/register.css">
<link rel="stylesheet" type="text/css" media="screen" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<style>
    .ui-widget-header {
        border: 1px solid #aaaaaa;
        background: #da51ad url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
        color: #ffffff;
        font-weight: bold;
    }
</style>
@stop
@section('content')
<div id="page">
    @if(Session::has('ReservationList'))
    <div id='dialog' title="感謝您的預約">
        <p>{{Session::get('ReservationList')->name}},您好</p>
        <p>預約時間:{{Session::get('ReservationList')->date}},{{Session::get('ReservationList')->type}}</p>
        <p>掛號號碼:{{Session::get('ReservationList')->registered_number}}</p>
    </div>
    @endif
    <div id='search-dialog' title="您的預約" style="display: none">
       
    </div>
    
    <div id="main" class="register">
        <section id="service_item">
            
            <div class="form-group container border border-danger" style="border-radius:10px" >
                <form id="searchFrom" method="get" action="{{ route('search_reservation') }}" style="padding-bottom: 5px;">
                    <legend>查詢預約掛號</legend>
                    <input class="col-xl-5" id="search-name" placeholder="您的姓名">
                    <input class="col-xl-5" id="search-id"  placeholder="身分證字號">
                    <div id="search-inquire-btn" class="btn btn-light" onclick="sendSearchMyForm();">查詢掛號</div>
                </form>
            </div>
            <div class="form-group container justify-content-center" style="text-align: center;">
                <select class="form-control col-xl-6" id="week" select-action="{{ route('get_reservation_list')}}">
                    @foreach ($week_option as $val)
                        <option value="{{ $val }}">{{ $val }}</option>
                    @endforeach
                </select>
            </div>
            {{-- <div class="form-group container justify-content-center" style="text-align: center;">
                <select class="form-control col-xl-6" id="type-select" >
                    <option value="上午">上午</option>
                    <option value="下午">下午</option>
                    <option value="晚上">晚上</option>
                </select>
            </div> --}}
            <div class="container-fluid">
                
                <table class="table scroll-left" id="reservation_list">
                   
                </table>

                <div class="row">
                    <div class="col-xl-6 offset-xl-1 col-lg-7">
                        <img src="{{ asset('upload/'.$contact->business_hours_image) }}">
                    </div>
                    <div class="col-xl-4 col-lg-5 text-center">
                        <img src="{{ asset('upload/'.$contact->appointment_image) }}">
                    </div>
                </div>
            </div>
        </section>
        <div id="myModal" class="modal fade" role="dialog" style="width: 100%;height:100%">
            <div class="modal-dialog modal-lg">
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header" style="background-color:#e6739f">
                  <h4 class="modal-title" style="color:#fff">網路掛號</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="form" method="post" action="{{ route('reservation_post') }}">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}" />   
                        <input type="hidden" name="doctor_id" id="doctor_id" val="">
                        <div class="form-group date">
                            <label class="control-label col-md-4" for="name">
                                <span class="text-red">*</span>
                                掛號日期:&nbsp;
                            </label>
                            <div class="col-md-8">
                                <input  class="form-control" name="date" id="date"  value="" required readonly>
                            </div>
                        </div>
                        <div class="form-group type">
                            <label class="control-label col-md-4" for="telephone"> <span class="text-red">*</span>醫生:&nbsp;</label>
                            <div class=" col-md-8">
                                <input type="text" class="form-control" id="doctor_name" name="doctor_name" value="" readonly>
                            </div>
                        </div>
                       
                        <div class="form-group diagnosis">
                            <label class="control-label col-md-4" for="diagnosis"> <span class="text-red">*</span>診別:&nbsp;</label>
                            <div class=" col-md-8">
                                <select  class="form-control" id="diagnosis" name="diagnosis">
                                    <option value='初診'>初診</option>
                                    <option value='複診'>複診</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group type">
                            <label class="control-label col-md-4" for="diagnosis"> <span class="text-red">*</span>時段:&nbsp;</label>
                            <div class=" col-md-8">
                                <input type="text" class="form-control" id="type"" name="type"" value="" readonly>
                            </div>
                        </div>
                        <div class="form-group name">
                            <label class="control-label col-md-4" for="name">
                                <span class="text-red">*</span>
                                姓名:&nbsp;
                            </label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="name" name="name" value="" required>
                            </div>
                        </div>
                        <div class="form-group birthday">
                            <label class="control-label col-md-4" for="birthday">
                                <span class="text-red">*</span>
                                出生年月日:&nbsp;
                            </label>
                            <div class="col-md-8">
                                <input  class="form-control" name="birthday" id="birthday"  value="2000/01/01" required  readonly>
                            </div>
                        </div>
                        <div class="form-group id_number">
                            <label class="control-label col-md-4" for="id_number"><span class="text-red">*</span>身分證字號:&nbsp;</label>
                            <div class=" col-md-8">
                                <input type="text" class="form-control" id="id_number"" name="id_number"" value="" required>
                            </div>
                        </div>
                        <div class="form-group mobile">
                            <label class="control-label col-md-4" for="mobile"> <span class="text-red">*</span>手機:&nbsp;</label>
                            <div class=" col-md-8">
                                <input type="text" class="form-control" id="mobile" name="mobile" value="" required>
                            </div>
                        </div>
                        <div class="form-group address">
                            <label class="control-label col-md-4" for="address""> <span class="text-red">*</span>住址:&nbsp;</label>
                            <div class=" col-md-8">
                                <input type="text" class="form-control" id="address"" name="address"" value="" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">&nbsp;</label>
                            <div class="col-sm-12 text-right">
                                <div id="inquire-btn" class="btn btn-light" onclick="sendMyForm();">掛號</div>
                            </div>
                        </div>
                    </form>
                </div>
                
              </div>
          
            </div>
        </div>
    </div>
    
</div>
<div id="dialog" title="Basic dialog">
            
</div>
@stop
@section('script')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<script type="text/javascript">

    $('#type-select').change(function(){

    });
    $('#week')[0].selectedIndex = 1; 
    Date.prototype.getWeek = function (dowOffset) {
    /*getWeek() was developed by Nick Baicoianu at MeanFreePath: http://www.meanfreepath.com */
        dowOffset = typeof(dowOffset) == 'int' ? dowOffset : 0; //default dowOffset to zero
        var newYear = new Date(this.getFullYear(),0,1);
        var day = newYear.getDay() - dowOffset; //the day of week the year begins on
        day = (day >= 0 ? day : day + 7);
        var daynum = Math.floor((this.getTime() - newYear.getTime() - 
        (this.getTimezoneOffset()-newYear.getTimezoneOffset())*60000)/86400000) + 1;
        var weeknum;
        //if the year starts before the middle of a week
        if(day < 4) {
            weeknum = Math.floor((daynum+day-1)/7) + 1;
            if(weeknum > 52) {
                nYear = new Date(this.getFullYear() + 1,0,1);
                nday = nYear.getDay() - dowOffset;
                nday = nday >= 0 ? nday : nday + 7;
                /*if the next year starts before the middle of
                the week, it is week #1 of that year*/
                weeknum = nday < 4 ? 1 : 53;
            }
        }
        else {
            weeknum = Math.floor((daynum+day-1)/7);
        }
        return weeknum;
    };
    var today = new Date();
    min_week = today.getWeek();
    year = today.getFullYear();
    $('#week').attr('min',year+'-W'+min_week);
    max_week=min_week+3;
    if(min_week+3>52){
        year+=1;
        max_week=min_week+3-52;
    }
    $('#week').attr('max',year+'-W'+(min_week+3));
    $('#week').val(year+'-W'+min_week);
    week_change();
    $('#week').change(function(){
        week_change();
    });
    function week_change() {
        var week=$('#week').val();
        $.ajax({
            url: $('#week').attr('select-action'),
            data: {week:week },
            type: "GET",
            success:function(data) {
               $('#reservation_list').html(data);
            }
        });
    }
    function doctor_btn_click(btn){
        doctor_id=$(btn).attr('doctor-id');
        doctor_name=$(btn).attr('doctor-name');
        date=$(btn).attr('date');
        reservation_type=$(btn).attr('reservation-type');
        $('#date').val(date);
        $('#doctor_name').val(doctor_name);
        $('#doctor_id').val(doctor_id);
        $('#type').val(reservation_type);
    };
    var birthdayDefaultDate= moment().year() -1;
    birthdayDefaultDate = birthdayDefaultDate+'/12/31';
    $( "#birthday" ).datepicker({
        setDate:new Date('2000/1/1'),
        changeYear : true,
        changeMonth : true,
        yearRange: '1950:'+(moment().year() -1),
        maxDate: birthdayDefaultDate,
        // minDate: +1,
        firstDay :1,
    });
    function sendMyForm(){
        var mobile= $('#mobile').val();
        var id = $('#id_number').val();
        var diagnosis = $('#diagnosis').val();
        if(diagnosis=='初診'){
            if( !is_mobile(mobile) ){
                alert('手機格式錯誤');
                return false;
            }
        }
        if( !checkTwID(id) ){
            alert('身分證字號錯誤');
            return false;
        }
        $('#form').submit();
    }
    function is_mobile(strPhone)
    {
        var cellphone = /^09[0-9]{8}$/;
        if ( cellphone.test( strPhone ) ) {
            return true;
        }
        else {
            return false;
        }
    }
    function sendSearchMyForm(){
        id=$('#search-id').val();
        name=$('#search-name').val();
        url = $('#searchFrom').attr('action');
        $.ajax({
            url:$('#searchFrom').attr('action'),
            data: {id:id,name:name },
            type: "GET",
            success:function(data) {
                if(data.success){
                    message = '';
                    message+='日期:'+data.data['date']+"\n";
                    message+='診號":'+data.data['registered_number']+"\n";
                    message+='診別:'+data.data['type']+"\n";
                    message+='醫師:'+data.data['doctor_name']+"\n";
                    message+='姓名:'+data.data['name']+"\n";
                    message+='身分證:'+data.data['id_number']+"\n";
                    message+='生日:'+data.data['birthday']+"\n";
                    message+='手機號碼:'+data.data['mobile']+"\n";
                    message+='地址:'+data.data['address']+"\n";
                    alert(message);
                }else{
                    alert('查無紀錄');
                }
            }
        });
    }
    function checkTwID(idStr){
            var letters = new Array('A', 'B', 'C', 'D', 
                'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 
                'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 
                'X', 'Y', 'W', 'Z', 'I', 'O');
            // 儲存各個乘數
            var multiply = new Array(1, 9, 8, 7, 6, 5, 
                                    4, 3, 2, 1);
            var nums = new Array(2);
            var firstChar;
            var firstNum;
            var lastNum;
            var total = 0;
            // 撰寫「正規表達式」。第一個字為英文字母，
            // 第二個字為1或2，後面跟著8個數字，不分大小寫。
            var regExpID=/^[a-z](1|2)\d{8}$/i; 
            // 使用「正規表達式」檢驗格式
            if (idStr.search(regExpID)==-1) {
                // 基本格式錯誤
                alert("請仔細填寫身份證號碼");
            return false;
            } else {
                // 取出第一個字元和最後一個數字。
                firstChar = idStr.charAt(0).toUpperCase();
                lastNum = idStr.charAt(9);
            }
            // 找出第一個字母對應的數字，並轉換成兩位數數字。
            for (var i=0; i<26; i++) {
                if (firstChar == letters[i]) {
                firstNum = i + 10;
                nums[0] = Math.floor(firstNum / 10);
                nums[1] = firstNum - (nums[0] * 10);
                break;
                } 
            }
            // 執行加總計算
            for(var i=0; i<multiply.length; i++){
                if (i<2) {
                total += nums[i] * multiply[i];
                } else {
                total += parseInt(idStr.charAt(i-1)) * 
                        multiply[i];
                }
            }
            // 和最後一個數字比對
            if (lastNum == 0 && (total % 10) != lastNum ){
                return false;
            }
            //規則二餘數與檢查碼需相符
            if (lastNum != 0 && (10 - (total % 10)) != lastNum) {
                return false;
            }
            return true;
        }
        $('#diagnosis').change(function(){
            val = $(this).val();
            if(val =='複診'){
                $('.address').hide();
                $('.mobile').hide();
                $('#address').val('');
                $('#mobile').val('');
            }else{
                $('.address').show();
                $('.mobile').show(); 
            }
        })
        @if(Session::has('ReservationList'))
        $( "#dialog" ).dialog({
            height:500,
            width:500
        });
        @endif
</script>
@stop