@php
use App\General\UserClass;
@endphp
<style>
    /* Container */
    .Order_detail_container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
    }

    /* Row and Column Layout */
    .Order_detail_row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -15px;
    }
    .Order_detail_col_8, .Order_detail_col_4 {
        padding: 0 15px;
        box-sizing: border-box;
    }
    .Order_detail_col_8 {
        width: 66.6667%;
    }
    .Order_detail_col_4 {
        width: 33.3333%;
    }

    /* Custom Card Component */
    .Order_detail_card {
        background: #fff;
        border: 1px solid rgba(70, 95, 145, 0.1);
        border-radius: 4px;
        margin-bottom: 20px;
        overflow: hidden;
    }
    .Order_detail_card_header {
        padding: 15px;
        border-bottom: 1px solid #eaeaea;
        font-weight: bold;
        background-color: #f7f7f7;
        text-align: left;
    }
    .Order_detail_card_body {
        padding: 15px;
    }

    /* Custom Print Button */
    .Order_detail_header {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 15px;
    }
    .Order_detail_btn {
        display: inline-block;
        padding: 8px 16px;
        background: #f0ad4e;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    /* Order Summary Styles */
    .Order_detail_summary {
        background: #f9f9f9;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 20px;
    }
    .Order_detail_summary .status {
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 1.1rem;
        font-weight: 500;
        color: #333;
    }
    .Order_detail_list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .Order_detail_list li {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #eaeaea;
    }
    .Order_detail_list li:last-child {
        border-bottom: none;
    }

    /* Product Details */
    .Order_detail_product_details {
        overflow-y: auto;
        max-height: 540px;
        padding: 15px;
        border: 1px solid rgba(70, 95, 145, 0.1);
        border-radius: 4px;
    }
    .Order_detail_product_item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid #eaeaea;
    }
    .Order_detail_product_item:last-child {
        border-bottom: none;
    }
    .Order_detail_product_image {
        flex: 0 0 16.6667%;
        max-width: 16.6667%;
        padding: 0 15px;
        text-align: center;
    }
    .Order_detail_product_info {
        flex: 0 0 16.6667%;
        max-width: 16.6667%;
        padding: 0 15px;
    }
    .Order_detail_product_pricing {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
        padding: 0 15px;
        text-align: center;
    }
    .Order_detail_product_delivery {
        flex: 0 0 25%;
        max-width: 25%;
        padding: 0 15px;
        text-align: center;
    }
    .Order_detail_product_total {
        flex: 0 0 8.3333%;
        max-width: 8.3333%;
        padding: 0 15px;
        text-align: center;
    }
    .Order_detail_product_image img {
        max-width: 100%;
        height: auto;
    }
    .text-truncate {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    /* Order Notes Scrollable */
    .Order_detail_order_notes_body {
        max-height: 150px; /* Adjust height as needed */
        overflow-y: auto;
        word-wrap: break-word;
        white-space: normal;
    }
    .ORDER_Table{
        width: 100%;
        border-collapse: collapse;
    }
    .ORDER_cAPTION{
        caption-side: top; 
        font-size: 20px;
    }

    @media (max-width: 992px) {
    .Order_detail_col_8, .Order_detail_col_4 {
        width: 100%;  /* Stacks the columns vertically on smaller screens */
        padding: 0 15px;
    }
    }

    @media (max-width: 768px) {
        .Order_detail_container {
            padding: 0 10px;  /* Reduce padding for smaller screens */
        }
        .Order_detail_card_body, .Order_detail_card_header, .Order_detail_summary, .Order_detail_btn {
            padding: 10px;  /* Reduce padding inside cards and buttons */
        }
        .Order_detail_card_header {
            font-size: 16px; /* Adjust header font size for better readability */
        }
        .Order_detail_summary .status {
            font-size: 1rem; /* Adjust status font size for consistency */
        }
    }

    /* Further small screen adjustments */
    @media (max-width: 480px) {
        .Order_detail_header {
            flex-direction: column; /* Stack print button vertically */
            align-items: center;
        }
        .Order_detail_btn {
            margin-top: 10px; /* Provide spacing between button and content above */
        }
    }
</style>

<div class="Order_detail_container">
    <!-- Print Button Header -->
    <div class="Order_detail_header">
        @if (Session::has('permissions') && in_array('Print Order Invoice', Session::get('permissions')))
            <button type="button" class="Order_detail_btn" onclick="printInvoice({{ $order->id }})">
                <i class="fa fa-print"></i> &nbsp; Print
            </button>
        @endif
    </div>

    <div class="Order_detail_row">
        <!-- Left Column -->
        <div class="Order_detail_col_8">
            <div class="Order_detail_card">
                <div class="Order_detail_card_header">
                    Invoice# {{ $order->invoice_number }}
                </div>
                <div class="Order_detail_card_body">
                    <div class="shipping-details">
                        <h5>Shipping Details:</h5>
                        <p class="mb-0"><strong>Name:</strong> {{ $order->f_name }} {{ $order->l_name ? ' ' . $order->l_name : '' }}</p>
                        <p class="mb-0"><strong>Email:</strong> {{ $order->email ?? 'N/A'}}</p>
                        <p class="mb-0"><strong>Phone:</strong> {{ $order->phone ?? 'N/A' }}</p>
                        <p class="mb-0"><strong>Location:</strong> {{ $order->city }} {{ $order->suburb }} {{ $order->post_code }}</p>
                        <p class="mb-0"><strong>State:</strong> {{ $order->state }}</p>
                        <p class="mb-0"><strong>Street Address:</strong> {{ $order->street_address }}</p>
                    </div>

                    <div class="Order_detail_card mt-3">
                        <div class="Order_detail_card_header">
                            Customer Details
                        </div>
                        <div class="Order_detail_card_body">
                            @if ($user)
                                <p class="mb-0"><strong>Name:</strong> {{ $user->name ?? 'Guest' }}</p>
                                <p class="mb-0"><strong>Order Count:</strong> Order {{ $orderCount }}</p>
                                <p class="mb-0"><strong>Email:</strong> {{ $user->email ?? 'Guest User' }}</p>
                                <p class="mb-0"><strong>Phone:</strong> {{ $user->phone ?? 'Guest User' }}</p>
                                <p class="mb-0"><strong>Business Name:</strong> {{ UserClass::getOptionValue('business_name', $user->userMeta) ?? 'Not Added' }}</p>
                                <p class="mb-0"><strong>Address:</strong> {{ UserClass::getOptionValue('business_street_address', $user->userMeta) ?? 'Not Added' }}</p>
                            @else
                                <p class="mb-0">Order is placed by the Guest User.</p>
                                <p class="mb-0"><strong>Email:</strong> {{ $order->email ?? '' }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column -->
        <div class="Order_detail_col_4">
            <div class="Order_detail_summary">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <h5>Order Summary</h5>
                    <span class="status"
                        @if ($order->status == 'pending')
                            style="background-color: #c6b9b9;"
                        @elseif($order->status == 'inProcess')
                            style="background-color: #ffffa9;"
                        @elseif($order->status == 'completed')
                            style="background-color: #9cff9c;"
                        @elseif($order->status == 'cancelled' || $order->status == 'refund')
                            style="background-color: #ef6b6b;"
                        @endif>
                        {{ ucwords($order->status) }}
                    </span>
                </div>
                <ul class="Order_detail_list">
                    <li>
                        <span>Delivery Method:</span>
                        <span>{{ $order->delivery_method ?? '' }}</span>
                    </li>
                    <li>
                        <span>Subtotal:</span>
                        <span>${{ $order->subTotal ?? 0 }}</span>
                    </li>
                    <li>
                        <span>Total GST:</span>
                        <span>${{ $order->totalGst ?? 0 }}</span>
                    </li>
                    <li>
                        <span>Delivery Charges:</span>
                        <span>${{ $order->delivery_charges ?? 0 }}</span>
                    </li>
                    @if($order->status == 'completed')
                        <li>
                            <span>Grand Total:</span>
                            <span>${{ number_format($order->delivered_price ?? 0, 2) }}</span>
                        </li>
                    @else
                        <li>
                            <span>Grand Total:</span>
                            <span>${{ number_format($order->grand_total ?? 0, 2) }}</span>
                        </li>
                    @endif
                </ul>
            </div>

            <div class="Order_detail_card">
                <div class="Order_detail_card_header">
                    Order Notes
                </div>
                <div class="Order_detail_card_body Order_detail_order_notes_body">
                    <p class="mb-0"><strong>Notes:</strong></p>
                    <p>{{ $order->order_notes ?? '' }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Product Details Section -->
    <div class="Order_detail_card mt-3">
        <div class="Order_detail_product_details">
            <table class="table table-bordered ORDER_Table">
                <caption class="Order_detail_card_header ORDER_cAPTION">Product Details:</caption>
                <thead>
                    <tr>
                        <th style="font-weight: 600; color: black; text-align: center; text-wrap: wrap;">Product Image</th>
                        <th style="font-weight: 600; color: black; text-align: center; text-wrap: wrap;">Item Name</th>
                        <th style="font-weight: 600; color: black; text-align: center; text-wrap: wrap;">Original Weight (KG)</th>
                        <th style="font-weight: 600; color: black; text-align: center; text-wrap: wrap;">Price</th>
                        <th style="font-weight: 600; color: black; text-align: center; text-wrap: wrap;">Ordered Weight (KG)</th>
                        <th style="font-weight: 600; color: black; text-align: center; text-wrap: wrap;">Delivered Weight (KG)</th>
                        <th style="font-weight: 600; color: black; text-align: center; text-wrap: wrap;">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($order->orderMetas as $product)
                    @php
                        $discount = $product->product->discountData;
                        $weightMeta = $product->product->productMeta->where('option', '_weight')->first();
                    @endphp
                    <tr>
                        <td class="text-center" style="text-wrap: wrap;">
                            @if (isset($product->product) && !empty($product->product->featured_image))
                                <img src="{{ url('/') . '/' . $product->product->featured_image }}" alt="Product Image" style="width: 100px; height: auto;">
                            @else
                                <img src="{{ url('/') }}/WebsiteAssets/images/default-product.png" alt="Default Image" style="width: 100px; height: auto;">
                            @endif
                        </td>
                        <td class="text-center" style="text-wrap: wrap;">{{ $product->product_title ?? 'Null' }}</td>
                        <td class="text-center" style="text-wrap: wrap;">{{ $weightMeta ? $weightMeta->value : 'Null' }}</td>
                        <td class="text-center" style="text-wrap: wrap;">
                            @if($discount)
                                ${{ number_format($discount['discounted_price'] ?? 0, 2) }}
                            @else
                                ${{ number_format($product->price ?? 0, 2) }}
                            @endif
                        </td>
                        <td class="text-center" style="text-wrap: wrap;">{{ $product->quantity ?? 0 }}</td>
                        <td class="text-center" style="text-wrap: wrap;">{{ $product->delivered_weight ?? 0 }}</td>
                        <td class="text-center" style="text-wrap: wrap;">${{ number_format($product->qp_subtotal ?? 0, 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>