@extends('layouts.master')
@section('content')
<section class="section page-content">
<div class="container">
        @if ($order)
            <div class="row">
                <div class="col-xl-8">
                    <div class="widget widget-categoty mt-0">
                        <div class="widget-heading">Products</div>
                    </div>
                      @foreach ($order->products as $item)
                        <div class="cart-item border p-3 alert rounded-0 alert-dismissible fade show">
                            <div class="row">
                                    <div class="col-md-4">
                                        <div class="product-img-style text-center mb-3 mb-md-0">
                                            <a href="{{ route('product', ['slug' => $item->slug]) }}">
                                                <img class="img-fluid" src="{{ Voyager::image($item->image)}}" alt="{{$item->name}}">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="d-flex justify-content-between align-items-baseline">
                                            <a href="{{ route('product', ['slug' => $item->slug]) }}">
                                            <h5 class="text-dark font-w-600">{{$item->name}}</h5></a>
                                        </div>
                                            <h4 class="font-w-700 text-dark font-secondery mt-10">${{$item->pivot->price}} x ({{$item->pivot->quantity}})</h4>

                                    </div>
                                </div>
                            </div>
                    @endforeach
                </div>
                <div class="col-xl-4 mt-xl-0">
                    <div class="cart-totals ">
                        <h2 class="title">Order Summary</h2>
                        <table>
                            <tbody>
                                <tr class="subtotal">
                                    <th>Subtotal</th>
                                    <td><span class="amount">
                                    $ {{$order->subtotal}}
                                    </span></td>
                                
                                </tr>
                                <tr class="subtotal">
                                    <th>Shipping</th>
                                    <td><span class="amount">${{$order->delivery_fee }}</span></td>
                                </tr>
                                <tr class="total">
                                    <th>Total</th>
                                    <td><strong><span class="amount">$ {{ $order->order_total}}</span></strong></td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>

        @endif
</div>
</section>
@endsection
@push('styles')
    <style>
        .product-item:hover .card-img-top{-webkit-filter: none;filter: none;transform: scale(.99);}
        .item_title{color: #595959;}
        .item_title:hover{text-decoration: none;color: #595959;}
        .cart-totals{float: right;width: 100%;padding: 17px 30px;text-align: center;background-color: #F7F7F7;}
        .cart-totals .title{margin-bottom: 25px;font-weight: 600;line-height: 1.2;margin-top: 0;color: #333333;font-size: 20px;}
        .cart-totals table{width: 100%;margin-bottom: 30px;}
        .cart-totals table tbody tr{font-weight: 700;color: #333333;}
        .cart-totals table tbody tr th{font-size: 15px;padding: 15px 10px;text-align: left;}
        .cart-totals table tbody tr.subtotal td{font-size: 14px;}
        .cart-totals table tbody tr td{padding: 15px 10px;text-align: right;}
        .section{padding-top: 55px;}
    </style>
@endpush()