@extends('layout.basic.main')

@push('css')
    <style>
        .box-body {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
            padding: 10px;
            display: inline-block;
            font-size: 15px;
        }

        .box-body:before, .box-body:after {
            content: " ";
            display: table;
        }

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

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

        td:first-child {
            text-align: left;
        }

        #mainTable {
            font-size: 15px;
        }

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

        #mainTable_filter, #mainTable_paginate{
            float: right;
        }

        .pagination {
            margin: 0;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid pc-body">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                @if(session('errors'))
                    <div class="alert alert-danger alert-dismissable fade in">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                        <ul>
                            @foreach(session('errors') as $error)
                                <li>{!! $error !!}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if(session('success'))
                    @push('js')
                        <script type="application/javascript">
                            setTimeout(function () {
                                location.href = '/basic/qr_url'
                            }, 1000);
                        </script>
                    @endpush
                    <div class="alert alert-success alert-dismissable fade in">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                        <ul>
                            <li>{!! session('success') !!}</li>
                        </ul>
                    </div>
                @endif
            </div>
            <div class="row" id="notification-form" v-cloak="">
                <div class="col-sm-12">
                    <h2 class="diff" style="font-size: 25px;">ブログ一覧</h2>
                    <div class="box-body">
                        <div class="col-lg-12" style="margin-bottom: 15px">
                            <div class="col-lg-6" style="padding-left: 0px;">
                                <div class="col-lg-5">
                                    <div class="input-group date">
                                        <input type="text" class="form-control" data-date-format="yyyy-mm-dd"
                                               id="fromTime">
                                        <div class="input-group-addon">から</div>
                                    </div>
                                </div>
                                <div class="col-lg-5">
                                    <div class="input-group date">
                                        <input type="text" class="form-control" data-date-format="yyyy-mm-dd"
                                               id="toTime">
                                        <div class="input-group-addon">まで</div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6">

                                <a href="{{route('createNewPushNotificationOlioa')}}">
                                    <button class="btn btn-success btn-sm pull-right"
                                            style="width: 110px; margin-left: 5px;">ブログ作成
                                    </button>
                                </a>

                                <button class="btn btn-primary btn-sm pull-right" id="showPushDependOnTime"
                                        style="width: 110px;" v-on:click="showPushDependOnTime()">
                                    検索
                                </button>
                            </div>
                        </div>

                        <div class="col-lg-12" style="margin-bottom: 15px">
                            <div class="col-lg-12">
                                送信数: <span id="total_store_push"></span>
                            </div>
                            <div class="col-lg-12">
                                拝見数: <span id="total_user_view"></span>
                            </div>
                            <div class="col-lg-12">
                                既読数: <span id="total_user_read"></span>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <table id="mainTable" class="table table-hover table-responsive with-border"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="/js/axios.min.js"></script>
    <script src="/js/push_notification/index.js?v={{config("sns-line.version")}}"></script>
    <script>
        var fromTime = $('#fromTime');
        var toTime = $('#toTime');

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

        toTime.datepicker({
            dateFormat: 'yy-mm-dd',
            language: 'ja'
        });
        toTime.datepicker("setDate", new Date() );
    </script>
@endpush