@php($isEdit = isset($gatepass))
<form action="{{ $isEdit ? route('gatepasses.update', $gatepass) : route('gatepasses.store') }}" method="POST">
	@csrf @if($isEdit) @method('PUT') @endif
	<div class="row g-3">
		<div class="col-md-3">
			<label class="form-label">GP Number</label>
			<input type="text" name="gate_pass_number" class="form-control @error('gate_pass_number') is-invalid @enderror" value="{{ old('gate_pass_number', $isEdit ? $gatepass->gate_pass_number : ($autoGPNumber ?? '')) }}" {{ $isEdit ? '' : 'readonly' }} required>
			@if(!$isEdit)
				<small class="form-text text-muted">
					<i class="fas fa-magic"></i> Auto-generated GP number
				</small>
			@endif
			@error('gate_pass_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
		</div>
		<div class="col-md-5">
			<label class="form-label">PO Number *</label>
			<input type="hidden" name="purchase_order_id" id="purchase_order_id" value="{{ old('purchase_order_id', $isEdit ? ($gatepass->purchase_order_id ?? '') : '') }}">
			<select id="po_search" class="form-select" data-initial-id="{{ old('purchase_order_id', $isEdit ? ($gatepass->purchase_order_id ?? '') : '') }}" data-initial-text="{{ $isEdit && ($gatepass->purchaseOrder->po_number ?? false) ? ($gatepass->purchaseOrder->po_number . ' - ' . ($gatepass->purchaseOrder->vendor->name ?? '')) : '' }}" required></select>
			<small class="form-text text-muted">Search by PO number; shows "PO - Vendor".</small>
		</div>
		<div class="col-md-2"><label class="form-label">Date</label><input type="date" name="date" class="form-control @error('date') is-invalid @enderror" value="{{ old('date', $isEdit ? optional($gatepass->created_at)->setTimezone('Asia/Karachi')->format('Y-m-d') : now()->setTimezone('Asia/Karachi')->format('Y-m-d')) }}" required>@error('date')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
		<div class="col-md-2"><label class="form-label">Type</label><select name="type" class="form-select @error('type') is-invalid @enderror" required><option value="inbound" {{ old('type',$isEdit?$gatepass->type:'')==='inbound'?'selected':'' }}>Inbound</option><option value="outbound" {{ old('type',$isEdit?$gatepass->type:'')==='outbound'?'selected':'' }}>Outbound</option></select>@error('type')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
	</div>
	<div class="row g-3 mt-2">
		<div class="col-md-3"><label class="form-label">Vehicle No *</label><input type="text" name="vehicle_no" class="form-control @error('vehicle_no') is-invalid @enderror" value="{{ old('vehicle_no', $isEdit ? $gatepass->vehicle_no : '') }}" placeholder="Enter vehicle number" required>@error('vehicle_no')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
		<div class="col-md-3"><label class="form-label">Driver Name</label><input type="text" name="driver_name" class="form-control @error('driver_name') is-invalid @enderror" value="{{ old('driver_name', $isEdit ? $gatepass->driver_name : '') }}" placeholder="Enter driver name">@error('driver_name')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
		<div class="col-md-6"><label class="form-label">Other Persons (Helpers, etc.)</label><textarea name="other_persons" class="form-control @error('other_persons') is-invalid @enderror" rows="2" placeholder="Enter names of helpers or other persons accompanying the vehicle">{{ old('other_persons', $isEdit ? $gatepass->other_persons : '') }}</textarea>@error('other_persons')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
	</div>
	<div class="row g-3 mt-2"><div class="col-12"><label class="form-label">Remarks</label><input type="text" name="remarks" class="form-control" value="{{ old('remarks', $isEdit ? $gatepass->remarks : '') }}"></div></div>
	<div class="d-flex gap-2 mt-4"><button type="submit" class="btn btn-primary">{{ $isEdit ? 'Update' : 'Create' }}</button><a href="{{ route('gatepasses.index') }}" class="btn btn-secondary">Cancel</a></div>
</form>
@push('plugin-styles')
<link rel="stylesheet" href="{{ asset('theme/vendors/select2/select2.min.css') }}">
<style>
    /* Style for readonly auto-generated number fields */
    input[readonly] {
        background-color: #f8f9fa !important;
        border-color: #dee2e6 !important;
        color: #495057 !important;
        cursor: not-allowed !important;
    }

    input[readonly]:focus {
        box-shadow: none !important;
        border-color: #dee2e6 !important;
    }

    .form-text.text-muted {
        font-size: 0.875em;
        color: #6c757d !important;
    }

    .form-text.text-muted i {
        margin-right: 0.25rem;
    }
</style>
@endpush
@push('plugin-scripts')
<script src="{{ asset('theme/vendors/select2/select2.min.js') }}"></script>
<script>
 document.addEventListener('DOMContentLoaded', function(){
   const poSel = document.getElementById('po_search');
   const hiddenPo = document.getElementById('purchase_order_id');
   $(poSel).select2({
     theme:'bootstrap-5', placeholder:'Search PO...', allowClear:true, width:'100%',
     ajax:{ url:'{{ route('po.search') }}', dataType:'json', delay:250, data:p=>({q:p.term||''}), processResults:function(d){
       // d is array of objects: {id, text, po_number, vendor_name}
       const results = (d || []).map(row => ({id: row.id, text: (row.po_number||row.text)+' - '+(row.vendor_name||'')}));
       return { results };
     }, cache:true }
   });
   // Initialize existing value
   const initId = poSel.dataset.initialId; const initText = poSel.dataset.initialText;
   if(initId && initText){ const opt = new Option(initText, initId, true, true); $(poSel).append(opt).trigger('change'); hiddenPo.value = initId; }
   // Sync hidden input on change
   $(poSel).on('select2:select', function(e){ const id = e.params.data.id; hiddenPo.value = id; });
   $(poSel).on('select2:clear', function(){ hiddenPo.value = ''; });
 });
</script>
@endpush
