@extends('layout.basic.main')

@push('css')
    <style>
        .box-body {
            padding: 10px;
            display: inline-block;
        }

        .form-control {
            font-size: 20px!important;
        }

        input[type="text"] {
            height: 36px!important;
        }

        .input-sm {
            line-height: 1;
        }

        .bootstrap-timepicker-widget table td input {
            width: 40px!important;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid pc-body">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                @if(session('error'))
                    <div class="alert alert-danger alert-dismissable fade in">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                        {!! session('error') !!}
                    </div>
                @endif
            </div>
            <div class="row" id="notification-form">
                <div class="col-sm-12">
                    <h2 class="diff" style="font-size: 25px;">ブログ</h2>
                    <div class="box-body">
                        <div class="col-lg-12">
                            <div class="col-lg-6 col-lg-offset-2">
                                <form class="form-horizontal" id="addNewPushNotificationStoreForm" method="post" action="/basic/push-notifications/save-new-push-notification" enctype="multipart/form-data">
                                    {{ csrf_field() }}
                                    <div class="row" style="margin: 0 -15px 15px -15px;">
                                        <div class="col-lg-3 text-right" style="padding: 7px 15px 0 15px;">配信日時</div>
                                        <div class="col-lg-9">
                                            <div class="col-lg-4" style="padding-left: 0;">
                                                <div class="input-group bootstrap-timepicker timepicker">
                                                    <input id="timepicker" name="timeSend" type="text" class="form-control timeSend input-small" data-minute-step="1">
                                                    <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
                                                </div>
                                            </div>

                                            <div class="col-lg-5">
                                                <div class="input-group date">
                                                    <input id="datepicker" name="dateSend" type="text" class="form-control dateSend" data-date-format="yyyy-mm-dd" value="">
                                                    <div class="input-group-addon"><span class="glyphicon glyphicon-th"></span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-lg-3">タイトル</label>
                                        <div class="col-lg-8">
                                            <input class="form-control" type="text" name="title">
                                        </div>
                                        <label class="control-label col-lg-1" style=" color: red">(*)</label>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-lg-3">プッシュ内容</label>
                                        <div class="col-lg-8">
                                            <input class="form-control" type="text" name="sortDescription">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-lg-3">ブログ内容</label>
                                        <div class="col-lg-8">
                                            <textarea class="form-control" name="contentNotify" rows="5"></textarea>
                                        </div>
                                        <label class="control-label col-lg-1" style=" color: red">(*)</label>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-lg-9 col-lg-offset-3">
                                            <button type="submit" class="btn btn-primary" id="btnAddPush">作成する</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="/js/axios.min.js"></script>
    <script src="https://cdn.ckeditor.com/4.7.1/standard/ckeditor.js"></script>
    <script>
        var dateSend = $('.dateSend');

        dateSend.datepicker({
            dateFormat: 'yy-mm-dd',
            language: 'ja'
        });
        dateSend.datepicker("setDate", new Date() );

        $('#timepicker').timepicker({
            timeFormat: 'HH:mm',
            template: 'dropdown',
            appendWidgetTo: 'body',
            minuteStep: 1,
            showMeridian: false
        });

        CKEDITOR.config.allowedContent = true;

        editor = CKEDITOR.replace('contentNotify', {
            height: 500,
            language: 'ja'
        });
    </script>
@endpush