@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 rel="stylesheet" type="text/css" href="{{asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset("assets/plugins/blueimp/blueimp-gallery.min.css") }}">
<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;
    }
    .dataTables_empty {
        text-align: center !important;
    }
    .btn-primary{
         background: #CF806B !important;
        }
</style>

<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="general_news"><a href="#comrequests"><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 id="table-top"></div>
                        <div class='control control-height row'>
                            <div class='col-sm-3 col-xs-12'>
                                <div class="pull-right markaction">
                                    @if(Auth::user()->hasPermission('photoalbums-edit'))
                                            <!-- <a id="show" href="javascript:void(0)" class="btn btn-success" data-url="{{ URL::to('admin/photoalbums/bulkshow') }}">Publush</a> -->
                                    <a id="hide" href="javascript:void(0)" class="btn btn-warning" data-url="{{ URL::to('admin/photoalbums/bulkhide') }}">نقل الى المسودة</a>
                                    @endif
                                    @if(Auth::user()->hasPermission('photoalbums-destroy'))
                                        <a id="del" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/photoalbums/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'>
                                @if(Auth::user()->hasPermission('photoalbums-create'))
                                    <a href="{{ URL::to('admin/photoalbums/create?create=1') }}" class="btn btn-primary">اضف البوم</a>
                                @endif
                                </div>
                         </div>

                        <table class="table table-bordered table-hover datatable table-personalrequests" id="datatable-example">
                            <thead>
                            <tr>
                            @if(Auth::user()->hasPermission('photoalbums-destroy') || Auth::user()->hasPermission("photoalbums-edit"))
                                <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
                            @else
                            <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" disabled/></th>
                            @endif
                                <th>#</th>
                                <th>العنوان</th>
                                <th>العام</th>
                                <th>الصور</th>
                                <th>النوع</th>
                                <th>متاحة للتواصل</th>
                                <th>المستخدم</th>
                                <th>تاريخ النشر</th>
                                <th></th>
                            </tr>
                            </thead>

                        </table>

                    </div>
                </div>

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

                    <div class="grid-body no-border">
                    <div id="table-top"></div>
                         <div class='control control-height row'>
                            <div class='col-sm-6'>
                              <div class="pull-right markaction">
                                   @if(Auth::user()->hasPermission('photoalbums-edit'))
                                        <a id="show2" href="javascript:void(0)" class="btn btn-success" data-url="{{ URL::to('admin/photoalbums/bulkshow') }}">انشر </a>
                                    @endif
                                    @if(Auth::user()->hasPermission('photoalbums-destroy'))
                                        <a id="del2" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/photoalbums/bulkdelete') }}">حذف</a>
                                    @endif
                              </div>
                            </div>
                            <div class='col-sm-6'>
                                <h3 class="button-title-inline">المسودة</h3>
                            </div>
                          </div>



                        <table class="table table-bordered table-hover datatable table-personalrequests" id="datatable-example2">
                            <thead>
                            <tr>
                            @if(Auth::user()->hasPermission('photoalbums-destroy') || Auth::user()->hasPermission("photoalbums-edit"))
                                <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
                                @else
                                <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" disbaled/></th>
                                @endif
                                <th>#</th>
                                <th>عنوان</th>
                                <th>عام</th>
                                <th>الصورة</th>
                                <th>نوع</th>
                                <th>متاحة للتواصل</th>
                                <th>إنشاء</th>
                                <th>تاريخ النشر</th>
                                <th></th>
                            </tr>
                            </thead>
                        </table>

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

            {{--Requests Data Table--}}
            <div id="Requests" class="tab-pane">


                {{--<div class='control' style="height: 36px;padding-right: 27px;">
                    <div class="pull-right markaction">
                        <a id="del3" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/photoalbums/bulkdelete') }}">حذف</a>
                    </div>
                </div>--}}


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

                    <div class="grid-body no-border">
                        <div class='control' style="height: 36px;">
                            <div class="col-sm-3 col-xs-12">
                                <div class="pull-right markaction">
                                    @if(Auth::user()->hasPermission('photoalbums-destroy'))
                                        <a id="del3" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/photoalbums/bulkRequestedAlbumDelete') }}">حذف</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>

                        </br>
                        <div id="table3-top"></div>
                        <table class="table table-bordered table-hover datatable table-personalrequests" id="datatable-example3">
                            <thead>
                            <tr>
                            @if(Auth::user()->hasPermission('photoalbums-destroy') || Auth::user()->hasPermission("photoalbums-edit"))
                                <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
                                @else
                                <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" disabled/></th>
                                @endif
                                <th>#</th>
                                <th>الالبومات</th>
                                <th>الصورة</th>
                                <th>إرسلت من</th>
                                <th>إرسلت في</th>
                                <th></th>
                            </tr>
                            </thead>

                        </table>

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

            <!--Completed Requests Data Table-->
            <div id="comrequests" class="tab-pane">



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

                    <div class="grid-body no-border">

                        <div class='control' style="height: 36px;">
                            <div class="col-sm-3 col-xs-12">
                                <div class="pull-right markaction">
                                    @if(Auth::user()->hasPermission('photoalbums-destroy'))
                                        <a id="del4" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/photoalbums/bulkRequestedAlbumDelete') }}">حذف</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>
                        </br>
                        <div id="table4-top"></div>

                        <table class="table table-bordered table-hover datatable table-personalrequests" id="datatable-example4">
                            <thead>
                            <tr>
                            @if(Auth::user()->hasPermission('photoalbums-destroy') || Auth::user()->hasPermission("photoalbums-edit"))
                                <th><input type="checkbox" class="group-checkable" data-set="#datatable-example4 .checkboxes" /></th>
                            @else
                                <th><input type="checkbox" class="group-checkable" data-set="#datatable-example4 .checkboxes" disabled/></th>
                            @endif
                                <th>#</th>
                                <th>الالبومات</th>
                                <th>الصورة</th>
                                <th>إرسلت من</th>
                                <th>إرسلت في</th>
                                <th></th>
                            </tr>
                            </thead>

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




{!! Form::open(['method' => 'POST','class' => 'inline','id'=> 'bulkaction']) !!}
<input type="hidden" value="" name="ids" id="ids" />
{!! Form::close() !!}
<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' => 'photoalbums.updatepublish','id'=>'form_editpublish']) !!}
                <div class="modal-header">
                    <!-- <button type="button" class="close" onclick='closeModal()' aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
                    <h4 class="modal-title" id="editPublishModalLabel">تغيير تاريخ النشر</h4>

                </div>
                <div class="modal-body">
                    <input type="hidden" name="photo_album_id" id="photo_album_id_input" value="">
                    <div class="form-group row">
                        <div class="col-md-3 col-md-offset-2">
                            <label class="form-label">الوقت</label>
                            {!! Form::text('published_at_time', null, ['class' => 'form-control','id'=>'publish_date_time_field','required'=>true]) !!}
                        </div>
                        <div class="col-md-5">
                            <label class="form-label">تاريخ النشر</label>
                            <input type="text" name="published_at" id="published_at_input" class="form-control" required="true">
                        </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">حفظ</button>
                </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<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/photoalbums/pushnotification','method' => 'POST'
                    ,'id'=>'push_notification_form']) !!}
            <input type="hidden" name="id" id="photoalbum_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">

                <a href="javascript:void(0)" class="btn btn-primary pull-right" id="push_modal_push_and_publish_btn">نشر مع ارسال تنبيه</a>
                {!! Form::submit('نشر فقط', ['class' => 'btn btn-primary pull-right','id'=>'push_modal_submit']) !!}
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">إلغاء</button>
            </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();
        }, 500);
        jQuery('#progressbar').show();

        return true;
    });
    jQuery(document).ready(function ($) {
        //$('#example tbody').on('click', '.deleteaction', function () {
        $('#publish_date_time_field').clockpicker({autoclose: true});
        $('body').append($('#editPublishModal'));

        // 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 = $(this).data('title');
          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);
        //   }else{
        //     $('#push_notification_field').removeAttr('readonly');
        //   }
          $('#push_notification_field').val(notification);
          $('#push_was_sent_flag').text(pushed_flag);
          $('#photoalbum_id').val(id);

          jQuery('#pushNotificationModal').modal('show');
        });
        $('#push_modal_push_and_publish_btn').click(function(e){
          $('#push_modal_push_and_publish_field').val('yes')
          $('#push_notification_form').trigger('submit');
        });

        // Columns and column defs to be used in both tables
        var columns = [
                {data: 'check', name: 'check'},
                {data: 'id', name: 'id'},
                {data: 'title', name: 'title'},
                {data: 'year', name: 'year'},
                {data: 'total_images', name: 'total_images'},
                {data: 'type', name: 'type'},
                {data: 'is_tawasul', name: 'is_tawasul'},
                {data: 'user', name: 'user'},
                {data: 'published_at', name: 'published_at'},
                {data: 'actions', name: 'actions'}
            ];
        var columnDefs = [
                {
                    "targets": [1],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [0,1,2,3,4,5,6,7,8,9],
                    "searchable": false
                },
                {
                    "targets": [0, 1, 2, 3, 4, 5,6,7,8,9],
                    "orderable": false
                },
                {
                    "targets": [2,3,4,5,6,7,8],
                    "className": 'dt-body-right'
                },

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

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

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

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

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

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

        var columns2 = [
            {data: 'check', name: 'check'},
            {data: 'id', name: 'id'},
            {data: 'photo_album_id', name: 'photo_album_id'},
            {data: 'images_count', name: 'images_count'},
            {data: 'sender_family_tree_id', name: 'sender_family_tree_id'},
            {data: 'requested_at', name: 'requested_at'},
            {data: 'actions', name: 'actions'}
        ];
        var columnDefs2 = [
            {
                "targets": [1],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [0,1,2,3,4,5,6],
                "searchable": false
            },
            {
                "targets": [0, 1, 2, 3, 4,5,6],
                "orderable": false
            },
            {
                "targets": [2,3,4,5,6],
                "className": 'dt-body-right'
            },

        ];
        $('#datatable-example3').DataTable({

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

						},
            ajax: {
                "url": "{{ URL::to('admin/photoalbums/requestedalbumsdatatable') }}",
                "type": "POST"
            },
            columns: columns2,
            "columnDefs": columnDefs2
        });
        var columns4 = [
            {data: 'check', name: 'check'},
            {data: 'id', name: 'id'},
            {data: 'photo_album_id', name: 'photo_album_id'},
            {data: 'images_count', name: 'images_count'},
            {data: 'sender_family_tree_id', name: 'sender_family_tree_id'},
            {data: 'requested_at', name: 'requested_at'},
            {data: 'actions', name: 'actions'}
        ];
        var columnDefs4 = [
            {
                "targets": [1],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [0,1,2,3,4,5,6],
                "searchable": false
            },
            {
                "targets": [0, 1, 2, 3, 4,5,6],
                "orderable": false
            },
            {
                "targets": [2,3,4,5,6],
                "className": 'dt-body-right'
            },

        ];

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

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

						},
            ajax: {
                "url": "{{ URL::to('admin/photoalbums/completedrequestsdatatable') }}",
                "type": "POST"
            },
            columns: columns4,
            "columnDefs": columnDefs4
        });

        $('#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});

        // Scroll to table top on page change
        $(document).on('click','#datatable-example_paginate',function(){
           $('html, body').animate({
                   scrollTop: $("#table-top").offset().top
            }, 500);
        });
        // Scroll to table top on page change
        $(document).on('click','#datatable-example2_paginate',function(){
           $('html, body').animate({
                   scrollTop: $("#table2-top").offset().top
            }, 500);
        });
        // Scroll to table top on page change
        $(document).on('click','#datatable-example3_paginate',function(){
           $('html, body').animate({
                   scrollTop: $("#table3-top").offset().top
            }, 500);
        });
        // Scroll to table top on page change
        $(document).on('click','#datatable-example4_paginate',function(){
           $('html, body').animate({
                   scrollTop: $("#table4-top").offset().top
            }, 500);
        });
    });
    /*function editPublishDate(id, published_at){
        $('#published_at_input').val(published_at);
        $('#photo_album_id_input').val(id);
        $('#editPublishModal').modal('show');
    }*/

    function editPublishDate(element){
        var id= $(element).data('id');
        var publish_date= $(element).data('date');
        var publish_date_time= $(element).data('time');
        console.log('Publish Date: ',publish_date);

        $('#published_at_input').val(publish_date);
        $('#published_at_input').datepicker({format: 'dd/mm/yyyy',autoclose: true,"update": publish_date, orientation: 'bottom'});
        $('#publish_date_time_field').val(publish_date_time);
        $('#photo_album_id_input').val(id);
        $('#editPublishModal').modal('show');
    }


</script>
<script src="{{ asset("assets/plugins/blueimp/jquery.blueimp-gallery.min.js") }}"></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