@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">
* {
    box-sizing: border-box;
}
[class*="col-"] {
    float: left;
	margin:20px;
    margin-left: 35px;
}

.row:after {
    content: "";
    clear: both;
    display: block;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

@media only screen and (max-width: 1024px) {
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 600px) {

}

html {
    height: 100% !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
body {
    height: 100% !important;
    min-height: 100% !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    position:relative;
    overflow: hidden;
}
.container {
    display: flex;
    height: calc(100% - 77px);
    overflow-y: auto;
    padding: 0px 10% !important;
    margin-top: 12px !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

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

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

.msgDiv {
    font-size: 16px
}
</style>
@endsection

@section('header')
	<div id="back"><a onclick="window.location='{{ url('auth/index') }}'">〈返回</a></div>
	<div id="title">公設預約</div>
@endsection

@section('content')

<div class="container">
@forelse ($datas as $data)
	<div class="fac" onclick="location.href='{{ url('auth/reservation', $data->facility_id) }}'"> <!-- style='position:relative;top:45px;left:20px;'> !-->
		<img src="{{ Config::get('app.zdpos_ci_host') . $data->facility_image }}" width="95%" height="80%" style="position:relative;top:5px;">
		<h4 style="position:relative;top:2px;">{{ $data->facility_name }}</h4>
	</div>
@empty
    <div>目前無任何資料</div>
@endforelse
</div>

<div id="dialogMsg" title="提示">
    <div class="msgDiv">
    </div>
</div>

@include('common.messages')

<script type="text/javascript">
    // Modified By Aber Lu at 2018/04/24 有關alert視窗問題 start
    $(document).ready(function() {
        $("#dialogMsg").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                確定: function () {
                    $(this).dialog("close");
                }
            },
            close: function() {
                $(this).find(".msgDiv").eq(0).html("");
            }
        });
        if($('div[name=errMsg]').length > 0 ) {
            var sError = "";
            $.each($('div[name=errMsg]'), function(index, obj) {
                if (sError.length > 0) {
                    sError += "\n";
                }
                sError += $(obj).html();
            });

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

@endsection