@extends('user.layouts.app')

@push('styles')
<style type="text/css">
    .update_profile #update_profile_frm .form-control[readonly],
    .update_profile #update_profile_frm textarea[readonly],
    .update_profile #update_profile_frm select[disabled] {
        background-color: #f5f5f5 !important;
        color: #002B10 !important;
        opacity: 1 !important;
        cursor: default;
    }

    .update_profile #update_profile_frm label,
    .update_profile #update_profile_frm .custom-select-label,
    .update_profile #update_profile_frm .labelHead {
        opacity: 1 !important;
        color: #002B10 !important;
    }

    .billing-preference-checkboxes {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .update_profile .box-focus .billing-preference-checkboxes .custom-checkbox {
        position: static !important;
        pointer-events: auto !important;
        display: inline-flex;
        align-items: center;
        font-size: 16px !important;
        cursor: pointer;
    }

    .update_profile .box-focus .billing-preference-checkboxes .custom-checkbox .checkmark {
        position: relative;
        top: auto;
        left: auto;
        flex-shrink: 0;
    }

    .update_profile .box-focus .billing-preference-checkboxes .custom-checkbox input {
        display: none;
    }
</style>
@endpush

@section('body_class', 'update_profile')

@section('content')
<section class="banner-slider">
    @foreach($bannerImages as $image)
    <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}" alt="Slide {{ $loop->iteration }}"></div>
    @endforeach
</section>

<div class="banner-inner-content">
    <div class="container">
    <ul class="bread-come">
        <li>
        <a href="/">Home</a>
        </li>
        <!-- <li>Update Profile</li> -->
        <li>My Profile</li>
    </ul>
    </div>
</div>

<section class="affiliated-clubs">
    <div class="container">
        <div class="page-title">
            <!-- <h4 data-aos="fade-up">Update Profile</h4> -->
            <h4 data-aos="fade-up">My Profile</h4>
        </div>  

    </div>
</section>

<section class="update-profile-outer">
    <div class="container">
    <div class="update-profile">  
        <div class="section-description">    
            <div class="inner-form login-show-box"> 
                <form id="update_profile_frm" method="POST" action="{{ route('user.update_profile.submit', $user->id) }}">
                    @csrf
                    <ul class="inner-form-ul">
                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Membership No.</div> -->
                                <div class="outer-box">
                                    <label for="DateFunction">Membership No.</label>
                                    <input id="DateFunction" name="member_id" type="text"  class="form-control green" value="{{ old('member_id', $user->member_id ?? '') }}" />
                                </div>
                            </div> 
                            <p id="member_idErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                        </li>

                        <!-- <li>
                            <div class="form-row box-focus">
                                <div class="labelHead">Membership Category</div>
                                <select name="membership_category_id" id="membership_category_id" class="custom-selectpicker">
                                    <option value="" disabled  {{ old('membership_category_id', $user->membership_category_id) ? '' : 'selected' }}>
                                        Select  Member Category
                                    </option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" 
                                            {{ old('membership_category_id', $user->membership_category_id) == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>

                            </div>
  
                            <p id="membership_category_idErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                        </li> -->
                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Membership Category</div> -->
                                <div class="outer-box">
                                    <label for="Membership">Membership Category</label>
                                    <input id="Membership" name="membership_category_id" type="text"  class="form-control green" value="{{ old('membership_category_id', $user->membership_category->name ?? '') }}" readonly />
                                </div>
                            </div> 

                        </li>

                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Last Name</div> -->
                                <div class="outer-box">
                                    <label for="Surname">Last Name</label>
                                    <input id="Surname" name="surname" type="text" class="form-control green"  value="{{ old('surname', $user->last_name ?? '') }}" />
                                </div>
                            </div>  

                        </li>

                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">First Name</div> -->
                                <div class="outer-box">
                                    <label for="FirstName">First Name</label>
                                    <input id="FirstName" name="first_name" type="text" class="form-control green"  value="{{ old('first_name', $user->first_name ?? '') }}" />
                                </div>
                            </div>  

                        </li>

                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Middle Name</div> -->
                                <div class="outer-box">
                                    <label for="MiddleName">Middle Name</label>
                                    <input id="MiddleName" name="middle_name" type="text" class="form-control green" value="{{ old('middle_name', $user->middle_name ?? '') }}" />
                                </div>
                            </div>  
                            <p id="middle_nameErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                        </li>

                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Date of Birth</div> -->
                                <div class="outer-box">
                                    <label for="dob">Date of Birth</label>
                                    <input id="dob" name="dob" type="date" class="form-control green" value="{{ old('dob', $user->dob ? \Carbon\Carbon::parse($user->dob)->format('Y-m-d') : '') }}" />
                                </div>
                            </div>  

                        </li>

                        <li>
                            <div class="form-row box-focus">
                                <label class="custom-select-label" for="gender">Gender</label>
                                <select id="gender" name="gender" class="custom-selectpicker green" data-placeholder="Gender" data-floating-label="true">
                                    <option value="" disabled selected hidden></option>
                                    <option value="Male" {{ $user->gender == 'Male' ? 'selected' : '' }}>Male</option>
                                    <option value="Female" {{ $user->gender == 'Female' ? 'selected' : '' }}>Female</option>
                                </select>
                            </div>  

                        </li>

                        <li>
                            <div class="form-row box-focus">
                                <label class="custom-select-label" for="maritial_status">Marital Status</label>
                                <select id="maritial_status" name="maritial_status" class="custom-selectpicker" data-placeholder="Marital Status" data-floating-label="true">
                                    <option value="" disabled selected hidden></option>
                                    <option value="Single" {{ $user->maritial_status == 'Single' ? 'selected' : '' }}>Single</option>
                                    <option value="Married" {{ $user->maritial_status == 'Married' ? 'selected' : '' }}>Married</option>
                                </select>
                            </div>  
                        </li>

                                            
                        <li>
                            <div class="form-row box-focus">
                                <div class="labelHead mb-2">Billing Preference</div>
                                @php 
                                    $billingPref = $user->billing_preference ?? []; 

                                    if (!is_array($billingPref)) {
                                        $billingPref = explode(',', $billingPref);
                                    }
                                @endphp
                                <div class="checkbox-group billing-preference-checkboxes">
                                    <label class="custom-checkbox" for="HardCopy">
                                        <input type="checkbox" id="HardCopy" name="billing_preference[]" value="Hard Copy" 
                                                {{ in_array('Hard Copy', old('billing_preference', $billingPref)) ? 'checked' : '' }}>
                                        <span class="checkmark"></span>
                                        Hard Copy
                                    </label>
                                    <label class="custom-checkbox" for="EmailPref">
                                        <input type="checkbox" id="EmailPref" name="billing_preference[]" value="E-Mail" 
                                                {{ in_array('E-Mail', old('billing_preference', $billingPref)) ? 'checked' : '' }}>
                                        <span class="checkmark"></span>
                                        E-Mail
                                    </label>
                                </div>
                            </div>   

                        </li>
                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Phone</div>  -->
                                <div class="outer-box">
                                    <label for="Phone">Phone</label>
                                    <input id="Phone" name="phone" type="tel" oninput="this.value = this.value.replace(/[^0-9]/g, '');" maxlength="15" class="form-control green"  value="{{ aes_decrypt(old('phone', $user->phone ?? '')) }}" />
                                </div> 
                            </div>  

                        </li>
                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Cell</div> -->
                                <div class="outer-box">
                                    <label for="Cell">Cell</label>
                                    <input id="Cell" name="cell" type="tel" oninput="this.value = this.value.replace(/[^0-9]/g, '');" maxlength="15" class="form-control green" value="{{ old('cell', $user->cell ?? '') }}" />
                                </div>                     
                            </div>    
                            <p id="cellErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                        </li>
                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">E-Mail</div> -->
                                <div class="outer-box">
                                    <label for="E-Mail">E-Mail</label>
                                    <input id="E-Mail" name="email" type="email" class="form-control green"  value="{{ aes_decrypt(old('email', $user->email ?? '')) }}" />
                                </div>                 
                            </div>        

                        </li>



                        <li class="wide">
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Billing Address</div> -->
                                <div class="outer-box">
                                    <label for="BillingAddress">Billing Address</label>
                                    <textarea id="BillingAddress" name="billing_address" class="form-control green" >{{ old('billing_address', $user->billing_address ?? '') }}</textarea>
                                </div>                            
                            </div>   
                            <p id="billing_addressErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                        </li>                   
                    </ul>
                    <div class="title">
                        <h5>CONTACT INFORMATION</h5>
                    </div>
                    <ul class="inner-form-ul">
                        <li class="wide">
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Residence Address</div> -->
                                <div class="outer-box">
                                    <label for="ResidenceAddress">Residence Address</label>
                                    <textarea id="ResidenceAddress" name="residence_address" class="form-control green" >{{ old('residence_address', $user->contactInfo->residence_address ?? '') }}</textarea>
                                </div>                            
                            </div>   

                        </li>

                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Phone (R)</div> -->
                                <div class="outer-box">
                                    <label for="PhoneR">Phone (R)</label>
                                    <input id="PhoneR" name="residence_phone" type="tel" oninput="this.value = this.value.replace(/[^0-9]/g, '');" maxlength="15" class="form-control green"  value="{{ old('residence_phone', !empty($user->contactInfo->residence_phone) ? aes_decrypt($user->contactInfo->residence_phone) : '') }}" />
                                </div>
                            </div>   

                        </li>

                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Cell</div> -->
                                <div class="outer-box">
                                    <label for="Cell2">Cell</label>
                                    <input id="Cell2" name="residence_cell" type="tel" oninput="this.value = this.value.replace(/[^0-9]/g, '');" maxlength="15" class="form-control green" value="{{ old('residence_cell', $user->contactInfo->residence_cell ?? '') }}" />
                                </div>                    
                            </div>   
 
                        </li>

                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">E-Mail</div> -->
                                <div class="outer-box">
                                    <label for="EMail">E-Mail</label>
                                    <input id="EMail" name="residence_email" type="email" class="form-control green" value="{{ old('residence_email', !empty($user->contactInfo->residence_email) ? aes_decrypt($user->contactInfo->residence_email) : '') }}" />
                                </div>                  
                            </div>     
 
                        </li>


                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Phone (O)</div> -->
                                <div class="outer-box">
                                    <label for="PhoneO">Phone (O)</label>
                                    <input id="PhoneO" name="office_phone" type="tel" oninput="this.value = this.value.replace(/[^0-9]/g, '');" maxlength="15" class="form-control green"  value="{{ old('office_phone', !empty($user->contactInfo->office_phone) ? aes_decrypt($user->contactInfo->office_phone) : '') }}" />
                                </div>                     
                            </div>   

                        </li>

                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Cell</div> -->
                                <div class="outer-box">
                                    <label for="Cell3">Cell</label>
                                    <input id="Cell3" name="office_cell" type="tel" oninput="this.value = this.value.replace(/[^0-9]/g, '');" maxlength="15" class="form-control green"  value="{{ old('office_cell', $user->contactInfo->office_cell ?? '') }}" />
                                </div>                     
                            </div>  
 
                        </li>

                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Fax</div> -->
                                <div class="outer-box">
                                    <label for="Fax">Fax</label>
                                    <input id="Fax" name="fax" type="number"  class="form-control green" value="{{ old('fax',!empty($user->contactInfo->fax)?  aes_decrypt($user->contactInfo->fax) : '') }}" />
                                </div>                   
                            </div>   
  
                        </li>

                        <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">E-Mail</div> -->
                                <!-- <div class="outer-box">
                                    <label for="E_Mail">E-Mail</label>
                                    <input id="E_Mail" name="office_email" type="email"  class="form-control green" value="{{ old('office_email', !empty($user->contactInfo->office_email)?  aes_decrypt($user->contactInfo->office_email) : '') }}" />
                                </div>                     -->
                            </div>  

                        </li>

                        <li class="wide">
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Office Name & Address</div> -->
                                <div class="outer-box">
                                    <label for="OfficeAddress">Office Name & Address</label>
                                    <textarea id="OfficeAddress" name="office_name_address" class="form-control green">{{ old('office_name_address', $user->contactInfo->office_name_address ?? '') }}</textarea>
                                </div>                          
                            </div>   
 
                        </li> 
                    </ul>  

                    

                    

                    @if($user->has_spouse)
                    <div class="title">
                        <h5>SPOUSE</h5>
                    </div>
                    <ul class="inner-form-ul">    
                        <li>
                            <div class="form-row box-focus">
                                <div class="labelHead">Name</div>
                                <div class="outer-box">
                                <label for="spouseName">Name</label>
                                <input id="spouseName" name="spouse_name" type="text" class="form-control" value="{{ old('spouse_name', $user->spouse_name ?? '') }}"  />
                                </div>                      
                            </div>
                            <p id="spouse_nameErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                        </li>   
                        <li>
                            <div class="form-row box-focus">
                                <div class="labelHead">Date of Birth</div>
                                <div class="outer-box">
                                <input id="spouseDob" name="spouse_dob"  type="date" class="form-control" value="{{ old('spouse_dob', $user->spouse_dob ? \Carbon\Carbon::parse($user->spouse_dob)->format('Y-m-d') : '') }}" placeholder="" />
                                </div>                      
                            </div>
                            <p id="spouse_dobErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                        </li>  
                        <li>
                            <div class="form-row box-focus">
                                <label class="custom-select-label" for="spouse_gender">Gender</label>
                                <select id="spouse_gender" name="spouse_gender" class="custom-selectpicker" data-placeholder="Gender" data-floating-label="true">
                                <option value="" disabled selected hidden></option>
                                <option value="Male" {{ $user->gender == 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ $user->gender == 'Female' ? 'selected' : '' }}>Female</option>
                                </select>
                            </div>
                            <p id="spouse_genderErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                        </li>          
                    </ul>
                    @endif
                    
                    @if($member_dependents_count > 0)
                        @for($i = 0; $i < $member_dependents_count; $i++)
                        <div class="title">
                            <h5>DEPENDENT {{$i + 1}}</h5>
                        </div>
                        <ul class="inner-form-ul">   
                            <li>
                            <div class="form-row box-focus">
                                <div class="labelHead">Name</div>
                                <div class="outer-box">
                                <label for="DEPENDENT{{$i + 1}}Name">Name</label>
                                <input id="DEPENDENT{{$i + 1}}Name" name="dependent{{ $i + 1 }}_name" type="text" class="form-control" value="{{ old("dependents.$i.dependent_name", $member_dependents_array[$i]['dependent_name'] ?? '') }}"  />
                                </div>                      
                            </div>
                            <p id="dependent{{ $i + 1 }}_nameErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>   
                            <li>
                            <div class="form-row box-focus">
                                <div class="labelHead">Date of Birth (Below 23 years only)</div>
                                <div class="outer-box">
                                <input id="DEPENDENT{{$i + 1}}Dob" name="dependent{{ $i + 1 }}_dob" type="date" class="form-control" value="{{ old("dependents.$i.dependent_dob", !empty($member_dependents_array[$i]['dependent_dob']) ? \Carbon\Carbon::parse($member_dependents_array[$i]['dependent_dob'])->format('Y-m-d') : '') }}" placeholder="" />
                                </div>                      
                            </div>
                            <p id="dependent{{ $i + 1 }}_dobErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>  
                            <li>
                            <div class="form-row box-focus">
                                <label class="custom-select-label" for="dependent{{ $i + 1 }}_gender">Gender</label>
                                @php
                                    $savedGender = $member_dependents_array[$i]['dependent_gender'] ?? '';
                                    $selectedGender = old("dependent" . ($i + 1) . "_gender", $savedGender);
                                @endphp

                                <select id="dependent{{ $i + 1 }}_gender" name="dependent{{ $i + 1 }}_gender" class="custom-selectpicker" data-placeholder="Gender" data-floating-label="true">
                                    <option value="" disabled {{ empty($selectedGender) ? 'selected' : '' }} hidden></option>
                                    <option value="Male"   {{ old("dependents.$i.dependent_gender", $member_dependents_array[$i]['dependent_gender'] ?? '') == 'Male' ? 'selected' : '' }}>Male</option>
                                    <option value="Female" {{ old("dependents.$i.dependent_gender", $member_dependents_array[$i]['dependent_gender'] ?? '') == 'Female' ? 'selected' : '' }}>Female</option>
                                </select>
                            </div>
                            <p id="dependent{{ $i + 1 }}_genderErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>                
                        </ul>
                        @endfor 
                    @else
                        
                        @if($user->has_dependent1)
                        <div class="title">
                            <h5>DEPENDENT 1</h5>
                        </div>
                        <ul class="inner-form-ul">   
                            <li>
                                <div class="form-row box-focus">
                                    <!-- <div class="labelHead">Name</div> -->
                                    <div class="outer-box">
                                    <label for="DEPENDENT1Name">Name</label>
                                    <input id="DEPENDENT1Name" name="dependent1_name" type="text" class="form-control" value=""  />
                                    </div>                      
                                </div>
                                <p id="dependent1_nameErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>   
                            <li>
                            <div class="form-row box-focus">
                                <div class="labelHead">Date of Birth (Below 23 years only)</div>
                                <div class="outer-box">
                                <input id="DEPENDENT1Dob" name="dependent1_dob" type="date" class="form-control" value="" placeholder="" />
                                </div>                      
                            </div>
                                <p id="dependent1_dobErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>  
                            <li>
                            <div class="form-row box-focus">
                                <label class="custom-select-label" for="dependent1_gender">Gender</label>
                                <select id="dependent1_gender" name="dependent1_gender" class="custom-selectpicker" data-placeholder="Gender" data-floating-label="true">
                                <option value="" disabled selected hidden></option>
                                <option value="Male" {{ $user->gender == 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ $user->gender == 'Female' ? 'selected' : '' }}>Female</option>
                                </select>
                            </div>
                                <p id="dependent1_genderErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>                
                        </ul>
                        @endif

                        @if($user->has_dependent2)
                        <div class="title">
                            <h5>DEPENDENT 2</h5>
                        </div>
                        <ul class="inner-form-ul">   
                            <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Name</div> -->
                                <div class="outer-box">
                                <label for="DEPENDENT2Name">Name</label>
                                <input id="DEPENDENT2Name" name="dependent2_name" type="text" class="form-control" value=""  />
                                </div>                      
                            </div>
                                <p id="dependent2_nameErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>   
                            <li>
                            <div class="form-row box-focus">
                                <div class="labelHead">Date of Birth (Below 23 years only)</div>
                                <div class="outer-box">
                                <input id="DEPENDENT2Dob" name="dependent2_dob" type="date" class="form-control" value="" placeholder="" />
                                </div>                      
                            </div>
                                <p id="dependent2_dobErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>  
                            <li>
                            <div class="form-row box-focus">
                                <label class="custom-select-label" for="dependent2_gender">Gender</label>
                                <select id="dependent2_gender" name="dependent2_gender" class="custom-selectpicker" data-placeholder="Gender" data-floating-label="true">
                                <option value="" disabled selected hidden></option>
                                <option value="Male" {{ $user->gender == 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ $user->gender == 'Female' ? 'selected' : '' }}>Female</option>
                                </select>
                            </div>
                                <p id="dependent2_genderErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>                
                        </ul>
                        @endif

                        @if($user->has_dependent3)
                        <div class="title">
                            <h5>DEPENDENT 3</h5>
                        </div>
                        <ul class="inner-form-ul">   
                            <li>
                            <div class="form-row box-focus">
                                <!-- <div class="labelHead">Name</div> -->
                                <div class="outer-box">
                                <label for="DEPENDENT3Name">Name</label>
                                <input id="DEPENDENT3Name" name="dependent3_name" type="text" class="form-control" value=""  />
                                </div>                      
                            </div>
                                <p id="dependent3_nameErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>   
                            <li>
                            <div class="form-row box-focus">
                                <div class="labelHead">Date of Birth (Below 23 years only)</div>
                                <div class="outer-box">
                                <input id="DEPENDENT3Dob" name="dependent3_dob" type="date" class="form-control" value="" placeholder="" />
                                </div>                      
                            </div>
                                <p id="dependent3_dobErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>  
                            <li>
                            <div class="form-row box-focus">
                                <label class="custom-select-label" for="dependent3_gender">Gender</label>
                                <select id="dependent3_gender" name="dependent3_gender" class="custom-selectpicker" data-placeholder="Gender" data-floating-label="true">
                                <option value="" disabled selected hidden></option>
                                <option value="Male" {{ $user->gender == 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ $user->gender == 'Female' ? 'selected' : '' }}>Female</option>
                                </select>
                            </div>
                                <p id="dependent3_genderErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>                
                        </ul>
                        @endif

                        @if($user->has_dependent4)
                        <div class="title">
                            <h5>DEPENDENT 4</h5>
                        </div>
                        <ul class="inner-form-ul">   
                            <li>
                                <div class="form-row box-focus">
                                    <div class="labelHead">Name</div>
                                    <div class="outer-box">
                                    <label for="DEPENDENT4Name">Name</label>
                                    <input id="DEPENDENT4Name" name="dependent4_name" type="text" class="form-control" value="" placeholder="" />
                                    </div>                      
                                </div>
                                <p id="dependent4_nameErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>   
                            <li>
                                <div class="form-row box-focus">
                                    <div class="labelHead">Date of Birth (Below 23 years only)</div>
                                    <div class="outer-box">
                                    <input id="DEPENDENT4Dob" name="dependent4_dob" type="date" class="form-control" value="" placeholder="" />
                                    </div>                      
                                </div>
                                <p id="dependent4_dobErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>  
                            <li>
                                <div class="form-row box-focus">
                                    <label class="custom-select-label" for="dependent4_gender">Gender</label>
                                    <select id="dependent4_gender" name="dependent4_gender" class="custom-selectpicker" data-placeholder="Gender" data-floating-label="true">
                                        <option value="" disabled selected hidden></option>
                                        <option value="Male" {{ $user->gender == 'Male' ? 'selected' : '' }}>Male</option>
                                        <option value="Female" {{ $user->gender == 'Female' ? 'selected' : '' }}>Female</option>
                                    </select>
                                </div>
                                <p id="dependent4_genderErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </li>  
                        </ul>  
                        @endif 
                    @endif
                        <ul class="inner-form-ul">
                            <li>
                                <div class="login-btn-outer">
                                    <!-- <button type="submit" class="btn btn-primary"><span>Submit</span></button> -->
                                </div>    
                            </li>              
                        </ul>  
                </form>
            </div>
        </div>
    </div>
    </div>
</section>
@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection


@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('update_profile_frm');
        if (!form) {
            return;
        }

        form.querySelectorAll('input, textarea, select').forEach(function (field) {
            const type = (field.getAttribute('type') || '').toLowerCase();

            if (field.tagName === 'SELECT' || ['checkbox', 'radio', 'file'].includes(type)) {
                field.disabled = true;
                return;
            }

            if (!['hidden', 'submit', 'button'].includes(type)) {
                field.setAttribute('readonly', 'readonly');
            }
        });
    });

    $("#update_profile_frm").submit(function(event) {  
        event.preventDefault(); 

        var submitForm = $(this);
        var submitBtn = submitForm.find('button[type="submit"]');

        // --- Client-side validation for required fields only ---
        let missingFields = [];
        const requiredFields = [
            { name: 'member_id', label: 'Membership No.' },
            { name: 'surname', label: 'Last Name' },
            { name: 'first_name', label: 'First Name' },
            { name: 'dob', label: 'Date of Birth' },
            { name: 'phone', label: 'Phone' },
            { name: 'email', label: 'E-Mail' }
        ];

        requiredFields.forEach(field => {
            let val = submitForm.find(`[name="${field.name}"]`).val();
            if (!val || val.trim() === "") {
                missingFields.push(field.label);
            }
        });

        if (missingFields.length > 0) {
            let listHtml = '<ul class="swal-list">';
            missingFields.forEach(f => {
                listHtml += `<li>${f} is required</li>`;
            });
            listHtml += '</ul>';

            Swal.fire({
                icon: 'warning',
                title: 'Required Fields',
                html: listHtml,
                confirmButtonColor: '#002B10'
            });
            return false;
        }
        // --- End Client-side validation ---

        $.ajax({
            url: submitForm.attr('action'),
            data: new FormData(submitForm[0]),
            type: 'POST',
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function() {
                submitBtn.attr("disabled", true).find('span').text('Submitting...');
                submitForm.find('.text-danger').text(''); // Clear previous error messages
                submitForm.find('input, select, textarea').removeClass('is-invalid'); // Remove error styling
            },
            success: function(response) {
                submitBtn.attr("disabled", false).find('span').text('Submit');

                if (response.status == 200) { 
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.msg,
                        confirmButtonColor: '#002B10'
                    }).then(() => {
                        window.location.reload();
                    });

                } else if (response.status == 422) {
                    // Handle validation errors from server
                    let errHtml = '<ul class="swal-list">';
                    $.each(response.errors, function(key, value) {
                        $('#' + key + 'Err').text(value[0]); // Display validation error
                        $('[name="' + key + '"]').addClass('is-invalid'); // Highlight the invalid field
                        errHtml += `<li>${value[0]}</li>`;
                    });
                    errHtml += '</ul>';

                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error',
                        html: errHtml,
                        confirmButtonColor: '#002B10'
                    });
                } else if (response.status == 500) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: response.msg,
                        confirmButtonColor: '#002B10'
                    });
                }
            },
            error: function(xhr) {
                submitBtn.attr("disabled", false).find('span').text('Submit');
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Something went wrong. Please try again later.',
                    confirmButtonColor: '#002B10'
                });
            }
        });
    });
</script>
@endpush