@extends('admin.layouts.app')

@section('page-title', 'Orders')

@section('content')
<style>
  /* ===== GLOBAL RESPONSIVE STYLES ===== */
html, body {
  overflow-x: hidden !important;
  max-width: 100%;
}
    /* VARIABLES AND BASE STYLES */
    :root {
        --primary-color: #3b82f6; /* Blue 500 */
        --primary-hover: #2563eb; /* Blue 600 */
        --border-light: #e5e7eb; /* Gray 200 */
        --bg-container: #ffffff;
        --bg-light: #f9fafb; /* Gray 50 */
        --bg-hover: #f3f4f6; /* Gray 100 */
        --text-dark: #1f2937; /* Gray 800 */
        --text-muted: #6b7280; /* Gray 500 */
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .orders-container {
        background: var(--bg-container);
        padding: 24px;
        border-radius: 12px;
        box-shadow: var(--shadow-lg);
        margin-top: 28px;
        font-family: 'Inter', sans-serif; /* A modern, clean font */
    
    }

    .orders-title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 24px;
        color: var(--text-dark);
        border-bottom: 1px solid var(--border-light);
        padding-bottom: 16px;
    }

    /* TABLE STRUCTURE & WRAPPER FOR RESPONSIVENESS */
    .table-wrapper {
        overflow-x: auto; /* Enables horizontal scrollbar */
        max-width: 100%;
        border-radius: 8px;
        border: 1px solid var(--border-light);
    }

    .orders-table {
        width: 100%;
        min-width: 1300px; /* Minimum width to prevent excessive squeezing of columns */
        border-collapse: separate; /* Required for border-radius on cells in the future */
        border-spacing: 0;
        font-size: 14px;
        color: var(--text-dark);
    }

    .orders-table thead {
        background: var(--bg-light);
    }

    .orders-table th {
        padding: 16px 20px;
        font-weight: 600;
        color: var(--text-muted);
        text-align: left;
        white-space: nowrap;
        border-bottom: 2px solid var(--border-light);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .orders-table td {
        padding: 14px 20px;
        border-bottom: 1px solid var(--border-light);
        white-space: nowrap;
    }

    .orders-table tbody tr:last-child td {
        border-bottom: none;
    }

    .orders-table tbody tr:hover {
        background: var(--bg-hover);
        transition: background 0.2s ease;
    }

    /* STATUS BADGES */
    .status-badge {
        padding: 6px 10px;
        border-radius: 9999px; /* Pill shape */
        font-size: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        text-transform: capitalize;
        white-space: nowrap;
    }

    .shipstatus{
      
    }

    /* INVOICE STATUS STYLES */
    .status-paid { background: #d1fae5; color: #059669; } /* Green */
    .status-pending { background: #fffbeb; color: #d97706; } /* Yellow */

    /* SHIPMENT STATUS STYLES */
    .status-delivered { background: #e0f2fe; color: #0284c7; } /* Sky Blue */
    .status-in_transit { background: #fef3c7; color: #b45309; } /* Amber */

    /* ACTION BUTTON */
    .action-btn {
        color: var(--text-muted);
        cursor: pointer;
        transition: color 0.2s ease, transform 0.2s ease;
        font-size: 18px;
    }

    .action-btn:hover {
        color: var(--primary-color);
        transform: scale(1.15);
    }

    /* EMPTY STATE */
    .no-data {
        padding: 40px;
        text-align: center;
        font-size: 16px;
        color: var(--text-muted);
        background: var(--bg-light);
        border-radius: 8px;
        margin-top: 10px;
        border: 1px solid var(--border-light);
    }

    /* RESPONSIVE ADJUSTMENTS */
    @media(max-width: 768px) {
        .orders-title {
            font-size: 24px;
        }
        .orders-container {
            padding: 16px;
        }
    }
</style>

{{-- Make sure you include Font Awesome CDN in your main layout file, e.g., in <head>:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
--}}

<div class="orders-container">
    <div class="orders-title">
        <i class="fas fa-box-open mr-2"></i> Orders List
    </div>

    @if(isset($orders) && $orders->count() > 0)
        <div class="table-wrapper">
            <table class="orders-table">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Shipment ID</th>
                        <th>Customer ID</th>
                        <th>Company</th>
                        <th>Origin</th>
                        <th>Destination</th>
                        <th>Order Date</th>
                        <th>Invoice No</th>
                        <th>Invoice Date</th>
                        <th>Amount</th>
                        <th>Amount + GST</th>
                        <th>Invoice Status</th>
                        <th>Shipment Status</th>
                        <th>Action</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($orders as $order)

                        @php
                            $mark = $order->markList ?? null;
                            $invoice = $order->invoice ?? null;
                            $shipment = $order->shipments->first() ?? null;
                            $invoiceStatus = strtolower($invoice->status ?? '');
                            $shipmentStatus = strtolower(str_replace('_', ' ', $shipment->status ?? ''));
                        @endphp

                        <tr>
                            <td>{{ $order->order_id ?? '-' }}</td> 
                           <td>{{ $shipment->shipment_id ?? '-' }}</td>
                            <td>{{ $mark->customer_id ?? '-' }}</td>
                            <td>{{ $mark->company_name ?? '-' }}</td>
                            <td>{{ $mark->origin ?? $order->origin ?? '-' }}</td>
                            <td>{{ $mark->destination ?? $order->destination ?? '-' }}</td>
                            <td>{{ $order->created_at ? $order->created_at->format('d-m-Y') : '-' }}</td>

                            <td>{{ $invoice->invoice_number ?? '-' }}</td>

                            <td>
                                {{ $invoice?->invoice_date ? date('d-m-Y', strtotime($invoice->invoice_date)) : '-' }}
                            </td>

                            <td>
                                {{ $invoice?->final_amount ? '₹'.number_format($invoice->final_amount, 2) : '-' }}
                            </td>

                            <td>
                                {{ $invoice?->final_amount_with_gst ? '₹'.number_format($invoice->final_amount_with_gst, 2) : '-' }}
                            </td>

                            <td>
                                @if($invoice?->status)
                                    <span class="status-badge status-{{ $invoiceStatus }}">
                                        {{ ucfirst($invoice->status) }}
                                    </span>
                                @else
                                    <span class="status-badge status-pending">Pending</span>
                                @endif
                            </td>

                            <td>
                                @if($shipment?->status)
                                    <span class="status-badge status-{{ str_replace(' ', '_', $shipmentStatus) }}">
                                        {{ ucfirst($shipmentStatus) }}
                                    </span>
                                @else
                                    <span class="shipstatus">-</span>
                                @endif
                            </td>

                            <td class="text-center">
                                <a href="{{ route('admin.orders.show', $order->id) }}" title="View Details">
                                    <i class="fas fa-eye action-btn"></i>
                                </a>
                            </td>
                        </tr>

                    @endforeach
                </tbody>
            </table>
        </div> {{-- End table-wrapper --}}
    @else
        <p class="no-data">
            <i class="fas fa-info-circle mr-2"></i> No orders found.
        </p>
    @endif
</div>

@endsection