<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @hotelSettings
    <title>Edit Purchase Order - {{ hotelName() }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root { --brand: #1a936f; --brand-dark: #114b5f; --bg-soft: #f4f7fb; }
        body { background: var(--bg-soft); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .page-card { border: 0; border-radius: 16px; box-shadow: 0 10px 28px rgba(17, 75, 95, 0.12); overflow: hidden; }
        .head-band { background: linear-gradient(100deg, var(--brand-dark) 0%, var(--brand) 100%); color: #fff; padding: 16px 20px; }
        .form-label { font-weight: 600; color: #1f2937; }
        .form-control, .form-select { border-radius: 10px; }
        .btn { border-radius: 10px; }
    </style>
</head>
<body class="bg-light">
    <div class="container py-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0"><i class="fas fa-pen me-2"></i>Edit Purchase Order</h4>
            <a href="{{ route('purchase-orders.show', $purchaseOrder) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>Back
            </a>
        </div>

        @if($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="card page-card">
            <div class="head-band">
                <h5 class="m-0"><i class="fas fa-pen me-2"></i>Update Purchase Order</h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('purchase-orders.update', $purchaseOrder) }}">
                    @csrf
                    @method('PUT')

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">PO Number</label>
                            <input class="form-control" value="{{ $purchaseOrder->po_number }}" disabled>
                        </div>
                        <div class="col-md-6">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-select" name="status" id="status" required>
                                <option value="pending" {{ old('status', $purchaseOrder->status) === 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="ordered" {{ old('status', $purchaseOrder->status) === 'ordered' ? 'selected' : '' }}>Authorized (Ordered)</option>
                                <option value="received" {{ old('status', $purchaseOrder->status) === 'received' ? 'selected' : '' }}>Received</option>
                                <option value="cancelled" {{ old('status', $purchaseOrder->status) === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label for="item_id" class="form-label">Item</label>
                            <select class="form-select" name="item_id" id="item_id" required>
                                @foreach($items as $item)
                                    <option value="{{ $item->id }}" {{ (int) old('item_id', $purchaseOrder->item_id) === (int) $item->id ? 'selected' : '' }}>
                                        {{ $item->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="vendor_id" class="form-label">Vendor</label>
                            <select class="form-select" name="vendor_id" id="vendor_id" required>
                                @foreach($vendors as $vendor)
                                    <option value="{{ $vendor->id }}" {{ (int) old('vendor_id', $purchaseOrder->vendor_id) === (int) $vendor->id ? 'selected' : '' }}>
                                        {{ $vendor->company }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label for="quantity" class="form-label">Quantity</label>
                            <input type="number" min="1" class="form-control" name="quantity" id="quantity" value="{{ old('quantity', $purchaseOrder->quantity) }}" required>
                        </div>
                        <div class="col-md-3">
                            <label for="unit_price" class="form-label">Unit Price</label>
                            <input type="number" min="0" step="0.01" class="form-control" name="unit_price" id="unit_price" value="{{ old('unit_price', $purchaseOrder->unit_price) }}" required>
                        </div>
                        <div class="col-md-3">
                            <label for="total_amount" class="form-label">Total Amount</label>
                            <input type="number" min="0" step="0.01" class="form-control" name="total_amount" id="total_amount" value="{{ old('total_amount', $purchaseOrder->total_amount) }}" required readonly>
                        </div>
                        <div class="col-md-3">
                            <label for="urgency" class="form-label">Urgency</label>
                            <select class="form-select" name="urgency" id="urgency" required>
                                @foreach(['low' => 'Low', 'normal' => 'Normal', 'high' => 'High', 'urgent' => 'Urgent'] as $value => $label)
                                    <option value="{{ $value }}" {{ old('urgency', $purchaseOrder->urgency) === $value ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label for="delivery_date" class="form-label">Delivery Date</label>
                            <input type="date" class="form-control" name="delivery_date" id="delivery_date" value="{{ old('delivery_date', optional($purchaseOrder->delivery_date)->format('Y-m-d')) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label for="terms" class="form-label">Terms</label>
                            <input type="text" class="form-control" name="terms" id="terms" value="{{ old('terms', $purchaseOrder->terms) }}">
                        </div>

                        <div class="col-12">
                            <label for="notes" class="form-label">Notes</label>
                            <textarea class="form-control" name="notes" id="notes" rows="3">{{ old('notes', $purchaseOrder->notes) }}</textarea>
                        </div>
                    </div>

                    <div class="mt-3 d-flex justify-content-end gap-2">
                        <a href="{{ route('purchase-orders.show', $purchaseOrder) }}" class="btn btn-outline-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        (function() {
            const qty = document.getElementById('quantity');
            const unitPrice = document.getElementById('unit_price');
            const total = document.getElementById('total_amount');
            function recalc() {
                const q = parseFloat(qty.value || '0');
                const p = parseFloat(unitPrice.value || '0');
                total.value = (q * p).toFixed(2);
            }
            qty.addEventListener('input', recalc);
            unitPrice.addEventListener('input', recalc);
            recalc();
        })();
    </script>
</body>
</html>
