CasperSecurity
<li class="nav-item dropdown notification_dropdown flex justify-center relative">
<a data-dz-dropdown="DzNotificationDropdown" id="notifications" wire:click="noficiationclick" class="dz-dropdown nav-link relative p-[0.8375rem] text-[#464a53] text-lg leading-[1] block duration-500" href="javascript:void(0);" role="button" data-bs-toggle="dropdown">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M13.73 21C13.5542 21.3031 13.3019 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
@if(sizeof($notifications)>0)
<badge class="p-1 blinking" style=" background: #fff;
color: #000;
border-radius: 50px;
position: absolute;
top: 4px;
right: 0px;">{{sizeof($notifications)}}</badge>
@endif
</a>
<div id="DzNotificationDropdown" class="dz-dropdown-menu absolute z-[9] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] w-[18.5rem] pt-4 mt-0.5 top-full max-md-top-[45px] md:right-0 rounded-md bg-white dark:bg-[#242424] @if($is_hidden) hidden @endif" data-backdrop="static" data-keyboard="false" style="width: 500px !important; height: 600px !important; box-shadow: 0px 0px 5px #000;">
<div id="DZ_W_Notification1" class="widget-media dz-scroll overflow-y-scroll overflow-x-hidden relative px-4" style="height:500px !important;">
@if(sizeof($notifications)>0)
<ul class="timeline">
@foreach($notifications as $key => $notify)
<li>
@if($notify['type'] =='tender-create')
<div class="card">
<div class="timeline-panel flex items-center relative rounded-md py-[0.8rem] px-3 mx-[-5px] duration-500 hover:bg-[#0d99ff0d]">
<div class="row w-full">
<div class="w-full flex">
<div class="media flex items-center justify-center w-[2.188rem] h-[2.188rem] bg-[#eee] rounded-full text-[13px] text-center overflow-hidden font-semibold self-start mr-2">
<img alt="image" width="50" src="{{asset('icons/hammer.png')}}">
</div>
<a href="javascript:void(0);" wire:click="markasread('{{$key}}','/Tenders/TenderCreate')" class="media-body">
<h6 class="mb-1 text-[13px] leading-4">
<span style="color: black;">Tender Created Successfully</span><br>
<small style=" color: black;">Tender No : {{$notify['data']['tender_info']['tender_no']}}</small>
<br/><small style=" color: black;">Created By - {{$notify['data']['user_info']['name']}}</small>
</h6>
<small class="block text-danger">{{\Carbon\Carbon::parse($notify['created_at'])->format('d-F-Y h:i A')}}</small>
</a>
</div>
</div>
</div>
</div>
@elseif($notify['type'] =='tender-assign')
<div class="card">
<div class="timeline-panel flex items-center relative rounded-md py-[0.8rem] px-3 mx-[-5px] duration-500 hover:bg-[#0d99ff0d]">
<div class="row w-full">
<div class="w-full flex">
<div class="media flex items-center justify-center w-[2.188rem] h-[2.188rem] bg-[#eee] rounded-full text-[13px] text-center overflow-hidden font-semibold self-start mr-2">
<img alt="image" width="50" src="{{asset('icons/tender_assign.png')}}">
</div>
<a href="javascript:void(0);" wire:click="markasread('{{$key}}','/Tenders/TenderCreate')" class="media-body">
<h6 class="mb-1 text-[13px] leading-4">
<span style="color: black;">Tender Assigned By {{$notify['data']['user_info']['name']}}</span><br>
<small style=" color: black;">Tender No : {{$notify['data']['tender_info']['tender_no']}}</small>
</h6>
<small class="block text-danger">{{\Carbon\Carbon::parse($notify['created_at'])->format('d-F-Y h:i A')}}</small>
</a>
</div>
</div>
</div>
</div>
@elseif($notify['type'] =='tender-activity-assign')
<div class="card">
<div class="timeline-panel flex items-center relative rounded-md py-[0.8rem] px-3 mx-[-5px] duration-500 hover:bg-[#0d99ff0d]">
<div class="row w-full">
<div class="w-full flex">
<div class="media flex items-center justify-center w-[2.188rem] h-[2.188rem] bg-[#eee] rounded-full text-[13px] text-center overflow-hidden font-semibold self-start mr-2">
<img alt="image" width="50" src="{{asset('icons/tender_assign.png')}}">
</div>
<a href="javascript:void(0);" wire:click="markasread('{{$key}}','/Tenders/TenderCreate')" class="media-body">
<h6 class="mb-1 text-[13px] leading-4">
<span style="color: black;">Tender Activity Assigned By {{$notify['data']['user_info']['name']}}</span><br>
<small style=" color: black;">Tender Activity Name : {{$notify['data']['tender_activity']['activity_name']}}</small>
</h6>
<small class="block text-danger">{{\Carbon\Carbon::parse($notify['created_at'])->format('d-F-Y h:i A')}}</small>
</a>
</div>
</div>
</div>
</div>
@elseif($notify['type'] =='tender-reminder')
<div class="card">
<div class="timeline-panel flex items-center relative rounded-md py-[0.8rem] px-3 mx-[-5px] duration-500 hover:bg-[#0d99ff0d]">
<div class="row w-full">
<div class="w-full flex">
<div class="media flex items-center justify-center w-[2.188rem] h-[2.188rem] bg-[#eee] rounded-full text-[13px] text-center overflow-hidden font-semibold self-start mr-2">
<img alt="image" width="50" src="{{asset('icons/tender_assign.png')}}">
</div>
<a href="javascript:void(0);" wire:click="markasread('{{$key}}','/Tenders/TenderCreate')" class="media-body">
<h6 class="mb-1 text-[13px] leading-4">
<span style="color: black;">Tender Activity Reminder</span><br>
<small style=" color: black;">Tender Activity Name : {{$notify['data']['tender_activity']['activity_name']}}</small>
</h6>
<small class="block text-danger">{{\Carbon\Carbon::parse($notify['created_at'])->format('d-F-Y h:i A')}}</small>
</a>
</div>
</div>
</div>
</div>
@endif
</li>
@endforeach
</ul>
@else
<div class="card" style="height: 500px; align-content: center;">
<p class="text-center text-danger">No Notifications Available</p>
</div>
@endif
</div>
{{-- <a class="dropdown-item pt-[0.9375rem] px-[1.875rem] pb-[14px] text-center block border-t text-[13px] text-primary border-[#f1f1f1] dark:border-[#444444]" href="javascript:void(0);">See all notifications <i class="ti-arrow-end"></i></a>--}}
</div>
</li>