@extends('layouts.app')
@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
        .row-read{
           background-color: #f9f9f9 !important;
        }
        .page-item .page-link,
        .page-item .page-link:active,
        .page-item .page-link:link{
            color:#AE996E;
            outline: 0;
            box-shadow: none;
        }
        .page-item .page-link:hover,
        .page-item.active .page-link:hover,
        .page-item.active .page-link{
            color:#fff;
            background-color: #AE996E;
            border-color: #AE996E;
        }
    </style>
@endsection

@section('main-content')
    @include('layouts.account_banner',['title'=>"Notifications","image"=>asset('assets/img/notification.jpg')])

    <!-- Content ================================================== -->
    <div class="container margin_60_35">
        <div class="row" id="order-summary">
            <div class="col-sm-12 col-md-4" id="sidebar2">
                <div class="theiaStickySidebar">
                    <p><a style="text-align: left; background: #AE996E; color: white;" class="btn_side">Filter</a></p>
                    <div class="box_style_1">
                        <table class="table table-striped ">
                            <tbody>
                            <tr>
                                <td valign="center"  style="padding-left: 15px; padding-top:10px; vertical-align: middle;">
                                    <p><a href="{{route('notifications')}}">All message</a></p>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding-left: 15px;  vertical-align: middle;">
                                    <p><a href="{{route('notifications',['read'=>0])}}">Unread Messages</a></p>
                                </td>

                            </tr>
                            <tr>
                                <td style="padding-left: 15px;  vertical-align: middle;">
                                    <p><a href="{{route('notifications',['read'=>1])}}">Read Messages</a></p>
                                </td>

                            </tr>


                            </tbody>
                        </table>
                    </div><!-- End box_style_1 -->

                </div><!-- End col-md-3 -->
            </div>

            <div class="col-sm-12 col-md-7">
                <div class="box_style_2" id="order_process">
                    <h2 class="inner2">Messages</h2>
                    <table id="notifications-table" class="table cart-list notification-list">
                        <tbody>
                        @foreach($response->data as $notification)
                            <tr class="{{$notification->Note_open==0?'row-read':""}}" id="notifications-row-{{$notification->User_notification_id}}">
                                    <td>
                                        <p>{{$notification->Creation_date}}</p>
                                    </td>
                                    <td>
                                        <p><a class="communication-comp"
                                            data-content="{{$notification->Contents}}"
                                            data-read="{{$notification->Note_open}}"
                                            data-id="{{$notification->User_notification_id}}"
                                            style="color: black;" href="#0"
                                            data-toggle="modal" data-target="#register">
                                                {{$notification->Transaction_type}}
                                            </a></p>
                                    </td>
                                    <td>
                                        <p><a href="javascript:void(0)"
                                            class="delete-notification"
                                            data-id="{{$notification->User_notification_id}}"
                                            >
                                                <span><i class="material-icons"
                                                        style="font-size:12px;">delete</i></span>
                                                <span id="delete-{{$notification->User_notification_id}}">Delete</span>
                                            </a></p>
                                    </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    @if($response->last_page>1)
                    <div class="text-center">
                        <a href="javasccript:void(0)"  data-url="{{URL::full()}}"
                        id="load-btn"
                        data-last_page="{{$response->last_page}}"
                        data-current_page="{{$response->current_page}}" class="btn btn-submit"
                        style="width:150px;border-radius:100px;">Load More</a>
                    </div>
                    @endif

                </div><!-- End box_style_1 -->
            </div><!-- End col-md-6 -->

            <div class="col-md-3"></div>
        </div><!-- End row -->
    </div><!-- End container -->
    <!-- End Content =============================================== -->
    <!-- Register modal -->
    <div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myRegister" aria-hidden="true">
        <div class="modal-dialog" style="margin-top:10rem!important;">
            <div class="modal-content modal-popup" style="width: 70rem;
    overflow: hidden;">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <a style="color: black;" href="#" class="close-link"><i class="icon_close_alt2"></i></a>
                    </button>
                </div>
              <div class="modal-body">
                  <div id="notification_detail">

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

        </div>
    </div>
    <!-- End Register modal -->
@endsection

@section('scripts')
    <script src="{{asset('assets/js/theia-sticky-sidebar.js')}}"></script>
    <script>
        jQuery('#sidebar2').theiaStickySidebar({
            additionalMarginTop: 80
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script>
        $(document).on("click",'.communication-comp',function(){
            let content = $(this).data('content');
            $('#notification_detail').html(content);

            if($(this).data('read')==0)
            {
                let notification_id =  $(this).data('id')
                $('#notifications-row-'+notification_id).removeClass('row-read');
                $.ajax({
                    type:'POST',
                    url:"{{route('notification.mark')}}",
                    data:{notification_id},
                    success:function(data){

                    }
                })
            }

        })

        $('#load-btn').on("click",function(){



            let last_page=  $(this).data('last_page');
            let current_page=  $(this).data('current_page');
            let page= current_page+1;
            if(last_page > current_page)
            {
                $('#load-btn').text("Loading...")
                $('#load-btn').attr('disabled',true);
                $.ajax({
                    type:'GET',
                    url:"{{route('notifications.more')}}",
                    data:{page},
                    success:function(data){
                        if(page >= last_page)
                       {
                            $('#load-btn').fadeOut();
                       }
                        $('#load-btn').data('current_page',page)
                       let notificationComp = getNotificationsComponent(data.data);
                        $(notificationComp).hide();
                       $('table#notifications-table').find('tbody').append(notificationComp)
                        $(notificationComp).show("normal");
                        $('#load-btn').attr('disabled',false);
                        $('#load-btn').html("Load More")
                    },
                    error:function(xhr,error)
                    {
                        console.log(error)
                        $('#load-btn').attr('disabled',false);
                        $('#load-btn').html("Load More")
                    }
                })

            }else{

                $('#load-btn').fadeOut(200);
                $('#load-btn').attr('disabled',false);
                $('#load-btn').html("Load More")
            }

        })


        function getNotificationsComponent(items)
        {
            let notificationComp = "";
            items.map(function(item){
                notificationComp+=`
                <tr class="${item.Note_open==0?'row-read':''}"
                    id="notifications-row-${item.User_notification_id}">
                    <td>
                        <p> ${item.Creation_date} </p>
                    </td>
                    <td>
                        <p><a class="communication-comp"
                            data-content='${item.Contents}'
                            data-read="${item.Note_open}"
                            data-id="${item.User_notification_id}"
                            style="color: black;" href="#0"
                            data-toggle="modal" data-target="#register">
                                ${item.Transaction_type}
                            </a></p>
                    </td>
                    <td>
                        <p><a href="javascript:void(0)"
                            class="delete-notification"
                            data-id="${item.User_notification_id}"
                            >
                                <span><i class="material-icons"
                                        style="font-size:12px;">delete</i></span>
                                <span id="delete-${item.User_notification_id}}">Delete</span>
                            </a></p>
                    </td>
                </tr>
                `;
            })

            return notificationComp;
        }

        $(document).on("click",'.delete-notification',function(e){
            e.preventDefault();
            let notification_id = $(this).data('id');
            $(this).attr('disabled',true);
            $('#delete-'+notification_id).html("deleting...");
                $.ajax({
                    type:'POST',
                    url:"{{route('notifications')}}",
                    data:{notification_id},
                    success:function(data){
                        if(data.status === 1)
                        {
                            toastr.success(data.message, 'Success Alert', {timeOut: 5000})
                            $('table tbody #notifications-row-'+notification_id).remove();
                        }else
                        {
                            $(this).attr('disabled',false);
                            $('#delete-'+notification_id).html("delete")
                            toastr.error(data.message, 'Error Alert', {timeOut: 5000})
                        }
                    }
                })
            })
    </script>

@endsection