@extends('layouts.homeapp')
@section('content')

<section id="hero" class="shadow pb-5 mt-5">
  <div class="container">

    <h1 class="inner-page-title">Track My Order</h1>

    @if($Myorders)
      @foreach($Myorders as $Myorder)
      <div class="card border border-brandcolor mb-3 mt-4" style="width: 100%;">
        <div class="card-body">

          <h5 class="card-title font-weight-bold mob-align-center">Order No. {{$Myorder->id}}</h5>
          <h6 class="card-subtitle mb-3 mob-align-center">{{$Myorder->status->title}}</h6>
          <h6 class="card-subtitle mb-2 mob-align-center">Order Date:</span> {{date_format(date_create($Myorder->created_at),'d-m-Y')}}</h6>
          
          <div class="steps d-flex flex-wrap flex-sm-nowrap justify-content-between mt-5 mb-3">
            <div class="step @if($Myorder->status->id >= 2) completed @endif">
              <div class="step-icon-wrap">
                <div class="step-icon"><i class="pe-7s-cart"></i></div>
              </div>
              <h4 class="step-title">Confirmed Order</h4>
            </div>
            <div class="step @if($Myorder->status->id >= 3) completed @endif">
              <div class="step-icon-wrap">
                <div class="step-icon"><i class="pe-7s-car"></i></div>
              </div>
              <h4 class="step-title">Order Picked-Up</h4>
            </div>
            <div class="step @if($Myorder->status->id >= 5) completed @endif">
              <div class="step-icon-wrap">
                <div class="step-icon"><i class="pe-7s-config"></i></div>
              </div>
              <h4 class="step-title">Processing Order</h4>
            </div>
            <div class="step @if($Myorder->status->id >= 6) completed @endif">
              <div class="step-icon-wrap">
                <div class="step-icon"><i class="pe-7s-car"></i></div>
              </div>
              <h4 class="step-title">Order Dispatched</h4>
            </div>
            <div class="step @if($Myorder->status->id >= 7) completed @endif">
              <div class="step-icon-wrap">
                <div class="step-icon"><i class="pe-7s-home"></i></div>
              </div>
              <h4 class="step-title">Order Delivered</h4>
            </div>
          </div>

          <div class="track-view-btn">
            <a href="{{route('productDetails',$Myorder->id)}}"><button type="submit" class="btn btn-brandcolor">View</button></a>
          </div>

        </div>
      </div> 
      @endforeach
    @endif
  
  </div>
</section>


@endsection