@extends('admin.layouts.contentLayoutMaster')

@section('title','新增訊息公告')

@section('vendor-styles')

@endsection

@section('page-styles')
@endsection

@section('content')
    <section id="app">
        <div class="row match-height justify-content-center">
            <div class="col-md-12 col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title"></h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="form-body">

                                <div class="row">
                                    <div class="col-md-1 offset-md-2">
                                        <label>標題</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input class="form-control" id="name" name="name" placeholder="標題" type="text"
                                               v-model="form.news.name">
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-1 offset-md-2">
                                        <label>內容說明</label>
                                    </div>
                                    <div class="col-md-8 form-group">
                                        <editor v-model="form.news.description" :init="config.mceEditor"></editor>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-1 offset-md-2">
                                        <label>開始時間</label>
                                    </div>
                                    <div class="col-md-4 form-group">
                                        <date-flatpickr
                                                id="publish_start_at"
                                                name="publish_start_at"
                                                v-model="form.news.publishStartAt"
                                        ></date-flatpickr>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-1 offset-md-2">
                                        <label>結束時間</label>
                                    </div>
                                    <div class="col-md-4 form-group">
                                        <date-flatpickr
                                                id="publish_end_at"
                                                name="publish_end_at"
                                                v-model="form.news.publishEndAt"
                                        ></date-flatpickr>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-1 offset-md-2">
                                        <label>啟用</label>
                                    </div>
                                    <div class="col-md-4 form-group">
                                        <div class="custom-control custom-switch custom-control-inline mb-1">
                                            <input type="checkbox" class="custom-control-input" id="status"
                                                   name="status" v-model="form.news.status">
                                            <label class="custom-control-label mr-1" for="status">
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="row justify-content-center">
                                <button class="btn btn-primary mr-1 mb-1" type="button" @click="update">儲存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection


@section('vendor-scripts')

@endsection

@section('page-scripts')
    <script>
        const Action = 'edit';
        const AjaxUrl = {
            'update': '{{ Route("ajax.admin.news.update", $newsInfo['id']) }}'
        };
        const NewsInfo = {!! $newsInfo !!};
        let publishStartAt = NewsInfo.publishStartAt;
        let publishEndAt =  NewsInfo.publishEndAt;
    </script>
    <script src="{{ mix('assets/js/admin/news/form.js')}}"></script>
@endsection