@extends('app')
@section('content')
    <link href="{{ asset('assets/plugins/jquery-notifications/css/messenger.css')}}" rel="stylesheet" type="text/css" media="screen"/>
    <link href="{{ asset('assets/plugins/jquery-notifications/css/messenger-theme-flat.css')}}" rel="stylesheet" type="text/css" media="screen"/>
    <link href="{{ asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" media="screen"/>
    <link href="{{ asset('assets/plugins/boostrap-clockpicker/bootstrap-clockpicker.min.css')}}" rel="stylesheet" type="text/css" media="screen"/>
    <style type="text/css">
        .clockpicker-popover{
            z-index: 2000;
        }
        .clockpicker-button {
            display: none;
        }
        .control{
          height: 45px;
        }
        .control h3{
          display: inline !important;
        }
    </style>
    @if(Session::has('flash_message'))
        <div class="alert {{ (Session::has('flash_message_status'))?'alert-error':'alert-success'}}">
            <button class="close" data-dismiss="alert"></button>
            {!!Session::get('flash_message') !!}
        </div>
    @endif
    <div class="row" id="reports-tabs">
        <div class="col-md-12">
            <ul id="tab-01" class="nav nav-tabs nav-tabs-rtl" style="background-color: transparent;">
                <li id="general_news"  class="active"><a href="#privateEvents"><span class="semi-bold">المناسبات الخاصة</span></a></li>
                <li id="requests" class=""><a  href="#Requests"><span class="semi-bold">استمارات التواصل <span class="badge badge-important">{{$received_count>0 ? $received_count : '' }}</span></span></a></li>
                <li id="archives"  class=""><a href="#Archives"><span class="semi-bold">الطلبات المكتملة</span></a></li>
            </ul>
            <div class="tab-content" style="padding: 0px !important;">

                {{--Private Events Data Table--}}
                <div id="privateEvents" class="tab-pane active">

                    <div class="grid simple vertical mobile-scroll">
                        <div class="grid-body no-border">

                            <div class='row control'>
                                <div class="col-sm-3 col-xs-12">
                                    <div class="pull-right markaction">
                                    @if(Auth::user()->hasPermission("WeddingNews-edit"))
                                        <a id="hide" href="javascript:void(0)" class="btn btn-warning" data-url="{{ URL::to('admin/WeddingNews/bulkhide') }}">نقل الى المسودة</a>
                                    @endif
                                    @if(Auth::user()->hasPermission("WeddingNews-destroy"))
                                        <a id="del" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/WeddingNews/bulkdelete') }}">حذف</a>
                                    @endif
                                    </div>
                                </div>
                                <div class="col-sm-6 col-xs-12 c-page-title">
                                    <span>أخبار المناسبات</span>
                                </div>
                                @if(Auth::user()->hasPermission("WeddingNews-create"))
                                <div class="col-sm-3 col-xs-12">
                                    <a class="btn btn-primary" href="{{ URL::to('admin/WeddingNews/CreateNews') }}">إنشاء خبر مناسبة خاصة</a>
                                </div>
                                @endif
                            </div>
                            <table class="table table-bordered table-hover datatable" id="datatable-example">
                                <thead>
                                <tr>
                                @if(Auth::user()->hasPermission("WeddingNews-destroy") || Auth::user()->hasPermission("WeddingNews-edit"))
                                <th width="5%"><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
                                @else
                                <th width="5%"><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" disabled/></th>
                                @endif
                                    <th>#</th>
                                    <th width="10%">الاستمارة</th>
                                    <th width="50%">المعلومات</th>
                                    <th width="10%">التنبيه</th>
                                    <th width="20%">اخر تعديل</th>
                                    <th width="5%"></th>
                                </tr>
                                </thead>

                            </table>
                        </div>
                    </div>


                    <!-- <div class="grid-title" style="border: 0px;padding: 25px;margin: 0px;">

                        <h4>المسودة</h4>
                        <div class="tools">
                            <a class="collapse" href="javascript:;"></a>
                        </div>
                        <p>Some text will come here.Some text will come here.Some text will come here.Some text will come here.
                            Some text will come here.Some text will come here.Some text will come here.Some text will come here.
                            Some text will come here.Some text will come here.Some text will come here.Some text will come here.
                        </p>
                    </div>
 -->




                    <div class="grid simple vertical mobile-scroll">
                        <div class="grid-title no-border">
                            <!-- <h5><span class="semi-bold">Reports List</span></h5> -->
                        </div>
                        <div class="grid-body no-border">

                            <div class='row control'>
                                <!-- <h3>المسودة</h3> -->
                                <div class="col-sm-3 col-xs-12">
                                    <div class="pull-right markaction">
                                    @if(Auth::user()->hasPermission("WeddingNews-edit"))
                                        <a id="hide2" href="javascript:void(0)" class="btn btn-success" data-url="{{ URL::to('admin/WeddingNews/bulkshow') }}">انشر </a>
                                        @endif
                                    @if(Auth::user()->hasPermission("WeddingNews-destroy"))
                                        <a id="del2" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/WeddingNews/bulkdelete') }}">حذف</a>
                                    @endif
                                    </div>
                                </div>
                                <div class="col-sm-6 col-xs-12 c-page-title">
                                    <span>المسودة</span>
                                </div>
                            </div>
                            <table class="table table-bordered table-hover datatable" id="datatable-example2">
                                <thead>
                                <tr>
                                @if(Auth::user()->hasPermission("WeddingNews-destroy" || Auth::user()->hasPermission("WeddingNews-edit")))
                                <th width="5%"><input type="checkbox" class="group-checkable" data-set="#datatable-example2 .checkboxes" /></th>
                                @else
                                <th width="5%"><input type="checkbox" class="group-checkable" data-set="#datatable-example2 .checkboxes" disabled/></th>
                                @endif
                                    <th>#</th>
                                    <th width="10%">الاستمارة</th>
                                    <th width="50%">المعلومات</th>
                                    <th width="10%">التنبيه</th>
                                    <th width="20%">اخر تعديل</th>
                                    <th width="5%"></th>
                                </tr>
                                </thead>

                            </table>
                        </div>
                    </div>
                    <br>
                </div>

                {{--Requests Data Table--}}

                <div id="Requests" class="tab-pane">
                    <div class="grid simple vertical mobile-scroll">
                        <div class="grid-body no-border">

                            <div class='control'>
                                <div class="col-sm-3 col-xs-12">
                                    <div class="pull-right markaction">
                                    @if(Auth::user()->hasPermission("WeddingNews-destroy"))
                                        <a id="del3" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/WeddingNews/bulkdelete') }}">حذف</a>
                                    @endif
                                    </div>
                                </div>
                                <div class="col-sm-6 col-xs-12 c-page-title">
                                    <span>أخبار المناسبات - استمارات التواصل </span>
                                </div>
                                <div class="col-sm-3 col-xs-12"></div>
                            </div>
                            <table class="table table-bordered table-hover datatable" id="datatable-example3">
                                <thead>
                                <tr>
                                @if(Auth::user()->hasPermission("WeddingNews-destroy") || Auth::user()->hasPermission("WeddingNews-edit"))
                                <th width="5%"><input type="checkbox" class="group-checkable" data-set="#datatable-example3 .checkboxes" /></th>
                                @else
                                <th width="5%"><input type="checkbox" class="group-checkable" data-set="#datatable-example3 .checkboxes" disabled/></th>
                                @endif
                                    <th>#</th>
                                    <th width="10%">الاستمارة</th>
                                    <th width="50%">المعلومات</th>
                                    <th width="10%">التنبيه</th>
                                    <th width="20%">اخر تعديل</th>
                                    <th width="5%"></th>
                                </tr>
                                </thead>

                            </table>
                        </div>
                    </div>
                </div>

                {{--Archives Data Table--}}
                <div id="Archives" class="tab-pane">
                    <div class="grid simple vertical mobile-scroll">
                        <div class="grid-body no-border">

                            <div class='control'>
                                <div class="col-sm-3 col-xs-12">
                                    <div class="pull-right markaction">
                                    @if(Auth::user()->hasPermission("WeddingNews-destroy"))
                                        <a id="del4" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/WeddingNews/bulkdelete') }}">حذف</a>
                                    @endif
                                    </div>
                                </div>
                                <div class="col-sm-6 col-xs-12 c-page-title">
                                    <span>أخبار المناسبات - الطلبات المكتملة</span>
                                </div>
                                <div class="col-sm-3 col-xs-12"></div>
                            </div>
                            <table class="table table-bordered table-hover datatable" id="datatable-example4">
                                <thead>
                                <tr>
                                @if(Auth::user()->hasPermission("WeddingNews-destroy") || Auth::user()->hasPermission("WeddingNews-edit"))
                                <th width="5%"><input type="checkbox" class="group-checkable" data-set="#datatable-example4 .checkboxes" /></th>
                                @else
                                <th width="5%"><input type="checkbox" class="group-checkable" data-set="#datatable-example4 .checkboxes" disabled/></th>
                                @endif
                                    <th>#</th>
                                    <th width="10%">الاستمارة</th>
                                    <th width="50%">المعلومات</th>
                                    <th width="10%">التنبيه</th>
                                    <th width="20%">اخر تعديل</th>
                                    <th width="5%"></th>
                                </tr>
                                </thead>

                            </table>
                        </div>
                    </div>
                </div>

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

    <div class="modal fade" id="editPublishModal" tabindex="-1" role="dialog" aria-labelledby="editPublishModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                {!! Form::open(['method' => 'POST','route' => 'WeddingNews.updatepublish','id'=>'form_editpublish']) !!}
                <div class="modal-header">
                    <h4 class="modal-title" id="editPublishModalLabel">تغيير تاريخ النشر</h4>

                </div>
                <div class="modal-body">
                    <input type="hidden" name="wedding_news_id" id="wedding_news_id_input" value="">
                    <div class="form-group row">
                        <div class="col-md-1 col-sm-12">

                        </div>
                        <div class="col-md-9 col-sm-12">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-1 col-sm-12">

                        </div>
                        <div class="input-with-icon  right col-md-3 col-sm-12 col-md-offset-1">
                            <label class="form-label">الوقت</label>
                            {!! Form::text('published_at_time',  null, ['class' => 'form-control','id'=>'publish_date_time_field']) !!}
                        </div>
                        <div class="input-with-icon  right col-md-5 col-sm-12">
                            <label class="form-label">تاريخ النشر</label>
                            {!! Form::text('publish_date',  null, ['class' => 'form-control','id'=>'published_at_input']) !!}
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick='$("#editPublishModal").modal("hide");' aria-label="Close"><span aria-hidden="true">إلغاء</span></button>
                    <button type="submit" class="btn btn-primary btn-cons">حفظ</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>




    {!! Form::open([
    'method' => 'POST',
    'class' => 'inline',
    'id'=> 'bulkaction'
    ]) !!}
    <input type="hidden" value="" name="ids" id="ids" />
    {!! Form::close() !!}

<div id="pushNotificationModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- <div class="modal-header">
                <label style="font-size: 16px;color: grey;"></label>
            </div> -->
            {!! Form::open(['url' => 'admin/weddingnews/pushnotification','method' => 'POST'
                    ,'id'=>'push_notification_form']) !!}
            <input type="hidden" name="id" id="wedding_news_id">
            <input type="hidden" name="publish" id="push_modal_publish_field">
            <input type="hidden" name="push_modal_push_and_publish" id="push_modal_push_and_publish_field" value="no">
            <div class="modal-body">
                <div class="form-group row">
                    <div class="col-md-1 col-sm-12">

                    </div>
                    <div class="input-with-icon  right col-md-9 col-sm-12 notification-box">
                        <label class="form-label">إرسلت رسالة تنبيه من قبل؟ <span id="push_was_sent_flag">لا</span></label>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-1 col-sm-12">

                    </div>
                    <div class="input-with-icon  right col-md-9 col-sm-12 notification-box">
                        {!! Form::label('notification', 'اكتب رسالة التنبيه في الاسفل', ['class' => 'form-label']) !!}
                        {!! Form::text('notification', null, ['class' => 'form-control','id'=>'push_notification_field']) !!}
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">إلغاء</button>
                <a href="javascript:void()" class="btn btn-primary" id="push_modal_push_and_publish_btn">نشر مع ارسال تنبيه</a>
                {!! Form::submit('نشر فقط', ['class' => 'btn btn-primary','id'=>'push_modal_submit']) !!}
            </div>
            {!! Form::close() !!}

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>



    <script type="text/javascript" language="javascript" class="init">
        $.ajaxSetup({
            headers: {'X-CSRF-Token': $('meta[name=_token]').attr('content')},
        });
        jQuery('#form_editpublish').submit(function (event) {
            var pass = true;
            //some validations

            if (pass == false) {
                return false;
            }
            form = this;
            jQuery('#btn-submit').attr('disabled', 'disabled');
            event.preventDefault();
            setTimeout(function () {
                form.submit();
            }, 500);
            jQuery('#progressbar').show();

            return true;
        });

        jQuery('#push_notification_form').submit(function (event) {
            var pass = true;
            //some validations

            if (pass == false) {
                return false;
            }
            form = this;
            jQuery('#btn-submit').attr('disabled', 'disabled');
            event.preventDefault();
            setTimeout(function () {
                form.submit();
                jQuery('#progressbar').show();
            }, 500);
            jQuery('#progressbar').hide();

            return true;
        });
        function pushNotificationModal(){
            $('#pushNotificationModal').modal('show');
        }
        function closePushNotificationModal(id) {
            $(id).modal('hide');
        }

        jQuery(document).ready(function ($) {

            // When click on Push notification btn or publish btn show notification modal
            $(document).on('click','.send_push_btn', function(e){
              var id = $(this).data('id');
              var title = $(document).find('.information_section_'+id).data('notification');
              var pushed = $(this).data('pushed');
              var pushed_flag = pushed==0 ? 'لا' : 'نعم';

              var notification = title;
              var request_type = $(this).data('type')
              if (request_type=='push_and_publish') {
                $('#push_modal_publish_field').val('yes');
                $('#push_modal_submit').val('نشر فقط');
                $('#push_modal_push_and_publish_btn').show();
              }else{
                $('#push_modal_submit').val('نشر مع ارسال تنبيه');
                $('#push_modal_publish_field').val('no');
                $('#push_modal_push_and_publish_btn').hide();
              }
              if (pushed==0) {
                // $('#push_notification_field').prop('readonly',true);
                $('#push_notification_field').removeAttr('readonly');
              }else{
                $('#push_notification_field').removeAttr('readonly');
                // $('#push_notification_field').prop('readonly',true);
              }
              $('#push_notification_field').val(notification);
              $('#push_was_sent_flag').text(pushed_flag);
              $('#wedding_news_id').val(id);

              pushNotificationModal();
            });
            $('#push_modal_push_and_publish_btn').click(function(e){
              $('#push_modal_push_and_publish_field').val('yes')
              $('#push_notification_form').trigger('submit');
            });
            $('#published_at_input').datepicker({format: 'dd/mm/yyyy',autoclose: true});
            $('#publish_date_time_field').clockpicker({autoclose: true});


            // Columns and column defs to be used in both tables
            var columns = [
                {data: 'check', name: 'check'},
                {data: 'id', name: 'id'},
                {data: 'request_id', name: 'request_id'},
                {data: 'information', name: 'information'},
                {data: 'is_pushed', name: 'is_pushed'},
                {data: 'updated_at', name: 'updated_at'},
                {data: 'actions', name: 'actions'}
            ];
            var columnDefs = [
                {
                    "targets": [1],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [0,1,2,3,4,5,6],
                    "searchable": false
                },
                {
                    "targets": [0, 1, 2, 3],
                    "orderable": false
                },
                {
                    "targets": [1,2,3,4,5],
                    "className": 'dt-body-right'
                }
            ];

            //This is the ajax call for Request Datatable
            $('#datatable-example3').DataTable({

                processing: true,
                serverSide: true,
                ordering: false,
                "autoWidth": false,
                pageLength: 25,
                language: {
                    search: "",
                searchPlaceholder: "بحث",
						processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />",
						emptyTable: "لا يوجد محتوى",
						zeroRecords: "لا يوجد محتوى",

						},
                ajax: {
                    "url": "{{ URL::to('admin/WeddingNews/datatable?status=2') }}",
                    "type": "POST"
                },
                columns: columns,
                "columnDefs": columnDefs
            });


            $('#datatable-example').DataTable({

                processing: true,
                serverSide: true,
                "autoWidth": false,
                ordering: false,
                pageLength: 25,
                language: {
                    search: "",
                searchPlaceholder: "بحث",
						processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />",
						emptyTable: "لا يوجد محتوى",
						zeroRecords: "لا يوجد محتوى",

						},
                ajax: {
                    "url": "{{ URL::to('admin/WeddingNews/datatable?status=1') }}",
                    "type": "POST"
                },
                columns: columns,
                "columnDefs": columnDefs
            });

            $('#datatable-example2').DataTable({

                processing: true,
                serverSide: true,
                ordering: false,
                "autoWidth": false,
                language: {
                    search: "",
                searchPlaceholder: "بحث",
						processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />",
						emptyTable: "لا يوجد محتوى",
						zeroRecords: "لا يوجد محتوى",

						},
                ajax: {
                    "url": "{{ URL::to('admin/WeddingNews/datatable?status=0') }}",
                    "type": "POST"
                },
                columns: columns,
                "columnDefs": columnDefs
            });


            $('#datatable-example4').DataTable({

                processing: true,
                serverSide: true,
                ordering: false,
                "autoWidth": false,
                pageLength: 25,
                language: {
                    search: "",
                searchPlaceholder: "بحث",
						processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />",
						emptyTable: "لا يوجد محتوى",
						zeroRecords: "لا يوجد محتوى",

						},
                ajax: {
                    "url": "{{ URL::to('admin/WeddingNews/datatable?status=3') }}",
                    "type": "POST"
                },
                columns: columns,
                "columnDefs": columnDefs
            });
            $('#datatable-example_wrapper .dataTables_filter input').addClass("input-medium "); // modify table search input
            $('#datatable-example_wrapper .dataTables_length select').addClass("select2-wrapper span12"); // modify table per page dropdown
            $('#datatable-example_wrapper .dataTables_length select').removeClass("form-control");

            $('#datatable-example2_wrapper .dataTables_filter input').addClass("input-medium "); // modify table search input
            $('#datatable-example2_wrapper .dataTables_length select').addClass("select2-wrapper span12"); // modify table per page dropdown
            $('#datatable-example2_wrapper .dataTables_length select').removeClass("form-control");

            $('#datatable-example3_wrapper .dataTables_filter input').addClass("input-medium "); // modify table search input
            $('#datatable-example3_wrapper .dataTables_length select').addClass("select2-wrapper span12"); // modify table per page dropdown
            $('#datatable-example3_wrapper .dataTables_length select').removeClass("form-control");

            $('#datatable-example4_wrapper .dataTables_filter input').addClass("input-medium "); // modify table search input
            $('#datatable-example4_wrapper .dataTables_length select').addClass("select2-wrapper span12"); // modify table per page dropdown
            $('#datatable-example4_wrapper .dataTables_length select').removeClass("form-control");

            $(".select2-wrapper").select2({minimumResultsForSearch: -1});

         });
        function editPublishDate(element){
            var id= $(element).data('id');
            var publish_date= $(element).data('date');
            var publish_date_time= $(element).data('time');
            $('#published_at_input').val(publish_date);
            $('#publish_date_time_field').val(publish_date_time);
            $('#wedding_news_id_input').val(id);
            $('#editPublishModal').modal('show');
        }

    </script>
    <script src="{{ asset('assets/js/tabs_accordian.js')}}" type="text/javascript"></script>
    <script src="{{ asset('assets/plugins/jquery-notifications/js/messenger.min.js')}}" type="text/javascript"></script>
    <script src="{{ asset('assets/plugins/jquery-notifications/js/messenger-theme-future.js')}}" type="text/javascript"></script>
@endsection