@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')

    <!-- BEGIN: Content-->
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <div class="breadcrumb-wrapper col-12">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{route('dashboard')}}">@lang('admin.home')</a>
                                    </li>

                                    <li class="breadcrumb-item active">@lang('admin.categories')
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="content-body">


                <!-- Zero configuration table -->
                <section id="basic-datatable">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                </div>
                                <div class="card-content">
                                    <div class="card-body card-dashboard">
                                        <div class="table-responsive">
{{--                                            @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--}}
                                                <table id="notifications" class="table table-striped table-bordered" style="width:100%">
                                                </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!--/ Zero configuration table -->

                <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="">
                                <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 class="form-group">
                                        <label for="">@lang('admin.TypeShow')</label>
                                        <select class="form-control select2" name="typeShow">
                                            <option disabled selected value=" ">@lang('admin.TypeShow')</option>
                                            <option value="offers">{{ googleTranslation('offers' , app()->getLocale())}}</option>
                                            <option value="product">@lang('admin.ads')</option>
{{--                                            <option value="subCat">@lang('admin.subCat')</option>--}}
{{--                                            <option value="saller">@lang('admin.saller')</option>--}}
                                        </select>
                                    </div>

                                    <div class="form-group" id="number_id">
                                        <input type="number" name="showNumber" class="form-control" placeholder="{{ googleTranslation('offer number' , app()->getLocale())}}">
                                    </div>

                                    <div class="form-group">
                                        <label for="">@lang('admin.image')</label>
                                        <input type="file" class="form-control image" id="" name="image">
                                    </div>

                                    <div class="form-group">
                                        <img src="{{asset('dashboard/default.jpg')}}" style="width: 200px;" class="image-preview"/>
                                    </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>

            </div>
        </div>
    </div>
    <!-- END: Content-->


@endsection
@push('js')
    <script>

        $(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: 'image', name: 'image',title: "@lang('admin.image')" },
                    {data: 'type', name: 'type',title: "@lang('admin.NotifyWay')" },
                    {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'){

                                toastr.warning("@lang('admin.Sorry_you_have_error')");

                            } else {
                                if (response.status == 'success') {

                                    toastr.success("@lang('admin.Notfy_send_succeffly')");

                                }

                                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