@extends('layouts.vendor.vendor')
@section('title', 'My Orders')
@section('content')

<style>
    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');
    .orders-wrap { font-family: 'DM Sans', sans-serif; padding: 2rem; }
    .orders-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
    .orders-header h3 { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.3px; margin: 0; }
    .orders-table-wrap { background: #fff; border-radius: 14px; box-shadow: 0 2px 16px rgba(0,0,0,0.06); overflow: hidden; }
    .orders-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .orders-table thead tr { background: #f8f9fb; border-bottom: 1px solid #eef0f4; }
    .orders-table thead th { padding: 13px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: #8a92a0; white-space: nowrap; }
    .orders-table tbody tr { border-bottom: 1px solid #f2f4f7; transition: background 0.15s; }
    .orders-table tbody tr:last-child { border-bottom: none; }
    .orders-table tbody tr:hover { background: #fafbfc; }
    .orders-table td { padding: 13px 16px; color: #2d3340; vertical-align: middle; white-space: nowrap; }
    .po-number { font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500; color: #4361ee; background: #eef1fd; padding: 3px 8px; border-radius: 5px; }
    .material-name { font-weight: 500; color: #1a1f2e; }
    .amount-text { font-family: 'DM Mono', monospace; font-size: 12px; }
    .total-amount { font-weight: 600; }
    .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
    .status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .badge-pending    { background: #fff8e6; color: #d48806; }
    .badge-accepted   { background: #e6f7f0; color: #0a8a55; }
    .badge-dispatched { background: #e6f0ff; color: #2563eb; }
    .badge-delivered  { background: #e8f5e9; color: #2e7d32; }
    .badge-cancelled  { background: #ffeaea; color: #c0392b; }
    .btn-view { background: #4361ee; color: #fff; border: none; padding: 5px 14px; border-radius: 7px; font-size: 12px; font-weight: 600; text-decoration: none; transition: background 0.15s; }
    .btn-view:hover { background: #3451d1; color: #fff; }
    .empty-row td { padding: 3rem; text-align: center; color: #adb5bd; }
    .alert-success { border: none; background: #e6f7f0; color: #0a8a55; border-radius: 10px; font-size: 13px; }
</style>

<div class="orders-wrap">
    <div class="orders-header">
        <h3>My Purchase Orders</h3>
    </div>

    @if(session('success'))
        <div class="alert alert-success mb-3">✓ {{ session('success') }}</div>
    @endif

    <div class="orders-table-wrap">
        <table class="orders-table">
            <thead>
                <tr>
                    <th>PO Number</th>
                    <th>Material</th>
                    <th>Qty</th>
                    <th>Total Amount</th>
                    <th>Delivery Date</th>
                    <th>Dispatch Date</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($orders as $order)
                <tr>
                    <td><span class="po-number">{{ $order->po_number }}</span></td>
                    <td><span class="material-name">{{ $order->material_name }}</span></td>
                    <td class="amount-text">{{ $order->quantity }} {{ $order->unit }}</td>
                    <td><span class="amount-text total-amount">₹ {{ number_format($order->total_amount, 2) }}</span></td>
                    <td class="amount-text">{{ \Carbon\Carbon::parse($order->delivery_date)->format('d M Y') }}</td>
                    <td class="amount-text">
                        {{ $order->dispatch_date
                            ? \Carbon\Carbon::parse($order->dispatch_date)->format('d M Y')
                            : '—' }}
                    </td>
                    <td>
                        @php
                            $badgeClass = [
                                'pending'    => 'badge-pending',
                                'accepted'   => 'badge-accepted',
                                'dispatched' => 'badge-dispatched',
                                'delivered'  => 'badge-delivered',
                                'cancelled'  => 'badge-cancelled',
                            ][$order->status] ?? 'badge-pending';
                        @endphp
                        <span class="status-badge {{ $badgeClass }}">{{ ucfirst($order->status) }}</span>
                    </td>
                    <td>
                        <a href="{{ route('vendor.orders.show', $order->id) }}" class="btn-view">View →</a>
                    </td>
                </tr>
                @empty
                <tr class="empty-row">
                    <td colspan="8">No purchase orders found</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection