@extends('layouts.app')
@php $users = get_users(['user_role'=>2]) @endphp
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Add Kids</h4>
                    <p class="card-title-desc"></p>

                    <form class="needs-validation" novalidate action="{{ route('kids.store') }}" method="post">
                    	@csrf
                    	
                    	<div class="col-xl-12">
							
							<div class="mb-3 col-md-3">
	                            <label class="form-label">User</label>
	                            <select class="form-control" name="parent_id" required>
	                            	<option value="">{{ __('Select User') }}</option>
	                            	@foreach($users as $index => $values)
	                            		<option value="{{ $values->id }}">{{ $values->name }}</option>
	                            	@endforeach	
	                            </select>	

                                <span class="invalid-feedback" role="alert">
                                    <strong>User is required</strong>
                                </span>
                                
	                        </div>
                    	</div>	

                    	<div class="col-xl-12">
                    		<ul class="custom-ul">
                    			<li class="list-content">
                    				<div class="row">
                    					<div class="hidden-fields">
                    						<input type="hidden" name="user_role[]" value="3">
                    					</div>
			                    		<div class="col">
				                            <label class="form-label">Name</label>
				                            <div>
				                                <input type="text" class="form-control" name="name[]" required placeholder="Enter name" />
				                                <span class="invalid-feedback" role="alert">
				                                    <strong>Name is required</strong>
				                                </span>
				                            </div>
				                        </div>
			                    		<div class="col">
				                            <label class="form-label">E-Mail</label>
				                            <div>
				                                <input type="text" class="form-control" name="email[]" placeholder="Enter email" />
				                                <span class="invalid-feedback" role="alert">
				                                    <strong>Email is required</strong>
				                                </span>
				                            </div>
				                        </div>
				                        <div class="col">
				                            <label class="form-label">Phone</label>
				                            <div>
				                                <input type="text" class="form-control" name="phone[]" placeholder="Enter phone" />
				                                <span class="invalid-feedback" role="alert">
				                                    <strong>Phone is required</strong>
				                                </span>
				                            </div>
				                        </div>			                        
				                        <div class="col">
				                            <label class="form-label">Gender</label>
				                            <div>
				                                <select class="form-control not_empty_field" name="gender[]" required>
				                                	<option value="male">Male</option>
				                                	<option value="female">Female</option>
				                                </select>	
				                                <span class="invalid-feedback" role="alert">
				                                    <strong>Gender is required</strong>
				                                </span>
				                            </div>
				                        </div>
				                        <div class="col">
				                            <label class="form-label">DOB</label>
				                            <div>
				                                <input type="text" class="form-control datepicker" placeholder="Date of Birth" name="date_of_birth[]" required />
				                                <span class="invalid-feedback" role="alert">
				                                    <strong>DOB is required</strong>
				                                </span>
				                            </div>
				                        </div>
				                        <div class="col parent-controller">
				                            <label class="form-label">Control</label>
				                            <div>
				                                <input type="checkbox" class="" value="1" name="parent_controller[]" />
				                            </div>
				                        </div>
				                        <div class="col mgt10 ">
			                                <a href="javascript:void(0)" class="btn btn-danger removeRow hidden">Delete</a>
				                        </div>
				                    </div>    			                        			                        
                    			</li>
                    			<li class="addLast"></li>
                    		</ul>

                    		<div class="col-xl-12 pd10">
                    			<button type="button" class="btn btn-success" onclick="addMoreContent(this,'list-content','addLast')">Add</button>	
                    		</div>	
                    	</div>
						
						@if (session('success'))
						    <div class="alert alert-success">
						        {{ session('success') }}
						    </div>
						@elseif (session('error'))   
							<div class="alert alert-danger">
						        {{ session('error') }}
						    </div>
						@endif
						

                        <div class="d-flex flex-wrap gap-2">
                            <button type="submit" class="btn btn-primary waves-effect waves-light">
                                Submit
                            </button>
                            <button type="reset" class="btn btn-secondary waves-effect">
                                Cancel
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div> <!-- end col -->
    </div> 
</div>
@endsection