@extends('admin.layouts.app')

@section('content')
    <div class="row">
        <div class="col-10 mx-auto">
            <div class="card">
                <form action="{{ route('members.store') }}" method="POST" id="addMemberForm" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        <h5 class="card-title">Add New Member</h5>
                        <hr>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">{{translate('On Behalf')}}<span class="text-danger"> *</span></label>
                                    <select class="form-control aiz-selectpicker" name="on_behalf" required>
                                        @foreach ($on_behalves as $on_behalf)
                                            <option value="{{$on_behalf->id}}">{{$on_behalf->name}}</option>
                                        @endforeach
                                    </select>
                                    @error('on_behalf')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">{{translate('Gender')}}<span class="text-danger"> *</span></label>
                                    <select class="form-control aiz-selectpicker" name="gender" required>
                                        <option value="1">{{translate('Male')}}</option>
                                        <option value="2">{{translate('Female')}}</option>
                                    </select>
                                    @error('gender')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>
    
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">{{translate('First Name')}}<span class="text-danger"> *</span></label>
                                    <input type="text" name="first_name" class="form-control" placeholder="{{translate('First Name')}}" required>
                                    @error('first_name')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">{{translate('Last Name')}}<span class="text-danger"> *</span></label>
                                    <input type="text" name="last_name" class="form-control" placeholder="{{translate('Last Name')}}" required>
                                    @error('last_name')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>
    
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">{{translate('Date Of Birth')}}<span class="text-danger"> *</span></label>
                                    <input type="text" class="aiz-date-range form-control" name="date_of_birth"  placeholder="Select Date" data-single="true" data-show-dropdown="true" required>
                                    @error('date_of_birth')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Time Of Birth<span class="text-danger"> *</span></label>
                                    <input type="text" class="form-control" name="time_of_birth"  placeholder="Time Of Birth" data-input>
                                    @error('time_of_birth')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>
    
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">{{translate('Email')}}<span class="text-danger"> *</span></label>
                                    <input type="email" name="email" class="form-control" placeholder="{{translate('Email')}}" required>
                                    @error('email')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">{{translate('Phone Number')}}<span class="text-danger"> *</span></label>
                                    <input type="tel" id="phone-code" class="form-control @error('phone') is-invalid @enderror" name="phone" placeholder="{{ translate('Phone')}}" required>
                                    <input type="hidden" name="country_code" value="">
                                    @error('phone')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>
    
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">{{translate('Password')}}<span class="text-danger"> *</span></label>
                                    <input type="password" name="password" id="new_password" class="form-control" placeholder="{{translate('Password')}}" required>
                                    @error('password')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">{{translate('Confirm Password')}} <span class="text-danger"> *</span></label>
                                    <input type="password" class="form-control" name="confirm_password" id="confirm_password" placeholder="{{translate('Confirm Password')}}" required>
                                    <small id="confirm_password_help" class="form-text text-muted" style="color: red; display: none;">{{ translate('Mismatch Password.') }}</small>
                                    @error('confirm_password')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>
    
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="signinSrEmail">{{translate('photo')}} <small>(800x800)</small> <span class="text-danger"> *</span></label>
                                    <div class="input-group" data-toggle="aizuploader" data-type="image">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text bg-soft-secondary font-weight-medium">{{ translate('Browse')}}</div>
                                        </div>
                                        <div class="form-control file-amount">{{ translate('Choose File') }}</div>
                                        <input type="hidden" name="photo" class="selected-files" required>
                                    </div>
                                    <div class="file-preview box sm"></div>
                                </div>
                            </div>
    
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">{{translate('Package')}}<span class="text-danger"> *</span></label>
                                    <select class="form-control aiz-selectpicker" name="package" required>
                                        @foreach ($packages as $package)
                                            <option value="{{$package->id}}">{{$package->name}}</option>
                                        @endforeach
                                    </select>
                                    @error('package')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body border-top">
                        <h5 class="card-title">Basic Information</h5>
                        <hr>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="eating_habits">{{translate('Eating Habits')}} <span class="text-danger"> *</span></label>
                                    <select class="form-control aiz-selectpicker" name="eating_habits" required>
                                        <option value="">{{translate('Select One')}}</option>
                                        <option value="Veg-Jain">Veg-Jain</option>
                                        <option value="Veg-Regular">Veg-Regular</option>
                                        <option value="Vegan">Vegan</option>
                                    </select>
                                    @error('eating_habits')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="city_of_birth">{{translate('City Of Birth')}} <span class="text-danger"> *</span></label>
                                    <input type="text" name="city_of_birth" placeholder="{{ translate('City Of Birth') }}" class="form-control" required>
                                    @error('city_of_birth')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-body border-top">
                        <h5 class="card-title">Address Information</h5>

                        <!-- Permanent Address -->
                        <div class="border p-3 mb-3">
                            <h5 class="mb-3">Permanent Address</h5>

                            <input type="hidden" name="address_type" value="permanent">

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-label" for="address">Street Address <span class="text-danger"> *</span></label>
                                        <textarea name="address" class="form-control" required></textarea>
                                        @error('address')
                                            <small class="form-text text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label" for="permanent_country_id">{{translate('Country')}} <span class="text-danger"> *</span></label>
                                        <select class="form-control aiz-selectpicker" name="permanent_country_id" id="permanent_country_id" data-live-search="true" required>
                                            <option value="">{{translate('Select One')}}</option>
                                            @foreach ($countries as $country)
                                                <option value="{{$country->id}}">{{$country->name}}</option>
                                            @endforeach
                                        </select>
                                        @error('permanent_country_id')
                                            <small class="form-text text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label" for="permanent_state_id">{{translate('State')}} <span class="text-danger"> *</span></label>
                                        <select class="form-control aiz-selectpicker" name="permanent_state_id" id="permanent_state_id" data-live-search="true" required>
                                        </select>
                                        @error('permanent_state_id')
                                            <small class="form-text text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label" for="permanent_city_id">{{translate('City')}} <span class="text-danger"> *</span></label>
                                        <select class="form-control aiz-selectpicker" name="permanent_city_id" id="permanent_city_id" data-live-search="true" required>
                                        </select>
                                        @error('permanent_city_id')
                                            <small class="form-text text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label" for="permanent_postal_code">{{translate('Postal Code')}} <span class="text-danger"> *</span></label>
                                        <input type="text" name="permanent_postal_code" class="form-control" placeholder="{{translate('Postal Code')}}" required>
                                        @error('permanent_postal_code')
                                            <small class="form-text text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-label" for="native_place">Native Place <span class="text-danger"> *</span></label>
                                        <input type="text" name="native_place" class="form-control" required>
                                        @error('native_place')
                                            <small class="form-text text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Checkbox to skip present address -->
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="same_as_permanent" id="same_as_permanent">
                            <label class="form-check-label" for="same_as_permanent">
                                Present address is same as permanent address
                            </label>
                        </div>

                        <!-- Present Address -->
                        <div class="border p-3" id="present_address_section">
                            <h5 class="mb-3">Present Address</h5>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-label" for="present_address">Street Address <span class="text-danger"> *</span></label>
                                        <textarea name="present_address" class="form-control" required></textarea>
                                        @error('present_address')
                                            <small class="form-text text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label" for="present_country_id">{{translate('Country')}} <span class="text-danger"> *</span></label>
                                        <select class="form-control aiz-selectpicker" name="present_country_id" id="present_country_id" data-live-search="true" required>
                                            <option value="">{{translate('Select One')}}</option>
                                            @foreach ($countries as $country)
                                                <option value="{{$country->id}}">{{$country->name}}</option>
                                            @endforeach
                                        </select>
                                        @error('present_country_id')
                                            <small class="form-text text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label" for="present_state_id">{{translate('State')}} <span class="text-danger"> *</span></label>
                                        <select class="form-control aiz-selectpicker" name="present_state_id" id="present_state_id" data-live-search="true" required>
                                        </select>
                                        @error('present_state_id')
                                            <small class="form-text text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label" for="present_city_id">{{translate('City')}} <span class="text-danger"> *</span></label>
                                        <select class="form-control aiz-selectpicker" name="present_city_id" id="present_city_id" data-live-search="true" required>
                                        </select>
                                        @error('present_city_id')
                                            <small class="form-text text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label" for="present_postal_code">{{translate('Postal Code')}} <span class="text-danger"> *</span></label>
                                        <input type="text" name="present_postal_code" class="form-control" placeholder="{{translate('Postal Code')}}" required>
                                        @error('present_postal_code')
                                            <small class="form-text text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body border-top">
                        <h5 class="card-title">Education & Career Info</h5>
                        <hr>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Degree <span class="text-danger"> *</span></label>
                                    <input type="text" name="degree" placeholder="Degree" class="form-control" required>
                                    @error('degree')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Institution <span class="text-danger"> *</span></label>
                                    <input type="text" name="institution" placeholder="Institution" class="form-control" required>
                                    @error('institution')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Designation <span class="text-danger"> *</span></label>
                                    <input type="text" name="designation" placeholder="Designation" class="form-control" required>
                                    @error('designation')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Company & Location <span class="text-danger"> *</span></label>
                                    <input type="text" name="company" placeholder="Company & Location" class="form-control" required>
                                    @error('company')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body border-top">
                        <h5 class="card-title">Spiritual & Social Background</h5>
                        <hr>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="member_religion_id">{{translate('Religion')}} <span class="text-danger"> *</span></label>
                                    <select class="form-control aiz-selectpicker" name="member_religion_id" id="member_religion_id" data-live-search="true" required>
                                        <option value="">{{translate('Select One')}}</option>
                                        @foreach ($religions as $religion)
                                            <option value="{{$religion->id}}"> {{ $religion->name }} </option>
                                        @endforeach
                                    </select>
                                    @error('member_religion_id')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="member_caste_id">{{translate('Caste')}} <span class="text-danger"> *</span></label>
                                    <select class="form-control aiz-selectpicker" name="member_caste_id" id="member_caste_id" data-live-search="true" required></select>
                                    @error('member_caste_id')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="member_sub_caste_id">{{translate('Sub Caste')}} <span class="text-danger"> *</span></label>
                                    <select class="form-control aiz-selectpicker" name="member_sub_caste_id" id="member_sub_caste_id" data-live-search="true" required></select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body border-top">
                        <h5 class="card-title">Family Information</h5>
                        <hr>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="father">Father <span class="text-danger"> *</span></label>
                                    <input type="text" name="father" value="" class="form-control" placeholder="Father" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="mother">Mother <span class="text-danger"> *</span></label>
                                    <input type="text" name="mother" value="" placeholder="Mother" class="form-control" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="grand_father">Grand Father <span class="text-danger"> *</span></label>
                                    <input type="text" name="grand_father" value="" class="form-control" placeholder="Grand Father" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="grand_mother">Grand Mother <span class="text-danger"> *</span></label>
                                    <input type="text" name="grand_mother" value="" placeholder="Grand Mother" class="form-control" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="father_occupation">Father Occupation <span class="text-danger"> *</span></label>
                                    <input type="text" name="father_occupation" value="" class="form-control" placeholder="Father Occupation" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="mother_occupation">Mother Occupation <span class="text-danger"> *</span></label>
                                    <input type="text" name="mother_occupation" value="" placeholder="Mother Occupation" class="form-control" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="father_mobile_no">Father Mobile No. <span class="text-danger"> *</span></label>
                                    <input type="text" name="father_mobile_no" value="" class="form-control" placeholder="Father Mobile No." required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="mother_mobile_no">Mother Mobile No. <span class="text-danger"> *</span></label>
                                    <input type="text" name="mother_mobile_no" value="" placeholder="Mother Mobile No." class="form-control" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="samaj">Samaj</label>
                                    <input type="text" name="samaj" value="" class="form-control" placeholder="Samaj">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="gotra">Gotra</label>
                                    <input type="text" name="gotra" value="" placeholder="Gotra" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="sibling">No. of Sibling</label>
                                    <input type="number" name="sibling" id="sibling-count" value="0" class="form-control" oninput="generateSiblingFields()" placeholder="No. of siblings">
                                </div>
                            </div>
                        </div>
                        <div id="sibling-fields-container"></div>
                    </div>

                    <div class="card-body border-top">
                        <h5 class="card-title">Physical Attributes</h5>
                        <hr>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="height">Height (In Feet) <span class="text-danger"> *</span></label>
                                    <input type="number" name="height" value="" step="any" class="form-control" placeholder="Height" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="weight">Weight (In Kg) <span class="text-danger"> *</span></label>
                                    <input type="number" name="weight" value="" step="any" placeholder="Weight" class="form-control" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="complexion">{{translate('Complexion')}} <span class="text-danger"> *</span></label>
                                    <input type="text" name="complexion" class="form-control" placeholder="{{translate('Complexion')}}" required>
                                    @error('complexion')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body border-top">
                        <h5 class="card-title">Hobbies & Interest</h5>
                        <hr>

                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label" for="hobbies">Hobbies</label>
                                <input type="text" name="hobbies" value="" class="form-control" placeholder="Hobbies">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="interests">Interests</label>
                                <input type="text" name="interests" value="" placeholder="Interests" class="form-control">
                            </div>
                        </div>
                    </div>

                    <div class="card-body border-top">
                        <div class="form-group mb-0 text-right">
                            <button type="submit" class="btn btn-primary submit-btn" id="addMemberBtn">{{translate('Add Member')}}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')

<script type="text/javascript"> 
    $("#phone-code").keypress(function(e) {
		var key = e.which || e.keyCode; 
		if ((key >= 48 && key <= 57) || key === 8 || key === 46 || key === 37 || key === 39) {
			return true;
		} else {
			e.preventDefault();
		}
	});      

    var isPhoneShown = true,
        countryData = window.intlTelInputGlobals.getCountryData(),
        input = document.querySelector("#phone-code");

    for (var i = 0; i < countryData.length; i++) {
        var country = countryData[i];
        if(country.iso2 == 'bd'){
            country.dialCode = '88';
        }
    }

    var iti = intlTelInput(input, {
        initialCountry: "auto",
		geoIpLookup: function(callback) {
			$.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
				var countryCode = (resp && resp.country) ? resp.country : "us";
				callback(countryCode);
			});
		},
        separateDialCode: true,
        utilsScript: "{{ static_asset('assets/js/intlTelutils.js') }}?1590403638580",
        onlyCountries: @php echo json_encode(\App\Models\Country::where('status', 1)->pluck('code')->toArray()) @endphp,
        customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
            if(selectedCountryData.iso2 == 'bd'){
                return "01xxxxxxxxx";
            }
            return selectedCountryPlaceholder;
        }
    });

    var country = iti.getSelectedCountryData();
    $('input[name=country_code]').val(country.dialCode);

    input.addEventListener("countrychange", function(e) {
        // var currentMask = e.currentTarget.placeholder;

        var country = iti.getSelectedCountryData();
        $('input[name=country_code]').val(country.dialCode);

    });

</script>

<script>
    function isEmailValid(email) {
		const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
		return emailPattern.test(email);
	}

	function get_states_by_country_for_permanent_address(){
        var permanent_country_id = $('#permanent_country_id').val();
            $.post('{{ route('states.get_state_by_country') }}',{_token:'{{ csrf_token() }}', country_id:permanent_country_id}, function(data){
                $('#permanent_state_id').html(null);
                // Add default "Select One" option
                $('#permanent_state_id').append($('<option>', {
                    value: '',
                    text: 'Select One'
                }));

                for (var i = 0; i < data.length; i++) {
                    $('#permanent_state_id').append($('<option>', {
                        value: data[i].id,
                        text: data[i].name
                    }));
                }
                AIZ.plugins.bootstrapSelect('refresh');

                get_cities_by_state_for_permanent_address();
            });
        }

    function get_cities_by_state_for_permanent_address(){
		var permanent_state_id = $('#permanent_state_id').val();
    		$.post('{{ route('cities.get_cities_by_state') }}',{_token:'{{ csrf_token() }}', state_id:permanent_state_id}, function(data){
    		    $('#permanent_city_id').html(null);
                // Add default "Select One" option
                $('#permanent_city_id').append($('<option>', {
                    value: '',
                    text: 'Select One'
                }));

    		    for (var i = 0; i < data.length; i++) {
    		        $('#permanent_city_id').append($('<option>', {
    		            value: data[i].id,
    		            text: data[i].name
    		        }));
    		    }
    		    AIZ.plugins.bootstrapSelect('refresh');
    		});
    	}

    $('#permanent_country_id').on('change', function() {
  	    get_states_by_country_for_permanent_address();
  	});

    $('#permanent_state_id').on('change', function() {
  	    get_cities_by_state_for_permanent_address();
  	});

	  function get_states_by_country_for_present_address(){
        var present_country_id = $('#present_country_id').val();
            $.post('{{ route('states.get_state_by_country') }}',{_token:'{{ csrf_token() }}', country_id:present_country_id}, function(data){
                $('#present_state_id').html(null);
                // Add default "Select One" option
                $('#present_state_id').append($('<option>', {
                    value: '',
                    text: 'Select One'
                }));

                for (var i = 0; i < data.length; i++) {
                    $('#present_state_id').append($('<option>', {
                        value: data[i].id,
                        text: data[i].name
                    }));
                }
                AIZ.plugins.bootstrapSelect('refresh');

                get_cities_by_state_for_present_address();
            });
        }

    function get_cities_by_state_for_present_address(){
		var present_state_id = $('#present_state_id').val();
    		$.post('{{ route('cities.get_cities_by_state') }}',{_token:'{{ csrf_token() }}', state_id:present_state_id}, function(data){
    		    $('#present_city_id').html(null);
                // Add default "Select One" option
                $('#present_city_id').append($('<option>', {
                    value: '',
                    text: 'Select One'
                }));

    		    for (var i = 0; i < data.length; i++) {
    		        $('#present_city_id').append($('<option>', {
    		            value: data[i].id,
    		            text: data[i].name
    		        }));
    		    }
    		    AIZ.plugins.bootstrapSelect('refresh');
    		});
    	}

    $('#present_country_id').on('change', function() {
  	    get_states_by_country_for_present_address();
  	});

    $('#present_state_id').on('change', function() {
  	    get_cities_by_state_for_present_address();
  	});

	function get_castes_by_religion_for_member(){
        var member_religion_id = $('#member_religion_id').val();
            $.post('{{ route('castes.get_caste_by_religion') }}',{_token:'{{ csrf_token() }}', religion_id:member_religion_id}, function(data){
                $('#member_caste_id').html(null);
                // Add default "Select One" option
                $('#member_caste_id').append($('<option>', {
                    value: '',
                    text: 'Select One'
                }));

                for (var i = 0; i < data.length; i++) {
                    $('#member_caste_id').append($('<option>', {
                        value: data[i].id,
                        text: data[i].name
                    }));
                }

                AIZ.plugins.bootstrapSelect('refresh');

                get_sub_castes_by_caste_for_member();
            });
    }

	function get_sub_castes_by_caste_for_member(){
        var member_caste_id = $('#member_caste_id').val();
            $.post('{{ route('sub_castes.get_sub_castes_by_religion') }}',{_token:'{{ csrf_token() }}', caste_id:member_caste_id}, function(data){
                $('#member_sub_caste_id').html(null);
                // Add default "Select One" option
                $('#member_sub_caste_id').append($('<option>', {
                    value: '',
                    text: 'Select One'
                }));

                for (var i = 0; i < data.length; i++) {
                    $('#member_sub_caste_id').append($('<option>', {
                        value: data[i].id,
                        text: data[i].name
                    }));
                }

                AIZ.plugins.bootstrapSelect('refresh');
            });
    }

	$('#member_religion_id').on('change', function() {
        get_castes_by_religion_for_member();
    });

    $('#member_caste_id').on('change', function() {
        get_sub_castes_by_caste_for_member();
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
		const checkbox = document.getElementById('same_as_permanent');
		const presentSection = document.getElementById('present_address_section');

		// Get all present address fields that might have "required"
		const presentFields = presentSection.querySelectorAll('input, select, textarea');

		function togglePresentAddressVisibility() {
			const isChecked = checkbox.checked;

			// Toggle visibility
			presentSection.style.display = isChecked ? 'none' : 'block';

			// Toggle 'required' attribute
			presentFields.forEach(field => {
				if (isChecked) {
					field.removeAttribute('required');
				} 
			});
		}

		// Initial check
		togglePresentAddressVisibility();

		// On checkbox change
		checkbox.addEventListener('change', togglePresentAddressVisibility);
	});
</script>

<script>
	function generateSiblingFields() {
		const container = document.getElementById('sibling-fields-container');
		if (!container) return; // Prevents error

		const count = parseInt(document.getElementById('sibling-count').value);
		container.innerHTML = '';

		if (isNaN(count) || count <= 0) return;

		for (let i = 1; i <= count; i++) {
		container.insertAdjacentHTML('beforeend', `
			<div class="card p-3 mb-3">
				<h6>Sibling ${i}</h6>
				<div class="row">
					<div class="col-md-6">
						<div class="form-group">
							<input type="text" name="siblings[${i}][name]" class="form-control" placeholder="Name" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							<input type="text" name="siblings[${i}][education]" class="form-control" placeholder="Education">
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6">
						<div class="form-group">
							<input type="text" name="siblings[${i}][occupation]" class="form-control" placeholder="Occupation">
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							<select name="siblings[${i}][relation]" class="form-control aiz-selectpicker" required>
							<option value="">Select Relation</option>
							<option value="Younger Brother">Younger Brother</option>
							<option value="Elder Brother">Elder Brother</option>
							<option value="Younger Sister">Younger Sister</option>
							<option value="Elder Sister">Elder Sister</option>
							</select>
						</div>
					</div>
				</div>
			</div>
		`);
		}

		AIZ.plugins.bootstrapSelect('refresh');
	}
</script>

<script>
	function clearError(field) {
		field.classList.remove('is-invalid');
		const formGroup = field.closest('.form-group');
		if (!formGroup) return;

		const error = formGroup.querySelector('.invalid-feedback.dynamic');
		if (error) {
			error.remove();
		}
	}

	function showError(field, message) {
		field.classList.add('is-invalid');
		const formGroup = field.closest('.form-group');
		if (!formGroup) return;

		let existingError = formGroup.querySelector('.invalid-feedback.dynamic');
		if (!existingError) {
			const errorElement = document.createElement('span');
			errorElement.className = 'invalid-feedback dynamic';
			errorElement.style.display = 'block';
			errorElement.innerText = message;
			formGroup.appendChild(errorElement);
		}
	}

	function isEmailValid(email) {
		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
	}

	async function checkEmailExists(email) {
		return new Promise(resolve => {
			$.post('{{ route('check-unique-email') }}', {
				_token: $('meta[name="csrf-token"]').attr('content'),
				email: email
			}, function(data) {
				resolve(data.exists === true || data === 1);
			});
		});
	}

	async function checkPhoneExists(phone, countryCode) {
		return new Promise(resolve => {
			$.post('{{ route('check-unique-phone') }}', {
				_token: $('meta[name="csrf-token"]').attr('content'),
				phone: phone,
				country_code: countryCode
			}, function(data) {
				resolve(data.exists === true || data === 1);
			});
		});
	}

	async function validateFields() {
		const addMemberForm = document.querySelector('#addMemberForm');
		const requiredFields = addMemberForm.querySelectorAll('[required]');
		let isValid = true;

		for (const field of requiredFields) {
			clearError(field);
			const value = field.value.trim();

			if (!value) {
				showError(field, 'This field is required.');
				isValid = false;
				continue;
			}

			if (field.name === 'email') {
				if (!isEmailValid(value)) {
					showError(field, 'Please enter a valid email address.');
					isValid = false;
					continue;
				}
				const exists = await checkEmailExists(value);
				if (exists) {
					showError(field, 'This email is already registered.');
					isValid = false;
				}
				continue;
			}

			if (field.name === 'password') {
				if (value.length < 8) {
					showError(field, 'Password must be at least 8 characters.');
					isValid = false;
				}

				const confirmPasswordField = addMemberForm.querySelector('[name="confirm_password"]');
				clearError(confirmPasswordField);
				if (value !== confirmPasswordField.value.trim()) {
					showError(field, 'Passwords do not match.');
					showError(confirmPasswordField, 'Passwords do not match.');
					isValid = false;
				}
				continue;
			}

			if (field.name === 'phone') {
				const countryCode = addMemberForm.querySelector('[name="country_code"]').value;
				const exists = await checkPhoneExists(value, countryCode);
				if (exists) {
					showError(field, 'This phone is already registered.');
					isValid = false;
				}
				continue;
			}
		}

		return isValid;
	}

    document.addEventListener('DOMContentLoaded', function() {
        flatpickr('[data-input]', {
            enableTime: true,
            noCalendar: true,
            dateFormat: "h:i K", // h: hours in 12-hour format, i: minutes, K: AM/PM
            minuteIncrement: 1
        });
    });

    document.addEventListener('DOMContentLoaded', function () {
        const form = document.querySelector('#addMemberForm');
        const addMemberBtn = document.querySelector('#addMemberBtn');

        if (!form || !addMemberBtn) return;

        addMemberBtn.addEventListener('click', async function (e) {
            e.preventDefault(); // Prevent default form submission

            const isValid = await validateFields();

            if (!isValid) {
                return; // Stop if validation fails
            }

            // Disable button and change text
            addMemberBtn.disabled = true;
            addMemberBtn.innerHTML = 'Please wait...';

            // Submit the form programmatically
            form.submit();
        });
    });

</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

@endsection