@extends('layouts.backend.app')

@section('header-script')
<link rel="stylesheet" href="{{ asset('css/reset.css') }}"> <!-- CSS reset -->
<link rel="stylesheet" href="{{ asset('css/style-timeline.css')}}"> <!-- Resource style -->
<script src="{{ asset('js/modernizr.js') }}"></script> <!-- Modernizr -->
@stop

@section('footer-script')
<script src="{{ asset('js/jquery.mobile.custom.min.js')}}"></script>
<script src="{{ asset('js/main-timeline.js')}}"></script> <!-- Resource jQuery -->
@stop

@section("content")


    <div class="page page-shop-single-order">

        <div class="pageheader">

            <h2>TimeLine de la commande #{{--$prospect->number_n--}}</h2>

            <div class="page-bar">

                <ul class="page-breadcrumb">
                    <li>
                        <a href="{{route('spaceDashboard')}}"><i class="fa fa-home"></i> AROLI ASSURANCE</a>
                    </li>
                    <li>
                        <a href="#">Commande</a>
                    </li>
                    <li>
                        <a href="">Timeline</a>
                    </li>
                </ul>

            </div>

        </div>


                <!-- tile -->
                <section class="tile">

                    <!-- tile header -->
                    <div class="tile-header dvd dvd-btm">
                        <h1 class="custom-font"><strong>Timeline de la commande</strong></h1>
                    </div>
                    <!-- /tile header -->

                    <!-- tile body -->
                    <div class="tile-body">
                            {{--<h1>Statut Actuel : <span class="text-uppercase {{($prospect->status==-1)?'text-danger':'text-success'}} mt-0 mb-20">{{ get_commande_status_by_text($prospect->status) }}</span></h1>--}}
                      
                        <section class="cd-horizontal-timeline">
                            <div class="timeline">
                                <div class="events-wrapper">
                                    <div class="events">
                                        <ol>
                                                                                        @foreach($order_status as $status)
                                            <li><a href="#0" data-date="01/01/{{$year}}" class="{{($status->order_status==$status->current_status)? 'selected' : ''}}">
                                            {{ get_commande_status_by_text($status->order_status) }}</a></li>
                                                                                        @endforeach
                                        </ol>

                                        <span class="filling-line" aria-hidden="true"></span>
                                    </div> <!-- .events -->
                                </div> <!-- .events-wrapper -->
                                    
                                <ul class="cd-timeline-navigation">
                                    <li><a href="#0" class="prev inactive">Prev</a></li>
                                    <li><a href="#0" class="next">Next</a></li>
                                </ul> <!-- .cd-timeline-navigation -->
                            </div> <!-- .timeline -->

                            <div class="events-content text-center">
                                <ol>
                                                                        @foreach($order_status as $status)
                                    <li class="{{($status->order_status==$status->current_status)? 'selected' : ''}}" data-date="01/01/{{$year}}">
                                        <h2>{{ get_commande_status_by_text($status->order_status) }}</h2>
                                        <em>{{ date('d/m/Y H:i:s', strtotime($status->created_at))}}</em>
                                        <p> Acteur : {{$status->firstname.' '.$status->lastname}}</p>
                                    </li>
                                                                        @endforeach
                                </ol>
                            </div> <!-- .events-content -->
                        </section>
                    </div>
                    <!-- /tile body -->

                </section>
                <!-- /tile -->
    </div>

@stop