@extends('layout.emapp')
@section('content')

<style>
     .card{
    width: 100%;
    margin-bottom: 5px;
    display: block;
    transition: opacity 0.3s;
     border: 1px solid #FAFAFA !important;
     background-color: #FAFAFA;
     
  }
}


.card-body{
  border-top: 0px !important;
  padding: 0.5rem;
  table{
    width: 100%;
    tr{
      display:flex;
      td{
        a.btn{
          font-size: 0.8rem;
          padding: 3px;
        }
      }
      td:nth-child(2){
        text-align:right;
        justify-content: space-around;
      }
    }
  }
  
}

.card-title:before{
  display:inline-block;
  font-family: 'Font Awesome\ 5 Free';
  font-weight:900;
  font-size: 1.1rem;
  text-align: center;
  border: 2px solid #000;
  border-radius: 100px;
  width: 30px;
  height: 30px;
  padding-bottom: 3px;
  margin-right: 10px;
}

.notification-invitation {
  .card-body {
    .card-title:before {
      color: #25cfe1;
      border-color: #25cfe1;
      content: "\f007";
    }
  }
}



/*.notification-danger {*/
/*  .card-body {*/
/*    .card-title:before {*/
/*      color: #FFAB91;*/
/*      border-color: #FFAB91;*/
/*      content: "\f00d";*/
/*    }*/
/*  }*/
/*}*/

/*.notification-reminder {*/
/*  .card-body {*/
/*    .card-title:before {*/
/*      color: #CE93D8;*/
/*      border-color: #CE93D8;*/
/*      content: "\f017";*/
/*    }*/
/*  }*/
/*}*/

.card.display-none{
  display: none;
  transition: opacity 2s;
}
/*.roww{*/
/*  margin:auto;*/
/*  padding: 30px;*/
/*  width: 80%;*/
/*  display: flex;*/
/*  flex-flow: column;}*/
  
  .card-subtitle.text-muted {

position: absolute;
right: 1.25em;
margin: 0;
top:1em;
/*background:blue;*/
/*color:white !important;*/
padding:2px;
/*border-radius:5px;*/
font-size:10px;
   
}

  .card-subtitle2{

position: absolute;
right: 1.25em;
margin: 0;
bottom:-2px;
/*background:blue;*/
color: #000 !important;
padding:2px;
/*border-radius:5px;*/
font-size:12px;
   
}

@media (min-width: 575px){


.pdng{
    padding-top: 0.5rem;
}
}
@media (max-width: 575px){
.titlecrd{
    font-size:12px;
    line-height: 0 !important;
   
}

.pdng{
    padding-left: 4px;
}
.bdycard{
    line-height: .89;
    padding: 10px;
}
  .card-subtitle2{

position: absolute;
right: 1.25em;
margin: 0;
bottom:-9px;
color: #000 !important;
padding:2px;
font-size:10px;
   
}

  .card-subtitle.text-muted {

position: absolute;
right: 1.25em;
margin: 0;
top:2px;
padding:2px;
font-size:9px;
   
}
}
#notifications{
    list-style: none;
}


</style>


<section class="home">
    
<div class="roww container min-height-100vh">
    <div class="row p-4">
  <!--<h2 class="text-center">Notifications</h2>-->
             <div class="col-8">
                    <h2 style="font-weight: bold" class="pb-3 pt-4">{{__('Notifications')}}</h2>
                </div>
  <!--<p class="dismiss text-right"><a id="dismiss-all" href="#">Dimiss All</a></p>-->
  <div class="col-12">
      @foreach ($notification as $item)
  <div class="card notification-card notification-invitation shadow-sm">
      @if($item['status']==1)<span class="badge badge-pill badge-danger">1</span>@endif
    <div class="card-body border-top-0 bdycard pt-0 mt-0">
      <!--<table>-->
        <ul class="list-group list-group-horizontal pt-4" id="notifications">
         <li style=""><img src="{{ asset('employer-con/images/20220206_020805_0001.png') }}" height="40" width="52"
                        class="img-responsive contactimg" alt="picture" style="border-radius: 50%;"></li>
          <li style="" class="pdng pl-2"><span class="card-title titlecrd">{{$item['message']}}@if ($item['link'])
               <a href="{{$item['link']}}" target="_blank">click here</a>
           @endif </span>
          <h6 class="card-subtitle mb-2 text-muted">{{$item['created_at']}}</h6> </li>
          <!--<h6 class="card-subtitle2 mb-2">2 min ago</h6></td>-->
          <!--<td style="width:20%">-->
          <!--  <a href="#" class="btn btn-primary">View</a>-->
          <!--  <a href="#" class="btn btn-danger dismiss-notification">Dismiss</a>-->
          <!--</td>-->
        </ul>
      <!--</table>-->
    </div>
  </div>
  @endforeach
  
  </div>
    
</div>  
</div>
<div class="container">
        <span>{{$notification->links("pagination::bootstrap-5")}}</span>
    </div>
</section>
@endsection
@section('script')
<script>
    $(document).ready(function(){
        $.ajax({
            url: "notification-state-em",
            method: "GET",
            success: function(data){
                // console.log(data);
                $('.notifi-count').html("")
            }
        })
    });
</script>
@endsection