{{-- Header --}}
@if (config('layout.extras.notifications.dropdown.style') == 'light')
    <div class="d-flex flex-column pt-12 bg-dark-o-5 rounded-top">
        {{-- Title --}}
        <h4 class="d-flex flex-center">
            <span class="text-dark">User Notifications</span>
            <span class="btn btn-text btn-success btn-sm font-weight-bold btn-font-md ml-2">23 new</span>
        </h4>

        {{-- Tabs --}}
        <ul class="nav nav-bold nav-tabs nav-tabs-line nav-tabs-line-3x nav-tabs-primary mt-3 px-8" role="tablist">
            <li class="nav-item">
                <a class="nav-link active show" data-toggle="tab" href="#topbar_notifications_notifications"  >Alerts</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#topbar_notifications_events"  >Events</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#topbar_notifications_logs"  >Logs</a>
            </li>
        </ul>
    </div>
@else
    <div class="d-flex flex-column pt-12 bgi-size-cover bgi-no-repeat rounded-top" style="background-image: url('{{ asset('media/misc/bg-1.jpg') }}')">
        {{-- Title --}}
        <h4 class="d-flex flex-center rounded-top">
            <span class="text-white">Notifications</span>
            <span class="btn btn-text btn-success btn-sm font-weight-bold btn-font-md ml-2" id='total_notif'></span>
        </h4>

        {{-- Tabs --}}
        <ul id="ul_nav" class="nav nav-bold nav-tabs nav-tabs-line nav-tabs-line-3x nav-tabs-line-transparent-white nav-tabs-line-active-border-success mt-3 px-8" role="tablist">
            <li class="nav-item" data-id='member'>
                <a class="nav-link active show" data-toggle="tab" href="#topbar_notifications_notifications" >New Member</a>
            </li>
            <li class="nav-item" data-id='deposit'>
                <a class="nav-link" data-toggle="tab" href="#topbar_notifications_events">Deposit</a>
            </li>
            <li class="nav-item" data-id='withdrawl'>
                <a class="nav-link" data-toggle="tab" href="#topbar_notifications_logs">Withdrawl</a>
            </li>
        </ul>
    </div>
@endif

{{-- Content --}}
<div class="tab-content">
    <div class="tab-pane active show" id="topbar_notifications_notifications" role="tabpanel"></div>
    <div class="tab-pane" id="topbar_notifications_events" role="tabpanel"></div>
    <div class="tab-pane" id="topbar_notifications_logs" role="tabpanel"></div>
    
    <script
    src=//code.jquery.com/jquery-3.5.1.min.js
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin=anonymous></script>
    <script type=text/javascript>
        $(document).ready(function(){
            $('#ul_nav li').on('click', function(e){
                $.ajax({
                    url: 'notification/'+$(this).data('id'),
                    method: 'GET'
                }).then(function(){
                    loadlink();
                });
            });
        })

        function loadlink(){
            $.ajax({ 
                type: "GET",
                url: "notification",       
                success: function (data) {
                    if(data != ''){
                        var dtevent = '<div class="navi navi-hover scroll my-4" data-scroll="true" data-height="300" data-mobile-height="200">';
                        var dtevent2 = '<div class="navi navi-hover scroll my-4" data-scroll="true" data-height="300" data-mobile-height="200">';
                        var dtevent3 = '<div class="navi navi-hover scroll my-4" data-scroll="true" data-height="300" data-mobile-height="200">';

                        var emptyCheck1 = 0;
                        var emptyCheck2 = 0;
                        var emptyCheck3 = 0; 

                        var soundOn = 0;                    

                        $.each(data, function () {
                            if(this.notifiable_type == 'member'){
                                emptyCheck1 += 1;
                                dtevent += '<a href="#" class="navi-item"><div class="navi-link"><div class="navi-icon mr-2"><i class="flaticon2-line-chart text-success"></i></div><div class="navi-text"><div class="font-weight-bold">'+this.type+'</div><div class="text-muted">'+this.data+'</div></div></div></a>';
                            }else if(this.notifiable_type == 'deposit'){
                                emptyCheck2 += 1;
                                dtevent2 += '<a href="#" class="navi-item"><div class="navi-link"><div class="navi-icon mr-2"><i class="flaticon2-line-chart text-success"></i></div><div class="navi-text"><div class="font-weight-bold">'+this.type+'</div><div class="text-muted">'+this.data+'</div></div></div></a>';
                            }else if(this.notifiable_type == 'withdrawl'){
                                emptyCheck3 += 1;
                                dtevent3 += '<a href="#" class="navi-item"><div class="navi-link"><div class="navi-icon mr-2"><i class="flaticon2-line-chart text-success"></i></div><div class="navi-text"><div class="font-weight-bold">'+this.type+'</div><div class="text-muted">'+this.data+'</div></div></div></a>';    
                            }
                            if(this.read_at == null && this.notifiable_type != 'member'){
                                soundOn += 1;
                            }
                        });
                        dtevent += '</div>';
                        dtevent2 += '</div>';
                        dtevent3 += '</div>';

                        if(emptyCheck1 == 0){
                            dtevent = '<div class="d-flex flex-center text-center text-muted min-h-200px">All caught up!<br/>No new notifications.</div>';
                        }
                        if(emptyCheck2 == 0){
                            dtevent2 = '<div class="d-flex flex-center text-center text-muted min-h-200px">All caught up!<br/>No new notifications.</div>';
                        }
                        if(emptyCheck3 == 0){
                            dtevent3 = '<div class="d-flex flex-center text-center text-muted min-h-200px">All caught up!<br/>No new notifications.</div>';
                        }

                        $("#topbar_notifications_notifications").html(dtevent);
                        $("#topbar_notifications_events").html(dtevent2);
                        $("#topbar_notifications_logs").html(dtevent3);

                        $("#total_notif").html(soundOn+' new');
                        
                        if(soundOn > 0){
                            var audio = new Audio("media/sound/notification.mp3"); 
                            audio.play();
                        }
                    }else{
                        var dtevent = '<div class="d-flex flex-center text-center text-muted min-h-200px">All caught up!<br/>No new notifications.</div>';
                        $("#topbar_notifications_notifications").html(dtevent);
                        $("#topbar_notifications_events").html(dtevent);
                        $("#topbar_notifications_logs").html(dtevent);
                    }
                }
            });
        }
        loadlink();
        setInterval(function(){
            loadlink()
        }, 60000);
    </script>
    <script src="https://js.pusher.com/7.0/pusher.min.js"></script>
    <script>

        var pusher = new Pusher('1f64cc990cedd87afac0', {
        cluster: 'ap1'
        });

        var channel = pusher.subscribe('my-channel');
        channel.bind('my-event', function(data) {
            loadlink();
        });
    </script>
</div>