@extends('layouts.app')

@section('title', 'Beneficiaries')

@section('content')	
<!--start page wrapper -->
<div class="page-wrapper">
	<div class="page-content">
		<!--breadcrumb-->
		<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
			<div class="ps-3">
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb mb-0 p-0">
						<li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i></a>
						</li>
						<li class="breadcrumb-item active" aria-current="page">Add Beneficiary</li>
                        
					</ol>
                    <br>
                    <div>
                        <a href="{{ route('member.beneficiaries') }}">
                        <i class="fas fa-arrow-circle-left"></i>Beneficiaries list</a>

                    </div>
				</nav>
			</div>
			
			<div class="ms-auto">
				
			</div>
		</div>
		<!--end breadcrumb-->
		<hr />
		@if (session('success'))
				<div class="alert alert-success" role="alert">
					{{ session('success') }}
				</div>
			@endif
		<div class="row">
			<div class="col-xl-12 mx-auto">
				<div class="card border-top border-0 border-4 border-primary">
					<div class="card-body">
						<div class="p-4 border rounded">
							<form data-branches="{{$branches}}"class="row g-3 needs-validation" action="{{ route('member.storebeneficiary') }}" method="post" enctype="multipart/form-data" novalidate>
								@csrf
								
								<div class="col-md-6">
									<label for="validationCustom01" class="form-label">Account Name<sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup></label>
									<input type="text" class="form-control @error('account_name') is-invalid @enderror" id="validationCustom01" name="account_name" value="{{ old('account_name') }}"required>
                                    @error('account_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
								</div>
								
								<div class="col-md-6">
									<label for="validationCustom03" class="form-label">Account Numbers <sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup> </label>
									<input type="text" class="form-control @error('account_number') is-invalid @enderror" id="validationCustom02" name="account_number" value="{{ old('account_number') }}" required>
									@error('account_number')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
								</div>
								
								<div class="col-md-6">
									<label for="validationCustom03" class="form-label">Bank Name <sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup></label>
									<select class="form-control @error('bank_name') is-invalid @enderror" id="bank" name="bank_name" required>
										<option selected disabled value="">Choose Bank...</option>
										@foreach($banks as $bank)
											<option value="{{ $bank->id }}">{{ $bank->bank_name }}</option>
										@endforeach
									</select>
								</div>
								
								<div class="col-md-6" id="branch-field" style="display:none;">
									<label for="validationCustom04" class="form-label">Branch <sup><i class='fas fa-asterisk' style='font-size:7px;color:red'></i></sup></label>
									<select class="form-control @error('branch') is-invalid @enderror" id="branch" name="bank_branch_id">
										<option selected disabled value="">Choose Branch...</option>
										@foreach($branches as $branch)
											<option value="{{ $branch->id }}" data-bank-id="{{ $branch->bank_id }}">{{ $branch->branch_name }}</option>
										@endforeach
									</select>
								</div>
								
								
								
								<div class="col-12">
									<button class="btn btn-primary success" type="submit">Save</button>
									<button class="btn btn-danger" type="reset">Clear</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--end row-->
	</div>
</div>

<!--end page wrapper -->
@endsection
@pushOnce('scripts')
<script src="{{ asset('assets/vendor/jquery/jquery.min.js') }}"></script>
<script>
    // When a bank is selected, show the branches for that bank
    document.getElementById("bank").addEventListener("change", function() {
        var bankId = this.value;
        var branchField = document.getElementById("branch-field");
        var branchSelect = document.getElementById("branch");
        if (bankId) {
            // Show the branch field
            branchField.style.display = "block";
            // Hide all branches that don't belong to the selected bank
            Array.from(branchSelect.options).forEach(function(option) {
                if (option.value && option.dataset.bankId !== bankId) {
                    option.style.display = "none";
                } else {
                    option.style.display = "";
                }
            });
            // Select the first branch belonging to the selected bank
            branchSelect.selectedIndex = Array.from(branchSelect.options).findIndex(function(option) {
                return option.value && option.dataset.bankId === bankId;
            });
        } else {
            // Hide the branch field
            branchField.style.display = "none";
            // Reset the branch select to the default value
            branchSelect.selectedIndex = 0;
        }
    });
</script>


@endpushOnce