@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-xl-12">
                
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex">
                            <h5 class="card-title flex-grow-1 mb-0">Customer</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="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>
                            </li>
                            {{-- <li><i class="ri-mail-line me-2 align-middle text-muted fs-16"></i>{{ $order->user->email }}</li>
                            <li><i class="ri-phone-line me-2 align-middle text-muted fs-16"></i>{{ $order->user->phone }}</li> --}}
                        </ul>
                    </div>
                </div>
                @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 class="flex-shrink-0">
                                {{--  <a href="{{ route('admin.order.invoice.create',['order_id' => $order->id]) }}" class="btn btn-success btn-sm"><i class="ri-download-2-fill align-middle me-1"></i> Invoice</a>  --}}

                                <a href="{{ route('packer.order.packing',['id' => $order->id])}}" class="btn btn-success btn-sm">Packing</a>
                                {{-- print products --}}
                                <a href="{{ route('packer.order.print', ['id' => $order->id]) }}" target="_blank" class="btn btn-info btn-sm">
                                    <i class="mdi mdi-printer-3d align-middle me-1"></i>
                                    Print
                                </a>
                            </div>
                        </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-2">Product Image</th> <!-- 55% width -->
                                            <th scope="col" class="col-6"><span class="ms-2">Product Details</span></th> <!-- 55% width -->
                                            <th scope="col" class="col-1"></th> <!-- 15% width -->
                                            <th scope="col" class="col-4 text-center">Quantity</th> <!-- 15% width -->
                                        </tr>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($order->orderDetails as $orderDetail)
                                    @php
                                        $product = $orderDetail->product;
                                    @endphp
                                        <tr>
                                            <td>
                                                <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>
                                            </td>
                                            <td>
                                                <div class="d-flex flex-wrap">
                                                    <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->name }}  @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></td>
                                            <td class="text-center">{{ $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>  --}}
                                        </tr>
                                    @endforeach
                                </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 class="accordion-item border-0">
                                    <div class="accordion-header" id="headingOne">
                                        <a class="accordion-button p-2 shadow-none" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0 avatar-xs">
                                                    <div class "avatar-title bg-success rounded-circle">
                                                        <i class="ri-shopping-bag-line"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1 ms-3">
                                                    @php
                                                        $order_placed = $order->orderLogs->where('action', 'order_placed')->first();
                                                    @endphp
                                                    <h6 class="fs-15 mb-0 fw-semibold">Order Placed - <span class="fw-normal">
                                                        {{ $order_placed->created_at->format('D, d M Y') }}
                                                    </span></h6>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                        <div class="accordion-body ms-2 ps-5 pt-0">
                                            <h6 class="mb-1">
                                                {{ $order_placed->description }}
                                            </h6>
                                            <p class="text-muted">
                                                {{ $order_placed->created_at->format('D, d M Y - h:i A') }}
                                            </p>

                                            @php
                                                $order_approved = $order->orderLogs->where('action', 'approved')->last();
                                            @endphp
                                            @if ($order_approved)
                                                <h6 class="mb-1">
                                                    {{ $order_approved->description }}
                                                </h6>
                                                <p class="text-muted mb-0">
                                                    {{ $order_approved->created_at->format('D, d M Y - h:i A') }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item border-0">
                                    <div class="accordion-header" id="headingTwo">
                                        <a class="accordion-button p-2 shadow-none" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                            <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">Packed - <span class="fw-normal">Thu, 16 Dec 2021</span></h6>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                        <div class="accordion-body ms-2 ps-5 pt-0">
                                            <h6 class="mb-1">Your Item has been picked up by courier partner</h6>
                                            <p class="text-muted mb-0">Fri, 17 Dec 2021 - 9:45AM</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item border-0">
                                    <div class="accordion-header" id="headingThree">
                                        <a class="accordion-button p-2 shadow-none" data-bs-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0 avatar-xs">
                                                    <div class="avatar-title bg-success rounded-circle">
                                                        <i class="ri-truck-line"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1 ms-3">
                                                    <h6 class="fs-15 mb-1 fw-semibold">Shipping - <span class="fw-normal">Thu, 16 Dec 2021</span></h6>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div id="collapseThree" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                        <div class="accordion-body ms-2 ps-5 pt-0">
                                            <h6 class="fs-14">RQK Logistics - MFDS1400457854</h6>
                                            <h6 class="mb-1">Your item has been shipped.</h6>
                                            <p class="text-muted mb-0">Sat, 18 Dec 2021 - 4.54PM</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item border-0">
                                    <div class="accordion-header" id="headingFour">
                                        <a class="accordion-button p-2 shadow-none" data-bs-toggle="collapse" href="#collapseFour" aria-expanded="false">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0 avatar-xs">
                                                    <div class="avatar-title bg-light text-success rounded-circle">
                                                        <i class="ri-takeaway-fill"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1 ms-3">
                                                    <h6 class="fs-14 mb-0 fw-semibold">Out For Delivery</h6>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="accordion-item border-0">
                                    <div class="accordion-header" id="headingFive">
                                        <a class="accordion-button p-2 shadow-none" data-bs-toggle="collapse" href="#collapseFile" aria-expanded="false">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0 avatar-xs">
                                                    <div class="avatar-title bg-light text-success rounded-circle">
                                                        <i class="mdi mdi-package-variant"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1 ms-3">
                                                    <h6 class="fs-14 mb-0 fw-semibold">Delivered</h6>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div> --}}
                            </div>
                            <!--end accordion-->
                        </div>
                    </div>
                </div>
                <!--end card-->
            </div>

            <!--end col-->
           {{-- <div class="col-xl-3">
                <!--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
                        </ul>
                    </div>
                </div>
                <!--end card-->

                <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">
                                    @php
                                        $paymentMethod = $order->payment_method;
                                        $paymentMethod = str_replace('_', ' ', $paymentMethod);
                                        $paymentMethod = ucwords($paymentMethod);
                                    @endphp
                                    {{ $paymentMethod }}
                                </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">£415.96</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end card--> 
            </div> --}}

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

    </div>
@endsection