@extends('admin.layout.main_v')
@section('notifications_active_class')
    @include('admin.layout.active_class')
@stop
@section('style')
    <!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
    <!-- END PAGE LEVEL PLUGIN STYLES -->
    <!-- BEGIN PAGE STYLES -->
    <!--datatables css -->
    @if(App::getLocale() == 'ar')
        <link href="{{asset('assets/assets_1/datatables/datatables.bundle.rtl.css')}}" rel="stylesheet" type="text/css" />
    @else
        <!--begin::Page Vendors Styles(used by this page) -->
        <link href="{{asset('assets/assets_1/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
        <!--end::Page Vendors Styles -->
    @endif
@stop

@section('js')
    <!--begin::Page Vendors(used by this page) -->
    <script src="{{asset('assets/assets_1/demo1/pages/crud/datatables/basic/basic.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/assets_1/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
    <!--end::Page Vendors -->

    <script>
        var form = $('#notifications_form');
        var Table = $('#data_table');
        var add_edit_url = '{!!route('admin.notifications.add_edit')!!}';
        var data_table_url = '{!!route('admin.notifications.list')!!}';
        var Modal = $('#add_edit');
        $(document).ready(function() {
            Table.DataTable({
                processing: true,
                searching: false,
                serverSide: true,
                "order": [[ 1, "desc" ]],
                @include('admin.shared.pagination')
                ajax:{
                    "url":  data_table_url,
                    "type": 'GET',
                    "data": function(d) {
                        d.s_dates = $('#s_dates').val(),
                        d.s_title = $('#s_title').val()
                        // d.s_target_group = $('#s_target_group').val(),
                        // d.s_device_type = $('#s_device_type').val()
                    }
                },
                columns: [
                    {className: 'text-center', data: 's_message', name: 's_message', searchable: true},
                    // {className: 'text-center', data: 's_target_group', name: 's_target_group', searchable: true},
                    // {className: 'text-center', data: 's_device_type', name: 's_device_type', searchable: true},
                    {className: 'text-center', data: 'dt_created_date', name: 'dt_created_date', searchable: false},
                    {className: 'text-center', data: 'actions', name: 'actions', orderable: false, searchable: false}
                ]
            });

            $('.reset_form').click(function() {
                $('#filter_options #s_title').val('');
                // $('#filter_options #s_target_group').val('');
                // $('#filter_options #s_device_type').val(0);
                $('#filter_options #s_dates').val('');
                Table.DataTable().ajax.reload();
            });


            $('.search_btn').click( function(ev) {
                Table.DataTable().ajax.reload();
            });

            $('#app_delete_modal .ok').click(function (e) {
                e.preventDefault();
                var data = $('#app_delete_form').serializeArray();
                var urlDelete = data[2].value;
                $.ajax({
                    url : urlDelete,
                    data : data,
                    type: "POST",
                    beforeSend(){
                        block_modal('app_delete_modal','الرجاء الإنتظار...');
                    },
                    success:function(data) {
                        if(data.success){
                            $('#app_delete_modal').modal('hide');
                            Table.DataTable().ajax.reload();
                            showAlertMessage('success','{{$data['name']}} /', data.message);
                        }
                        else{
                            if(data.errors) {
                                const error_messages = Object.values(data.errors);
                                var message_to_show = '<ul style="padding-left:20px">';
                                for (const error_message of error_messages) {
                                    message_to_show += '<li>'+error_message+'</li>';
                                }
                                message_to_show += '</ul>';
                                showAlertMessage('danger', '{{$data['name']}} /' + data.message, message_to_show, 1000);
                            }
                            else showAlertMessage('danger', '{{$data['name']}} /' , data.message, 1000);
                        }
                        un_block_modal('app_delete_modal');
                    },
                    error:function(data){},
                    statusCode: {500: function(data){}}
                });
            });

            $('#s_dates').daterangepicker({
                buttonClasses: ' btn',
                applyClass: 'btn-primary',
                cancelClass: 'btn-secondary'
            }, function(start, end, label) {
                $('#s_dates').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
            });
			$('#s_dates').val('');
        });


        function postData(){
            if(!$('#notifications_form').valid()){
                return false;
            }
            let data = new FormData($('#notifications_form').get(0));
            $.ajax({
                url : '{{route('admin.notifications.add_edit')}}',
                data : data,
                type: "POST",
                processData: false,
                contentType: false,
                beforeSend(){
                    block_modal('add_edit','{{trans('general.text_please_wait')}} ...');
                },
                success:function(data) {

                    if(data.new_notif){
                        Modal.modal('hide');
                        showAlertMessage('success','{{ trans('notifications.text_notification') }}','@lang('notifications.text_notifications_sent_success')');
                    }else{
                        showAlertMessage('danger','{{ trans('notifications.text_notification') }}', '{{ trans('general.text_alert_error_occurred') }}');
                    }
                    un_block_modal('add_edit');
                    Table.DataTable().ajax.reload();
                },
                error:function(data) {
                    un_block_modal('add_edit');
                    console.log(data);
                } ,
                statusCode: {
                    500: function(data) {
                        un_block_modal('add_edit');
                        console.log(data);
                    }
                }
            });
        }

        function validateForm(){
            $("#add_edit_form").validate({
                rules: {
                    s_name: {
                        required: true,
                    },
                },
                messages: {
                    s_name: {
                        required: "هذا الحقل مطلوب",
                    }
                },
            });

            $(".fileupload").change(function(){
                readURL(this);
            });
            $('.select2').select2();
            $('.add_edit').click(function(e){
                e.preventDefault();
                postData();
            });
        }
        function showDeleteImgModal(id){
            $("html, body").animate({
                scrollTop: 0
            }, 600);
            $('#delete_img_modal #i_constant_id').val(id);
            $('#delete_img_modal').modal('show', {backdrop: 'static', keyboard: false});
        }

        function resent(id){
            $.ajax({
                url : '{{route('admin.notifications.add_edit')}}',
                data : {pk_i_id:id,_token : '{!! csrf_token() !!}' },
                type: "POST",
                success:function(data, textStatus, jqXHR) {
                    if(data.new_notif){
                        showAlertMessage('success','{{ trans('notifications.text_notification') }}','@lang('notifications.text_notifications_sent_to')');
                    }else
                        showAlertMessage('danger','{{ trans('notifications.text_notification') }}', '{{ trans('general.text_alert_error_occurred') }}');

                    Table.DataTable().ajax.reload();
                },
                error:function(data, textStatus, jqXHR) {
                    console.log(data);
                },
                statusCode: {
                    500: function(data) {
                        console.log(data);
                    }
                }
            });
        }
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#img_preview').attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
                $('#img_preview').removeClass('hide');
            }
        }
    </script>
@stop
{{--@include('admin.pages.units-management.sidebar')--}}
@section('content')
    <div class="kt-portlet kt-portlet--mobile">
        <div class="kt-portlet__head kt-portlet__head--lg">
            <div class="kt-portlet__head-label">
                <span class="kt-portlet__head-icon">
                    <i class="kt-font-brand flaticon2-bell-2"></i>
                </span>
                <h4 class="kt-portlet__head-text">
                    @if(isset($data['name']))
                        {{ $data['name'] }}
                    @endif
                </h4>
            </div>

            <div class="kt-portlet__head-toolbar">
                <div class="kt-portlet__head-wrapper">
                    <button style="margin: 0 10px 0 10px" id="btn_show_search_box" onclick="check_collapse()" class="btn btn-dark" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                        <i class="la la-filter"></i>
                        @lang('general.text_show_search_box')
                        <i class="la la-angle-down"></i>
                    </button>
                    <a style="margin: 0 10px 0 10px" href="javascript:;" onclick="showModal(null,'add_edit','{{ route('admin.notifications.form')}}','{{csrf_token()}}')" class="btn btn-primary m-btn m-btn--pill m-btn--custom m-btn--icon m-btn--air">
                    <span>
                        <i class="la la-plus-circle"></i>
                        <span>Send Notification</span>
                    </span>
                    </a>
                </div>
            </div>
        </div>


        <div class="kt-portlet__body">
            <!--begin: Search Form -->
            <div class="kt-form kt-form--label-right kt-margin-t-20 kt-margin-b-10">
                <div class="row align-items-center">
                    <div class="collapse col-xl-12" id="collapseExample">
                        <div class="col-xl-12" id="filter_options">
                            <div class="form-group row">
                                <div class="col-lg-3">
                                    <label for="s_dates" class="form-control-label">Date:</label>
                                    <input type="text" placeholder="Select Date" name="s_dates"  required class="form-control" id="s_dates" value="">
                                </div>

                                <div class="col-lg-3">
                                    <label for="s_title" class="form-control-label">Title:</label>
                                    <input type="text" class="form-control" name="s_title" id="s_title" placeholder="Title"/>
                                </div>

{{--                                <div class="col-lg-3">--}}
{{--                                    <label for="s_target_group" class="form-control-label">Target Group:</label>--}}
{{--                                    <select class="form-control select2 col-sm-12" name="s_target_group" id="s_target_group">--}}
{{--                                        <option value="">--</option>--}}
{{--                                        <option value="ALL">All Users</option>--}}
{{--                                        <option value="Customer">Customers</option>--}}
{{--                                        <option value="Driver">Drivers</option>--}}
{{--                                    </select>--}}
{{--                                </div>--}}

{{--                                <div class="col-lg-3">--}}
{{--                                    <label for="s_device_type" class="form-control-label">Device Type:</label>--}}
{{--                                    <select class="form-control select2 col-sm-12" name="s_device_type" id="s_device_type">--}}
{{--                                        <option value="">--</option>--}}
{{--                                        <option value="ALL">All Devices</option>--}}
{{--                                        <option value="iphone">Iphone</option>--}}
{{--                                        <option value="android">Android</option>--}}
{{--                                    </select>--}}
{{--                                </div>--}}
                            </div>

                            <div class="form-group row">
                                <div class="col-lg-3">
                                    <a href="javascript:;" style="width: 100%" class="btn btn-warning btn-elevate btn-sm btn-icon search_btn">
                                <span>
                                    <i class="la la-search"></i>
                                    <span>{{trans('general.text_do_search')}}</span>
                                </span>
                                    </a>
                                </div>
                                <div class="col-lg-3">
                                    <a href="javascript:;" style="width: 100%" class="btn btn-dark btn-elevate btn-sm btn-icon reset_form">
                                <span>
                                    <i class="la la-search-minus"></i>
                                    <span>{{trans('general.text_cancel_search')}}</span>
                                </span>
                                    </a>
                                </div>

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

            <!-- BEGIN EXAMPLE TABLE PORTLET-->
            <table class="table table-striped table-bordered table-hover responsive no-wrap" id="data_table">
                <thead>
                <tr>
                    <th style="width: 40%" class="text-center">@lang('notifications.text_notification_title')</th>
{{--                    <th class="text-center">Target Group</th>--}}
{{--                    <th class="text-center">Device Type</th>--}}
                    <th class="text-center">@lang('notifications.text_notification_date')</th>
                    <th class="text-center">@lang('general.text_options')</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </div>
@endsection