@extends('backend.layout')
@section('title', $title)

@section('headerStyles')
<!doctype html>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  <style>
     *{margin:0px; padding:0px;}
	 body{font-family: 'Poppins', sans-serif;}
.f_box {
    text-align: center;
    width: 21%;
    float: left;
    position: relative;
    color: #fff;
    padding: 8px;
    background: #8f24f9;
	margin-right: 3%;
	height:126px;
    border-radius: 6px;
	font-size: 12px;
    line-height: 104px;
}
.f_box1 {
    text-align: center;
    width: 21%;
    float: left;
    position: relative;
    color: #fff;
    padding: 8px;
    background: #8f24f9;
	margin-right: 3%;
	height:126px;
    border-radius: 6px;
	font-size: 12px;
    line-height: 104px;
}
.f_box2 {
    text-align: center;
    width: 21%;
    float: left;
    position: relative;
    color: #fff;
    padding: 8px;
    background: #8f24f9;
	margin-right: 3%;
	height:126px;
    border-radius: 6px;
	font-size: 12px;
    line-height: 104px;
}
.f_box3 {
    text-align: center;
    width: 21%;
    float: left;
    position: relative;
    color: #fff;
    padding: 8px;
    background: #8f24f9;
	height:126px;
	margin-right: 3%;
    border-radius: 6px;
	font-size: 12px;
    line-height: 104px;
}
.tra_ime {
    width: 130px;
}
.qw_p {
    margin-top: 15px;
}
.si_tick {
    top: 2px;
    width: 18px;
    position: absolute;
}
.dot_d {
    clear: both;
    border-bottom: 3px dashed #e0e0e0;
}
.po_icon {
    bottom: -18px;
    position: absolute;
    right: -23px;
}
.po_icon1 {
    width: 99px;
    bottom: -37px;
    position: absolute;
    right: -37px;
}

.navbar-default {
    width: 100% !important;
     background-color: #272c33 !important;
     border-color: #272c33 !important;
}
aside.left-panel {
    padding: 0 0px;

}
.navbar .navbar-nav li > a .menu-icon {
    width: 16px;
}



@media screen and (min-width:320px) and (max-width:767px) {
   .f_box{width:100%;}
   .f_box1{width:100%; margin-top:0px;}
   .f_box2{width:100%; margin-top:0px;}
   .f_box3{width:100%; margin-top:0px;}	
   .r_qw {
    margin: auto;
    text-align: center;
}
.si_tick{right:0px;}

}
  </style>
  
@endsection

@section('content')
    {!! getBreadcrumbs(
               array(
               'dashboard'=>'Home',

               ''=>'Emails-Notifications Tracking'
               ),'Emails-Notifications Tracking'
            ) !!}

   <div class="container">
   
   <div class="col-md-12 to_srl">
   @if(is_array($trackingInfo) && count($trackingInfo)>0)
      @foreach($trackingInfo as $key =>$value)
        <div class="col-md-12 qw_p">
         <div class="col-md-9 l_qw">
            <p class="f_box">{{ $value->first_name.' '.$value->last_name}}<img src="{{ asset('images/tracking_user.png') }}" class="po_icon"></p>
            <p class="f_box1">{{ $value->email }} @if($value->flag==1 || $value->flag==2)<span class="po_qa"><img src="{{ asset('images/tick.png') }}" class="si_tick"></span>@endif
             <img src="{{ asset('images/tracking_email.png') }}" class="po_icon1">
            </p>
            <p class="f_box2">+{{ $value->phone }} @if($value->flag==1 || $value->flag==3)<span class="po_qa"><img src="{{ asset('images/tick.png') }}" class="si_tick"></span> @endif
             <img src="{{ asset('images/tracking_mobile.png') }}" class="po_icon">
            </p>
            <p class="f_box3">{{ date('d-m-Y h:i', strtotime($value->created_at)) }} (IST)
             <img src="{{ asset('images/tracking_time.png') }}" class="po_icon">
            </p>
         </div>
         <div class="col-md-3 r_qw">
            <img src="{{ asset('images/tra_img.png') }}" class="tra_ime">
         </div>
      </div>
	  <div class="dot_d"></div>
      @endforeach
	@endif
      
   </div>
       
   </div>

@endsection
@section('footerScripts')
@endsection
