@php
    $unreadNotifications = user()->unreadNotifications ?? collect([]);
	$readNotifications = user()->readNotifications ?? collect([]);  
    $url = _route('student.markNotification');
    if(is_student()){
        $logo = $dataConfigs['logo'] ?? null;
        $logout = _route('student.logout');
    }else{
        $logout = route('fe.logout');
        $logo = $dataSettings['logo'] ?? null;
    }
	$unreadNotifications_count = $unreadNotifications->count();						 
@endphp
<nav class="layout-navbar navbar navbar-expand-lg align-items-lg-center bg-primary container-p-x" id="layout-navbar">

    <div class="layout-sidenav-toggle navbar-nav d-lg-none align-items-lg-center">
        <a class="nav-item nav-link px-0 mr-lg-4" href="javascript:">
            <i class="ion ion-md-menu text-large align-middle"></i>
        </a>
    </div>

    <a href="#" class="navbar-brand app-brand demo d-lg-none py-0  mr-auto ml-3">
        <span class="app-brand-logo demo">
            <img src="{{$logo}}" alt="Logo" class="img-fluid">
        </span>
    </a>


    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#layout-navbar-collapse">
        <!-- <span class="navbar-toggler-icon"></span> -->
        <i class="ion ion-md-more"></i>
    </button>

    <div class="navbar-collapse collapse" id="layout-navbar-collapse">
        <!-- Divider -->
        <hr class="d-lg-none w-100 my-2">

        <div class="navbar-nav align-items-lg-center">
            <!-- Search -->
            <label class="nav-item navbar-text p-0 m-0 text-large">
                Student Assessment & Exam Portal
            </label>
        </div>

        <div class="navbar-nav align-items-lg-center ml-auto">
            <div class="demo-navbar-notifications nav-item dropdown mr-lg-3">
				<a class="nav-link dropdown-toggle hide-arrow" href="#" data-toggle="dropdown" id="drop_down">
                    <i class="feather icon-bell navbar-icon align-middle"></i>
			@if($unreadNotifications_count>0)
                    <span class="badge badge-danger badge-dot indicator"></span>
                    <span class="d-lg-none align-middle">&nbsp; Notifications</span>
                </a>
                <div class="dropdown-menu dropdown-menu-right" id="dropdown_list">
                    <div class="bg-primary text-center text-white font-weight-bold p-3">
                        {{$unreadNotifications_count}} New Notifications
			@else			
                    <span class="badge badge-danger indicator"></span>
                    <span class="d-lg-none align-middle">&nbsp; Notifications</span>
                </a>
                <div class="dropdown-menu dropdown-menu-right" id="dropdown_list">
                    <div class="bg-primary text-center text-white font-weight-bold p-3">
                        Read Notifications
			@endif
                    </div>
                    <div class="list-group list-group-flush">
                        @foreach ($unreadNotifications as $notification)
                        <a href="javascript:0" class="list-group-item list-group-item-action media d-flex align-items-center">
                            <div class="ui-icon ui-icon-sm feather icon-home bg-info border-0 text-white"></div>
                            <div class="media-body line-height-condenced ml-3">
                                <div class="text-dark small mt-1">
                                    {!! $notification->data['message'] !!}
                                </div>
                                <div class="text-light small mt-1">{{ $notification->created_at->diffForhumans() }}</div>
                            </div>
                        </a>
                        @endforeach
                        @foreach ($readNotifications as $notification)		  
                        <a href="javascript:" class="list-group-item list-group-item-action media d-flex align-items-center">
                            <div class="ui-icon ui-icon-sm feather icon-home bg-secondary border-0 text-white"></div>
                            <div class="media-body line-height-condenced ml-3">
                                <div class="text-dark"></div>
                                <div class="text-light small mt-1">
                                    {!! $notification->data['message'] !!}
                                </div>
                                <div class="text-light small mt-1">{{ $notification->created_at->diffForhumans() }}</div>
                            </div>
                        </a>
                        @endforeach
                    </div>
                    {{-- <a href="javascript:" class="d-block text-center text-light small p-2 my-1">Show all notifications</a> --}}
                </div>
            </div>
            {{-- <div class="nav-item d-none d-lg-block text-big font-weight-light line-height-1 opacity-25 mr-3 ml-1">|</div>
            <div class="demo-navbar-messages nav-item dropdown mr-lg-3">
                <a class="nav-link dropdown-toggle hide-arrow" href="#" data-toggle="dropdown">
                    <i class="feather icon-mail navbar-icon align-middle"></i>
                    <span class="badge badge-success badge-dot indicator"></span>
                    <span class="d-lg-none align-middle">&nbsp; Messages</span>
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    <div class="bg-primary text-center text-white font-weight-bold p-3">
                        0 New Messages
                    </div>
                    <div class="list-group list-group-flush">
                        { {-- <a href="javascript:" class="list-group-item list-group-item-action media d-flex align-items-center">
                            <img src="assets/img/avatars/6-small.png" class="d-block ui-w-40 rounded-circle" alt>
                            <div class="media-body ml-3">
                                <div class="text-dark line-height-condenced">Lorem ipsum dolor consectetuer elit.</div>
                                <div class="text-light small mt-1">
                                    Josephin Doe &nbsp;·&nbsp; 58m ago
                                </div>
                            </div>
                        </a> --} }
                    </div>

                    <a href="javascript:" class="d-block text-center text-light small p-2 my-1">Show all messages</a>
                </div>
            </div> --}}
			<!--- support link --->
            <div class="nav-item d-none d-lg-block text-big font-weight-light line-height-1 opacity-25 mr-3 ml-1">|</div>
			<div class="demo-navbar-notifications nav-item dropdown mr-lg-3">
				<a class="nav-link dropdown-toggle hide-arrow" href="{{ _route('student.support') }}" target="_blank">
                    <i class="feather icon-help-circle navbar-icon align-middle"></i>
                </a>
            </div>
			
            <!-- Divider -->
            <div class="nav-item d-none d-lg-block text-big font-weight-light line-height-1 opacity-25 mr-3 ml-1">|</div>
            <div class="demo-navbar-user nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                    <span class="d-inline-flex flex-lg-row-reverse align-items-center align-middle">
                        <img src="{{user()->getPathAvatar()}}" class="d-block ui-w-30 rounded-circle">
                        <span class="px-1 mr-lg-2 ml-2 ml-lg-0">My Account</span>
                    </span>
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a href="{{ _route('student.edit-profile') }}" class="dropdown-item">
                        <i class="feather icon-user text-muted"></i> &nbsp; Account settings
                    </a>
                    <a href="{{ _route('student.reset-password') }}" class="dropdown-item">
                        <i class="feather icon-settings text-muted"></i> &nbsp; Change Password
                    </a>
                    <a href="{{ _route('student.purchase-history') }}" class="dropdown-item">
                        <i class="feather icon-credit-card text-muted"></i> &nbsp; Purchase History
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="javascript:" class="dropdown-item" onclick="event.preventDefault();
                                        document.getElementById('logout-form-student').submit();">
                        <i class="feather icon-power text-danger"></i> &nbsp; Log Out
                    </a>
                    <form id="logout-form-student" action="{{ $logout }}" method="POST" style="display: none;">
                        @csrf
                    </form>
                </div>
            </div>
        </div>
    </div>
</nav>
@push("script")
<script>
var drop_down=false;
    $(document).ready(function(){
        $("#drop_down").click(function(){
			drop_down = true;
			//alert("in");
        });
    });
    $(document).on("click", function(event){
        var $trigger = $("#drop_down");
        if($trigger !== event.target && !$trigger.has(event.target).length && drop_down){
			drop_down = false;
			
			$.ajax({
				type: 'GET', //THIS NEEDS TO BE GET
				url: '{{$url}}',
				success: function (data) {
					console.log(data);
				},
				error: function() { 
					 console.log(data);
				}
			});
			
			//alert("out");
        }            
    });
</script>
@endpush