@extends('layouts.app')

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

@section('content')
<div class="max-w-4xl mx-auto px-4 py-6">
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-gray-900">Create Purchase Order</h1>
        <p class="text-gray-600">Place an order with a supplier for a specific customer job.</p>
    </div>

    <form action="{{ route('purchase-orders.store') }}" method="POST">
        @csrf

        <div class="bg-white shadow rounded-lg p-6 space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 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', 'PO-' . strtoupper(Str::random(6))) }}" required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
                </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', date('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">Select Supplier *</label>
                    <select name="supplier_id" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                        <option value="">-- Choose Supplier --</option>
                        @foreach($suppliers as $supplier)
                            <option value="{{ $supplier->id }}" {{ old('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 (Revenue) *</label>
                    <select name="client_invoice_id" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm border-orange-300 focus:ring-orange-500">
                        <option value="">-- Select Customer Invoice --</option>
                        @foreach($clientInvoices as $invoice)
                            <option value="{{ $invoice->id }}" {{ old('client_invoice_id') == $invoice->id ? 'selected' : '' }}>
                                {{ $invoice->invoice_number }} - {{ $invoice->client->name ?? 'Unknown Client' }}
                            </option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-gray-500 italic">This links the supplier cost to your sales revenue.</p>
                </div>
            </div>

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

            <div class="space-y-4">
                <h3 class="text-lg font-medium text-gray-900">Item Specification</h3>

                <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') }}" required
                           placeholder="e.g. 50x Banner Prints (Cust A)"
                           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', 1) }}" 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 (Unit of Measure)</label>
                        <input type="text" name="uom" value="{{ old('uom') }}" placeholder="pcs, m2, units"
                               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 Price) *</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') }}" required
                                   class="pl-7 block w-full rounded-md border-gray-300 shadow-sm" placeholder="0.00">
                        </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">Estimated Total Cost:</span>
                    <span id="total_cost_display" class="text-xl font-bold text-blue-900">$0.00</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">Expected Delivery Date</label>
                    <input type="date" name="expected_delivery_date" 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 Specifications</label>
                    <textarea name="specifications" rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" placeholder="Size, weight, finishing details..."></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">
                    Issue 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