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

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

<script type="text/javascript">
	jQuery(document).ready(function(){
	   jQuery("#createform").validationEngine();
	});
</script>

<div class="container">
    {{ Form::open(['url' => 'topics/update/' . $id, 'method' => 'POST', 'name' => 'form', 'id' => 'createform', 'files' => true]) }}
    <h5>トピックス編集（更新）</h5>
    <!-- データエリア -->
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">トピックス情報</h3>
            </div>
            
            {{-- 通知メッセージ --}}
            @if ($message <> "")
                <div class="message">
                    {{ Form::label("message", $message, ["class"=>"form-control btn-success btn"]) }}
                </div>
            @endif
            
            @if (session()->has('errors'))
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
                            
            <div class="panel-body">
                <table class="table">
                    <col width="12%" />
                    <col width="20%" />
                    <col width="8%" />
                    <col width="20%" />
                    <col width="40%" />
                    
                    <tr>
                        <td>{{ Form::label("display_date","表示日",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::text("display_date", $data->display_date, ["class"=>"form-control", "id"=>"display_date", "style"=>"width:120px"]) }}</td>
                        <td>{{ Form::label("start_date","掲載期間",["class"=>"control-label btn"]) }}</td>
                        <td colspan='2'>
                            {{ Form::text("start_date", $data->start_date, ["class"=>"form-control", "id"=>"start_date", "style"=>"width:120px"]) }} ～ 
                            {{ Form::text("end_date", $data->end_date, ["class"=>"form-control", "id"=>"end_date", "style"=>"width:120px"]) }}
                        </td>
                    </tr>
                    <tr>
                        <td>{{ Form::label("title", "タイトル", ["class"=>"control-label btn"]) }}</td>
                        <td colspan="4">{{ Form::text("title", $data->title, ["class"=>"form-control validate[required]", "id"=>"title"]) }}</td>
                    </tr>
                    <tr>
                        <td>{{ Form::label("contents","登録内容",["class"=>"control-label btn"]) }}</td>
                        <td colspan="4">{{ Form::textarea("contents", $data->contents, ["class"=>"form-control validate[required]", "id"=>"contents", "rows"=>"10"]) }}</td>
                    </tr>

                    <tr>
                        <td rowspan='5'>{{ Form::label("file1", "アップロードファイル", ["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::file("file1", "", ["id"=>"file1", "class"=>"form_control"]) }}</td>
                        <td colspan='2'>
                            @if (!empty($files[0])) 
                                {{ Form::text("oldfile1", $files[0]->filename, ["class"=>"form-control", "id"=>"oldfile1", "readonly"=>"true", "style"=>"width:70%"]) }} 
                                {{ Form::hidden("oldpath1", $files[0]->filepath) }} 
                                {{ Form::checkbox('delfile1', 1, "", ['class' => 'for-control', "id"=>"delfile1"]) }}
                                {{ Form::label("delfile1","削除",["class"=>"control-label btn"]) }}
                            @endif
                        </td>
                        <td rowspan='5'>
                            <!-- ユーザー設定エリア 初期処理（明細部分） -->
                            <script data-jsfiddle="hot_user">
                                var hot_user;
                                $(document).ready(function () {
                                    var data = [
                                        @foreach( $userdata as $value )
                                            { 
                                                id: '{{ $value->id }}', 
                                                name: '{{ $value->name }}', 
                                                @if ( isset($value->topics_id) )
                                                    active: '1' 
                                                @else
                                                    active: '0'
                                                @endif
                                            },
                                        @endforeach
                                    ];

                                    container = document.getElementById('hot_user'),  //後ほど表を展開する要素を指定
                                    hot_user = new Handsontable(container, {
                                        data: data,
                                        autoColumnSize: true,
                                        autoWrapRow: false,
                                        contextMenu: false,
                                        columnSorting: false,
                                        copyPaste: true,
                                        currentRowClassName: 'currentRow',
                                        enterBeginsEditing: false,
                                        fixedRowsTop: 0,
                                        formulas: false,
                                        manualColumnResize: true,
                                        stretchH: true,
                                        sortIndicator: true,
                                        wordWrap: false,

                                        rowHeaders: true,
                                        colHeaders: ['', '利用可能ユーザ', '利用'],
                                        colWidths: [1, 280, 40 ],
                                        columns: [
                                            { data: 'id', type: 'text'},
                                            { data: 'name',  type: 'text', className: 'htLeft', readOnly: true },
                                            { data: 'active', type: 'checkbox', className: 'htLeft', checkedTemplate: '1', uncheckedTemplate: '0' },
                                        ],

                                        afterChange: function (change, source) {   //以下セル編集後の処理
                                            var ht=this;
                                            console.log( JSON.stringify( ht.getSourceData() ) );
                                        },

                                    });

                                });
                            </script>
                            <!-- /. -->

                            <div id="hot_user" class="handsontable" style="overflow:hidden;height:15vh"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>{{ Form::file("file2", "", ["id"=>"file2"]) }}</td>
                        <td colspan='2'>
                            @if (!empty($files[1])) 
                                {{ Form::text("oldfile2", $files[1]->filename, ["class"=>"form-control", "id"=>"oldfile2", "readonly"=>"true", "style"=>"width:70%"]) }} 
                                {{ Form::hidden("oldpath2", $files[1]->filepath) }} 
                                {{ Form::checkbox('delfile2', 1, "", ['class' => 'for-control', "id"=>"delfile2"]) }}
                                {{ Form::label("delfile2","削除",["class"=>"control-label btn"]) }}
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <td>{{ Form::file("file3", "", ["id"=>"file3"]) }}</td>
                        <td colspan='2'>
                            @if (!empty($files[2])) 
                                {{ Form::text("oldfile3", $files[2]->filename, ["class"=>"form-control", "id"=>"oldfile3", "readonly"=>"true", "style"=>"width:70%"]) }} 
                                {{ Form::hidden("oldpath3", $files[2]->filepath) }} 
                                {{ Form::checkbox('delfile3', 1, "", ['class' => 'for-control', "id"=>"delfile3"]) }}
                                {{ Form::label("delfile3","削除",["class"=>"control-label btn"]) }}
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <td>{{ Form::file("file4", "", ["id"=>"file4"]) }}</td>
                        <td colspan='2'>
                            @if (!empty($files[3])) 
                                {{ Form::text("oldfile4", $files[3]->filename, ["class"=>"form-control", "id"=>"oldfile4", "readonly"=>"true", "style"=>"width:70%"]) }} 
                                {{ Form::hidden("oldpath4", $files[3]->filepath) }} 
                                {{ Form::checkbox('delfile4', 1, "", ['class' => 'for-control', "id"=>"delfile4"]) }}
                                {{ Form::label("delfile4","削除",["class"=>"control-label btn"]) }}
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <td>{{ Form::file("file5", "", ["id"=>"file5"]) }}</td>
                        <td colspan='2'>
                            @if (!empty($files[4])) 
                                {{ Form::text("oldfile5", $files[4]->filename, ["class"=>"form-control", "id"=>"oldfile5", "readonly"=>"true", "style"=>"width:70%"]) }} 
                                {{ Form::hidden("oldpath5", $files[4]->filepath) }} 
                                {{ Form::checkbox('delfile5', 1, "", ['class' => 'for-control', "id"=>"delfile5"]) }}
                                {{ Form::label("delfile5","削除",["class"=>"control-label btn"]) }}
                            @endif
                        </td>
                    </tr>
                </table>
                {{ Form::hidden("id", "", ["id"=>"id"]) }}
                {{ Form::hidden("code", "", ["id"=>"code"]) }}
                {{ Form::hidden("users", "", ["id"=>"users"]) }}

                {{ Form::submit("　更新　", ["class" => "btn btn-success", "onClick" => "execUpdate();" ]) }}
                {{ Form::button("キャンセル", ["class"=>"btn btn-default", "onClick"=>"javascript:window.history.back(-1);return false;"]) }}

                {{ Form::close() }}
            </div><!-- /.panel-body -->
        </div><!-- /.panel panel-default -->
    </div><!-- /.col-md-12 -->
    <!-- /.データエリア -->
</div>

<script Language="JavaScript">
    // 更新
    function execUpdate() {
        // json-txt化して全件post
        document.getElementById("users").value = JSON.stringify( hot_user.getSourceData() );
    }
</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_date').datepicker({
        onSelect: function(dat,inst){
            var week=$.datepicker.iso8601Week(new Date(dat));
//            $('#contract_ymd').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_date').datepicker({
        onSelect: function(dat,inst){
            var week=$.datepicker.iso8601Week(new Date(dat));
//            $('#deliver_ymd').val($.datepicker.formatDate('yyyy/mm/dd',new Date(dat))+(week<10?'0':'')+week)
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    
    $('#end_date').datepicker({
        onSelect: function(dat,inst){
            var week=$.datepicker.iso8601Week(new Date(dat));
//            $('#next_ymd').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