@extends('layouts.admin')

@section('title', 'Orders')

@section('content')
<div class="admin-page-header">
    <div class="d-flex justify-content-between align-items-center w-100">
        <div>
            <h1 class="admin-page-title">Orders Management</h1>
            <p class="admin-page-subtitle">Manage and track customer orders</p>
        </div>
    </div>
</div>

<div class="admin-content">
    <!-- Source Filter Pills -->
    <div class="admin-status-filters-card mb-2 pt-3">
        <div class="row pb-2 border-bottom mb-1 align-items-end">
            <div class="col-xl-4 col-12">
                <div class="d-flex align-items-center flex-wrap">
                    <span class="source-filter-label me-2">Source:</span>
                    <div class="status-filter-pills-container source-pos">
                        @php
                            $sourceBaseParams = request()->except('source');
                            $sourceBaseUrl = route('admin.orders.index');
                        @endphp
                        <a href="{{ $sourceBaseParams ? $sourceBaseUrl . '?' . http_build_query($sourceBaseParams) : $sourceBaseUrl }}" 
                        class="source-filter-pill pill-white source-pill {{ !request('source') ? 'active' : '' }}"
                        data-source="">
                        <i class="fa-solid fa-layer-group"></i>  All
                        </a>
                        <a href="{{ $sourceBaseUrl . '?' . http_build_query(array_merge($sourceBaseParams, ['source' => 'pos'])) }}" 
                        class="source-filter-pill pill-white source-pill {{ request('source') == 'pos' ? 'active' : '' }}"
                        data-source="pos">
                        <i class="fa-solid fa-desktop"></i>  POS
                        </a>
                        <a href="{{ $sourceBaseUrl . '?' . http_build_query(array_merge($sourceBaseParams, ['source' => 'online'])) }}" 
                        class="source-filter-pill pill-white source-pill {{ request('source') == 'online' ? 'active' : '' }}"
                        data-source="online">
                        <i class="fa-solid fa-globe"></i>  Online
                        </a>
                        <a href="{{ $sourceBaseUrl . '?' . http_build_query(array_merge($sourceBaseParams, ['source' => 'pos_to_online'])) }}" 
                        class="source-filter-pill pill-white source-pill {{ request('source') == 'pos_to_online' ? 'active' : '' }}"
                        data-source="pos_to_online">
                        <i class="fa-solid fa-kaaba"></i>  POS to Online
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-xl-8 col-12">
                <form method="GET" action="{{ route('admin.orders.index') }}">
                    @if(request('per_page'))
                        <input type="hidden" name="per_page" value="{{ request('per_page') }}">
                    @endif
                    @if(request('source'))
                        <input type="hidden" name="source" value="{{ request('source') }}">
                    @endif
                    @if(request('status'))
                        <input type="hidden" name="status" value="{{ request('status') }}">
                    @endif
                    @if(request('payment_status'))
                        <input type="hidden" name="payment_status" value="{{ request('payment_status') }}">
                    @endif
                    @if(request('filter'))
                        <input type="hidden" name="filter" value="{{ request('filter') }}">
                    @endif
                    @if(request('shipment_status'))
                        <input type="hidden" name="shipment_status" value="{{ request('shipment_status') }}">
                    @endif

                    <div class="row g-2 justify-content-end align-items-end order-filter">
                        <div class="col-md-3">
                            <input type="text"
                                   name="search"
                                   id="search"
                                   class="form-control"
                                   value="{{ request('search', request('order_id') ?? request('customer_phone') ?? request('awb_number')) }}"
                                   placeholder="Order ID, phone, or AWB">
                        </div>
                        <div class="col-md-2 ml-auto">
                            <select name="date_filter" id="date_filter" class="form-select" placeholder="Select Date Filter" onchange="toggleCustomDates()">
                                <option value="">All Time</option>
                                <option value="today" {{ request('date_filter')=='today' ? 'selected' : '' }}>Today</option>
                                <option value="yesterday" {{ request('date_filter')=='yesterday' ? 'selected' : '' }}>Yesterday</option>
                                <option value="last_7_days" {{ request('date_filter')=='last_7_days' ? 'selected' : '' }}>Last 7 Days</option>
                                <option value="last_month" {{ request('date_filter')=='last_month' ? 'selected' : '' }}>Last Month</option>
                                <option value="last_year" {{ request('date_filter')=='last_year' ? 'selected' : '' }}>Last Year</option>
                                <option value="custom" {{ request('date_filter')=='custom' ? 'selected' : '' }}>Custom Range</option>
                            </select>
                        </div>
                        <div class="col-md-2" id="startDateDiv" style="display: {{ request('date_filter') == 'custom' ? 'block' : 'none' }};">
                            <label for="date_from" class="form-label small mb-1">From Date</label>
                            <input type="date" name="date_from" id="date_from" class="form-control" value="{{ request('date_from') }}">
                        </div>
                        <div class="col-md-2" id="endDateDiv" style="display: {{ request('date_filter') == 'custom' ? 'block' : 'none' }};">
                            <label for="date_to" class="form-label small mb-1">To Date</label>
                            <input type="date" name="date_to" id="date_to" class="form-control" value="{{ request('date_to') }}">
                        </div>
                        <div class="col-md-1 col-10">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="bi bi-funnel"></i> Filter
                            </button>
                        </div>
                        <div class="col-md-1 col-2">
                        <a href="{{ route('admin.orders.index', ['per_page' => (int)($perPage ?? request('per_page', 10))]) }}" title="Reset Filters" class="btn btn-outline-secondary" >
                                <i class="bi bi-arrow-clockwise"></i>
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    
        <div class="status-filter-pills-container mt-2">
            <div class="status-filter-label mb-2">Status:</div>
            <a href="{{ route('admin.orders.index', array_merge(request()->except(['status', 'payment_status', 'filter', 'shipment_status']), ['per_page' => (int)($perPage ?? request('per_page', 10))])) }}" 
               class="status-filter-pill pill-all {{ !request('status') && !request('payment_status') && !request('filter') ? 'active' : '' }}"
               data-filter-type="all">
               <i class="fa-solid fa-layer-group"></i> All Orders ({{ $statusCounts['all_orders'] }})
            </a>
            <a href="{{ route('admin.orders.index', array_merge(request()->except(['status', 'payment_status', 'filter', 'shipment_status', 'page']), ['status' => 'awaiting_payment', 'per_page' => (int)($perPage ?? request('per_page', 10))])) }}" 
               class="status-filter-pill pill-yellow {{ request('status') == 'awaiting_payment' ? 'active' : '' }}"
               data-filter-type="status"
               data-filter-value="awaiting_payment">
               <i class="fa-regular fa-credit-card"></i> Awaiting Payment ({{ $statusCounts['awaiting_payment'] }})
            </a>
            <a href="{{ route('admin.orders.index', array_merge(request()->except(['status', 'payment_status', 'filter', 'shipment_status', 'page']), ['status' => 'placed', 'per_page' => (int)($perPage ?? request('per_page', 10))])) }}" 
               class="status-filter-pill pill-purple {{ request('status') == 'placed' ? 'active' : '' }}"
               data-filter-type="status"
               data-filter-value="placed">
               <i class="fa-solid fa-cube"></i> Order Placed ({{ $statusCounts['order_placed'] }})
            </a>
            <a href="{{ route('admin.orders.index', array_merge(request()->except(['status', 'payment_status', 'filter', 'shipment_status', 'page']), ['status' => 'confirmed', 'per_page' => (int)($perPage ?? request('per_page', 10))])) }}" 
               class="status-filter-pill pill-blue {{ request('status') == 'confirmed' ? 'active' : '' }}"
               data-filter-type="status"
               data-filter-value="confirmed">
               <i class="fa-solid fa-cubes"></i> Order Confirmed ({{ $statusCounts['order_confirmed'] }})
            </a>
            <a href="{{ route('admin.orders.index', array_merge(request()->except(['status', 'payment_status', 'filter', 'shipment_status', 'page']), ['status' => 'packed', 'per_page' => (int)($perPage ?? request('per_page', 10))])) }}" 
               class="status-filter-pill pill-white {{ request('status') == 'packed' ? 'active' : '' }}"
               data-filter-type="status"
               data-filter-value="packed">
               <i class="fa-solid fa-box-archive"></i> Order Packed ({{ $statusCounts['order_packed'] }})
            </a>
            <a href="{{ route('admin.orders.index', array_merge(request()->except(['status', 'payment_status', 'filter', 'shipment_status', 'page']), ['status' => 'awaiting_pickup', 'per_page' => (int)($perPage ?? request('per_page', 10))])) }}" 
               class="status-filter-pill pill-white {{ request('status') == 'awaiting_pickup' ? 'active' : '' }}"
               data-filter-type="status"
               data-filter-value="awaiting_pickup">
               <i class="fa-solid fa-truck"></i> Shipment Created ({{ $statusCounts['shipment_created'] }})
            </a>
            <a href="{{ route('admin.orders.index', array_merge(request()->except(['status', 'payment_status', 'filter', 'shipment_status', 'page']), ['status' => 'shipped', 'per_page' => (int)($perPage ?? request('per_page', 10))])) }}" 
               class="status-filter-pill pill-white {{ request('status') == 'shipped' ? 'active' : '' }}"
               data-filter-type="status"
               data-filter-value="shipped">
               <i class="fa-solid fa-truck-fast"></i> Shipped ({{ $statusCounts['shipped'] }})
            </a>
            <a href="{{ route('admin.orders.index', array_merge(request()->except(['status', 'payment_status', 'filter', 'shipment_status', 'page']), ['status' => 'delivery_failed', 'per_page' => (int)($perPage ?? request('per_page', 10))])) }}" 
               class="status-filter-pill pill-yellow {{ request('status') == 'delivery_failed' ? 'active' : '' }}"
               data-filter-type="status"
               data-filter-value="delivery_failed">
               <i class="fa-solid fa-triangle-exclamation"></i> Delivery Failed ({{ $statusCounts['delivery_failed'] }})
            </a>
            <a href="{{ route('admin.orders.index', array_merge(request()->except(['status', 'payment_status', 'filter', 'shipment_status', 'page']), ['status' => 'delivered', 'per_page' => (int)($perPage ?? request('per_page', 10))])) }}" 
               class="status-filter-pill pill-green {{ request('status') == 'delivered' ? 'active' : '' }}"
               data-filter-type="status"
               data-filter-value="delivered">
               <i class="fa-solid fa-circle-check"></i> Completed ({{ $statusCounts['completed'] }})
            </a>
            <a href="{{ route('admin.orders.index', array_merge(request()->except(['status', 'payment_status', 'filter', 'shipment_status', 'page']), ['status' => 'returned', 'per_page' => (int)($perPage ?? request('per_page', 10))])) }}" 
               class="status-filter-pill pill-red {{ request('status') == 'returned' ? 'active' : '' }}"
               data-filter-type="status"
               data-filter-value="returned">
               <i class="fa-solid fa-truck-fast" style="transform:scaleX(-1)"></i> Returned ({{ $statusCounts['returned'] }})
            </a>
            <a href="{{ route('admin.orders.index', array_merge(request()->except(['status', 'payment_status', 'filter', 'shipment_status', 'page']), ['status' => 'lost', 'per_page' => (int)($perPage ?? request('per_page', 10))])) }}" 
               class="status-filter-pill pill-red {{ request('status') == 'lost' ? 'active' : '' }}"
               data-filter-type="status"
               data-filter-value="lost">
               <i class="fa-solid fa-box-open"></i> Lost ({{ $statusCounts['lost'] }})
            </a>
            <a href="{{ route('admin.orders.index', array_merge(request()->except(['status', 'payment_status', 'filter', 'shipment_status', 'page']), ['filter' => 'cancelled_failed', 'per_page' => (int)($perPage ?? request('per_page', 10))])) }}" 
               class="status-filter-pill pill-red {{ request('filter') == 'cancelled_failed' ? 'active' : '' }}"
               data-filter-type="filter"
               data-filter-value="cancelled_failed">
               <i class="fa-solid fa-ban"></i> Cancelled / Failed ({{ $statusCounts['cancelled_failed'] }})
            </a>
        </div>

        @if(!empty($showShipmentFilter) && !empty($shipmentStatusCounts))
        <div class="status-filter-pills-container  mt-2">
            <div class="status-filter-label">Shipment Status:</div>
            @php
                $shipmentBaseExcept = ['shipment_status', 'page'];
            @endphp
            <a href="{{ route('admin.orders.index', array_merge(request()->except($shipmentBaseExcept), ['per_page' => (int)($perPage ?? request('per_page', 10))])) }}"
               class="status-filter-pill pill-all {{ !request('shipment_status') ? 'active' : '' }}">
               <i class="fa-solid fa-layer-group"></i> All ({{ $shipmentStatusCounts['all'] ?? 0 }})
            </a>
            @foreach($shipmentStatusCounts as $normalizedKey => $count)
                @if($normalizedKey === 'all')
                    @continue
                @endif
                <a href="{{ route('admin.orders.index', array_merge(request()->except($shipmentBaseExcept), ['shipment_status' => $normalizedKey, 'per_page' => (int)($perPage ?? request('per_page', 10))])) }}"
                   class="status-filter-pill pill-white {{ request('shipment_status') === $normalizedKey ? 'active' : '' }}">
                   <i class="fa-solid fa-truck-fast"></i> {{ ucwords($normalizedKey) }} ({{ $count }})
                </a>
            @endforeach
        </div>
        @endif
    </div>


    <!-- Orders Table -->
    <div class="admin-table-card">
        <div class="table-responsive">
            <table class="table admin-table">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Customer</th>
                        <th>Date</th>
                        <th>Total</th>
                        <th>Status</th>
                        <th>Payment</th>
                        <th>Source</th>
                        <th>Shipping Details</th>
                        <th>Shipping Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($orders as $order)
                    <tr>
                        <td>
                            <span class="fw-bold" style="color: var(--admin-primary);">#{{ $order->id }}</span>
                        </td>
                        <td>
                            @php
                                $customerName = $order->user->name
                                    ?? data_get($order->address_snapshot, 'name')
                                    ?? 'Guest User';
                                $customerMobile = $order->user->mobile
                                    ?? data_get($order->address_snapshot, 'mobile')
                                    ?? data_get($order->address_snapshot, 'phone')
                                    ?? data_get($order->address_snapshot, 'contact')
                                    ?? 'N/A';
                                $avatarInitial = strtoupper(substr((string) $customerName, 0, 1));
                                if ($avatarInitial === '') {
                                    $avatarInitial = 'G';
                                }
                                $avatarColors = config('services.admin_ui.customer_avatar_colors', ['#2563EB', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899', '#14B8A6']);
                                $avatarSeed = (string) ($order->user_id ?? $order->id);
                                $avatarIndex = (int) (sprintf('%u', crc32($avatarSeed)) % max(count($avatarColors), 1));
                                $avatarColor = $avatarColors[$avatarIndex] ?? '#2563EB';
                            @endphp
                            <div class="d-flex align-items-center">
                                <div class="me-2" style="width: 40px; height: 40px; min-width: 40px;">
                                    <div class="d-flex align-items-center justify-content-center text-white rounded-circle"
                                         style="width: 40px; height: 40px; font-size: 16px; font-weight: 600; background-color: {{ $avatarColor }};">
                                        {{ $avatarInitial }}
                                    </div>
                                </div>
                                <div>
                                    <div class="fw-medium">{{ $customerName }}</div>
                                    <small class="text-muted">{{ $customerMobile }}</small>
                                </div>
                            </div>
                        </td>
                        <td class="text-nowrap">
                            <div>{{ $order->created_at->format('M d, Y') }}</div>
                            <small class="text-muted">{{ $order->created_at->format('h:i A') }}</small>
                        </td>
                        <td>
                            <span class="fw-bold text-success">₹{{ number_format($order->total_payable, 2) }}</span>
                        </td>
                        <td>
                            @php
                                // All statuses use same default color
                                $statusClass = 'badge-modern-info';
                                if($order->status == 'delivered') $statusClass = 'badge-modern-success';
                                elseif($order->status == 'placed' || $order->status == 'awaiting_payment' || $order->status == 'awaiting_pickup') $statusClass = 'badge-modern-warning';
                                elseif($order->status == 'cancelled' || $order->status == 'returned' || $order->status == 'lost') $statusClass = 'badge-modern-danger';
                                elseif($order->status == 'delivery_failed') $statusClass = 'badge-modern-warning';
                                elseif($order->status == 'shipped') $statusClass = 'badge-modern-info';
                                elseif($order->status == 'confirmed') $statusClass = 'badge-modern-primary';
                            @endphp
                            <span class="badge-modern {{ $statusClass }}">
                                {{ ucfirst($order->status_label) }}
                            </span>
                        </td>
                        <td>
                            @php
                                $paymentClass = 'badge-modern-primary';
                                if($order->isCodOrder()) $paymentClass = 'badge-modern-info';
                                elseif($order->isAbandonedPayment()) $paymentClass = 'badge-modern-danger';
                                elseif($order->payment_status == 'paid') $paymentClass = 'badge-modern-success';
                                elseif($order->payment_status == 'failed') $paymentClass = 'badge-modern-danger';
                                elseif($order->payment_status == 'pending') $paymentClass = 'badge-modern-warning';
                            @endphp
                            <span class="badge-modern {{ $paymentClass }}">
                                @if($order->isCodOrder())
                                    <i class="bi bi-cash-coin"></i>
                                @elseif($order->isAbandonedPayment())
                                    <i class="bi bi-x-circle"></i>
                                @elseif($order->payment_status == 'paid')
                                    <i class="bi bi-check-circle"></i>
                                @elseif($order->payment_status == 'failed')
                                    <i class="bi bi-exclamation-triangle"></i>
                                @else
                                    <i class="bi bi-clock"></i>
                                @endif
                                {{ $order->getPaymentStatusDisplay() }}
                            </span>
                        </td>
                        <td>
                            @php
                                $source = $order->source ?? 'online';
                                $isPos = $source === 'pos';
                                $isPosToOnline = $source === 'pos_to_online';
                            @endphp
                            <span class="badge-modern {{ $isPosToOnline ? 'badge-modern-warning' : ($isPos ? 'badge-modern-info' : 'badge-modern-success') }}">
                                <i class="bi bi-{{ $isPosToOnline ? 'cart-check' : ($isPos ? 'shop' : 'globe') }}"></i>
                                {{ $isPosToOnline ? 'POS to Online' : ($isPos ? 'POS' : 'Online') }}
                            </span>
                        </td>
                        @php
                            $latestShipment = $order->shipments->sortByDesc('created_at')->first();
                            $shippingType = $latestShipment?->carrier?->name;
                            $awbNumber = $latestShipment?->tracking_id ?? $order->delhivery_awb ?? '—';
                            $shipmentStatus = $latestShipment?->status;
                        @endphp

                        <td>
                            @if($shippingType) <span class="text-muted">{{ $shippingType }}</span><br> @endif
                            <span class="font-monospace small text-muted">{{ $awbNumber }}</span>
                        </td>
                        <td>
                            @if($shipmentStatus)
                                @php
                                    $shipmentStatusClass = 'badge-modern-info';
                                    if (in_array($shipmentStatus, ['created', 'delivered'], true)) {
                                        $shipmentStatusClass = 'badge-modern-success';
                                    } elseif ($shipmentStatus === 'failed') {
                                        $shipmentStatusClass = 'badge-modern-danger';
                                    } elseif ($shipmentStatus === 'pending') {
                                        $shipmentStatusClass = 'badge-modern-warning';
                                    }
                                @endphp
                                <span class="badge-modern {{ $shipmentStatusClass }}">
                                    {{ ucwords($shipmentStatus) }}
                                </span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td>
                            <div class="d-flex gap-2">
                                <a href="{{ route('admin.orders.show', $order) }}" 
                                    class="admin-action-btn admin-action-btn-sm" 
                                    style="background: #10b981; color: white; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0;"
                                    target="_blank"
                                    title="View">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{{ route('admin.orders.invoice.print', $order) }}"
                                    class="admin-action-btn admin-action-btn-sm"
                                    style="background: #7c3aed; color: white; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0;"
                                    target="_blank"
                                    title="Print Invoice">
                                    <i class="bi bi-printer"></i>
                                </a>
                                @if($order->status == 'awaiting_payment' || $order->status == 'placed' || $order->status == 'confirmed')
                                <!-- <a href="#" 
                                    class="admin-action-btn admin-action-btn-sm admin-btn-primary"
                                    style="background: #ef4444; height: -webkit-fill-available; color: white; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0;"
                                    title="Cancel Order">
                                    <i class="bi bi-x-circle"></i>
                                </a> -->
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="text-center py-5">
                            <div class="empty-state">
                                <i class="bi bi-cart-x empty-state-icon"></i>
                                <h5 class="empty-state-title">No Orders Found</h5>
                                <p class="empty-state-description">No orders match your current filters. Try adjusting your search or filter criteria.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination - Right Aligned -->
            <div class="pagination-wrapper d-flex justify-content-between mt-4">

            <div class="align-items-center gap-2">
                    <label for="ordersPerPage" class="mb-0 small text-muted">Per page</label>
                    <form method="GET" action="{{ route('admin.orders.index') }}" class="d-inline">
                        @foreach(request()->except(['per_page', 'page']) as $key => $value)
                            @if(is_array($value))
                                @foreach($value as $item)
                                    <input type="hidden" name="{{ $key }}[]" value="{{ $item }}">
                                @endforeach
                            @else
                                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                            @endif
                        @endforeach
                        <select id="ordersPerPage" name="per_page" class="form-select form-select-sm" style="width: auto;" onchange="this.form.submit()">
                            @foreach(($allowedPerPage ?? [10, 20, 50, 100]) as $size)
                                <option value="{{ $size }}" {{ (int)($perPage ?? request('per_page', 10)) === (int)$size ? 'selected' : '' }}>{{ $size }}</option>
                            @endforeach
                        </select>
                        
                    </form>
                </div>
            <div class="d-flex justify-content-end align-items-center gap-3 flex-wrap">
                <div class="pagination-info-text">
                    Showing <strong>{{ $orders->firstItem() ?? 0 }}</strong>–<strong>{{ $orders->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $orders->total() }}</strong> orders
                </div>
                @if($orders->hasPages())
                <div class="pagination-controls">
                    {{ $orders->links('vendor.pagination.admin-categories') }}
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.admin-page-header {
    position: relative;
    margin-bottom: 0.5rem;
}

.admin-main{
    padding-top: calc(64px + 1rem);
}

.source-pos{
    background-color:#F7F6F2;
    border-radius: 30px;
    padding: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .admin-page-header .d-flex {
        gap: 1rem;
    }
}

/* Status Filter Pills */
.admin-status-filters-card {
    background: #ffffff;
    border-radius: var(--admin-border-radius);
    box-shadow: var(--admin-card-shadow);
    border: none;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.source-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.source-filter-label,
.status-filter-label {
    font-weight: 500;
    color: #374151;
    font-size: 0.875rem;
}

.status-filter-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* All pills: white background by default (like Cancel) */
.status-filter-pill {
    display: inline-block;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid #E5E7EB;
    white-space: nowrap;
    background-color: #ffffff;
    color: #1F2937;
}

.source-filter-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
    color: #1F2937;
}

.status-filter-pill:hover {
    background-color: #F9FAFB;
    border-color: #D1D5DB;
    color: #111827;
}

/* Only the selected pill gets colored - Yellow when active */
.status-filter-pill.pill-yellow.active {
    background-color: #FDE68A;
    border-color: #FBBF24;
    color: #78350F;
}

/* Only the selected pill gets colored - Purple when active */
.status-filter-pill.pill-purple.active {
    background-color: #DDD6FE;
    border-color: #A78BFA;
    color: #581C87;
}

/* Only the selected pill gets colored - Blue when active */
.status-filter-pill.pill-blue.active {
    background-color: #BFDBFE;
    border-color: #3B82F6;
    color: #1E3A8A;
}

/* Only the selected pill gets colored - Green when active */
.status-filter-pill.pill-green.active {
    background-color: #A7F3D0;
    border-color: #10B981;
    color: #047857;
}

/* Red when active (if used) */
.status-filter-pill.pill-red.active {
    background-color: #FECACA;
    border-color: #F87171;
    color: #7F1D1D;
}

/* White/grey pills (Shipment Created, Awaiting Pickup, Shipped, Others, Cancel) - highlight when active */
.source-filter-pill.pill-white.active,
.status-filter-pill.pill-white.active  {
    background-color: var(--admin-primary);
    border-color:2px solid var(--admin-primary);
    color: #ffffff;
    box-shadow:  #888888;
}

/* All Orders - light grey when active */
.status-filter-pill.pill-all.active {
    background-color: #F3F4F6;
    border-color: #9CA3AF;
    color: #111827;
}

/* Responsive Design */
@media (max-width: 768px) {
    .status-filter-pills-container {
        gap: 0.5rem;
    }
    
    .status-filter-pill {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}

@media (max-width: 576px) {
    .status-filter-pills-container {
        gap: 0.4rem;
    }
    
    .status-filter-pill {
        font-size: 0.75rem;
        padding: 0.35rem 0.7rem;
    }
}

/* Pagination Wrapper */
.pagination-wrapper {
    padding-top: 1.5rem;
    border-top: 2px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
}

.pagination-info-text {
    font-size: 0.9rem;
    color: #4a5568;
    font-weight: 500;
    white-space: nowrap;
}

.pagination-info-text strong {
    color: var(--admin-primary);
    font-weight: 700;
}

.pagination-controls {
    display: flex;
    align-items: center;
}

/* Override global pagination centering for this page */
.pagination-wrapper .pagination-controls .pagination {
    justify-content: flex-end !important;
    margin: 0 !important;
}

/* Ensure pagination only shows once */
.pagination-wrapper .pagination {
    display: flex;
    list-style: none;
    padding: 0;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle status pill clicks to preserve other filters (skip source pills - they use their own href)
    const statusPills = document.querySelectorAll('.status-filter-pill');
    
    statusPills.forEach(pill => {
        pill.addEventListener('click', function(e) {
            if (this.classList.contains('source-pill')) {
                return; // Source pills use their href as-is, don't modify
            }
            
            const filterType = this.getAttribute('data-filter-type');
            const filterValue = this.getAttribute('data-filter-value');
            
            // If it's "all", clear all filters
            if (filterType === 'all') {
                return; // Let the default link behavior work
            }
            
            // Build URL with current filters preserved
            const url = new URL(this.href);
            const currentParams = new URLSearchParams(window.location.search);
            
            // Preserve date_filter, source, and other filters
            if (currentParams.has('date_filter')) {
                url.searchParams.set('date_filter', currentParams.get('date_filter'));
            }
            if (currentParams.has('date_from')) {
                url.searchParams.set('date_from', currentParams.get('date_from'));
            }
            if (currentParams.has('date_to')) {
                url.searchParams.set('date_to', currentParams.get('date_to'));
            }
            if (currentParams.has('source')) {
                url.searchParams.set('source', currentParams.get('source'));
            }
            
            // Update the href to include preserved filters
            this.href = url.toString();
        });
    });
});

function toggleCustomDates() {
    const period = document.getElementById('date_filter').value;
    const startDateDiv = document.getElementById('startDateDiv');
    const endDateDiv = document.getElementById('endDateDiv');
    if (period === 'custom') {
        startDateDiv.style.display = 'block';
        endDateDiv.style.display = 'block';
    } else {
        startDateDiv.style.display = 'none';
        endDateDiv.style.display = 'none';
    }
}
</script>
@endpush
@endsection