@extends('dashboard.layouts.app')

@section('title', transWord('طلبات المنتجات'))

@section('content')
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
            </div>
            <div class="content-body">
                <section class="invoice-preview-wrapper">

                    <div class="row invoice-preview">

                        <div class="col-4">
                            <div class="card mb-4">
                                <div class="card-body">
                                    <h4 class="card-title text-primary">{{ transWord('بيانات العميل') }}</h4>
                                    <hr>
                                    <ul class="list-unstyled">
                                        <li><b class="text-primary">{{ transWord('الاسم') }} : </b> {{ $order->user_name }}</li>
                                        <li><b class="text-primary">{{ transWord('الايميل') }} : </b> {{ $order->email }}</li>
                                        <li><b class="text-primary"> {{ transWord('رقم الجوال') }} : </b> {{ $order->phone }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="card mb-4">
                                <div class="card-body">
                                    <h4 class="card-title text-primary">{{ transWord('تفاصيل الطلب') }}</h4>
                                    <hr>
                                    <ul class="list-unstyled">
                                        <li><b class="text-primary"> {{ transWord('رقم الطلب') }} : </b> {{ $order->code }}</li>
                                        <li><b class="text-primary"> {{transWord('تاريخ الطلب')}} : </b> {{ $order->date }}</li>
                                        <li><b class="text-primary">  {{transWord('حالة الطلب')}} : </b>
                                            @if ($order->status === 'pending')
                                                <span class="badge badge-primary">
                                                    {{ transWord($order->status) }}
                                                </span>
                                            @elseif ($order->status === 'accepted')
                                                <span class="badge badge-success">
                                                    {{ transWord($order->status) }}
                                                </span>
                                            @elseif ($order->status === 'rejected')
                                                <span class="badge badge-danger">
                                                    {{ transWord($order->status) }}
                                                </span>
                                            @endif
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="card mb-4">
                                <div class="card-body">
                                    <h4 class="card-title text-primary">{{ transWord('تفاصيل اخرى') }}</h4>
                                    <hr>
                                    <p class="card-text">
                                        {{ $order->desc }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row invoice-preview">
                        <!-- Invoice -->
                        <div class="col-xl-12 col-md-8 col-12">
                            <div class="card invoice-preview-card">


                                <div class="card-body invoice-padding pb-0">
                                    <!-- Invoice Description starts -->
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th class="py-1">#</th>
                                                    <th class="py-1">{{ transWord('اسم المنتج') }}</th>
                                                    <th class="py-1">{{ transWord('الصورة') }}</th>
                                                    <th class="py-1">{{ transWord('اللون') }}</th>
                                                    <th class="py-1">{{ transWord('الكمية') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($order->items as $orderItem)
                                                    <tr>
                                                        <td class="py-1">
                                                            {{ $loop->iteration }}
                                                        </td>
                                                        <td class="py-1">
                                                            {{ $orderItem->product?->name }}
                                                        </td>
                                                        <td class="py-1">
                                                            <img src="{{ $orderItem->product?->images?->last()?->image == null ? asset('storage/product.png') : asset('storage') . '/' . $orderItem->product?->images?->last()?->image }}"
                                                                width="100px" height="100px">
                                                        </td>
                                                        <td class="py-1">
                                                            <span
                                                                style="background-color: {{ $orderItem->color }}; display: inline-block; width: 20px; height: 20px;"></span>
                                                        </td>
                                                        <td class="py-1">
                                                            {{ $orderItem->qty . ' ' . transWord('قطعة') }}
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- Invoice Description ends -->
                                </div>
                            </div>
                        </div>
                        <!-- /Invoice -->
                    </div>
                </section>

            </div>
        </div>
    </div>
    <!-- END: Content-->
    @push('js')
        <script src="{{ asset('dashboard/app-assets/js/custom/custom-delete.js') }}"></script>
    @endpush
@endsection