@extends('admin::layouts.plane')

@section('content')

<style>
	.pending-fees-page {
		margin-left: 20px;
	}

	.pending-fees-card {
		border: 1px solid #e5e8ef;
		border-radius: 8px;
		background: #ffffff;
		padding: 18px;
		box-shadow: 0 2px 10px rgba(16, 24, 40, 0.04);
	}

	.pending-fees-title {
		font-weight: 600;
		margin-bottom: 12px;
	}

	.pending-fees-table th,
	.pending-fees-table td {
		vertical-align: middle !important;
	}

	.pending-fees-empty {
		color: #7a7a7a;
	}
</style>

<div class="row pending-fees-page">
	<div class="col-lg-12">
		<div class="row mb-3">
			<div class="col-lg-12">
				<h3>Student Report Card Pending Fees</h3>
				<hr>
			</div>
		</div>

		<div class="row mb-3">
			<div class="col-lg-12">
				<div class="alert alert-warning" style="margin-bottom: 0;">
					<strong>Note:</strong> If you do not want pending-fee filtering for any exam type, delete that exam type value. If a value exists for an exam type, students will be filtered by that amount and students with total pending fees greater than the configured value will be excluded from the result.
				</div>
			</div>
		</div>

		@if(session('success'))
			<div class="alert alert-success">{{ session('success') }}</div>
		@endif

		@if(session('error'))
			<div class="alert alert-danger">{{ session('error') }}</div>
		@endif

		@if ($errors->any())
			<div class="alert alert-danger">
				<ul style="margin-bottom: 0; padding-left: 18px;">
					@foreach ($errors->all() as $error)
						<li>{{ $error }}</li>
					@endforeach
				</ul>
			</div>
		@endif

		<div class="row">
			<div class="col-md-5 mb-3">
				<div class="pending-fees-card">
					<h4 class="pending-fees-title">Save / Update Pending Fee</h4>
					{!! Form::open(['route' => 'student-report-card-pending-fees.save', 'method' => 'POST', 'id' => 'pending-fees-form']) !!}
						<div class="form-group">
							{!! Form::label('exam_type', 'Exam Type', ['class' => 'control-label']) !!}
							{!! Form::select('exam_type', ['' => 'Select Exam Type'] + $examTypes, old('exam_type'), [
								'class' => 'form-control required',
								'id' => 'exam_type'
							]) !!}
						</div>

						<div class="form-group">
							{!! Form::label('pending_amount', 'Pending Fee Amount', ['class' => 'control-label']) !!}
							{!! Form::number('pending_amount', old('pending_amount'), [
								'class' => 'form-control required',
								'id' => 'pending_amount',
								'min' => '0',
								'step' => '0.01',
								'placeholder' => 'Enter pending fee amount'
							]) !!}
						</div>

						<div class="mt-3">
							{!! Form::button('<i class="fas fa-save"></i> Save / Update Pending Fee', [
								'type' => 'submit',
								'class' => 'btn btn-primary',
								'id' => 'save-btn'
							]) !!}
						</div>
					{!! Form::close() !!}
				</div>
			</div>

			<div class="col-md-7 mb-3">
				<div class="pending-fees-card">
					<h4 class="pending-fees-title">Current Pending Fee Configuration</h4>
					<div class="table-responsive">
						<table class="table table-bordered pending-fees-table" style="margin-bottom: 0;">
							<thead>
								<tr>
									<th style="width: 38%;">Exam Type</th>
									<th style="width: 30%;">Pending Amount</th>
									<th style="width: 32%;">Action</th>
								</tr>
							</thead>
							<tbody>
								@foreach($examTypes as $examTypeKey => $examTypeLabel)
									@php
										$hasConfiguredValue = array_key_exists($examTypeKey, $pendingFeesMap ?? []);
									@endphp
									<tr>
										<td>{{ $examTypeLabel }}</td>
										<td>{{ $hasConfiguredValue ? $pendingFeesMap[$examTypeKey] : '-' }}</td>
										<td>
											@if($hasConfiguredValue)
												{!! Form::open([
													'route' => 'student-report-card-pending-fees.delete',
													'method' => 'POST',
													'style' => 'display:inline-block;',
													'onsubmit' => "return confirm('Delete pending fee for {$examTypeLabel}?');"
												]) !!}
													<input type="hidden" name="exam_type" value="{{ $examTypeKey }}">
													<button type="submit" class="btn btn-danger btn-sm">Delete</button>
												{!! Form::close() !!}
											@else
												<span class="pending-fees-empty">No value</span>
											@endif
										</td>
									</tr>
								@endforeach
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
$(document).ready(function() {
	const pendingFeesMap = @json($pendingFeesMap ?? []);
	const oldExamType = @json(old('exam_type'));

	$('#exam_type').select2();

	function fillAmountFromSelectedExamType() {
		const selectedExamType = $('#exam_type').val();
		if (!selectedExamType) {
			return;
		}

		if (Object.prototype.hasOwnProperty.call(pendingFeesMap, selectedExamType)) {
			$('#pending_amount').val(pendingFeesMap[selectedExamType]);
		} else if (!oldExamType || oldExamType !== selectedExamType) {
			$('#pending_amount').val('');
		}
	}

	if (oldExamType) {
		fillAmountFromSelectedExamType();
	}

	$('#exam_type').on('change', function() {
		fillAmountFromSelectedExamType();
	});
});
</script>
@endsection