@extends('layouts.guest')
    @section('content')
    
	<!-- Start of Breadcrumb section
	============================================= -->
	<section id="ft-breadcrumb" class="ft-breadcrumb-section position-relative" data-background="https://res.cloudinary.com/dzxyvdq14/image/upload/v1645582379/33318-parcel-delivery-tracking.gif">
		<span class="background_overlay"></span>
		<span class="design-shape position-absolute"><img src="https://res.cloudinary.com/dzxyvdq14/image/upload/v1645444795/tmd-sh.png" alt=""></span>
		<div class="container">
			<div class="ft-breadcrumb-content headline text-center position-relative">
				<h2>Tracking ----> {{$tracker->tracking_id}}</h2>
				<div class="ft-breadcrumb-list ul-li">
					<ul>
						<li><a href="{{url('/')}}">Home</a></li>
						<li>Track Order</li>
					</ul>
				</div>
			</div>
		</div>
	</section>	
	<!-- End of Breadcrumb section
		============================================= -->
    <div class="container">
    
    <article class="card shadow-sm mt-4 mb-4">
        <header class="card-header"> My Orders / Tracking </header>
        <div class="card-body">
        @if (session('error'))
				<div class="alert alert-danger">
					{{ session('error') }}
				</div>
			@endif
			@if (session('success'))
				<div class="alert alert-success">
					{{ session('success') }}
				</div>
			@endif
         <div class="ft-contact-page-text-wrapper">
                
                <div class="ft-contact-page-contact-info">
                    <div class="card">
                        <div class="mapouter"><div class="gmap_canvas"><iframe class="gmap_iframe" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=600&amp;height=400&amp;hl=en&amp;q={{$tracker->current_location}}&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe><a href="https://embed-googlemap.com">google maps embed</a></div><style>.mapouter{position:relative;text-align:right;width:100%;height:400px;}.gmap_canvas {overflow:hidden;background:none!important;width:100%;height:400px;}.gmap_iframe {width:100%!important;height:400px!important;}</style></div>
                        </div>

                    <div class="ft-contact-cta-items d-flex">
                        <div class="ft-contact-cta-icon d-flex align-items-center justify-content-center">
                            <i class="fal fa-map-pin"></i>
                        </div>
                        <div class="ft-contact-cta-text headline pera-content">
                            <h3>Current Location</h3>
                            <p>{{$tracker->current_location}}</p>
                        </div>

                        
                    </div>
                    <div class="ft-contact-cta-items d-flex">
                        <div class="ft-contact-cta-icon d-flex align-items-center justify-content-center">
                            <i class="fal fa-map-marked"></i>
                        </div>
                        <div class="ft-contact-cta-text headline pera-content">
                            <h3>Origin Address</h3>
                            <p>{{$tracker->origin_address}}</p>
                        </div>
                    </div>
                    <div class="ft-contact-cta-items d-flex">
                        <div class="ft-contact-cta-icon d-flex align-items-center justify-content-center">
                            <i class="fal fa-map-marker-alt"></i>
                        </div>
                        <div class="ft-contact-cta-text headline pera-content">
                            <h3>Destination Address</h3>
                            <p>{{$tracker->destination_address}}</p>
                        </div>
                    </div>
                    <div class="ft-contact-cta-items d-flex">
                        <div class="ft-contact-cta-icon d-flex align-items-center justify-content-center">
                            
                           <i class="fa fa-fingerprint"></i>
                        </div>
                        <div class="ft-contact-cta-text headline pera-content">
                            <h3>Tracking ID</h3>
                            <p>{{$tracker->tracking_id}}</p>
                        </div>
                    </div>                  
                </div>
            </div>
            <h6>Order ID: {{$tracker->order_id}}</h6>
            <article class="card">
                <div class="card-body row">
                    <div class="col"> <strong>Estimated Delivery time:</strong> <br>{{$tracker->estimated_delivery_time}} </div>
                    <div class="col"> <strong>Shipping BY:</strong> <br> {{$tracker->shipping_by}}, | <i class="fa fa-phone"></i> +{{$tracker->shipping_phone}} </div>
                    <div class="col"> <strong>Status:</strong> <br> {{$tracker->current_status}} </div>
                    <div class="col"> <strong>Tracking ID#:</strong> <br> {{$tracker->tracking_id}} </div>
                </div>
            </article>
            <div class="track mb-8">
                @if ($tracker->current_status == $tracker->status_1)
                    <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">{{$tracker->status_1}}</span> </div>
                    <div class="step"> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text"> {{$tracker->status_2}}</span> </div>
                    <div class="step"> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> {{$tracker->status_3}} </span> </div>
                    <div class="step"> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">{{$tracker->status_4}}</span> </div>
                @endif
                @if ($tracker->current_status == $tracker->status_2)
                    <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">{{$tracker->status_1}}</span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text"> {{$tracker->status_2}}</span> </div>
                    <div class="step"> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> {{$tracker->status_3}} </span> </div>
                    <div class="step"> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">{{$tracker->status_4}}</span> </div>
                @endif
                @if ($tracker->current_status == $tracker->status_3)
                    <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">{{$tracker->status_1}}</span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text"> {{$tracker->status_2}}</span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> {{$tracker->status_3}} </span> </div>
                    <div class="step"> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">{{$tracker->status_4}}</span> </div>
                @endif
                @if ($tracker->current_status == $tracker->status_4)
                    <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">{{$tracker->status_1}}</span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text"> {{$tracker->status_2}}</span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> {{$tracker->status_3}} </span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">{{$tracker->status_4}}</span> </div>
                @endif
            </div>
            
           <hr/>
            <div class="container mt-8">
             <ul class="row">
                <li class="col-md-12">
                    <figure class="itemside mb-3 mt-8">
                        <div class="aside"><img src="{{$tracker->product_image}}" class="img-sm border"></div>
                        <figcaption class="info align-self-center">
                            <p class="title">{{$tracker->product_description}}</p> <span class="text-muted">{{$tracker->product_price}}</span>
                        </figcaption>
                    </figure>
                </li>               
            </ul>
            </div>
             <div class="ft-contact-cta-items d-flex">
                <div class="ft-contact-cta-icon d-flex align-items-center justify-content-center">
                    <i class="fa fa-info-circle"></i>
                </div>
                <div class="ft-contact-cta-text headline pera-content">
                    <h3>Important Notifications</h3>
                    <p>
                    {{$tracker->important_notification}}
                    </p>
                </div>
            </div>    
            <hr> <a href="{{url('/tracking')}}" class="btn btn-warning text-white" data-abc="true"> <i class="fa fa-chevron-left"></i> Track again</a>
            <span class="float-right">
                <span class="d-block">scan for code </span>     
                <span class="d-block">{!! QrCode::size(100)->generate($tracker->tracking_id); !!}</span>          
            </span>
        </div>
    </article>
</div>
    @endsection