@extends('../backend/layout/' . $layout)

@section('subhead')
    <title>Order Detail</title>
@endsection

@section('subcontent')
    <div class="intro-y flex flex-col sm:flex-row items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Order Details</h2>
        <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
        </div>
    </div>
    <div class="intro-y grid grid-cols-12 gap-5">
        <div class="intro-y box overflow-hidden mt-5 lg:col-span-8">
            <div class="border-b border-slate-200/60 dark:border-darkmode-400 text-center sm:text-left">
                <div class="flex px-5 py-10 sm:px-20 justify-between">
                    <div>
                        <div class="text-primary font-semibold text-3xl">ORDER</div>
                        <div class="mt-2">
                            Order No. <span class="font-medium">{{ $order->order_no }}</span>
                        </div>
                        <div class="mt-1">{{ Helper::dateFormat($order->created_at) }}</div>
                    </div>
                    <div>
                        <div class="text-lg font-medium text-primary mt-2">{{ $order->customer->full_name }}</div>
                        <div class="mt-1">{{ $order->customer->email }}</div>
                        <div class="mt-1">{{ $order->billingAddress->phone }}</div>
                    </div>
                </div>
                <div class="flex flex-col lg:flex-row px-5 sm:px-20 pt-10 pb-10 sm:pb-20 justify-between capitalize">
                    <div>
                        <div class="text-base font-bold">Billing Address</div>
                        <div class="text-lg font-medium text-primary mt-2">{{ $order->billingAddress->full_name }}</div>
                        <div class="mt-1">{{ $order->billingAddress->full_address }}</div>
                        <div class="mt-1">{{ $order->billingAddress->phone }}</div>
                    </div>
                    <div class="mt-10 lg:mt-0">
                        <div class="text-base font-bold">Shipping Address</div>
                        <div class="text-lg font-medium text-primary mt-2">{{ $order->shippingAddress->full_name }}</div>
                        <div class="mt-1">{{ $order->shippingAddress->full_address }}</div>
                        <div class="mt-1">{{ $order->shippingAddress->phone }}</div>
                        <a class="edit flex cursor-pointer font-bold items-center mr-3 text-primary" onClick="showAddressModal({{$order->shippingAddress->id}})">edit</a>
                    </div>
                </div>
            </div>
            <div class="px-5 sm:px-16 py-10 sm:py-20">
                <div class="overflow-x-auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th class="border-b-2 dark:border-darkmode-400 whitespace-nowrap">DESCRIPTION</th>
                                <th class="border-b-2 dark:border-darkmode-400 text-right whitespace-nowrap">QTY</th>
                                <th class="border-b-2 dark:border-darkmode-400 text-right whitespace-nowrap">PRICE</th>
                                <th class="border-b-2 dark:border-darkmode-400 text-right whitespace-nowrap">SUBTOTAL</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($order->orderDetail as $orderDetail)
                                <tr>
                                    <td class="border-b align-top dark:border-darkmode-400 capitalize">
                                        <div class="relative flex items-center">
                                            <div class="w-12 h-12 flex-none image-fit">
                                                <img src="{{ $orderDetail->photo() }}" alt="">
                                            </div>
                                            <div class="ml-4 mr-auto">
                                                <div class="font-medium whitespace-nowrap">{{ $orderDetail->product->name }}</div>
                                                    <div class="text-slate-500 text-sm mt-0.5 whitespace-nowrap">
                                                        {{ $orderDetail->variant->name ?? '' }}</div>
                                                    @if ($orderDetail->coupon_amount)
                                                    <div class="text-slate-500 text-sm mt-0.5 whitespace-nowrap text-success">
                                                        Discount
                                                    </div>
                                                    @endif
                                                    @if ($orderDetail->bulk_discount_amount)
                                                    <div class="text-slate-500 text-sm mt-0.5 whitespace-nowrap text-success">
                                                        Builk Discount
                                                    </div>
                                                    @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-right align-top border-b dark:border-darkmode-400 w-32">
                                        {{ $orderDetail->quantity }}
                                    </td>
                                    <td class="text-right align-top border-b dark:border-darkmode-400 w-32">@currency($orderDetail->product_price)</td>
                                    <td class="text-right align-top border-b dark:border-darkmode-400 w-32 font-medium">
                                        @currency($orderDetail->product_price * $orderDetail->quantity)
                                        @if ($orderDetail->coupon_amount)
                                        <div class="text-slate-500 text-sm mt-0.5 whitespace-nowrap text-success">
                                           - @currency($orderDetail->coupon_amount)
                                        </div>
                                        @endif
                                        @if ($orderDetail->bulk_discount_amount)
                                        <div class="text-slate-500 text-sm mt-0.5 whitespace-nowrap text-success">
                                            - @currency($orderDetail->bulk_discount_amount)
                                         </div>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            @if ($order->coupon_amount)
                            <tr>
                                <td colspan="3" class="text-right border-b dark:border-darkmode-400 w-32">Discount
                                </td>
                                <td class="text-right border-b dark:border-darkmode-400 w-32 font-medium text-success">- @currency($order->coupon_amount)
                                </td>
                            </tr>
                            @endif
                            <tr>
                                <td colspan="3" class="text-right border-b dark:border-darkmode-400 w-32">Delivery Charge
                                </td>
                                <td class="text-right border-b dark:border-darkmode-400 w-32 font-medium">+ @currency($order->delivery_amount)
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="px-5 sm:px-20 pb-10 sm:pb-20 flex flex-col-reverse sm:flex-row">
                <div class="text-center sm:text-left mt-10 sm:mt-0">
                    {{-- <div class="text-base text-slate-500">Bank Transfer</div>
                    <div class="text-lg text-primary font-medium mt-2">Elon Musk</div>
                    <div class="mt-1">Bank Account : 098347234832</div>
                    <div class="mt-1">Code : LFT133243</div> --}}
                </div>
                <div class="text-center sm:text-right sm:ml-auto">
                    <div class="text-base text-slate-500">Total Amount</div>
                    <div class="text-xl text-primary font-medium mt-2">@currency($order->total_amount)</div>
                    <div class="mt-1">Taxes included</div>
                </div>
            </div>
        </div>
        <div class="lg:col-span-4">
            <div class="intro-y box overflow-hidden mt-5 p-5">
                <form action="{{ route('order.update', $order->id) }}" method="post">
                    @csrf
                    @method('PUT')
                    <div class="input-form flex items-center">
                        <label for="crud-form-4" class="form-label w-full m-0">
                            Order status:
                        </label>
                        <select id="staus" name="status" class="form-control" aria-label="Order status"required>
                            @foreach (App\Models\Order::STATUS_LABEL as $key => $status)
                                @if ($status == App\Models\Order::STATUS_LABEL['initial'])
                                    @continue
                                @endif
                                <option value="{{ $key }}" @selected($key == $order->order_status)>{{ $status }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mt-1">Payment method: <span
                            class="font-medium">{{ App\Models\Order::PAYMENT_METHOD[$order->payment_method] }}</span>
                    </div>
                    <div class="mt-1">Payment status: <span
                            class="font-medium">{{ App\Models\Order::PAYMENT_STATUS[$order->payment_status] }}</span>
                    </div>
                    <div class="mt-1 text-right">
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
                @if (!$order->invoice_no)
                    <form action="{{ route('order.invoice.generate', $order->id) }}" method="post">
                        @csrf
                        <button type="submit" class="btn btn-primary btn-sm">Generate Invoice</button>
                    </form>
                @else
                    <a class="btn btn-primary btn-sm" target="_blank" href="{{ route('order.invoice.show', $order->id) }}">View Invoice</a>
                @endif
            </div>
            @if ($order->note)
                <div>
                    <h2 class="text-lg font-medium mt-4">Order note</h2>
                    <div class="intro-y box items-center p-5 mb-5">
                        <div class="flex items-center">
                            <p>{{ $order->note }}</p>
                        </div>
                    </div>
                </div>
            @endif
            <div>
                <h2 class="text-lg font-medium mt-4">Timelines</h2>
                <div class="intro-y box items-center p-5 mb-5">
                    <form action="{{ route('order.timeline.store', $order->id) }}" method="post">
                        @csrf
                        <textarea name="notes" class="form-control" placeholder="Comment" cols="30" rows="3"></textarea>
                        <button type="submit" class="btn btn-primary btn-sm">Submit</button>
                    </form>
                </div>
                @foreach ($order->timelines as $timeline)
                    <div class="intro-y box items-center p-5 mb-5">
                        <div class="ml-2 overflow-hidden">
                            <div class="flex items-center">
                                <a href="javascript:;" class="font-medium">{{ $timeline->user->full_name }}</a>
                                <div class="text-xs text-slate-400 ml-auto">{{ $timeline->created_at->diffForHumans() }}
                                </div>
                            </div>
                            <div class="w-full text-slate-500 mt-0.5">
                                @if (!$timeline->is_comment)
                                    Order {{ $timeline->notes }}
                                @else
                                    {!! Helper::parseURL($timeline->notes) !!}
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@include('backend/order/edit_address_model')
@endsection

@section('script')
    <script src="{{ mix('dist/backend/js/ckeditor-classic.js') }}"></script>
    <script src="{{ asset(mix('vendors/jquery/jquery.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/repeater/jquery.repeater.min.js')) }}"></script>
    <script src="{{ asset(mix('js/backend/pages/order/edit.js')) }}"></script>
    <script>
        function updateOrderRoute(order_id) {
            let url = '{{ route('order.update', ':order_id') }}';
            return url.replace(':order_id', order_id);
        }
        function editAddressesRoute(id)
        {
            let url = '{{ route('address.edit', ':id') }}'
            return url.replace(':id', id);
        }
        function updateAddressesRoute(id)
        {
            let url = '{{ route('address.update', ':id') }}'
            return url.replace(':id', id);
        }
    </script>
@endsection