@extends('layouts.main')
@section('content')

<script type="text/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<link media="screen" rel="stylesheet" type="text/css" href="{{ asset('css/jquery-ui.css') }}">

<div class="container">
    {{ Form::open(['method' => 'POST', 'name' => 'form', 'id' => 'searchform']) }}
    <h5>トピックス情報</h5>
    <div class="col-md-12" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">検索条件</a></h3>
            </div>

            <div class="panel-body collapse in" id="collapseOne">
                <div class="search">
                    <table class="table">
                        <col width="8%" />
                        <col width="23%" />
                        <col width="8%" />
                        <col width="23%" />
                        <col width="8%" />
                        <col width="30%" />
                        <tr>

                            <td>{{ Form::label("display_date","表示日",["class"=>"control-label btn"]) }}</td>
                            <td>
                                {{ Form::text('display_date1', $request->display_date1, ['class' => 'form-control', 'id' => 'display_date1', 'style' => 'width:35%']) }} ～ 
                                {{ Form::text('display_date2', $request->display_date2, ['class' => 'form-control', 'id' => 'display_date2', 'style' => 'width:35%']) }}
                            </td>
                            <td>{{ Form::label("start_date","掲載期間",["class"=>"control-label btn"]) }}</td>
                            <td>
                                {{ Form::text('start_date1', $request->start_date1, ['class' => 'form-control', 'id' => 'start_date1', 'style' => 'width:35%']) }} ～ 
                                {{ Form::text('start_date2', $request->start_date2, ['class' => 'form-control', 'id' => 'start_date2', 'style' => 'width:35%']) }}
                            </td>
                            <td>{{ Form::label("title","タイトル",["class"=>"control-label btn"]) }}</td>
                            <td>{{ Form::text("title", $request->title, ["class"=>"form-control", "id"=>"title"]) }}</td>
                        </tr>
                        <tr>
                            <td colspan="5">
                                {{ Form::submit(" 検索 ", ["class"=>"btn btn-success", "onClick" => "search();"]) }}
                                {{ Form::submit("CSVダウンロード ", ["class" => "btn btn-warning csv", "onClick" => "download_CSV();"]) }}
                                {{ Form::hidden("download", "", ["class"=>"form-control", "id"=>"download"]) }}
                                {{ Form::button("新規登録", ["class" => "btn btn-info", "onClick" => "location.href='/ICS/public/topics/create'"]) }}　
                            </td>
                            <td>※大文字と小文字は区別されます</td>
                        </tr>
                    </table>

                </div><!-- /.search -->
            </div><!-- /.panel-body -->
        </div><!-- /.panel panel-default -->
    </div><!-- /.col-md-12 -->
    {!! Form::close() !!}

    <!-- データエリア -->
    @if (count($datas) > 0)
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">登録情報一覧</h3>
            </div>
            <div class="panel-body">
                <table class="table table-bordered">
                    <tr bgcolor="#F2F2F2">
                        <th></th>
                        <th>表示日</th>
                        <th>掲載開始日</th>
                        <th>掲載終了日</th>
                        <th>タイトル</th>
                        <th>作成日</th>
                    </tr>

                    @foreach($datas as $data)
                    <tr>
                        <td><a href="{{ url('/topics/update/' . $data->id) }}" role="button">{!! Form::button(" 詳細 ", ["class"=>"btn"]) !!}</a></td>
                        <td style="vertical-align: middle">{{ $data->display_date }}</td>
                        <td style="vertical-align: middle">{{ $data->start_date }}</td>
                        <td style="vertical-align: middle">{{ $data->end_date }}</td>
                        <td style="vertical-align: middle">{{ $data->title }}</td>
                        <td style="vertical-align: middle">{{ $data->created_at }}</td>
                    </tr>
                    @endforeach

                </table>
                
                {!! Form::close() !!}
            </div><!-- /.panel-body -->
        </div><!-- /.panel panel-default -->
    </div><!-- /.col-md-12 -->
    
    @elseif (count($datas) == 0 and $_SERVER["REQUEST_METHOD"] == "POST" )
    <!-- データエリア -->
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">検索結果</h3>
            </div>
            <div class="panel-body">
                対象となるデータがありません
            </div><!-- /.panel-body -->
        </div><!-- /.panel panel-default -->
    </div><!-- /.col-md-12 -->
    @endif
    <!-- /.データエリア -->
</div>

<script Language="JavaScript">
    // 検索ボタン押下時
    function search() {
        document.getElementById("download").value = 0;
    }
    // CSVダウンロードフラグセット
    function download_CSV() {
        document.getElementById("download").value = 1;
    }

$(document).ready(function(){
    $(".clearForm").bind("click", function(){
        $(this.form).find("textarea, :text, radio, checkbox").val("").end().find(":checked").prop("checked", false);
    });
});
</script>

<script>
  $(function() {
    $.datepicker.setDefaults({
        closeText: '閉じる',
        prevText: '<前',
        nextText: '次>',
        currentText: '今日',
        monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
        dayNamesShort: ['日','月','火','水','木','金','土'],
        dayNamesMin: ['日','月','火','水','木','金','土'],
        weekHeader: '週',
        dateFormat: 'yy/mm/dd',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: '年',
        changeYear: true,  // 年選択をプルダウン化
        changeMonth: true, // 月選択をプルダウン化
        showWeek: true,
        buttonImage: "{{ asset('css/images/calendar-icon.png') }}",
        buttonText : "カレンダーから選択",
        buttonImageOnly: true,
        showOn: "both",
    });
    
    $('#display_date1').datepicker({
        onSelect: function(dat,inst){
            var week=$.datepicker.iso8601Week(new Date(dat));
//            $('#display_date1').val($.datepicker.formatDate('yyyy/mm/dd',new Date(dat))+(week<10?'0':'')+week)
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    
    $('#display_date2').datepicker({
        onSelect: function(dat,inst){
            var week=$.datepicker.iso8601Week(new Date(dat));
//            $('#display_date2').val($.datepicker.formatDate('yyyy/mm/dd',new Date(dat))+(week<10?'0':'')+week)
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    
    $('#start_date1').datepicker({
        onSelect: function(dat,inst){
            var week=$.datepicker.iso8601Week(new Date(dat));
//            $('#start_date1').val($.datepicker.formatDate('yyyy/mm/dd',new Date(dat))+(week<10?'0':'')+week)
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    
    $('#start_date2').datepicker({
        onSelect: function(dat,inst){
            var week=$.datepicker.iso8601Week(new Date(dat));
//            $('#start_date2').val($.datepicker.formatDate('yyyy/mm/dd',new Date(dat))+(week<10?'0':'')+week)
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
});
</script>    

@endsection