@extends('template')
@section('title',"最新消息")
@section('content_title',"最新消息")

@section('content')

    <script type="text/javascript">
        
        $(function(){

            $('.data_table').bootstrapTable({
                onPostBody:function(){
                    //搜尋頁搜尋框放大鏡
                    $(".search").find("input").addClass('search-complete');
                    $(".search").css('width','40%');
                    $(".search-complete").css('font-size','32px');
                },
                // 開啟細項的動作
                onExpandRow:function(index, row, $detail) {
                    var id = row.id;

                    var res = $("#desc_" + id).html();
                    $detail.html(res);

                    //設置bootstrapTable起始的高度
                    $('.fixed-table-container').css('height', $(window).height()-255);
                },

            });
        });

    </script>

    <style type="text/css">
        .search-complete {
            background: #FFFFFF url(image/icon_act_search_lm.png) no-repeat 10px;
            padding-left: 52px;
            width: 100%;
            border-radius: 5px;
            position: relative;
            background-size: 32px;
            font-size: 16px;
            cursor: pointer;
            border: 0px;
        }
    </style>

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
            	<table id='data_table' class='data_table' data-classes='table table-borderless table-hover' data-toolbar='.toolbar' data-pagination="true" data-search-align='left' data-locale='{{ app()->getLocale() }}' data-detail-view="true" style="font-size: 32px;" data-search='true'>
            		<thead>
            			<tr>
                            <th data-sortable="true" data-field="id" data-align='center' data-halign='center' data-visible="false">ID</th>
            				<th data-sortable="true" data-field="date" data-align='center' data-halign='center' data-width=230 >日期</th>
                            <th data-sortable="true" data-field="time" data-align='center' data-halign='center' data-width=180 >時間</th>
            				<th data-sortable="true" data-field="name" data-align='center' data-halign='center'>標題</th>
            			</tr>
            		</thead>
            		<tbody>
                        {{-- {{ var_dump($data) }} --}}
                        @for($d=0;$d<count($data);$d++)
                        <tr>
                            @php $row = $data[$d] @endphp

                            <td>{{ $row['id'] ?? '--' }}</td>
                            <td>{{ $row['date'] ?? '--' }}</td>
                            <td>{{ $row['time'] ?? '--' }}</td>
                            <td>{{ $row['name'] ?? '--' }}</td>

                            <div style="display: none;" id="desc_{{$row['id']}}">
                                {{ $row['description'] }}
                            </div>
                        </tr>
                        @endfor
            		</tbody>
            	</table>
            </div>
        </div>
    </div>

@endsection