@extends('admin.layout.master')
@push('css')
    <style>
        /*.fa-smile-o:before{*/
        /*    position: relative;*/
        /*    right: 13px;*/
        /*    top: 81px;*/
        /*}*/

        textarea:focus + div::after{
            z-index: 9999;
        }
    </style>

@endpush
@section('content')
    <main id="app-main" class="app-main">

    <div class="wrap">
        <section class="app-content">
            <h3>@lang('admin.notfcation_system')</h3>
        </section><!-- #dash-content -->
    </div><!-- .wrap -->

    <div class="col-md-12">
        <div class="widget">
            <header class="widget-header">
                <h4 class="widget-title">@lang('admin.notfcation_system')</h4>
            </header><!-- .widget-header -->
            <hr class="widget-separator">
            <div class="widget-body">
                <div class="table-responsive">
                    <div id="default-datatable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">

                        <div class="row">
                            <div class="col-md-12">
                                @if(auth()->user()->hasPermission('create_notifications'))
                                                                        <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#global_notifications">
                                                                            <i class="fa fa-plus"></i>
                                                                            @lang('admin.global_notifications')
                                                                        </button>


                                @else
                                    <button style="float: left" class="btn btn-info btn-sm disabled"> <i class="fa fa-plus"></i>@lang('admin.add_brands')</button>

                                @endif

                                <div>
                                    <div class="col-md-12">
                                        <div class="widget">

                                            <div class="widget-body">
                                                <table id="notifications" class="table table-striped table-bordered" style="width:100%">
                                                </table>
                                            </div>
                                        </div><!-- .widget-body -->
                                    </div><!-- .widget -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="global_notifications" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">@lang('admin.global_notifications')</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" action="{{route('send-notify')}}" id="store_notifaction_public" data-parsley-validate="">
{{--                <form method="post" action="" id="store_notifaction_public" data-parsley-validate="">--}}
                    <div class="modal-body">

                        @csrf
                        @method('post')
                        <div class="form-group">
                            <input type="text" name="title" class="form-control" required="">
                        </div>


                        <div class="form-group">
                            <textarea name="message" rows="10" cols="40" placeholder="type message here..."></textarea>

{{--                            <input class="form-control" name="message" style="height: 200px;--}}
{{--                    position: relative;" data-emojiable="true" data-emoji-input="unicode" required="">--}}

                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('admin.close')</button>
                        <button type="submit" class="btn btn-primary">@lang('admin.send')</button>
                    </div>

                </form>
            </div>
        </div>
    </div>

    </main>
@endsection
@push('js')
    <script>
        $(function () {
            $('textarea').emoji({
                listCSS: {
                    'z-index': 9999,
                    'position':'absolute',
                    'border':'1px solid gray',
                    'background-color':'#fff',
            'display':'none',
                    'place':'after',
                    'rowSize': 10


                }
                });
        })
        $(document).ready(function() {
            var table = $('#notifications').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('notification.index') }}",
                    type: 'GET',
                },
                // select: true,
                columns: [
                    {data: 'id', name: 'id' ,title:'id'},
                    {data: 'user_id', name: 'user_id',title: "@lang('admin.user_sended')" },
                    {data: 'title', name: 'title',title: "@lang('admin.title')" },
                    {data: 'message', name: 'message',title: "@lang('admin.message')" },
                    {data: 'created_at', name: 'created_at',title: "@lang('admin.data_send_notfcation')" },
                    {data: 'action', name: 'action',title:'action' ,searchable: 'false'},
                    // {data: 'add_lang', name: 'add_lang',title:'add_lang' ,searchable: 'false'}
                ]
            });

            $(function () {
                $('body').on('submit','#store_notifaction_public',function (e) {
                    e.preventDefault();
                    var url = $(this).attr('action');
                    var formData = new FormData(this);
                    formData.append('slug', 'public');

                    $.ajax({
                        url: url,
                        method: "post",
                        data: formData,

                        dataType: 'json',

                        cache: false,
                        contentType: false,
                        processData: false,

                        success: function (response) {
                            if (response.status == 'false'){
                                new Noty({
                                    type: 'warning',
                                    layout: 'topRight',
                                    text: "@lang('admin.Sorry_you_have_error')",
                                    timeout: 2000,
                                    killer: true
                                }).show();
                            } else {
                                if (response.status == 'success') {
                                    new Noty({
                                        type: 'success',
                                        layout: 'topRight',
                                        text: "@lang('admin.Notfy_send_succeffly')",
                                        timeout: 2000,
                                        killer: true
                                    }).show();
                                }
                                table.ajax.reload();
                                $("#store_notifaction_public")[0].reset();
                            }

                        },

                    });

                });
            });

            $('body').on('submit','#delform',function (e) {
                e.preventDefault();
                var url = $(this).attr('action');
                // alert(url);

                $.ajax({
                    url: url,
                    method: "delete",
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function (response) {

                        if (response.status == 'success'){
                            new Noty({
                                type: 'success',
                                layout: 'topRight',
                                text: "تم الحذف بنجاح",
                                timeout: 2000,
                                killer: true
                            }).show();
                            table.ajax.reload();
                        }
                        // console.log(response);
                        // window.location.reload();
                    }
                });
            });
        });


    </script>
    <script>
        $(function() {
            // Initializes and creates emoji set from sprite sheet
            window.emojiPicker = new EmojiPicker({
                emojiable_selector: '[data-emojiable=true]',
                assetsPath: "{{asset('dashboard/plugins/emoj/lib/img/')}}",
                popupButtonClasses: 'fa fa-smile-o'
            });
            window.emojiPicker.discover();
        });
    </script>
    <script>
        // Google Analytics
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-49610253-3', 'auto');
        ga('send', 'pageview');
    </script>
@endpush