@extends('layouts.customer')
<!-- Tab 2 -->
@push('head-scripts')
<link rel="icon" href="{{ asset('/favicon.ico') }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<!--<link rel="stylesheet" href="{{ asset('/css1/responsive.css')}}">-->
<link rel="stylesheet" href="{{ asset('/css1/app.css') }}">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<style>
.rb-container ul.rb li.current::before {
  border-color: green;
}
</style>
@endpush
@section('content')
<div class="trust">
    <div class="tab-panel" id="ex2-tabs-2" role="tabpanel" aria-labelledby="ex2-tab-2">

        <div class="container">
            <div class="row content">
                <h4 class="content_title"><i class="fas fa-route"></i> HISTORY</h4>
                <div class="container">
                    <div class="rb-container">
                        <ul class="rb">
                            @if(!is_null($orders))
                                @foreach($orders as $order)
                                <li @class(['rb-item', 'current' => $order->pivot->current === 1]) ng-repeat="itembx">
                                    <h5>{{ $order->pivot->orderStatuses->order_status_name }}</h5>
                                    <div class="timestamp">{{ $order->pivot->created_at }}</div>
                                    {{-- <div class="item-title">{{ $order->pivot->remarks }}</div> --}}
                                </li>
                                @endforeach
                            @else
                                <p>No data available</p>
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
      integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
      crossorigin="anonymous"></script>
@endsection