@extends('layouts.app')

@section('sidebar')
    @include('sidebar')
@stop

@section('content')
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title ">Notification Detail</h3>
            </div>
            <div>
                <a href="javascript:;" class="btn btn-info m-btn m-btn--wide m-btn--air m-btn--custom new-notify" id="{{ encrypt('usernotification') }}"><span><i class="la la-plus"></i><span>User Notification </span></span></a>
                <a href="javascript:;" class="btn btn-info m-btn m-btn--wide m-btn--air m-btn--custom new-notify" id="{{ encrypt('ibnotification') }}"><span><i class="la la-plus"></i><span> IB Notification </span></span></a>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--full-height ">
            <div class="m-portlet__body">
                @if ($errors->any())
                    {{ implode('', $errors->all('<div>:message</div>')) }}
                @endif
               @if(Session::has('success'))
                    <div class="alert alert-success">
                        {!! Session::get('success') !!}
                    </div>
                @endif
                <ul class="nav nav-tabs m-tabs-line m-tabs-line--danger m-tabs-line--2x" role="tablist">
                    <li class="nav-item m-tabs__item">
                        <a class="nav-link m-tabs__link active" data-toggle="tab" href="#usernoty">User Notification</a>
                    </li>
                    <li class="nav-item m-tabs__item">
                        <a class="nav-link m-tabs__link" data-toggle="tab" href="#ibnoty">IB Notification</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="usernoty" role="tabpanel">
                        <table class="table table-striped- table-bordered table-hover table-checkable" id="user-notification-list">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th> Title</th>
                                <th>From-date</th>
                                <th>To-date</th>
                                <th>Description</th>
                                <th> Action </th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div class="tab-pane" id="ibnoty" role="tabpanel">
                        <table class="table table-striped- table-bordered table-hover table-checkable" id="ib-notification-list">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th> Title</th>
                                <th>From-date</th>
                                <th>To-date</th>
                                <th>Description</th>
                                <th> Action </th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .nav.nav-tabs .nav-link{font-size: 14px;}
    </style>


@endsection

@section('script')
{{ Html::script('custom/datatables/datatables.bundle.js') }}
{{ Html::script('custom/eModal/eModal.js') }}
<script type="text/javascript">
    var table;
    (function($){
        $(document).ready(function () {

            $('#user-notification-list').each(function() {
                table = $(this).DataTable({
                    'responsive':!0,
                    'searchDelay':500,
                    'processing':!0,
                    "serverSide": true,
                    "ajax": {
                        "url": base_url+"/notify/notifyDatatable",
                        "type": "GET"
                    },
                    "order": [[ 0, "desc" ]],
                    "aoColumns": [
                        { data: 'id', name: 'id', bSearchable: false, bVisible: false },
                        { data: 'name', name: 'name'},
                        { data: 'title', name: 'title'},
                        { data: 'from_date', name: 'from_date'},
                        { data: 'to_date', name: 'to_date'},
                        { data: 'description', name: 'description'},
						{ data: 'action', name: 'action'}
                    ]
                });
            });

            $('#ib-notification-list').each(function() {
                ib_table = $(this).DataTable({
                    'responsive':!0,
                    'searchDelay':500,
                    'processing':!0,
                    "serverSide": true,
                    "ajax": {
                        "url": base_url+"/notify/ibnotifyDatatable",
                        "type": "GET"
                    },
                    "order": [[ 0, "desc" ]],
                    "aoColumns": [
                        { data: 'id', name: 'id', bSearchable: false, bVisible: false },
                        { data: 'name', name: 'name'},
                        { data: 'title', name: 'title'},
                        { data: 'from_date', name: 'from_date'},
                        { data: 'to_date', name: 'to_date'},
                        { data: 'description', name: 'description'},
						{ data: 'action', name: 'action'}
                    ]
                });
            });
            // Perform search after 3 character enter
            $("#user-notification-list_filter input")
                .unbind() // Unbind previous default bindings
                .bind("keyup", function(e) { // Bind our desired behavior
                    // If the length is 3 or more characters, or the user pressed ENTER, search
                    if(this.value.length >= 3 || e.keyCode == 13) {
                            table.search(this.value).draw();

                    }
                    // Ensure we clear the search if they backspace far enough
                    if(this.value == "") {
                        table.search(this.value).draw();

                    }
                    return;
                });

                $("#ib-notification-list_filter input")
                .unbind() // Unbind previous default bindings
                .bind("keyup", function(e) { // Bind our desired behavior
                    // If the length is 3 or more characters, or the user pressed ENTER, search
                    if(this.value.length >= 3 || e.keyCode == 13) {
                        ib_table.search(this.value).draw();

                    }
                    // Ensure we clear the search if they backspace far enough
                    if(this.value == "") {
                        ib_table.search(this.value).draw();

                    }
                    return;
                });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

			$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
				localStorage.setItem('lastTab', $(this).attr('href'));
			});
			var lastTab = localStorage.getItem('lastTab');
			if (lastTab) {
				$('[href="' + lastTab + '"]').tab('show');
			}

            $(document).on("click", "a.edit-notification", function(event){
                var id = $(this).attr('data-id');
                var secret = $(this).attr('secret-id');
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
				var url = base_url+"/notify/editNotification/"+id+"/"+secret;
				var options = {
					url: url,
					title:'Edit Notification',
                    size: 'lg',
					buttons: [
						{text: 'Cancel', style: 'btn btn-secondary', close: true },
						{text: 'Edit Notification ', style: 'btn btn-primary',   close: false, click: saveNotification }
					]
				};
				eModal.ajax(options);
            });
            function saveNotification()
            {
            	//console.log($('#ibmodal-form'));
                $('#editnotification-form').submit();
            }

            $(document).on("click", "a.delete-notification", function(event){
                var id = $(this).attr('data-id');
                var title = $(this).attr('data-title');
                var name = $(this).attr('data-name');
                var secret = $(this).attr('secret-id');
                var table_name = $(this).attr('table-name');
                showProcessing();
                    swal({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, Delete it!'
                    }).then(function(result) {
                        if (result.value) {
                            // alert("Yes");
                            $.blockUI({ message: '<img src="{{ URL::to("images/loading.svg") }}" height="100%" width="100%" />', css: { border:'none', backgroundColor:'transparent' , top: '0%' , bottom: '0%'} });
                            $.get( base_url+"/notify/deletenotification", { 'id': id , 'title': title , 'name' : name, 'secret' : secret},
                                function( data ){
                                    if(data.success){
                                        swal(data['success'],data[0],'success').then((isOK) => {
                                            $('#'+table_name).DataTable().ajax.reload(mApp.unblock('#'+table_name), false);
                                        });
                                    }else{
                                        swal(data['error'],data[0],'error');
                                        $('#'+table_name).DataTable().ajax.reload(mApp.unblock('#'+table_name), false);
                                    }
                                    $.unblockUI();
                                });
                        }else{
                            (mApp.unblock(table_name), false);
                        }
                });
            });
            function showProcessing(){
                mApp.block("#notification-list", {
                    overlayColor: "#000000",
                    type: "loader",
                    state: "primary",
                    message: "Please Wait..."
                });
		    }

            $(document).on("click", ".new-notify", function(event){
                var identity = $(this).attr('id');
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
				var url = base_url+"/notify/newNotify/"+identity;
				var options = {
					url: url,
					title:'Create New Notifications',
                    size: 'lg',
					buttons: [
						{text: 'Cancel', style: 'btn btn-secondary', close: true },
						{text: 'Create New Notifications ', style: 'btn btn-primary',   close: false, click: saveNotification }
					]
				};
				eModal.ajax(options);
            });



        });
    })(jQuery);
    eModal.setModalOptions({
        backdrop: 'static',
        keyboard: false
    });
</script>
@endsection