@extends('layouts.app')

@section('head')
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ URL::asset('css/style.css') }}">
<script type="text/javascript" src="{{ URL::asset('jquery/jquery.js') }}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">
// Added By Aber Lu at 2018/04/19 let img max width = 100% start
$(document).ready(function() {
    $(".box").find("img").css("width", "");
    $(".box").find("img").css("height", "");
    $(".box").find("img").css("max-width", "100%");
});
// Added By Aber Lu at 2018/04/19 let img max width = 100% start

function show(box){
    if ( $("#" + box).is(":visible") ) {
        $("#" + box).hide();
    } else {
        $("#" + box).show();
    }
}
</script>

@endsection

@section('header')
<div id="back"><a onclick="window.location='{{ url('auth/index') }}'">〈返回</a></div>
<div id="title">社區公告</div>
@endsection
<div id="contents">
@section('content')
@forelse ($datas as $data)
    <div class="message">
        <div class="arrow" onclick="show('box{{ $data->proclamation_id }}')" style='position:relative;'>
            <img src="{{ URL::asset('images/arrow.png') }}">
        </div>
        <div class="text" style="font-size:25px;font-weight:bold;">{{ $data->title }}</div>
        <div class="date">{{ $data->remark1 }}</div>
        <div class="location">{{ $data->remark2 }}</div>
        <div id="box{{ $data->proclamation_id }}" class='container-fluid box' style="display:none;font-size:18px;color:#666;">
            <br>{!! $data->content !!}
        </div>
    </div>
@empty
</div>
    <div>目前無任何資料</div>
@endforelse
@endsection