197 lines
8.9 KiB
PHP
197 lines
8.9 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'New Purchase Order')
|
|
|
|
@section('content')
|
|
<div class="mb-6">
|
|
<h1 class="page-title">New Purchase Order</h1>
|
|
<p class="page-subtitle"><a href="{{ route('purchase.orders.index') }}" class="text-blue-600 hover:underline">Purchase Orders</a> / New</p>
|
|
</div>
|
|
|
|
@if($errors->any())
|
|
<div class="mb-4 px-4 py-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
|
|
<ul class="list-disc list-inside space-y-1">
|
|
@foreach($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('purchase.orders.store') }}" method="POST">
|
|
@csrf
|
|
|
|
<!-- Header Section -->
|
|
<div class="card card-body mb-4">
|
|
<h2 class="text-base font-semibold text-gray-700 mb-4">Order Details</h2>
|
|
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
|
|
|
<div>
|
|
<label class="form-label">Supplier <span class="text-red-500">*</span></label>
|
|
<select name="supplier_id" required class="form-select">
|
|
<option value="">-- Select 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="form-label">Purchase Request (optional)</label>
|
|
<select name="purchase_request_id" class="form-select">
|
|
<option value="">-- None --</option>
|
|
@foreach($purchaseRequests as $pr)
|
|
<option value="{{ $pr->id }}" {{ old('purchase_request_id') == $pr->id ? 'selected' : '' }}>
|
|
{{ $pr->request_number ?? '#' . $pr->id }} - {{ $pr->item->item_name ?? '' }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="form-label">PO Date <span class="text-red-500">*</span></label>
|
|
<input type="date" name="po_date" value="{{ old('po_date', date('Y-m-d')) }}" required class="form-input">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="form-label">Expected Delivery Date</label>
|
|
<input type="date" name="expected_delivery_date" value="{{ old('expected_delivery_date') }}" class="form-input">
|
|
</div>
|
|
|
|
<div class="sm:col-span-2">
|
|
<label class="form-label">Notes</label>
|
|
<textarea name="notes" rows="2" class="form-textarea">{{ old('notes') }}</textarea>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Items Section -->
|
|
<div class="card card-body mb-4">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-base font-semibold text-gray-700">Order Items</h2>
|
|
<button type="button" onclick="addPORow()" class="btn-primary btn-sm">+ Add Row</button>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full text-sm" id="po-items-table">
|
|
<thead>
|
|
<tr class="border-b border-gray-200">
|
|
<th class="pb-2 text-left font-semibold text-gray-600">Item</th>
|
|
<th class="pb-2 text-left font-semibold text-gray-600 w-28">Quantity</th>
|
|
<th class="pb-2 text-left font-semibold text-gray-600 w-28">Rate</th>
|
|
<th class="pb-2 text-left font-semibold text-gray-600 w-28">Total</th>
|
|
<th class="pb-2 w-10"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="po-items-body">
|
|
<tr class="po-item-row">
|
|
<td class="py-1 pr-2">
|
|
<select name="items[0][item_id]"
|
|
class="w-full border border-gray-300 rounded px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
|
|
<option value="">-- Select Item --</option>
|
|
@foreach($items as $item)
|
|
<option value="{{ $item->id }}">{{ $item->item_code }} - {{ $item->item_name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</td>
|
|
<td class="py-1 pr-2">
|
|
<input type="number" name="items[0][quantity]" placeholder="0"
|
|
min="0" step="0.01"
|
|
onchange="calcRowTotal(this)"
|
|
class="w-full border border-gray-300 rounded px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400 qty-input">
|
|
</td>
|
|
<td class="py-1 pr-2">
|
|
<input type="number" name="items[0][rate]" placeholder="0.00"
|
|
min="0" step="0.01"
|
|
onchange="calcRowTotal(this)"
|
|
class="w-full border border-gray-300 rounded px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400 rate-input">
|
|
</td>
|
|
<td class="py-1 pr-2">
|
|
<input type="number" name="items[0][total]" placeholder="0.00"
|
|
readonly
|
|
class="w-full border border-gray-200 bg-gray-50 rounded px-2 py-1.5 text-sm row-total">
|
|
</td>
|
|
<td class="py-1">
|
|
<button type="button" onclick="removePORow(this)" class="text-red-400 hover:text-red-600 text-lg leading-none">×</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-3 flex justify-end">
|
|
<div class="text-sm font-semibold text-gray-700">
|
|
Grand Total: <span id="grand-total" class="text-blue-700">0.00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<button type="submit" class="btn-primary">Create Purchase Order</button>
|
|
<a href="{{ route('purchase.orders.index') }}" class="btn-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
var poRowIndex = 1;
|
|
var itemsHtml = `@foreach($items as $item)<option value="{{ $item->id }}">{{ $item->item_code }} - {{ $item->item_name }}</option>@endforeach`;
|
|
|
|
function addPORow() {
|
|
var tbody = document.getElementById('po-items-body');
|
|
var row = document.createElement('tr');
|
|
row.className = 'po-item-row';
|
|
row.innerHTML = `
|
|
<td class="py-1 pr-2">
|
|
<select name="items[${poRowIndex}][item_id]" class="w-full border border-gray-300 rounded px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
|
|
<option value="">-- Select Item --</option>
|
|
${itemsHtml}
|
|
</select>
|
|
</td>
|
|
<td class="py-1 pr-2">
|
|
<input type="number" name="items[${poRowIndex}][quantity]" placeholder="0" min="0" step="0.01"
|
|
onchange="calcRowTotal(this)" class="w-full border border-gray-300 rounded px-2 py-1.5 text-sm qty-input">
|
|
</td>
|
|
<td class="py-1 pr-2">
|
|
<input type="number" name="items[${poRowIndex}][rate]" placeholder="0.00" min="0" step="0.01"
|
|
onchange="calcRowTotal(this)" class="w-full border border-gray-300 rounded px-2 py-1.5 text-sm rate-input">
|
|
</td>
|
|
<td class="py-1 pr-2">
|
|
<input type="number" name="items[${poRowIndex}][total]" placeholder="0.00" readonly
|
|
class="w-full border border-gray-200 bg-gray-50 rounded px-2 py-1.5 text-sm row-total">
|
|
</td>
|
|
<td class="py-1">
|
|
<button type="button" onclick="removePORow(this)" class="text-red-400 hover:text-red-600 text-lg leading-none">×</button>
|
|
</td>`;
|
|
tbody.appendChild(row);
|
|
poRowIndex++;
|
|
}
|
|
|
|
function removePORow(btn) {
|
|
var rows = document.querySelectorAll('.po-item-row');
|
|
if (rows.length > 1) {
|
|
btn.closest('tr').remove();
|
|
updateGrandTotal();
|
|
}
|
|
}
|
|
|
|
function calcRowTotal(input) {
|
|
var row = input.closest('tr');
|
|
var qty = parseFloat(row.querySelector('.qty-input').value) || 0;
|
|
var rate = parseFloat(row.querySelector('.rate-input').value) || 0;
|
|
var total = qty * rate;
|
|
row.querySelector('.row-total').value = total.toFixed(2);
|
|
updateGrandTotal();
|
|
}
|
|
|
|
function updateGrandTotal() {
|
|
var totals = document.querySelectorAll('.row-total');
|
|
var grand = 0;
|
|
totals.forEach(function(t) { grand += parseFloat(t.value) || 0; });
|
|
document.getElementById('grand-total').textContent = grand.toFixed(2);
|
|
}
|
|
</script>
|
|
@endsection
|