@extends('layouts.app-1')

@section('head')
<link rel="stylesheet" href="{{ URL::asset('css/style.css') }}">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style type="text/css">
    .container {
        display: flex;
        width: 100%;
		margin:45px 0 30px 0;
        overflow-y: auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    #sure {
        margin: 10px 0 10px 0 !important;
    }

    .ui-dialog .ui-dialog-title {
        font-size: 16px;
    }

    .ui-dialog .ui-dialog-buttonpane button {
        font-size: 16px;
    }

    .errMsgDiv {
        font-size: 16px
    }
</style>

@endsection

@section('header')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="header_margin" id="back"><a onclick="window.location='{{ url('auth/reservation') }}'">〈返回</a></div>
<div class="header_margin" id="title">公設預約</div>
@endsection

@section('content')
<div class="container">
    <form method="POST" action="{{ url('auth/reservation') }}" id='form1' style="width: 100%; height: 100%;">
        {{ csrf_field() }}
        <input type="hidden" name="facilityid" value="{{ $datas->facility_id }}">

        <div style="width:100%; height:100%;
                    display:flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
					font-size:15px;
					">


            <!-- Modified By Aber Lu at 2018/05/03 修正 css <div class="fac" style='position:relative;top:60px;'> !-->
            <div class="fac" style='position:relative;'>
                <!-- Modified By Aber Lu at 2018/05/03 修正 css
                <img src="{{ Config::get('app.zdpos_ci_host') . $datas->facility_image }}" width="100%" > !-->
                <img src="{{ Config::get('app.zdpos_ci_host') . $datas->facility_image }}" width="95%" height="80%" style="position:relative;top:5px;">
                <!-- Modified By Aber Lu at 2018/05/03 修正 css <h4> !-->
                <h4 style="position:relative;top:2px;">{{ $datas->facility_name }}</h4>
            </div>

            <div id="box" style='position:relative;'>
                {!! $datas->facility_rule !!}
				
			<div style="text-align:center;margin-bottom:30px;">
                <h1>請選擇預約日期</h1>
                                <input
                    type="date"
                    name='date'
                    @if (!empty($datelimit))
                        @if (isset($datelimit["stDate"]) && !empty($datelimit["stDate"]))
                            min='{{ $datelimit["stDate"] }}'
                        @endif
                        @if (isset($datelimit["edDate"]) && !empty($datelimit["edDate"]))
                            max='{{ $datelimit["edDate"] }}'
                        @endif
                    @endif
                />
                                <div id="div_period" hidden>
                    <h1>請選擇預約時間</h1>
                    <select name='period'></select>
                </div>
                <div id="div_msg" hidden>
                    <h1></h1>
                </div>
			</div>
			
                <div style="width:100%;
                            display: flex;
                            justify-content: center;">
                    <div id="sure">
                        <a onclick="$( '#form1' ).submit();">
                            確定預約
                        </a>
                    </div>
                </div>
				
            </div>
        </div>
    </form>
</div>

<div id="dialogErrMsg" title="提示">
    <div class="errMsgDiv">
    </div>
</div>

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

    $('#sure').hide();

	$("input[name='date']").change(function(e){
        $('#sure').hide();
        $("#div_period").hide();
		load_reservation_time();
	});

	function load_reservation_time(){

        $("#div_period").hide();
        $("#div_msg").hide();
        $("#div_msg").find("h1").html("");
        $('#sure').hide();

		var date = ($("input[name='date']").val()).split("-");
        var date_val = $("input[name='date']").val();
		$.post(
		    "{{url('auth/reservation/load_reservation_time')}}",
            {
                "date_val": date_val,
                "reservation_week": (new Date(date[0],date[1]-1,date[2])).getDay(),
                "f_id": "{{ $datas->facility_id }}"
            }, function(data) {
		    if(typeof data !== typeof undefined &&
                typeof data.data !== typeof undefined &&
                data.data.length > 0 &&
                typeof data.success !== typeof undefined &&
                data.success) {
                data = data.data;
				$("select[name='period'] option").remove();
                $("select[name='period']").prop('disabled', false);
                var check_num = 0;
                var bChecked = false;
				for (var index =0; index < data.length; index++) {
				    if (!bChecked && data[index].remind) {
                        $("select[name='period']").append(
                            "<option value=" + data[index].period_id + " selected>" +
                            data[index].period_start + "~" + data[index].period_end + " 剩餘 " +
                            (data[index].remind ? data[index].remind : "0") +
                            " 人" +
                            "</option>");
                        bChecked = true
                    } else {
                        $("select[name='period']").append(
                            "<option value=" + data[index].period_id + ">" +
                            data[index].period_start + "~" + data[index].period_end + " 剩餘 " +
                            (data[index].remind ? data[index].remind : "0") +
                            " 人" +
                            "</option>");
                    }

					if (data[index].check === "1" ) {
                        console.log("if data[index].check ="+data[index].check);
                        $('select').find('option').eq(index).prop('disabled', true).css("color", "red");
                        check_num++;
                    }
                    $("#div_period").show();
                    if (check_num == data.length){
                        console.log("check_num == data.length");
                        $('#sure').hide();
                        $("select[name='period']").prop('disabled', true);
                        $("#div_msg").show();
                        $("#div_msg").find("h1").html("無可預約時段");
                    }else{
                        $('#sure').show();
                    }
                }
			} else {
                if (typeof data !== typeof undefined &&
                    typeof data.errMsg !== typeof undefined &&
                    data.errMsg.length > 0) {
                    $("#div_msg").show();
                    $("#div_msg").find("h1").html(data.errMsg);
                } else {
                    $("#div_msg").show();
                    $("#div_msg").find("h1").html("無可預約時段");
                }
            }
		}).fail(function (a, b, c) {
		    console.log(a, b, c);
        });
	}
	// Modified By Aber Lu at 2018/04/24 有關alert視窗問題 start
    $(document).ready(function() {
        $("#dialogErrMsg").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                確定: function () {
                    $(this).dialog("close");
                }
            },
            close: function() {
                $(this).find(".errMsgDiv").eq(0).html("");
            }
        });
        if($('div[name=errMsg]').length > 0 ) {
            var sError = "";
            $.each($('div[name=errMsg]'), function(index, obj) {
                if (sError.length > 0) {
                    sError += "<br>";
                }
                sError += $(obj).html();
            });

            if (sError.length > 0) {
                //alert(sError);
                $(".errMsgDiv").eq(0).html(sError);
                $("#dialogErrMsg").dialog("open");
                $("#errMsgContainer").hide();
            }
        }
    });
    // Modified By Aber Lu at 2018/04/24 有關alert視窗問題 end
</script>



 
@include('common.errors')

@endsection