@extends('layout.admin_v2.main')
@push('css')
    <style>
        .center input, .center button {
            width: 50%;
            margin: 20px auto;
            font-size: 100%;
            text-align: center;
            padding: 10px;
        }

        div.btn button {
            display: block;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 10px 10px;
            font-size: 85%;
            background: #4A96B2;
            color: #fff;
            margin-top: 5px;
            border: 0;
            width: 50%;
            cursor: pointer;

        }

        .right {
            display: inline-block;
            float: right;
            margin-bottom: 20px;
            width: 120px;
            text-align: center;
            font-size: 80%;
        }

        .ht8__change_tbl th {
            border-top: unset !important;
            border-right: unset !important;
            font-size: 14px;
        }

        .ht8__change_tbl td {
            border-top: unset !important;
            border-bottom: 1px solid #F4F6F7;
            font-size: 14px;
        }

        .ht8__change_ui * {
            font-weight: bold;
        }

        .modal-header {
            border-bottom: unset !important;
        }

        #modal-add-notification * {
            font-weight: bold;
        }

        .gr__btn_bottom {
            margin-bottom: 25px;
        }

        #modal-add-notification label:after {
            display: none;
        }

        #modal-add-notification textarea {
            resize: none;
        }

        .group-radio {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        .group-radio > div {
            width: 80px;
            display: flex;
            align-items: center;
        }

        .group-radio input[type=radio] {
            width: 16px;
            height: 16px;
            margin-top: 2px !important;
        }

        .group-radio span {
            font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'sans-serif', 'Apple Color Emoji', 'emojisymbols', 'Glyphicons Halflings', fontawesome;
        }

        #modal-add-notification .modal-body {
            margin-left: 4%;
            margin-right: 4%;
        }
    </style>
@endpush
@section('content')
    <article class="sub">
        <section class="masteredit ht8__change_ui" id="app-vue">
            <h2>お知らせ管理</h2>

            <div style="display: flex; align-items: center; justify-content: space-between">
                {{--                <a href="{{route('addNotifiesForm')}}" class="right">--}}
                {{--                    --}}
                {{--                </a>--}}
                <div>
                    <button @click="setDataNotify({})" data-toggle="modal" data-target="#modal-add-notification"
                            class="btn btn-sns-line btn-sns-line-primary">
                        <span>新規作成</span>
                    </button>
                </div>
                <div v-if="selected.length > 0">
                    <button style="width: 100px" class="btn btn-sns-line btn-sns-line-danger" @click="massDeleteNotify">
                        <span>一括削除</span>
                    </button>
                </div>
                <div v-else>
                    <button style="width: 100px" class="btn btn-sns-line btn-sns-line-danger" disabled>
                        <span>一括削除</span>
                    </button>
                </div>
            </div>
            <table class="table ht8__change_tbl">
                <tbody>
                <tr>
                    <th style="width: 40px">
                        <input type="checkbox" v-model="selectAll">
                    </th>
                    <th class="text-left" style="width: 90px;">投稿日</th>
                    <th class="text-left" style="width: 90px;"></th>
                    <th class="text-left">タイトル</th>
                    {{--                    <th>発行日</th>--}}
                    <th style="width: 220px;"></th>
                </tr>
                <tr v-for="item in items" v-if="items.length > 0">
                    <td>
                        <input type="checkbox" name="check_item[]" :value="item.id" v-model="selected">
                    </td>
                    <td class="text-left">
                        <span>
                            @{{ moment(item.created_at).format('YYYY.MM.DD') }}
                        </span>
                    </td>
                    <td class="text-left">
                        <span>
                            @{{ moment(item.created_at).format('HH:mm') }}
                        </span>
                    </td>
                    <td class="text-left">
                        <a style="text-decoration: underline" :href="item.url">
                            <span>@{{ item.title }}</span>
                        </a>
                    </td>
                    <td style="padding-right: 0!important;">
                        <div style="display: flex;justify-content: space-between;">
                            <div style="margin-bottom: 10px">
                                <button @click="setDataNotify(item)" data-toggle="modal"
                                        data-target="#modal-add-notification" style="width: 100px"
                                        class="btn btn-sns-line btn-sns-line-primary">編集
                                </button>
                            </div>
                            <div>
                                <button @click="deleteNotify(item)" style="width: 100px"
                                        class="btn btn-sns-line btn-sns-line-danger">削除
                                </button>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr v-else>
                    <td colspan="5">データはありません。</td>
                </tr>
                </tbody>
            </table>
            <div class="modal fade" id="modal-add-notification" tabindex="-1" role="dialog"
                 aria-labelledby="chatSettingStatus">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                    style="opacity: 1;font-size: 27px">
                        <span class="line-icon line-icon-close" style="line-height: 38px">
                            <i class="fas fa-times"></i>
                        </span>
                            </button>
                            <h2 class="text-center" style="margin-bottom: 0; padding: 0!important;">お知らせ</h2>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>タイトル</label>
                                <textarea class="form-control" v-model="notify.title" cols="30" rows="4"></textarea>
                                <span style="font-size: 14px;" class="text-danger" v-html="error.title"></span>
                            </div>
                            <div class="form-group">
                                <label>ページURL</label>
                                <input type="text" class="form-control" v-model="notify.url">
                                <span style="font-size: 14px;" class="text-danger" v-html="error.url"></span>
                            </div>
                            <div class="form-group">
                                <label>NEWマーク</label>
                                <div class="group-radio">
                                    <div>
                                        <input type="radio" value="1" name="is_show_market_new"
                                               v-model="notify.is_display_market_new">
                                        <span>表示</span>
                                    </div>
                                    <div>
                                        <input type="radio" value="0" name="is_show_market_new"
                                               v-model="notify.is_display_market_new">
                                        <span>非表示</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-center gr__btn_bottom">
                            <button style="width: 120px;" type="button" class="btn btn-sns-line btn-sns-line-success"
                                    @click="submitNotification()">保存
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </article>
@endsection
@push('script')
    <script src="/js/axios.min.js"></script>
    <script src="/js/moment.min.js"></script>
    <script src="/js/media/vue.min.js"></script>
    <script>
        const MSG_DELETE = '削除しますが、宜しいですか？';

        function deleteNotifies(id) {
            message = '削除しますが、宜しいですか？';
            bootbox.confirm(message, function (result) {
                if (result) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: `/admin/delete-notifies/${id}`,
                        method: 'post',
                        beforeSend: function () {
                            $.LoadingOverlay('show');
                        },
                        success: function (response) {
                            $.LoadingOverlay('hide');
                            if (response.success) {
                                window.location.reload();
                            }
                        },
                        error: function () {
                            $.LoadingOverlay('hide');
                        }
                    });
                }
            })
        }

        new Vue({
            el: "#app-vue",
            data: {
                selected: [],
                items: [],
                notify: {
                    id: null,
                    title: '',
                    url: '',
                    is_display_market_new: 1
                },
                error: {
                    title: '',
                    url: ''
                }
            },
            created: async function () {
                this.items = await this.init();
            },
            updated: function () {

            },
            methods: {
                init: async () => {
                    $.LoadingOverlay('show');
                    await axios.post('{{route('init_data_notifies_management')}}')
                        .then(res => {
                            this.items = res.data.notifications;
                        })
                        .catch(err => {
                            console.log(error)
                            this.items = []
                        })
                    $.LoadingOverlay('hide');
                    this.loading = true;
                    return this.items;
                },
                setDataNotify: function (item) {
                    this.notify.id = item.id ?? 0;
                    this.notify.title = item.title ?? '';
                    this.notify.url = item.url ?? '';
                    this.notify.is_display_market_new = item.is_display_market_new ?? 1;
                },
                submitNotification: async function () {
                    this.error.url = '';
                    this.error.title = '';
                    let flag = true;
                    if ($.trim(this.notify.title) == '') {
                        flag = false;
                        this.error.title = 'タイトル' + 'を入力してください。';
                    }
                    if ($.trim(this.notify.url) == '') {
                        flag = false;
                        this.error.url = 'ページURL' + 'を入力してください。';
                    }
                    if (!this.validateUrl(this.notify.url)) {
                        flag = false;
                        this.error.url = 'リダイレクトURLが無効です';
                    }
                    if (flag) {
                        this.error.url = '';
                        $('.modal').modal('hide');
                        await axios.post('{{ route('create_notification') }}', this.notify).then(res => {
                            console.log(res)
                        })
                            .catch(err => {
                                console.log(err)
                            })
                        this.items = await this.init();
                    }
                    return false;
                },
                deleteNotify: async function (item) {
                    if (confirm(MSG_DELETE)) {
                        await axios.post('{{ route('delete_notification') }}', {id: item.id}).then(res => {
                            console.log(res)
                        })
                            .catch(err => {
                                console.log(err)
                            })
                        this.items = await this.init();
                        this.selected = [];
                    }
                },
                massDeleteNotify: async function () {
                    if (confirm(MSG_DELETE)) {
                        await axios.post('{{ route('mass_delete_notification') }}', {list: this.selected}).then(res => {
                            console.log(res)
                        })
                            .catch(err => {
                                console.log(err)
                            })
                        this.items = await this.init();
                        this.selected = [];
                    }
                },
                validateUrl: function (url) {
                    let urlRegex = /(https?:\/\/[^\s]+)/g;
                    return urlRegex.test(url);
                }
            },
            computed: {
                selectAll: {
                    get: function () {
                        return this.items.length == 0 ? !1 : this.items ? this.selected.length == this.items.length : !1;
                    },
                    set: function (b) {
                        let a = [];
                        b && this.items.forEach(function (b) {
                            a.push(b.id);
                        }), this.selected = a;
                    }
                }
            },
        })
    </script>
@endpush