@extends('layouts.app')

@section('title', 'Edit Purchase Order')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-6">
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Edit Purchase Order</h1>
            <p class="text-gray-600">PO: <span class="font-mono text-blue-600 font-bold">{{ $purchaseOrder->po_number }}</span></p>
        </div>
        <a href="{{ route('purchase-orders.index') }}" class="text-sm text-gray-500 hover:text-gray-700">
            <i class="fas fa-arrow-left mr-1"></i> Back to List
        </a>
    </div>

    <form action="{{ route('purchase-orders.update', $purchaseOrder) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="bg-white shadow rounded-lg p-6 space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700">PO Number *</label>
                    <input type="text" name="po_number" value="{{ old('po_number', $purchaseOrder->po_number) }}" required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700">Current Status *</label>
                    <select name="status" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500">
                        @foreach(['draft', 'ordered', 'received', 'invoiced', 'paid'] as $status)
                            <option value="{{ $status }}" {{ $purchaseOrder->status == $status ? 'selected' : '' }}>
                                {{ ucfirst($status) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700">Order Date *</label>
                    <input type="date" name="order_date" value="{{ old('order_date', $purchaseOrder->order_date->format('Y-m-d')) }}" required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Supplier *</label>
                    <select name="supplier_id" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                        @foreach($suppliers as $supplier)
                            <option value="{{ $supplier->id }}" {{ $purchaseOrder->supplier_id == $supplier->id ? 'selected' : '' }}>
                                {{ $supplier->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700">Link to Customer Invoice *</label>
                    <select name="client_invoice_id" required class="mt-1 block w-full rounded-md border-orange-300 shadow-sm">
                        @foreach($clientInvoices as $invoice)
                            <option value="{{ $invoice->id }}" {{ $purchaseOrder->client_invoice_id == $invoice->id ? 'selected' : '' }}>
                                {{ $invoice->invoice_number }} - {{ $invoice->client->name ?? 'Unknown' }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <hr class="border-gray-200">

            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Item Name / Description *</label>
                    <input type="text" name="item_description" value="{{ old('item_description', $purchaseOrder->item_description) }}" required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Quantity *</label>
                        <input type="number" name="quantity" id="quantity" step="0.01" value="{{ old('quantity', (float)$purchaseOrder->quantity) }}" required
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700">UOM</label>
                        <input type="text" name="uom" value="{{ old('uom', $purchaseOrder->uom) }}"
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700">Supplier Price (Unit) *</label>
                        <div class="mt-1 relative rounded-md shadow-sm">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <span class="text-gray-500 sm:text-sm">$</span>
                            </div>
                            <input type="number" name="unit_price" id="unit_price" step="0.01" value="{{ old('unit_price', $purchaseOrder->unit_price) }}" required
                                   class="pl-7 block w-full rounded-md border-gray-300 shadow-sm">
                        </div>
                    </div>
                </div>

                <div class="bg-blue-50 p-4 rounded-md flex justify-between items-center">
                    <span class="text-sm font-medium text-blue-700">Total Purchase Value:</span>
                    <span id="total_cost_display" class="text-xl font-bold text-blue-900">
                        ${{ number_format($purchaseOrder->total_price, 2) }}
                    </span>
                </div>
            </div>

            <hr class="border-gray-200">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Actual Delivery Date</label>
                    <input type="date" name="actual_delivery_date"
                           value="{{ $purchaseOrder->actual_delivery_date ? $purchaseOrder->actual_delivery_date->format('Y-m-d') : '' }}"
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Internal Notes</label>
                    <textarea name="notes" rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">{{ old('notes', $purchaseOrder->notes) }}</textarea>
                </div>
            </div>

            <div class="flex justify-end space-x-3 pt-4 border-t">
                <a href="{{ route('purchase-orders.index') }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">Cancel</a>
                <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 shadow-sm">
                    Update Purchase Order
                </button>
            </div>
        </div>
    </form>
</div>

<script>
    const qtyInput = document.getElementById('quantity');
    const priceInput = document.getElementById('unit_price');
    const totalDisplay = document.getElementById('total_cost_display');

    function calculateTotal() {
        const qty = parseFloat(qtyInput.value) || 0;
        const price = parseFloat(priceInput.value) || 0;
        const total = qty * price;
        totalDisplay.innerText = '$' + total.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
    }

    qtyInput.addEventListener('input', calculateTotal);
    priceInput.addEventListener('input', calculateTotal);
</script>
@endsection