@extends('pages.layouts.app')

@section('content')
<div class="container mt-5">
    <div class="row">
        <div class="col-md-12">
            <h2 class="mb-4 text-center text-primary font-weight-bold">{{ __('My Orders') }}</h2>

            @if($orders->count())
                <div class="table-responsive shadow-lg rounded-lg overflow-hidden" style="overflow-x: auto;">
                    <table class="table table-striped table-hover text-center" style="white-space: nowrap;">
                        <thead class="bg-dark text-white">
                            <tr>
                                <th>{{ __('Order ID') }}</th>
                                <th>{{ __('Order Date') }}</th>
                                <th>{{ __('Total Amount') }}</th>
                                <th>{{ __('Status') }}</th>
                                <th>{{ __('Address') }}</th>
                                <th>{{ __('Items') }}</th>
                                <th>{{ __('Actions') }}</th>
                            </tr>
                        </thead>

                        <tbody class="bg-light">
                            @foreach($orders as $order)
                            @php
                            $statusColors = [
                                'pending' => '#ffc107',         // Yellow
                                'confirmed' => '#17a2b8',      // Blue
                                'shipped' => '#007bff',        // Dark Blue
                                'out_for_delivery' => '#ff851b', // Orange
                                'delivered' => '#28a745',      // Green
                                'canceled' => '#dc3545',       // Red
                                'refunded' => '#6c757d',       // Gray
                            ];
                            $statusColor = $statusColors[$order->status] ?? '#6c757d'; // Default color (Gray)
                            @endphp

                            <tr>
                                <td class="align-middle">{{ $order->id }}</td>
                                <td class="align-middle">{{ $order->created_at->format('M d, Y') }}</td>
                                <td class="align-middle">${{ number_format($order->total_amount, 2) }}</td>
                                <td class="align-middle">
                                    <span style="background-color: {{ $statusColor }}; color: white; padding: 5px 10px; border-radius: 20px; font-weight: bold; text-transform: capitalize;">
                                        {{ ucfirst(str_replace('_', ' ', __($order->status))) }}
                                    </span>
                                </td>
                                <td class="align-middle">{{ $order->address ? $order->address->city->name . ', ' . $order->address->address : 'N/A' }}</td>
                                <td class="align-middle">
                                    @foreach($order->orderItems as $item)
                                    <a href="{{ route('productDetails', $item->product->id) }}" class="product-link">
                                        <div class="product-info">
                                            <p class="text-muted">
                                                {{ $item->product->name }} (x{{ $item->quantity }})
                                                @if ($item->color)
                                                    <!-- Check if color exists -->
                                                    <span class="product-color">
                                                        <span
                                                            style="display: inline-block; width: 20px; height: 20px; background-color: {{ $item->color->hex_code }}; border: 1px solid #000; margin-right: 10px;">
                                                        </span>
                                                        {{ app()->getLocale() === 'ar' ? $item->color->name_ar : $item->color->name }}
                                                    </span>
                                                @endif
                                            </p>
                                        </div>
                                    </a>
                                    @endforeach
                                </td>
                                <td class="align-middle">
                                    @if($order->status == 'pending')
                                    <a href="{{ route('checkout') }}" class="btn btn-outline-warning btn-sm rounded-pill">{{ __('Complete Your Order') }}</a>
                                    @else
                                    <a class="btn btn-outline-primary btn-sm rounded-pill">{{ __('Order') . ' '. __($order->status) }}</a>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination links -->
                <div class="d-flex justify-content-between mt-3">
                    <div>{{ $orders->links() }}</div>
                </div>

            @else
                <div class="alert alert-warning text-center">
                    <strong>{{ __('No orders found') }}</strong> {{ __('You havent placed any orders yet') }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('styles')
    <style>
        /* Ensure horizontal scroll for tables on mobile */
        @media (max-width: 767px) {
            .table-responsive {
                -webkit-overflow-scrolling: touch;
                overflow-x: auto;
            }

            .table {
                white-space: nowrap;
            }

            .product-color {
                display: inline-block;
                width: auto;
                margin-right: 5px;
                font-size: 14px;  /* Adjust the font size for mobile */
            }

            .product-link {
                display: inline-block;
                margin-bottom: 5px;
            }

            .product-info p {
                font-size: 14px; /* Adjust font size for better readability */
            }

            /* Ensure the buttons fit better on mobile screens */
            .btn-sm {
                font-size: 12px;
                padding: 5px 10px;
            }

            .text-muted {
                font-size: 13px; /* Adjust the font size of the product name */
            }
        }

    </style>
@endpush