@extends('adminlayout.admin')
@section('content')
<style>
   .cursor{
   cursor: pointer;
   }
   .nk-content-fluid{
   margin-top: 65px;
   position: relative;
   }
   .team-info li{
   font-size: .7900rem !important;
   }
   .margin-top{
        margin-top: 10px;
   }
</style>
<div class="nk-content nk-content-fluid">
   <div class="container-xl wide-lg">
      <div class="nk-content-body">
         <div class="nk-block-head nk-block-head-sm">
            <div class="nk-block-between">
               <div class="nk-block-head-content">
                  <h3 class="nk-block-title page-title">Check Application</h3>
                  <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 -->
         <style type="text/css">
            .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
               }
         </style>
         <section>
              <div class="container 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@endsection