@extends('admin.layouts.master')

@section('title', 'Order Details')

@section('content')
    <div class="container-fluid">

        <!-- start page title -->
        {{-- <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">Order Details</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Ecommerce</a></li>
                            <li class="breadcrumb-item active">Order Details</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div> --}}
        <!-- end page title -->

        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">

                    <div class="page-title-right">
                        <a href="{{ route('admin.order.index') }}" class="btn btn-info btn-sm">Orders List</a>
                        <a href="{{ route('admin.order.edit', $order->id) }}" class="btn btn-primary btn-sm">Edit</a>
                        <a href="{{ route('admin.order.delete', $order->id) }}" class="btn btn-danger btn-sm">Delete</a>
                        <a href="{{ route('admin.order.details', $order->id) }}" class="btn btn-primary btn-sm">Detail</a>
                        @if ($order->invoices->count() > 0)
                            <a href="{{ route('admin.order.invoice.create', ['order_id' => $order->id]) }}"
                                class="btn btn-success btn-sm">Edit Invoice</a>
                        @else
                            <a href="{{ route('admin.order.invoice.create', ['order_id' => $order->id]) }}"
                                class="btn btn-success btn-sm">Create Invoice</a>
                        @endif
                    </div>

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

        <div class="row">
            <div class="col-xl-9">
                @if ($order->status == 'cancelled')
                <div class="card">
                    <div class="card-header">
                        Order has been cancelled
                    </div>
                    <div class="card-body">
                        <div class="alert alert-danger">
                            <p class="mb-0"><span class="fw-semibold">REASON FOR CANCELLATION:</span>
                                <span id="note">
                                    {{ $order->cancelled_reason }}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            @endif
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <h5 class="card-title flex-grow-1 mb-0">Order {{ $order->order_number }}
                                {{--  'pending','approved','decline','packing','performa_invoice','invoice_review','delivered','cancelled', 'shipping', 'invoiced' ,'packed','shipped'  --}}
                                @if ($order->status == 'pending')
                                    <span class="badge bg-warning text-dark-warning">Pending</span>
                                @elseif($order->status == 'approved')
                                    <span class="badge bg-success text-dark-success"> Approved </span>
                                @elseif($order->status == 'decline')
                                    <span class="badge bg-danger text-dark-danger"> Decline </span>
                                @elseif($order->status == 'packing')
                                    <span class="badge bg-info text-dark-info"> Packing </span>
                                @elseif($order->status == 'performa_invoice')
                                    <span class="badge bg-info text-dark-info"> Performa Invoice </span>
                                @elseif($order->status == 'invoice_review')
                                    <span class="badge bg-info text-dark-info"> Invoice Review </span>
                                @elseif($order->status == 'delivered')
                                    <span class="badge bg-success text-dark-success"> Delivered </span>
                                @elseif($order->status == 'cancelled')
                                    <span class="badge bg-danger text-dark-danger"> Cancelled </span>
                                @elseif($order->status == 'shipping')
                                    <span class="badge bg-info text-dark-info"> Shipping </span>
                                @elseif($order->status == 'invoiced')
                                    <span class="badge bg-info text-dark-info"> Invoiced </span>
                                @elseif($order->status == 'packed')
                                    <span class="badge bg-info text-dark-info"> Packed </span>
                                @elseif($order->status == 'shipped')
                                    <span class="badge bg-info text-dark-info"> Shipped </span>
                                @endif
                            </h5>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive table-card">
                            <table class="table table-nowrap align-middle table-borderless mb-0">
                                <thead class="table-light text-muted">
                                    <tr>
                                         <tr>
                                            <th scope="col" class="col-6">Product Details</th> <!-- 55% width -->
                                            <th scope="col" class="col-2">Item Price</th> <!-- 15% width -->
                                            <th scope="col" class="col-2">Quantity</th> <!-- 15% width -->
                                            <th scope="col" class="col-2 text-end">Total Amount</th> <!-- 15% width -->
                                        </tr>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($order->orderDetails as $orderDetail)
                                    @php
                                        $product = $orderDetail->product;
                                    @endphp
                                        <tr>
                                            <td>
                                                <div class="d-flex flex-wrap">
                                                    <div class="flex-shrink-0 avatar-md bg-light rounded p-1">
                                                        <img src="{{ asset($product->thumbnail_image) }}" alt="" class="img-fluid d-block">
                                                    </div>
                                                    <div class="flex-grow-1 ms-3" style="max-width: 80%;text-wrap: wrap;">
                                                        <h5 class="fs-15"><a href="{{ route('admin.product.edit', ['id' => $product->id]) }}" class="link-primary">{{ $product->brand->name }} - {{ $product->sku }}  @if($product->label) ({{ $product->label->name }}) @endif</a></h5>
                                                        <p class="text-muted mb-0"><span class="fw-medium">{{ $product->specification }}</span></p>
                                                        {{--  <p class="text-muted mb-0">Color: <span class="fw-medium">Pink</span></p>
                                                        <p class="text-muted mb-0">Size: <span class="fw-medium">M</span></p>  --}}
                                                    </div>
                                                </div>
                                            </td>
                                            <td>£{{ $orderDetail->price }}</td>
                                            <td>{{ $orderDetail->quantity }}</td>
                                            {{--  <td>
                                                <div class="text-warning fs-15">
                                                    <i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-half-fill"></i>
                                                </div>
                                            </td>  --}}
                                            <td class="fw-medium text-end">
                                                £{{ $orderDetail->total_amount }}
                                            </td>
                                        </tr>
                                    @endforeach
                                    <tr class="border-top border-top-dashed">
                                        <td colspan="3"></td>
                                        <td colspan="2" class="fw-medium p-0">
                                            <table class="table table-borderless mb-0">
                                                <tbody>
                                                    <tr>
                                                        <td>Items Sub Total :</td>
                                                        <td class="text-end">£{{ $order->total_amount }}</td>
                                                    </tr>
                                                    @if (!empty($order->discount) && $order->discount > 0)
                                                        <tr>
                                                            <td>Discount
                                                                {{--  <span class="text-muted">(VELZON15)</span> : :</td>  --}}
                                                            <td class="text-end">-£{{ $order->discount }}</td>
                                                        </tr>
                                                    @endif
                                                    @if($order->vat_tax_amount != null && $order->vat_tax_amount > 0)
                                                        <tr>
                                                            <td>VAT Tax ({{ $order->vat_tax_percentage }}%) :</td>
                                                            <td class="text-end">+£{{ $order->vat_tax_amount }}</td>
                                                        </tr>

                                                    @endif
                                                    @if ($order->shipping_charges != null && $order->shipping_charges > 0)
                                                        <tr>
                                                            <td>Shipping Charges :</td>
                                                            <td class="text-end">+£{{ $order->shipping_charges }}</td>
                                                        </tr>

                                                    @endif
                                                    {{--  <tr>
                                                        <td>Estimated Tax :</td>
                                                        <td class="text-end">£44.99</td>
                                                    </tr>  --}}
                                                    <tr class="border-top border-top-dashed">
                                                        <th scope="row">Total (GBP) :</th>
                                                        <th class="text-end">£{{ $order->grand_total }}</th>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!--end card-->

                {{-- <div class="card">
                    <div class="card-header">
                        <div class="d-sm-flex align-items-center">
                            <h5 class="card-title flex-grow-1 mb-0">Order Status</h5>
                            <div class="flex-shrink-0 mt-2 mt-sm-0 d-none">
                                <a href="javascript:void(0);" class="btn btn-soft-info btn-sm mt-2 mt-sm-0"><i class="ri-map-pin-line align-middle me-1"></i> Change Address</a>
                                <a href="javascript:void(0);" class="btn btn-soft-danger btn-sm mt-2 mt-sm-0"><i class="mdi mdi-archive-remove-outline align-middle me-1"></i> Cancel Order</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="profile-timeline">
                            <div class="accordion accordion-flush" id="accordionFlushExample">
                                @foreach($order->orderLogs as $orderLog)
                                    <div class="accordion-item border-0">
                                        <div class="accordion-header" id="heading{{ $orderLog->id }}">
                                            <a class="accordion-button p-2 shadow-none" data-bs-toggle="collapse" href="#collapse{{ $orderLog->id }}" aria-expanded="false" aria-controls="collapse{{ $orderLog->id }}">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0 avatar-xs">
                                                        <div class="avatar-title bg-success rounded-circle">
                                                            <i class="mdi mdi-gift-outline"></i>
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <h6 class="fs-15 mb-1 fw-semibold">{{ $orderLog->action() }} - <span class="fw-normal">{{ $orderLog->created_at->format('D, d M Y h:i A') }}</span></h6>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <div id="collapse{{ $orderLog->id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ $orderLog->id }}" data-bs-parent="#accordionExample">
                                            <div class="accordion-body ms-2 ps-5 pt-0">
                                                <h6 class="mb-1">{{ $orderLog->description }}</h6>
                                                <p class="text-muted mb-0">{{ $orderLog->created_at->format('D, d M Y - H:iA') }}</p>
                                            </div>
                                        </div>
                                </div>
                                @endforeach

                            </div>
                            <!--end accordion-->
                        </div>
                    </div>
                </div> --}}
                
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex">
                            <h5 class="card-title flex-grow-1 mb-0">Customer Details</h5>
                            <div class="flex-shrink-0">
                                {{-- <a href="javascript:void(0);" class="link-secondary">View Profile</a> --}}
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0 vstack gap-3">
                            <li>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                @if ($order->user->image)
                                                    <img src="{{ asset($order->user->image) }}" alt="" class="avatar-sm rounded">
                                                @else
                                                    <img src="{{ asset('/') }}assets/admin/assets/images/users/avatar-3.jpg" alt="" class="avatar-sm rounded">
                                                @endif
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h6 class="fs-14 mb-1">{{ $order->user->first_name . ' ' . $order->user->last_name }}</h6>
                                                <p class="text-muted mb-0">Customer</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <i class="ri-mail-line me-2 align-middle text-muted fs-16"></i>{{ $order->user->email }}
                                        <br>
                                        <i class="ri-phone-line me-2 align-middle text-muted fs-16"></i>{{ $order->user->phone }}
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--end card-->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="ri-map-pin-line align-middle me-1 text-muted"></i> Billing Address</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled vstack gap-2 fs-13 mb-0">
                            @php
                                $billingAddress = $order->billingAddress;
                            @endphp
                           @if ($billingAddress)
                            <li class="fw-medium fs-14">
                                {{ $billingAddress->first_name . ' ' . $billingAddress->last_name }}
                            </li>
                            <li>
                                {{ $billingAddress->phone }}
                            </li>
                            <li>
                                {{ $billingAddress->address_line_1 }}
                            </li>
                            @if ($billingAddress->address_line_2)
                                <li>
                                    {{ $billingAddress->address_line_2 }}
                                </li>
                            @endif
                            <li>
                                {{ $billingAddress->city . ' - ' . $billingAddress->post_code }}
                            </li>
                            @elseif ($order->same_as_pickup_address)
                            <li>
                                <strong>Same as pickup address</strong>
                            </li>
                            @elseif ($order->same_as_shipping_address)
                            <li>
                                <strong>Same as shipping address</strong>
                            </li>
                            @else
                            <li>
                                <strong>No billing address found</strong>
                            </li>
                           @endif
                            {{--  <li>United States</li>  --}}
                        </ul>
                    </div>
                </div>
                <!--end card-->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="ri-map-pin-line align-middle me-1 text-muted"></i>
                            @if ($order->shippingAddress)
                                Shipping Address
                            @elseif ($order->pickupAddress)
                                Pickup Address
                            @endif
                        </h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled vstack gap-2 fs-13 mb-0">
                            @php
                                $shippingAddress = $order->shippingAddress;
                            @endphp
                            @if ($shippingAddress)
                                <li class="fw-medium fs-14">
                                    {{ $shippingAddress->first_name . ' ' . $shippingAddress->last_name }}
                                </li>
                                <li>
                                    {{ $shippingAddress->phone }}
                                </li>
                                <li>
                                    {{ $shippingAddress->address_line_1 }}
                                </li>
                                @if ($shippingAddress->address_line_2)
                                    <li>
                                        {{ $shippingAddress->address_line_2 }}
                                    </li>
                                @endif
                                <li>
                                    {{ $shippingAddress->city . ' - ' . $shippingAddress->post_code }}
                                </li>
                            @endif
                            @php
                                $pickup_address = $order->pickupAddress;
                            @endphp
                            @if ($pickup_address)
                                <li class="fw-medium fs-14">
                                    {{ $pickup_address->name}}
                                </li>
                                <li>
                                    {{ $pickup_address->phone }}
                                </li>
                                <li>
                                    {{ $pickup_address->note }}
                                </li>

                                @endif
                            {{--  <li>United States</li>  --}}
                        </ul>
                    </div>
                </div>
                <!--end card-->
            </div>

            <!--end col-->
            <div class="col-xl-3">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="ri-secure-payment-line align-bottom me-1 text-muted"></i> Payment Details</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-2">
                            <div class="flex-shrink-0">
                                <p class="text-muted mb-0">Payment Method:</p>
                            </div>
                            <div class="flex-grow-1 ms-2">
                                <h6 class="mb-0">
                                    {{ $order->payment_method == 'Stripe' ? 'Payment before Delivery' : 'Payment after Delivery' }}
                                </h6>
                            </div>
                        </div>
                        <div class="d-flex align-items-center mb-2">
                            <div class="flex-shrink-0">
                                <p class="text-muted mb-0">Payment Status:</p>
                            </div>
                            <div class="flex-grow-1 ms-2">
                                <h6 class="mb-0">
                                    {{--  status are paid , credit, pending  --}}
                                    @if ($order->payment_status == 'paid')
                                        <span class="badge bg-success text-dark-success">Paid</span>
                                    @elseif($order->payment_status == 'credit')
                                        <span class="badge bg-warning text-dark-warning">Credit</span>
                                    @else
                                        <span class="badge bg-danger text-dark-danger">Pending</span>
                                    @endif
                                </h6>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <p class="text-muted mb-0">Total Amount:</p>
                            </div>
                            <div class="flex-grow-1 ms-2">
                                <h6 class="mb-0">£{{ $order->grand_total }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <div class="d-sm-flex align-items-center">
                            <h5 class="card-title flex-grow-1 mb-0">Order Status</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="">
                            <div class="accordion accordion-flush" id="accordionFlushExample">
                                @foreach($order->orderLogs as $orderLog)
                                    <div class="accordion-item border-0">
                                        <div class="accordion-header" id="heading{{ $orderLog->id }}">
                                            <a class="accordion-button p-2 shadow-none" data-bs-toggle="collapse" href="#collapse{{ $orderLog->id }}" aria-expanded="false" aria-controls="collapse{{ $orderLog->id }}">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1 ms-3">
                                                        <h6 class="fs-15 mb-1 fw-semibold">{{ $orderLog->action() }} <br> <span class="fw-normal">{{ $orderLog->created_at->format('D, d M Y h:i A') }}</span></h6>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <div id="collapse{{ $orderLog->id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ $orderLog->id }}" data-bs-parent="#accordionExample">
                                            <div class="accordion-body ms-2 ps-5 pt-0">
                                                <h6 class="mb-1">{{ $orderLog->description }}</h6>
                                                <p class="text-muted mb-0">{{ $orderLog->created_at->format('D, d M Y - H:iA') }}</p>
                                            </div>
                                        </div>
                                </div>
                                @endforeach

                            </div>
                            <!--end accordion-->
                        </div>
                    </div>
                </div>
                <!--end card-->

                <!--end card-->
            </div>

            <!--end col-->
        </div>
        <!--end row-->

    </div>
@endsection