@extends('student.layouts.layout')
@section('content')
    <div class="pxp-dashboard-content-details">
       <h4>Dashboard</h4>

        <p class="pxp-text-light">Welcome to Student</p>
        
        <div class="row mt-4 mt-lg-5 align-items-center">
            <div class="col-sm-6 col-xxl-3">
                <a href="{{ route('student.profile') }}">
                    <div class="pxp-dashboard-stats-card bg-primary bg-opacity-10 mb-3 mb-xxl-0">
                        <div class="pxp-dashboard-stats-card-icon text-primary">
                            <span class="fa fa-arrows"></span>
                        </div>
                        <div class="pxp-dashboard-stats-card-info">
                            <!-- <div class="pxp-dashboard-stats-card-info-number">13</div> -->
                            <div class="pxp-dashboard-stats-card-info-text pxp-text-light " style="color:black">Check Eligiblity</div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-sm-6 col-xxl-3" >
                <a href="{{ route('student.profile') }}">
                    <div class="pxp-dashboard-stats-card bg-success bg-opacity-10 mb-3 mb-xxl-0">
                        <div class="pxp-dashboard-stats-card-icon text-success">
                            <span class="fa fa-user-circle-o"></span>
                        </div>
                        <div class="pxp-dashboard-stats-card-info">
                            <!-- <div class="pxp-dashboard-stats-card-info-number">312</div> -->
                            <div class="pxp-dashboard-stats-card-info-text pxp-text-light" style="color:black">Complete Profile</div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-sm-6 col-xxl-3">
                <a href="{{ route('student.profile') }}">
                    <div class="pxp-dashboard-stats-card bg-warning bg-opacity-10 mb-3 mb-xxl-0">
                        <div class="pxp-dashboard-stats-card-icon text-warning">
                            <span class="fa fa-tasks"></span>
                        </div>
                        <div class="pxp-dashboard-stats-card-info">
                            <!-- <div class="pxp-dashboard-stats-card-info-number">14</div> -->
                            <div class="pxp-dashboard-stats-card-info-text pxp-text-light" style="color:black">Renaming Tasks</div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-xxl-3">
                <a href="{{ route('student.application.list') }}">
                    <div class="pxp-dashboard-stats-card bg-danger bg-opacity-10 mb-3 mb-xxl-0">
                        <div class="pxp-dashboard-stats-card-icon text-danger">
                            <span class="fa fa-file-text-o"></span>
                        </div>
                        <div class="pxp-dashboard-stats-card-info">
                            <!-- <div class="pxp-dashboard-stats-card-info-number">5</div> -->
                            <div class="pxp-dashboard-stats-card-info-text pxp-text-light" style="color:black">Total Application</div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        
        <!--<div class="mt-4 mt-lg-5">-->
        <!--    <h4>Total Job Apllications</h4>-->
        <!--    <div class="row">-->
        <!--        <div class="table-responsive">-->
        <!--            <table class="table table table-hover align-middle dataTable no-footer dtr-inline">-->
        <!--                <thead>-->
        <!--                    <tr>-->
        <!--                        <th> Status</th>-->
        <!--                        <th> App # </th>-->
        <!--                        <th> School </th>-->
        <!--                        <th> Program </th>-->
        <!--                        <th> ESL Start Date </th>-->
        <!--                        <th> Start Date</th>-->
        <!--                        <th> Applied Date</th>-->
        <!--                        <th> Fees</th>-->
        <!--                    </tr>-->
        <!--                </thead>-->
        <!--                <tbody>-->
        <!--                    <tr>-->
        <!--                        <td colspan="8" class="text-center">No Data Found</td>-->
        <!--                    </tr>-->
        <!--                </tbody>-->
        <!--            </table>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</div>-->
        
        <style type="text/css">
            @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600');
                
              
                .timeline{
                  position:relative;
                  
                  width:1000px;
                  box-sizing:border-box;
                }
                .timeline:before{
                  content:'';
                  position:absolute;
                  left:50%;
                  width:2px;
                  height:100%;
                  background:#002745;
                }
                .timeline ul{
                  padding:0;
                  margin:0;
                }
                .timeline ul li{
                  list-style:none;
                  position:relative;
                  width:50%;
                  padding:20px 40px;
                  box-sizing:border-box;
                }
                .timeline ul li:nth-child(odd){
                  float:left;
                  text-align:right;
                  clear:both;
                }
                .timeline ul li:nth-child(even){
                  float:right;
                  text-align:left;
                  clear:both;
                }
                .content{
                  padding-bottom:20px;
                }
                .timeline ul li:nth-child(odd):before
                {
                  content:'';
                  position:absolute;
                  width:10px;
                  height:10px;
                  top:24px;
                  right:-6px;
                  background:#fff0d9;
                  border-radius:50%;
                  box-shadow:0 0 0 3px #002745;
                }
                .timeline ul li:nth-child(even):before
                {
                  content:'';
                  position:absolute;
                  width:10px;
                  height:10px;
                  top:24px;
                  left:-4px;
                  background:#fff0d9;
                  border-radius:50%;
                  box-shadow:0 0 0 3px #002745;
                }
                .timeline ul li h3{
                  padding:0;
                  margin:0;
                  color:#002745;
                  font-weight:600;
                }
                .timeline ul li p{
                  margin:10px 0 0;
                  padding:0;
                }
                .timeline ul li .time h4{
                  margin:0;
                  padding:0;
                  font-size:14px;
                }
                .timeline ul li:nth-child(odd) .time
                {
                  position:absolute;
                  top:12px;
                  right:-165px;
                  margin:0;
                  padding:8px 16px;
                  background:#002745;
                  color:#fff;
                  border-radius:18px;
                  box-shadow:0 0 0 3px #002745;
                }

                .timeline ul li:nth-child(even) .time
                {
                  position:absolute;
                  top:12px;
                  left:-165px;
                  margin:0;
                  padding:8px 16px;
                  background:#002745;
                  color:#fff;
                  border-radius:18px;
                  box-shadow:0 0 0 3px #002745;
                }
                @media(max-width:1000px)
                {
                  .timeline{
                    width:100%;
                  }
                }
                @media(max-width:767px){
                  .timeline{
                    width:100%;
                    padding-bottom:0;
                  }
                  h1{
                    font-size:40px;
                    text-align:center;
                  }
                  .timeline:before{
                    left:20px;
                    height:100%;
                  }
                  .timeline ul li:nth-child(odd),
                  .timeline ul li:nth-child(even)
                  {
                    width:100%;
                    text-align:left;
                    padding-left:50px;
                    padding-bottom:50px;
                  }
                  .timeline ul li:nth-child(odd):before,
                  .timeline ul li:nth-child(even):before
                  {
                    top:-18px;
                    left:16px;
                  }
                  .timeline ul li:nth-child(odd) .time,
                  .timeline ul li:nth-child(even) .time{
                    top:-30px;
                    left:50px;
                    right:inherit;
                  }
                }
        </style>

        <div class="mt-4 mt-lg-5">
            <h4>Applying Timeline</h4>
            <div class="timeline">
                <ul>
                  <li>
                    <div class="content">
                      <h4>Pay Application Fee</h4>
                      <div class="logo">
                        <img src="https://uniwolc.com/assets/images/University_of_Birmingham_Logo.png" class="img-fluid" alt="" style="width:100px;">
                        <p>Postgraduate Diploma - Nuclear Decommissioning and Waste Management</p>
                      </div>
                      
                      <br>
                    </div>
                    <div class="time">
                      <h4>1</h4>
                    </div>
                  </li>
                  
                  <li>
                    <div class="content">
                      <h4>Prepare Applications</h4>
                      <p></p>
                    </div>
                    <div class="time">
                      <h4>2</h4>
                    </div>
                  </li>
                  
                  <li>
                    <div class="content">
                      <h4>Get Result</h4>
                      <p></p>
                    </div>
                    <div class="time">
                      <h4>3</h4>
                    </div>
                  </li>
                  
                  <li>
                    <div class="content">
                      <h4>Finalize Visa & Admission</h4>
                      <p></p>
                    </div>
                    <div class="time">
                      <h4>4</h4>
                    </div>
                  </li>
                  
                  <li>
                    <div class="content">
                      <h4>Ready to Enroll</h4>
                      <p> </p>
                    </div>
                    <div class="time">
                      <h4>5</h4>
                    </div>
                  </li>
                  
                  <li>
                    <div class="content">
                      <h4>Enrollment Confirmed</h4>
                      <p></p>
                    </div>
                    <div class="time">
                      <h4>6</h4>
                    </div>
                  </li>
                  
                  
                  
                  
                  
                  
                  
                  
                 
                  <div style="clear:both;"></div>
                </ul>
            </div>
        </div>
        
        
             <div class="mt-4 mt-lg-5">
            <h4>Need Help Applying?</h4>
            <div class="card" >
                <div class="card-body mt-3">
                    <div class="row">
                        
                        <div class="col-md-4">
                            <a href="http://localhost/uniwolc/public/index">
                                <img src="https://uniwolc.com/assets/images/logo.png" style="height: 44px;">
                            </a>
                        </div>

                        <div class="col-md-4" >
                            <ul class="list-unstyled">

                                <li class="">
                                    <a href="mailto:info@uniwolc.com" style="color:#002745 !important">
                                        <span class="fa fa-envelope-o"></span>&nbsp;&nbsp;
                                        info@uniwolc.com
                                    </a>
                                </li>   
                                
                                <li class="">
                                    <a href="tel:+971 55 317 0735" style="color:#002745 !important"><span class="fa fa-phone"></span>&nbsp;&nbsp; Toll Free +971 55 317 0735</a>
                                </li>
                            </ul>
                        </div>
                        
                        <div class="col-md-4">
                            <ul class="list-unstyled">

                                <li class="">
                                    <a href="javascript:void(0)" style="color:#002745 !important">
                                        <span class="fa fa-question-circle"></span>&nbsp;&nbsp; FAQ
                                    </a>
                                </li>   
                                
                                <li class="">
                                    <a href="{{ route('blog') }}" style="color:#002745 !important">
                                        <span class="fa fa-newspaper-o"></span>&nbsp;&nbsp; Blog</a>
                                </li>
                            </ul>
                        </div>
                        
                        
                    </div>
                </div>
            </div>

        </div>
        
    </div>

@endsection

@section('pagescriptcode')


@endsection