@push('title')
    Order Details
@endpush

@push('styles')
    <style>
        .info-label {
            font-weight: 600;
            color: #495057;
        }

        .section-title {
            border-bottom: 2px solid #e9ecef;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
        }

        @media print {
            .no-print {
                display: none !important;
            }
        }
    </style>
@endpush

<x-app-layout>
    <div class="alertbox">
        @if (session('success'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true" id="success-alert">
                <div class="toast-header bg-success">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('success') }}</div>
            </div>
        @endif
    </div>

    @can('view_order_management')
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4 class="mb-0">Order #{{ str_pad($order->id, 6, '0', STR_PAD_LEFT) }}</h4>
        </div>

        <div class="row">
            <!-- Customer Information -->
            <div class="col-md-3 mb-4">
                <div class="card " style="height:300px">
                    <div class="card-header">
                        <h6 class="mb-0">Customer Information</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <strong class="info-label">Name:</strong>
                            {{ $order->customerInfo->first_name }} {{ $order->customerInfo->last_name }}
                        </div>

                        @if ($order->customerInfo->phone)
                            <div class="mb-3">
                                <strong class="info-label">Phone:</strong>
                                {{ $order->customerInfo->phone }}
                            </div>
                        @endif

                        @if ($order->customerInfo->user && $order->customerInfo->user->email)
                            <div class="mb-3">
                                <strong class="info-label">Email:</strong>
                                {{ $order->customerInfo->user->email }}
                            </div>
                        @endif

                        <strong class="mb-2">Shipping Address:</strong>
                        @if ($order->customerInfo->address)
                            {!! nl2br(e($order->customerInfo->address)) !!}<br>
                            {!! nl2br(e($order->customerInfo->city)) !!}<br>
                            {!! nl2br(e($order->customerInfo->state)) !!}<br>
                            {!! nl2br(e($order->customerInfo->country)) !!}<br>
                            {!! nl2br(e($order->customerInfo->zip)) !!}
                        @else
                            <span class="text-muted">Not specified</span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Order Information -->
            <div class="col-md-3 mb-4 ">
                <div class="card " style="height:300px">
                    <div class="card-header">
                        <h6 class="mb-0">Order Information</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <span class="info-label">Order Date:</span>
                            {{ $order->created_at->format('d M Y, h:i A') }}
                        </div>

                        <div class="mb-3">
                            <span class="info-label">Status:</span>
                            @if ($order->order_status == 'delivered')
                                <span class="badge bg-success">Delivered</span>
                            @elseif ($order->order_status == 'shipped')
                                <span class="badge bg-info">Shipped</span>
                            @elseif ($order->order_status == 'pending')
                                <span class="badge bg-warning">Processing</span>
                            @elseif ($order->order_status == 'cancelled')
                                <span class="badge bg-danger">Cancelled</span>
                            @else
                                <span class="badge bg-secondary">{{ ucfirst($order->order_status) }}</span>
                            @endif
                        </div>

                        <div class="mb-3">
                            <span class="info-label">Payment Method:</span>
                            {{ ucwords(str_replace('_', ' ', $order->payment_option)) }}
                        </div>

                        <div class="mb-0">
                            <span class="info-label">Total Amount:</span>
                            <strong class="text-success">{{ number_format($order->total_amount, 2) }}
                                {{ $config->currancy }}</strong>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order Timeline -->
            <div class="col-md-3 mb-4 ">
                <div class="card " style="height:300px">
                    <div class="card-header">
                        <h6 class="mb-0">Order Timeline</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-2">
                            <span class="info-label">Order Placed:</span>
                            {{ $order->created_at->format('d M Y, h:i A') }}
                        </div>
                        <div class="mb-2">
                            <span class="info-label">Last Updated:</span>
                            {{ $order->updated_at->format('d M Y, h:i A') }}
                        </div>
                        <div class="mb-0">
                            <span class="info-label">Current Status:</span>
                            {{ ucfirst($order->order_status) }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order Summary -->
            <div class="col-md-3 mb-4">
                <div class="card " style="height:300px">
                    <div class="card-header">
                        <h6 class="mb-0">Order Summary</h6>
                    </div>
                    <div class="card-body">
                        @php
                            $subtotal = $order->orderItems->sum(function ($item) {
                                return $item->total ?? $item->quantity * $item->price;
                            });
                            $itemCount = $order->orderItems->sum('quantity');
                        @endphp

                        <div class="mb-2">
                            <span class="info-label">Total Items:</span>
                            {{ $itemCount }}
                        </div>
                        <div class="mb-2">
                            <span class="info-label">Subtotal:</span>
                            {{ number_format($subtotal, 2) }} {{ $config->currancy }}
                        </div>
                        <div class="mb-0">
                            <span class="info-label">Final Total:</span>
                            <strong class="text-success">{{ number_format($order->total_amount, 2) }} {{ $config->currancy }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="card mb-4">
            <div class="card-header">
                <h6 class="mb-0">Order Items</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th width="50">#</th>
                                <th>Product Name</th>
                                <th width="100" class="text-center">Quantity</th>
                                <th width="200" class="text-end">Unit Price</th>
                                <th width="200" class="text-end">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($order->orderItems as $index => $item)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>
                                        {{ $item->product->name ?? 'Product Unavailable' }}
                                        @if ($item->product && $item->product->sku)
                                            <br><small class="text-muted">SKU: {{ $item->product->sku }}</small>
                                        @endif
                                    </td>
                                    <td class="text-center">{{ $item->quantity }}</td>
                                    <td class="text-end">{{ number_format($item->price, 2) }} {{ $config->currancy }}</td>
                                    <td class="text-end">
                                        {{ number_format($item->total ?? $item->quantity * $item->price, 2) }}
                                        {{ $config->currancy }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="table-active">
                                <td colspan="4" class="text-end"><strong>Grand Total:</strong></td>
                                <td class="text-end"><strong>{{ number_format($order->total_amount, 2) }}
                                        {{ $config->currancy }}</strong></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <!-- Update Order and Payment Status -->
        <div class="card mb-4">
            <div class="card-header">
                <h6 class="mb-0">Update Order & Payment Status</h6>
            </div>
            <div class="card-body">
                <form action="{{ route('orders.update', $order->id) }}" method="POST">
                    @csrf

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="order_status" class="form-label">Order Status</label>
                            <select name="order_status" id="order_status" class="form-select" required>
                                <option value="pending" {{ $order->order_status == 'pending' ? 'selected' : '' }}>Pending
                                </option>
                                <option value="accepted" {{ $order->order_status == 'accepted' ? 'selected' : '' }}>Accepted
                                </option>
                                <option value="shipped" {{ $order->order_status == 'shipped' ? 'selected' : '' }}>Shipped
                                </option>
                                <option value="delivered" {{ $order->order_status == 'delivered' ? 'selected' : '' }}>
                                    Delivered</option>
                                <option value="cancelled" {{ $order->order_status == 'cancelled' ? 'selected' : '' }}>
                                    Cancelled</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label for="payment_status" class="form-label">Payment Status</label>
                            <select name="payment_status" id="payment_status" class="form-select" required>
                                <option value="pending" {{ $order->payment_status == 'pending' ? 'selected' : '' }}>
                                    Pending
                                </option>
                                <option value="paid" {{ $order->payment_status == 'paid' ? 'selected' : '' }}>Paid
                                </option>
                            </select>
                        </div>
                    </div>

                    <div class="text-end">
                        <button type="submit" class="btn btn-primary">Update Status</button>
                    </div>
                </form>

                @if (count($orderLog) > 0)
                    <div class="mt-3">
                        <h6 class="mb-2">Order History</h6>
                        <ul class="list-group">
                            @foreach ($orderLog as $log)
                                <li class="list-group-item">
                                    <strong>{{ $log->created_at->format('d M Y, h:i A') }}:</strong>
                                    {{ $log->status }} by
                                    <span class="text-muted">{{ $log->user->name ?? 'System' }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        </div>


    @endcan

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" crossorigin="anonymous"></script>
    <script>
        $("#success-alert").fadeTo(5000, 500).slideUp(500, function() {
            $("#success-alert").slideUp(500);
        });
    </script>
</x-app-layout>