@extends('layouts.app')

@section('title', 'Purchase Order ' . $purchaseOrder->purchase_order_number)

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1 small text-uppercase">
                <li class="breadcrumb-item"><a href="{{ route('purchase-orders.index') }}" class="text-decoration-none">Purchase Orders</a></li>
                <li class="breadcrumb-item active">{{ $purchaseOrder->purchase_order_number }}</li>
            </ol>
        </nav>
        <h2 class="h4 mb-0 text-dark fw-bold">{{ $purchaseOrder->purchase_order_number }}</h2>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('purchase-orders.edit', $purchaseOrder) }}" class="btn btn-outline-primary border-2 px-4 shadow-sm fw-bold">
            <i class="fas fa-edit me-2"></i> Edit
        </a>
        <form action="{{ route('purchase-orders.destroy', $purchaseOrder) }}" method="POST" onsubmit="return confirm('Delete this PO?');">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-outline-danger border-2 px-4 shadow-sm fw-bold">
                <i class="fas fa-trash-alt me-2"></i> Delete
            </button>
        </form>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-4 p-4 mb-4">
            <div class="row mb-5">
                <div class="col-6">
                    <h1 class="h2 fw-bold text-primary mb-1">PURCHASE ORDER</h1>
                    <p class="text-muted small"># {{ $purchaseOrder->purchase_order_number }}</p>
                </div>
                <div class="col-6 text-end">
                    <div class="badge {{ $purchaseOrder->status == 'open' ? 'bg-info' : 'bg-secondary' }} px-3 py-2 rounded-pill text-uppercase">
                        {{ $purchaseOrder->status }}
                    </div>
                </div>
            </div>

            <div class="row mb-5">
                <div class="col-6">
                    <p class="text-muted small fw-bold text-uppercase mb-2">Vendor</p>
                    <h6 class="fw-bold mb-1">{{ $purchaseOrder->vendor->name }}</h6>
                    <p class="text-muted small mb-0">{{ $purchaseOrder->vendor->email }}<br>{{ $purchaseOrder->vendor->phone }}</p>
                </div>
                <div class="col-6 text-end">
                    <p class="text-muted small fw-bold text-uppercase mb-2">Order Details</p>
                    <p class="small mb-1"><span class="text-muted">Order Date:</span> <span class="fw-bold">{{ \Carbon\Carbon::parse($purchaseOrder->date)->format('d M Y') }}</span></p>
                    @if($purchaseOrder->expected_delivery_date)
                        <p class="small mb-0"><span class="text-muted">Expected Delivery:</span> <span class="fw-bold">{{ \Carbon\Carbon::parse($purchaseOrder->expected_delivery_date)->format('d M Y') }}</span></p>
                    @endif
                </div>
            </div>

            <div class="table-responsive mb-4">
                <table class="table align-middle">
                    <thead class="bg-light text-muted small text-uppercase font-monospace">
                        <tr>
                            <th class="ps-3">#</th>
                            <th>Item & Description</th>
                            <th class="text-center">Qty</th>
                            <th class="text-end">Rate</th>
                            <th class="text-end pe-3">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($purchaseOrder->items as $index => $item)
                        <tr>
                            <td class="ps-3 text-muted small">{{ $index + 1 }}</td>
                            <td>
                                <p class="mb-0 fw-bold">{{ $item->item->name }}</p>
                                <p class="text-muted small mb-0">{{ $item->item->description }}</p>
                            </td>
                            <td class="text-center">{{ number_format($item->quantity, 2) }}</td>
                            <td class="text-end">{{ formatCurrency($item->rate) }}</td>
                            <td class="text-end pe-3 fw-bold">{{ formatCurrency($item->amount) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="row justify-content-end">
                <div class="col-md-5">
                    <div class="card bg-light border-0 rounded-3 p-3 text-end">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted small">Sub Total</span>
                            <span class="fw-bold text-dark">{{ formatCurrency($purchaseOrder->subtotal) }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
                            <span class="text-muted small">Tax Total</span>
                            <span class="fw-bold text-dark">{{ formatCurrency($purchaseOrder->tax_total) }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="fw-bold h6 mb-0">Total</span>
                            <span class="fw-bold h4 mb-0 text-primary">{{ formatCurrency($purchaseOrder->total) }}</span>
                        </div>
                    </div>
                </div>
            </div>

            @if($purchaseOrder->notes)
            <div class="mt-5 pt-4 border-top">
                <p class="text-muted small fw-bold text-uppercase mb-2">Notes</p>
                <div class="bg-light p-3 rounded-3 small text-muted fst-italic">
                    {{ $purchaseOrder->notes }}
                </div>
            </div>
            @endif
        </div>
    </div>

    <!-- Related Actions Sidebar -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm rounded-4 p-4 sticky-top" style="top: 100px;">
            <h6 class="fw-bold text-dark text-uppercase mb-4">Quick Actions</h6>
            <button class="btn btn-primary w-100 py-2 fw-bold shadow-sm mb-3">
                <i class="fas fa-file-invoice-dollar me-2"></i> Convert to Bill
            </button>
            <button class="btn btn-outline-secondary w-100 py-2 border-2 fw-bold mb-3">
                <i class="fas fa-print me-2"></i> Print PDF
            </button>
            <button class="btn btn-outline-secondary w-100 py-2 border-2 fw-bold">
                <i class="fas fa-envelope me-2"></i> Email to Vendor
            </button>

            <div class="mt-5">
                <h6 class="fw-bold text-dark text-uppercase mb-3">Audit Trail</h6>
                <div class="small">
                    <div class="d-flex gap-3 mb-3">
                        <div class="flex-shrink-0"><i class="fas fa-check-circle text-success mt-1"></i></div>
                        <div>
                            <p class="mb-0 fw-bold">PO Created</p>
                            <p class="text-muted mb-0 small">{{ $purchaseOrder->created_at->format('d M Y, h:i A') }}</p>
                        </div>
                    </div>
                    <div class="d-flex gap-3">
                        <div class="flex-shrink-0"><i class="fas fa-circle text-muted mt-1 small"></i></div>
                        <div>
                            <p class="mb-0 fw-bold">Status: {{ ucfirst($purchaseOrder->status) }}</p>
                            <p class="text-muted mb-0 small">Automatically marked as Draft</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection