@extends('layouts.main')

@push('nav_title')
    {{--    <a class="navbar-brand" href="{{route('users')}}">User</a>--}}
    <a class="navbar-brand" href="#">Enzy</a>
@endpush

@section('page_title')



@endsection

@section('profile')

    @include('layouts/profile')

@endsection

@section('side_bar')

    @include('layouts/side_bar')

@endsection

@section('main_div')

        <div class="card_info">

                <h4>Order Details</h4>

                <div class="card_details">
                    <div class="order-header">
                        <div>
                            <p class="order-info">
                                Order no. <a href="#" class="highlight">#{{ $order_details['order_id'] }}</a> from
                                <strong>{{ date('d F, Y \a\t h:i A', strtotime($order_details['created_at'])) }}</strong>
                                <br/>
{{--                                Code: <span class="code">{{ $order_details['cart_group_id'] }}</span>--}}
                            </p>
                        </div>
                    </div>


                    @foreach($order_details['products'] as $product)
                        <div class="product-info">
{{--                            <img src="https://via.placeholder.com/100" alt="Product Image">--}}
                            <img src="{{ url('/../../interior.images.local/'.$product['product_image']) }}">
                            <div>
                                <h2>{{ $product['product_name'] }}</h2>
                                <p>Order was delivered 2 days ago.</p> {{-- you can make this dynamic if you have delivery date --}}
                                <div class="status"> {{ucwords($current_order_status)}}</div> {{-- You can also make status dynamic --}}
                            </div>
                            <a class="contact-btn" href="{{ route('card_detail',['id' => $product['pid']]) }}">View Product</a>

                            {{--                            <button class="contact-btn">CONTACT US</button>--}}
{{--                            <span>Do you like the product? Leave us a review here.</span>--}}
                        </div>
                    @endforeach


                    <div class="lower-section">
                        <div class="track">
                            <h3>Track Order</h3>
                            <div class="track_details">
                                <div class="track-item">
                                    <strong>Order {{ucwords($current_order_status)}}</strong>
                                    <span>{{ date('d F, Y \a\t h:i A', strtotime($order_details['created_at'])) }}</span>
                                </div>
{{--                                <div class="track-item">--}}
{{--                                    <strong>Generate order id #1832412</strong>--}}
{{--                                    <span>22 DEC 7:21 AM</span>--}}
{{--                                </div>--}}
{{--                                <div class="track-item">--}}
{{--                                    <strong>Order transmitted to courier</strong>--}}
{{--                                    <span>22 DEC 8:10 AM</span>--}}
{{--                                </div>--}}
{{--                                <div class="track-item">--}}
{{--                                    <strong>Order delivered</strong>--}}
{{--                                    <span>22 DEC 4:54 PM</span>--}}
{{--                                </div>--}}
                            </div>
                        </div>

                        <div class="summary">
                            <h3>Order Summary</h3>
                            <p>Product Price: <span class="price">${{$order_details['total']}}</span></p>
                            <p>Delivery: <span class="price"></span></p>
                            <p>Taxes: <span class="price"></span></p>
                            <p class="total">Total: <span class="price">${{$order_details['total']}}</span></p>
                        </div>
                    </div>
                </div>

        </div>


        <div class="cart">

            @include('layouts.cart')

        </div>

@endsection