@csrf

@php
	$accountTypes = \App\Models\PaymentAccount::TYPES;
@endphp

<div class="row g-3">
	<div class="col-md-6">
		<label class="form-label" for="from_account_id">من حساب <span class="text-danger">*</span></label>
		<select name="from_account_id" id="from_account_id" class="form-select @error('from_account_id') is-invalid @enderror" required>
			<option value="">اختر الحساب المحول منه</option>
			@foreach($accounts as $acc)
				<option value="{{ $acc->id }}" @selected(old('from_account_id', $transfer->from_account_id ?? '') == $acc->id)>
					{{ $acc->name_ar }}
					@if($acc->code)
						({{ $acc->code }})
					@endif
				</option>
			@endforeach
		</select>
		@error('from_account_id')
			<div class="invalid-feedback">{{ $message }}</div>
		@enderror
		<small class="text-muted d-block mt-1" id="from_account_hint"></small>
	</div>

	<div class="col-md-6">
		<label class="form-label" for="to_account_id">إلى حساب <span class="text-danger">*</span></label>
		<select name="to_account_id" id="to_account_id" class="form-select @error('to_account_id') is-invalid @enderror" required>
			<option value="">اختر الحساب المحول إليه</option>
			@foreach($accounts as $acc)
				<option value="{{ $acc->id }}" @selected(old('to_account_id', $transfer->to_account_id ?? '') == $acc->id)>
					{{ $acc->name_ar }}
					@if($acc->code)
						({{ $acc->code }})
					@endif
				</option>
			@endforeach
		</select>
		@error('to_account_id')
			<div class="invalid-feedback">{{ $message }}</div>
		@enderror
		<small class="text-muted d-block mt-1" id="to_account_hint"></small>
	</div>

	<div class="col-md-4">
		<label class="form-label" for="transfer_date">تاريخ التحويل <span class="text-danger">*</span></label>
		<input type="date" name="transfer_date" id="transfer_date" class="form-control @error('transfer_date') is-invalid @enderror"
			   value="{{ old('transfer_date', isset($transfer) ? $transfer->transfer_date?->format('Y-m-d') : now()->format('Y-m-d')) }}" required>
		@error('transfer_date')
			<div class="invalid-feedback">{{ $message }}</div>
		@enderror
	</div>

	<div class="col-md-4">
		<label class="form-label" for="amount">قيمة التحويل <span class="text-danger">*</span></label>
		<div class="input-group">
			<input type="number" step="0.01" min="0.01" name="amount" id="amount"
				   class="form-control @error('amount') is-invalid @enderror"
				   value="{{ old('amount', $transfer->amount ?? '') }}" placeholder="0.00" required>
			<span class="input-group-text">ج.م</span>
			@error('amount')
				<div class="invalid-feedback d-block">{{ $message }}</div>
			@enderror
		</div>
	</div>

	<div class="col-md-4">
		<label class="form-label" for="reference_number">رقم المرجع</label>
		<input type="text" name="reference_number" id="reference_number" maxlength="100"
			   class="form-control @error('reference_number') is-invalid @enderror"
			   value="{{ old('reference_number', $transfer->reference_number ?? '') }}"
			   placeholder="مثال: TRX-2026-0098">
		@error('reference_number')
			<div class="invalid-feedback">{{ $message }}</div>
		@enderror
	</div>

	<div class="col-12">
		<label class="form-label" for="notes_ar">ملاحظات داخلية</label>
		<textarea name="notes_ar" id="notes_ar" rows="3" maxlength="1000"
				  class="form-control @error('notes_ar') is-invalid @enderror"
				  placeholder="اكتب ملاحظات توضيحية إن وجدت...">{{ old('notes_ar', $transfer->notes_ar ?? '') }}</textarea>
		@error('notes_ar')
			<div class="invalid-feedback">{{ $message }}</div>
		@enderror
	</div>
</div>

<div class="mt-4 d-flex flex-wrap gap-2">
	<button class="btn btn-primary" type="submit">
		<i class="ti ti-device-floppy me-1"></i>{{ isset($transfer) ? 'حفظ التعديلات' : 'حفظ التحويل' }}
	</button>
	<a class="btn btn-light" href="{{ route('admin.account_transfers.index') }}">
		<i class="ti ti-x me-1"></i>إلغاء
	</a>
</div>

<script>
	(function () {
		const accounts = @json($accounts->map(function ($a) use ($accountTypes) {
			return [
				'id' => $a->id,
				'name' => $a->name_ar,
				'type' => $accountTypes[$a->account_type] ?? $a->account_type,
				'provider' => $a->provider_name,
				'code' => $a->code,
			];
		})->values());

		function renderHint(selectId, hintId) {
			const selected = document.getElementById(selectId).value;
			const hintEl = document.getElementById(hintId);
			const account = accounts.find(a => String(a.id) === String(selected));

			if (!account) {
				hintEl.textContent = '';
				return;
			}

			const provider = account.provider ? ' - ' + account.provider : '';
			const code = account.code ? ' - كود: ' + account.code : '';
			hintEl.textContent = 'نوع الحساب: ' + account.type + provider + code;
		}

		document.getElementById('from_account_id').addEventListener('change', function () {
			renderHint('from_account_id', 'from_account_hint');
		});
		document.getElementById('to_account_id').addEventListener('change', function () {
			renderHint('to_account_id', 'to_account_hint');
		});

		renderHint('from_account_id', 'from_account_hint');
		renderHint('to_account_id', 'to_account_hint');
	})();
</script>