@extends('layouts.omd.omd')
@section('title', 'Purchase Orders')

@section('content')

<style>
    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

    .omd-orders-wrap {
        padding: 20px;
    }

    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .orders-table {
        width: 100%;
        border-collapse: collapse;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .orders-table th {
        background: #111827;
        color: #fff;
        font-size: 13px;
        padding: 12px;
        text-align: left;
        white-space: nowrap;
    }

    .orders-table td {
        padding: 12px;
        border-bottom: 1px solid #f1f1f1;
        font-size: 13px;
        vertical-align: top;
    }

    .po-chip {
        background: #eef2ff;
        color: #3730a3;
        padding: 4px 8px;
        border-radius: 6px;
        font-family: 'DM Mono', monospace;
        font-size: 12px;
    }

    .badge {
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
    }

    .s-pending { background:#fff7ed; color:#c2410c; }
    .s-accepted { background:#eff6ff; color:#1d4ed8; }
    .s-dispatched { background:#fef9c3; color:#a16207; }
    .s-delivered { background:#ecfccb; color:#3f6212; }
    .s-completed { background:#dcfce7; color:#166534; }
    .s-cancelled { background:#fee2e2; color:#991b1b; }

    .mono {
        font-family: 'DM Mono', monospace;
    }

    .muted {
        color: #6b7280;
        font-size: 12px;
    }

    .btn-view {
        background: #111827;
        color: #fff;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 12px;
        text-decoration: none;
    }
</style>

<div class="omd-orders-wrap">

    <div class="page-header">
        <h3>Purchase Orders</h3>

        <div>
            <a href="{{ route('omd.payments.index') }}" class="btn btn-sm btn-primary">Payments</a>
            <a href="{{ route('omd.create.order') }}" class="btn btn-sm btn-success">+ Create Order</a>
        </div>
    </div>

    <table class="orders-table">

        <thead>
            <tr>
                <th>PO No</th>
                <th>Vendor</th>
                <th>Project</th>
                <th>Materials</th>
                <th>Qty</th>
                <th>Total</th>
                <th>GST</th>
                <th>Grand Total</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>

        <tbody>

        @forelse($orders as $order)

            @php
                $sClass = [
                    'pending' => 's-pending',
                    'accepted' => 's-accepted',
                    'dispatched' => 's-dispatched',
                    'delivered' => 's-delivered',
                    'completed' => 's-completed',
                    'cancelled' => 's-cancelled',
                ][$order->status] ?? 's-pending';
            @endphp

            <tr>

                {{-- PO --}}
                <td>
                    <span class="po-chip">{{ $order->po_number }}</span>
                </td>

                {{-- Vendor --}}
                <td>
                    <div><strong>{{ $order->vendor->user->name ?? '-' }}</strong></div>
                    <div class="muted">{{ $order->vendor->company_name ?? '' }}</div>
                </td>

                {{-- Project (FIXED SAFE) --}}
                <td>
                    {{ $order->project->title ?? 'N/A' }}
                </td>

                {{-- Materials --}}
                <td>
                    {{ $order->items->pluck('name')->filter()->implode(', ') ?: '-' }}
                </td>

                {{-- Qty --}}
                <td class="mono">
                    {{ $order->items->sum('quantity') }}
                </td>

                {{-- Subtotal --}}
                <td class="mono">
                    ₹ {{ number_format($order->subtotal, 2) }}
                </td>

                {{-- GST --}}
                <td class="mono">
                    {{ $order->gst_percent }}%
                </td>

                {{-- Total --}}
                <td class="mono">
                    ₹ {{ number_format($order->total_amount, 2) }}
                </td>

                {{-- Status --}}
                <td>
                    <span class="badge {{ $sClass }}">
                        {{ ucfirst($order->status) }}
                    </span>
                </td>

                {{-- Action --}}
                <td>
                    <a class="btn-view" href="{{ route('omd.orders.show', $order->id) }}">
                        View
                    </a>
                </td>

            </tr>

        @empty

            <tr>
                <td colspan="10" style="text-align:center; padding:20px; color:#999;">
                    No Purchase Orders Found
                </td>
            </tr>

        @endforelse

        </tbody>

    </table>

</div>

@endsection