@extends('dashboards.vendor.index')

@section('content')
    <div class="col-lg-9 layout">
        <h2 class="mainHeadig">Order Details</h2>
        <div class="profileSetting totalOrder">

            <div class="recentTable invoiceDetail">
                <div class="invoiceDtl">
                    <h2>Order</h2>
                </div>
                <div class="orderDetail">
                    <div class="orderdtlOne">
                        <div>
                            <ul>
                                <li><strong>Deliver TO:
                                    </strong></li>
                                <li>
                                    @if($order->user->name)Name: {{ $order->user->name ?? '' }}<br> @endif
                                    @if($order->shipping_address)Shipping Address: {{ $order->shipping_address ?? '' }}
                                    <br> @endif
                                    @if($order->user->phone) Phone: {{ $order->user->phone ?? '' }} @endif
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li><strong>Order No:
                                    </strong><span>{{ $order->order_number ?? '' }}
                                    </span></li>
                                {{--                                <li><strong>Account:</strong><span>0000 12345 678900</span></li>--}}
                                <li><strong>Date:</strong><span>{{ $user->created_at->format('y-m-d') }}</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="table-responsive-lg">
                        <table class="table">
                            <thead class="thead-dark">
                            <tr>
                                <th scope="col">SL</th>
                                <th scope="col">PRODUCT NAME</th>
                                <th scope="col">SIZE</th>
                                <th scope="col">COLOR</th>
                                <th scope="col">PRICE</th>
                                <th scope="col">QTY</th>
                                <th scope="col">TOTAL</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($order->details as $index => $item)
                                <tr class="gray">
                                    <td>{{$index + 1 ?? ''}}</td>
                                    <td>{{ $item->product->name ?? '' }}</td>
                                    <td>{{ $item->size->name ?? 'No Size' }}</td>
                                    <td class="d-flex justify-content-center pt-4">
                                        @if(isset($item->color))
                                            <div class="align-items-end"
                                                 style="width: 20px; height: 20px; background-color: {{ $item->color }};"></div>
                                        @else
                                            No Color
                                        @endif
                                    </td>
                                    <td>${{ $item->unit_price ?? '' }}</td>
                                    <td>{{ $item->quantity ?? '' }}</td>
                                    <td>${{ $item->subtotal ?? '' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7">Something went wrong!</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="paymentInfo">
                        <div class="mt-5">
                            {{--                            <ul class="pymntList">--}}
                            {{--                                <li><strong>Payment Info:</strong></li>--}}
                            {{--                                <li>--}}
                            {{--                                    Account: 1234567890<br>--}}
                            {{--                                    A/C Name:<br>--}}
                            {{--                                    Bank Details: Add your details--}}
                            {{--                                </li>--}}
                            {{--                            </ul>--}}
                            <ul>
                                <li><strong>SUB TOTAL:</strong><span>${{ $order->total_price ?? 0.00 }}</span></li>
                                <li><strong>DISCOUNT:</strong><span>${{ $order->discount ?? 0.00 }}</span></li>

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

                                <li class="total">TOTAL:
                                    <span>${{isset($order->total_amount_after_discount) ? $order->total_amount_after_discount : $order->total_price}}</span>
                                </li>

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

                <div class="invoiceFoter">
                    <ul>
                        <li><a href="tel:+11234567890"><img src="{{ asset('dashboard-assets/images/calicon.png') }}"
                                                            class="img-fluid"
                                                            alt="img"><span>+1 (123) 456 7890</span></a>
                        </li>
                        <li><a href="mailto:info@youremail.com"><img
                                    src="{{ asset('dashboard-assets/images/email-icon.png') }}"
                                    class="img-fluid" alt="img"><span>info@youremail.com</span></a>
                        </li>
                        <li><a href="#"><img src="{{ asset('dashboard-assets/images/loc-icon.png') }}" class="img-fluid"
                                             alt="img"><span>Space
                                    Needle 000 Broad St, Seattle's</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- section css end -->
    </div>
    </div>
    </section>

@endsection