@extends('adminlayout.mobile_sidebar')
@section('content')
<style>
   .cursor{
   cursor: pointer;
   }
   
   .team-info li{
   font-size: .7900rem !important;
   }
   .margin-top{
        margin-top: 10px;
   }      .track-line {   height: 2px !important;   background-color: #31bd0e;   opacity: 1;   }   .track-line-incomplete {   height: 2px !important;   background-color:grey;   opacity: 1;   }   .dot {   height: 10px;   width: 10px;   margin-left: 3px;   margin-right: 3px;   margin-top: 0px;   background-color: #31bd0e;   border-radius: 50%;   display: inline-block   }   .dot-incomplete {   height: 10px;   width: 10px;   margin-left: 3px;   margin-right: 3px;   margin-top: 0px;   background-color: grey;   border-radius: 50%;   display: inline-block   }   .big-dot {   height: 25px;   width: 25px;   margin-left: 0px;   margin-right: 0px;   margin-top: 0px;   background-color: #31bd0e;   border-radius: 50%;   display: inline-block;   }   .big-dot-incomplete {   height: 25px;   width: 25px;   margin-left: 0px;   margin-right: 0px;   margin-top: 0px;   background-color: grey;   border-radius: 50%;   display: inline-block;   }   .big-dot i {   font-size: 12px;   }   .card-stepper {   z-index: 0   }      .mainTop{	ackground-color: rgb(239, 239, 239);    background-size: cover;    display: flex;    justify-content: center;}.maxWidth {    max-width: 450px;}.mainRoot{	display: flex;    flex-direction: column;    background: #fff;    width: 100%;    min-width: 320px;	min-height: 100%!important;	padding-bottom: 15px;}.sticky-top {    z-index: 1111 !important;}.headerNav {	background: #fff;    opacity: 1;    width: 100%;    display: flex;    justify-content: space-between;	padding: 0.8rem 0.6rem !important;}.boxShadow {    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)!important;}.navLeftText {    color: #111111;}.innerHeadText{	font-size: 16px;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;    display: inline-block;    width: 86%;    vertical-align: middle;}.backIcon {    margin-right: 15px;}.backIcon img{	width: 21px;}.m-t-10{	margin-top: 10px;}.mobDtable .table th, .mobDtable .table td {    padding: 0.5rem;    vertical-align: middle;    font-size: 14px;    color: #111111;}
</style>
      <div class="nk-content-body">		<div class="mainTop">	<div class="mainRoot maxWidth">		<div class="navTop sticky-top">			<nav id="" class="navbar navbar-expand-lg headerNav boxShadow">				<div class="navLeftText">					<a class="backIcon" href="{{ url()->previous() }}"><span><img src="{{url('/assets/images/mob-dash/back-arrow.png')}}"></span></a> <span class="innerHeadText">Check Application</span>				</div>							</nav>		</div>		<div class="container">
         <div class="nk-block-head nk-block-head-sm m-t-10">
            <div class="nk-block-between">
               <div class="nk-block-head-content">
               
                  <div class="nk-block-des text-soft">
                     <!-- @if($errors->any())
                     <p class="text-danger">
                        {{ implode('', $errors->all(':message')) }}
                     </p>
                     @endif -->
                  </div>
               </div>
               <!-- .nk-block-head-content -->
            </div>
            <!-- .nk-block-between -->
         </div>
         <!-- .nk-block-head -->

         <section>
              <div class="py-5 h-100">
                <div class="row d-flex justify-content-center align-items-center h-100">
                  <div class="col">
                    <div class="card card-stepper" style="border-radius: 10px;">
                      <div class="card-body p-4">

                        <div class="d-flex justify-content-between align-items-center">
                          <div class="d-flex flex-column">
                            <span class="lead fw-normal">Email: {{ $data->email }}</span>
                            <span class="text-muted small">Applied: {{ $data->created_at->diffForHumans(); }}</span>
                          </div>
                          {{-- <div>
                            <button class="btn btn-outline-primary" type="button">Track order details</button>
                          </div> --}}
                        </div>
                        <hr class="my-4">

                        <div class="d-flex flex-row justify-content-between align-items-center align-content-center">
                          <span class="dot"></span>
                          <hr class="flex-fill track-line{{$data->status < 2 ? '-incomplete' : ''}}">
                                    <span class="dot{{$data->status < 2 ? '-incomplete' : ''}}"></span>
                          <hr class="flex-fill track-line{{$data->status < 3 ? '-incomplete' : ''}}">
                                    <span class="dot{{$data->status < 3 ? '-incomplete' : ''}}"></span>
                          <hr class="flex-fill track-line{{$data->status < 4 ? '-incomplete' : ''}}">
                          <span
                            class="d-flex justify-content-center align-items-center big-dot{{$data->status < 4 ? '-incomplete' : ''}} dot{{$data->status < 4 ? '-incomplete' : ''}}">
                            <i class="fa fa-check text-white"></i></span>
                        </div>

                        <div class="d-flex flex-row justify-content-between align-items-center">
                          <div class="d-flex flex-column align-items-start"><span>Applied</span>
                          </div>
                          <div class="d-flex flex-column justify-content-center"><span>Viewed
                              placed</span></div>
                          <div class="d-flex flex-column justify-content-center align-items-center"><span>In Process</span></div>
                          <div class="d-flex flex-column align-items-end"><span>Completed</span></div>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
         <!-- .nk-block -->
      </div></div>
   </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@endsection