@extends('layouts.app')

@section('title', 'Sales Orders')

@section('content')
<div class="row align-items-center mb-4">
    <div class="col">
        <div class="d-flex align-items-center">
            <h2 class="h3 mb-0">Sales Orders</h2>
            <div class="ms-3 dropdown mt-1">
                <button class="btn btn-link link-dark text-decoration-none dropdown-toggle p-0 fw-bold" type="button" data-bs-toggle="dropdown">
                    All Sales Orders
                </button>
                <ul class="dropdown-menu shadow border-0">
                    <li><a class="dropdown-item" href="#">All Sales Orders</a></li>
                    <li><a class="dropdown-item" href="#">Open Sales Orders</a></li>
                    <li><a class="dropdown-item" href="#">Draft Sales Orders</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-auto">
        <a href="{{ route('sales-orders.create') }}" class="btn btn-primary rounded-pill px-4">
            <i class="fas fa-plus me-2"></i>New
        </a>
        <button class="btn btn-light rounded-circle ms-2 shadow-sm">
            <i class="fas fa-cog"></i>
        </button>
    </div>
</div>

<!-- Status Tabs -->
<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-2">
        <ul class="nav nav-pills nav-justified gap-2">
            <li class="nav-item">
                <a class="nav-link rounded-pill px-4 small {{ request('status', 'all') == 'all' ? 'active' : 'text-muted' }}" href="{{ route('sales-orders.index') }}">All</a>
            </li>
            <li class="nav-item">
                <a class="nav-link rounded-pill px-4 small {{ request('status') == 'draft' ? 'active' : 'text-muted' }}" href="{{ route('sales-orders.index', ['status' => 'draft']) }}">Draft</a>
            </li>
            <li class="nav-item">
                <a class="nav-link rounded-pill px-4 small {{ request('status') == 'open' ? 'active' : 'text-muted' }}" href="{{ route('sales-orders.index', ['status' => 'open']) }}">Open</a>
            </li>
            <li class="nav-item">
                <a class="nav-link rounded-pill px-4 small {{ request('status') == 'closed' ? 'active' : 'text-muted' }}" href="{{ route('sales-orders.index', ['status' => 'closed']) }}">Closed</a>
            </li>
        </ul>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="bg-light text-muted small text-uppercase">
                <tr>
                    <th class="ps-4">Date</th>
                    <th>Order#</th>
                    <th>Reference#</th>
                    <th>Customer Name</th>
                    <th>Status</th>
                    <th>Amount</th>
                    <th class="text-end pe-4">Expected Shipment</th>
                </tr>
            </thead>
            <tbody>
                @forelse($salesOrders as $order)
                <tr onclick="window.location='{{ route('sales-orders.show', $order->id) }}'" style="cursor: pointer;">
                    <td class="ps-4 py-3">{{ $order->order_date }}</td>
                    <td class="fw-bold text-primary">{{ $order->order_number }}</td>
                    <td class="text-muted small">{{ $order->reference_number ?: '-' }}</td>
                    <td>
                        <div class="fw-bold">{{ $order->customer->display_name ?: $order->customer->name }}</div>
                    </td>
                    <td>
                        @php
                            $badgeClass = [
                                'draft' => 'bg-secondary',
                                'open' => 'bg-info text-dark',
                                'closed' => 'bg-success',
                                'cancelled' => 'bg-danger',
                            ][$order->status] ?? 'bg-secondary';
                        @endphp
                        <span class="badge {{ $badgeClass }} rounded-pill px-3 py-2 small">{{ ucfirst($order->status) }}</span>
                    </td>
                    <td class="fw-bold">{{ formatCurrency($order->total) }}</td>
                    <td class="text-end pe-4 text-muted small">
                        {{ $order->expected_shipment_date ?: 'Not Set' }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="text-center py-5">
                        <div class="py-4">
                            <i class="fas fa-cart-plus fa-4x text-light mb-3"></i>
                            <h5 class="text-muted">No Sales Orders Yet</h5>
                            <p class="text-secondary small">Start by creating an order manually or converting a Quote.</p>
                            <a href="{{ route('sales-orders.create') }}" class="btn btn-primary rounded-pill px-4 mt-2">Create New Order</a>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($salesOrders->hasPages())
    <div class="card-footer bg-white border-0 py-3">
        {{ $salesOrders->appends(request()->query())->links() }}
    </div>
    @endif
</div>
@endsection