@extends('frontend.dashboard.layouts.app')

@section('content')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Income</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Add Income</li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="container">
            <div class="main-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">

                                <form method="post" action="{{ route('income.store') }}" class="needs-validation" novalidate id="income-form">
                                    @csrf

                                    <div class="card-header">
                                        <h4>Add Income</h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">

                                            <!-- Subject -->
                                            <div class="form-group col-12 mb-3">
                                                <label>विषय</label>
                                                <input type="text" class="form-control @error('subject') is-invalid @enderror"
                                                    name="subject" value="Annual Income Verification" readonly>
                                                @error('subject')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <!-- Send To Address -->
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>साविक वडा नं/Previous Ward no</label>
                                                <input type="number" class="form-control @error('previous_ward_no') is-invalid @enderror"
                                                    name="previous_ward_no" value="{{ old('previous_ward_no') }}">
                                                @error('previous_ward_no')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <!-- Municipality -->
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>नगरपालिका/Municipality</label>
                                                <select name="municipality_id" class="form-control @error('municipality_id') is-invalid @enderror">
                                                    <option value="">Select Municipality</option>
                                                    @foreach($municipalities ?? [] as $municipality)
                                                        <option value="{{ $municipality->id }}" {{ old('municipality_id', Auth::user()->municipality_id ?? '') == $municipality->id ? 'selected' : '' }}>
                                                            {{ $municipality->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('municipality_id')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <!-- Ward No -->
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>वडा नं/Ward No</label>
                                                <select name="ward_id" class="form-control @error('ward_id') is-invalid @enderror">
                                                    <option value="">Select Ward</option>
                                                    @foreach($wards ?? [] as $ward)
                                                        <option value="{{ $ward->id }}" {{ old('ward_id', Auth::user()->ward_id ?? '') == $ward->id ? 'selected' : '' }}>
                                                            {{ $ward->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('ward_id')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>जिल्ला/District</label>
                                                <input type="text" class="form-control @error('district') is-invalid @enderror"
                                                    name="district" value="Bhaktapur" readonly>
                                                @error('district')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>प्रदेश/Province</label>
                                                <input type="text" class="form-control @error('provinance') is-invalid @enderror"
                                                    name="provinance" value="Bagmati Province" readonly>
                                                @error('provinance')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <!-- Applicant Name -->
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>निवेदक/Applicant</label>
                                                <input type="text" class="form-control @error('applicant_name') is-invalid @enderror"
                                                    name="applicant_name" value="{{ old('applicant_name', Auth::user()->name) }}" required>
                                                @error('applicant_name')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>लिङ्ग/Gender</label>
                                                <select name="gender" class="form-control @error('gender') is-invalid @enderror" required>
                                                    <option value="">--Select--</option>
                                                    <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male</option>
                                                    <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
                                                </select>
                                                @error('gender')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>विवाहित/Marital Status</label>
                                                <select name="marital_status" class="form-control @error('marital_status') is-invalid @enderror" required>
                                                    <option value="">--Select--</option>
                                                    <option value="Married" {{ old('marital_status') == 'Married' ? 'selected' : '' }}>Married</option>
                                                    <option value="Unmarried" {{ old('marital_status') == 'Unmarried' ? 'selected' : '' }}>Unmarried</option>
                                                </select>
                                                @error('marital_status')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>निवेदककाे नागरिकता नं/Applicant Citizen no</label>
                                                <input type="text" class="form-control @error('applicant_citizen') is-invalid @enderror"
                                                    name="applicant_citizen" value="{{ old('applicant_citizen') }}" required>
                                                @error('applicant_citizen')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>निवेदककाे राष्ट्रिय परिचय नं/Applicant National Id no</label>
                                                <input type="text" class="form-control @error('applicant_id_no') is-invalid @enderror"
                                                    name="applicant_id_no" value="{{ old('applicant_id_no') }}">
                                                @error('applicant_id_no')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>निवेदककाे राहदानी नं/Applicant Passport no</label>
                                                <input type="text" class="form-control @error('applicant_passport') is-invalid @enderror"
                                                    name="applicant_passport" value="{{ old('applicant_passport') }}">
                                                @error('applicant_passport')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>निवेदककाे हजुरबुवाको नाम/Applicant Grandfather Name</label>
                                                <input type="text" class="form-control @error('applicant_grandfather') is-invalid @enderror"
                                                    name="applicant_grandfather" value="{{ old('applicant_grandfather') }}" required>
                                                @error('applicant_grandfather')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>निवेदककाे बुवाको नाम/Applicant Father Name</label>
                                                <input type="text" class="form-control @error('applicant_father') is-invalid @enderror"
                                                    name="applicant_father" value="{{ old('applicant_father') }}" required>
                                                @error('applicant_father')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>निवेदककाे आमाको नाम/Applicant Mother Name</label>
                                                <input type="text" class="form-control @error('applicant_mother') is-invalid @enderror"
                                                    name="applicant_mother" value="{{ old('applicant_mother') }}" required>
                                                @error('applicant_mother')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>मुद्रा/Currency</label>
                                                <select name="currency_code" class="form-control @error('currency_code') is-invalid @enderror" required>
                                                    <option value="">--Select--</option>
                                                    <option value="ALL">Albania Lek (ALL)</option>
                                                    <option value="AFN">Afghanistan Afghani (AFN)</option>
                                                    <option value="ARS">Argentina Peso (ARS)</option>
                                                    <option value="AWG">Aruba Guilder (AWG)</option>
                                                    <option value="AUD">Australia Dollar (AUD)</option>
                                                    <option value="AZN">Azerbaijan New Manat (AZN)</option>
                                                    <option value="BSD">Bahamas Dollar (BSD)</option>
                                                    <option value="BBD">Barbados Dollar (BBD)</option>
                                                    <option value="BDT">Bangladeshi taka (BDT)</option>
                                                    <option value="BYR">Belarus Ruble (BYR)</option>
                                                    <option value="BZD">Belize Dollar (BZD)</option>
                                                    <option value="BMD">Bermuda Dollar (BMD)</option>
                                                    <option value="BOB">Bolivia Boliviano (BOB)</option>
                                                    <option value="BAM">Bosnia and Herzegovina Convertible Marka (BAM)</option>
                                                    <option value="BWP">Botswana Pula (BWP)</option>
                                                    <option value="BGN">Bulgaria Lev (BGN)</option>
                                                    <option value="BRL">Brazil Real (BRL)</option>
                                                    <option value="BND">Brunei Darussalam Dollar (BND)</option>
                                                    <option value="KHR">Cambodia Riel (KHR)</option>
                                                    <option value="CAD">Canada Dollar (CAD)</option>
                                                    <option value="KYD">Cayman Islands Dollar (KYD)</option>
                                                    <option value="CLP">Chile Peso (CLP)</option>
                                                    <option value="CNY">China Yuan Renminbi (CNY)</option>
                                                    <option value="COP">Colombia Peso (COP)</option>
                                                    <option value="CRC">Costa Rica Colon (CRC)</option>
                                                    <option value="HRK">Croatia Kuna (HRK)</option>
                                                    <option value="CUP">Cuba Peso (CUP)</option>
                                                    <option value="CZK">Czech Republic Koruna (CZK)</option>
                                                    <option value="DKK">Denmark Krone (DKK)</option>
                                                    <option value="DOP">Dominican Republic Peso (DOP)</option>
                                                    <option value="XCD">East Caribbean Dollar (XCD)</option>
                                                    <option value="EGP">Egypt Pound (EGP)</option>
                                                    <option value="SVC">El Salvador Colon (SVC)</option>
                                                    <option value="EEK">Estonia Kroon (EEK)</option>
                                                    <option value="EUR">Euro Member Countries (EUR)</option>
                                                    <option value="FKP">Falkland Islands (Malvinas) Pound (FKP)</option>
                                                    <option value="FJD">Fiji Dollar (FJD)</option>
                                                    <option value="GHC">Ghana Cedis (GHC)</option>
                                                    <option value="GIP">Gibraltar Pound (GIP)</option>
                                                    <option value="GTQ">Guatemala Quetzal (GTQ)</option>
                                                    <option value="GGP">Guernsey Pound (GGP)</option>
                                                    <option value="GYD">Guyana Dollar (GYD)</option>
                                                    <option value="HNL">Honduras Lempira (HNL)</option>
                                                    <option value="HKD">Hong Kong Dollar (HKD)</option>
                                                    <option value="HUF">Hungary Forint (HUF)</option>
                                                    <option value="ISK">Iceland Krona (ISK)</option>
                                                    <option value="INR">India Rupee (INR)</option>
                                                    <option value="IDR">Indonesia Rupiah (IDR)</option>
                                                    <option value="IRR">Iran Rial (IRR)</option>
                                                    <option value="IMP">Isle of Man Pound (IMP)</option>
                                                    <option value="ILS">Israel Shekel (ILS)</option>
                                                    <option value="JMD">Jamaica Dollar (JMD)</option>
                                                    <option value="JPY">Japan Yen (JPY)</option>
                                                    <option value="JEP">Jersey Pound (JEP)</option>
                                                    <option value="KZT">Kazakhstan Tenge (KZT)</option>
                                                    <option value="KPW">Korea (North) Won (KPW)</option>
                                                    <option value="KRW">Korea (South) Won (KRW)</option>
                                                    <option value="KGS">Kyrgyzstan Som (KGS)</option>
                                                    <option value="LAK">Laos Kip (LAK)</option>
                                                    <option value="LVL">Latvia Lat (LVL)</option>
                                                    <option value="LBP">Lebanon Pound (LBP)</option>
                                                    <option value="LRD">Liberia Dollar (LRD)</option>
                                                    <option value="LTL">Lithuania Litas (LTL)</option>
                                                    <option value="MKD">Macedonia Denar (MKD)</option>
                                                    <option value="MYR">Malaysia Ringgit (MYR)</option>
                                                    <option value="MUR">Mauritius Rupee (MUR)</option>
                                                    <option value="MXN">Mexico Peso (MXN)</option>
                                                    <option value="MNT">Mongolia Tughrik (MNT)</option>
                                                    <option value="MZN">Mozambique Metical (MZN)</option>
                                                    <option value="NAD">Namibia Dollar (NAD)</option>
                                                    <option value="NPR">Nepal Rupee (NPR)</option>
                                                    <option value="ANG">Netherlands Antilles Guilder (ANG)</option>
                                                    <option value="NZD">New Zealand Dollar (NZD)</option>
                                                    <option value="NIO">Nicaragua Cordoba (NIO)</option>
                                                    <option value="NGN">Nigeria Naira (NGN)</option>
                                                    <option value="NOK">Norway Krone (NOK)</option>
                                                    <option value="OMR">Oman Rial (OMR)</option>
                                                    <option value="PKR">Pakistan Rupee (PKR)</option>
                                                    <option value="PAB">Panama Balboa (PAB)</option>
                                                    <option value="PYG">Paraguay Guarani (PYG)</option>
                                                    <option value="PEN">Peru Nuevo Sol (PEN)</option>
                                                    <option value="PHP">Philippines Peso (PHP)</option>
                                                    <option value="PLN">Poland Zloty (PLN)</option>
                                                    <option value="QAR">Qatar Riyal (QAR)</option>
                                                    <option value="RON">Romania New Leu (RON)</option>
                                                    <option value="RUB">Russia Ruble (RUB)</option>
                                                    <option value="SHP">Saint Helena Pound (SHP)</option>
                                                    <option value="SAR">Saudi Arabia Riyal (SAR)</option>
                                                    <option value="RSD">Serbia Dinar (RSD)</option>
                                                    <option value="SCR">Seychelles Rupee (SCR)</option>
                                                    <option value="SGD">Singapore Dollar (SGD)</option>
                                                    <option value="SBD">Solomon Islands Dollar (SBD)</option>
                                                    <option value="SOS">Somalia Shilling (SOS)</option>
                                                    <option value="ZAR">South Africa Rand (ZAR)</option>
                                                    <option value="LKR">Sri Lanka Rupee (LKR)</option>
                                                    <option value="SEK">Sweden Krona (SEK)</option>
                                                    <option value="CHF">Switzerland Franc (CHF)</option>
                                                    <option value="SRD">Suriname Dollar (SRD)</option>
                                                    <option value="SYP">Syria Pound (SYP)</option>
                                                    <option value="TWD">Taiwan New Dollar (TWD)</option>
                                                    <option value="THB">Thailand Baht (THB)</option>
                                                    <option value="TTD">Trinidad and Tobago Dollar (TTD)</option>
                                                    <option value="TRL">Turkey Lira (TRL)</option>
                                                    <option value="TVD">Tuvalu Dollar (TVD)</option>
                                                    <option value="UAH">Ukraine Hryvna (UAH)</option>
                                                    <option value="GBP">United Kingdom Pound (GBP)</option>
                                                    <option value="USD">United States Dollar (USD)</option>
                                                    <option value="UYU">Uruguay Peso (UYU)</option>
                                                    <option value="UZS">Uzbekistan Som (UZS)</option>
                                                    <option value="VEF">Venezuela Bolivar (VEF)</option>
                                                    <option value="VND">Viet Nam Dong (VND)</option>
                                                    <option value="YER">Yemen Rial (YER)</option>
                                                    <option value="ZWD">Zimbabwe Dollar (ZWD)</option>
                                                </select>
                                                @error('currency_code')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label>रु/Todays Amount</label>
                                                <input type="number" class="form-control @error('currency_rupee') is-invalid @enderror"
                                                    name="currency_rupee" value="{{ old('currency_rupee') }}" required>
                                                @error('currency_rupee')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <!-- Relations Section -->
                                            <div class="col-12">
                                                <div class="card-header px-0">
                                                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                                                        <h6 class="text-primary mb-0">नाता र नाताकाे नामहरू</h6>
                                                        <button type="button" class="btn btn-sm btn-success add-relation-top-btn">
                                                            <i class="fas fa-plus"></i> थप नाता
                                                        </button>
                                                    </div>
                                                </div>
                                                <div id="relations-container">
                                                    <!-- First relation row -->
                                                    <div class="row relation-row mb-3" data-index="0">
                                                        <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                                                            <label>नाता</label>
                                                            <input type="text" class="form-control" name="relations[0][relation]"
                                                                value="{{ old('relations.0.relation') }}" required>
                                                            <div class="invalid-feedback">कृपया नाता भर्नुहोस्</div>
                                                        </div>

                                                        <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                                                            <label>नाताकाे नाम</label>
                                                            <input type="text" class="form-control" name="relations[0][relation_name]"
                                                                value="{{ old('relations.0.relation_name') }}" required>
                                                            <div class="invalid-feedback">कृपया नाताको नाम भर्नुहोस्</div>
                                                        </div>

                                                        <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                                                            <label>विवाहित</label>
                                                            <select name="relations[0][married_status]" class="form-control" required>
                                                                <option value="">--Select--</option>
                                                                <option value="Married" {{ old('relations.0.married_status') == 'Married' ? 'selected' : '' }}>Married</option>
                                                                <option value="Unmarried" {{ old('relations.0.married_status') == 'Unmarried' ? 'selected' : '' }}>Unmarried</option>
                                                            </select>
                                                            <div class="invalid-feedback">कृपया वैवाहिक स्थिति चयन गर्नुहोस्</div>
                                                        </div>

                                                        <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                                                            <label>लिङ्ग</label>
                                                            <select name="relations[0][gender]" class="form-control" required>
                                                                <option value="">--Select--</option>
                                                                <option value="Male" {{ old('relations.0.gender') == 'Male' ? 'selected' : '' }}>Male</option>
                                                                <option value="Female" {{ old('relations.0.gender') == 'Female' ? 'selected' : '' }}>Female</option>
                                                            </select>
                                                            <div class="invalid-feedback">कृपया लिङ्ग चयन गर्नुहोस्</div>
                                                        </div>

                                                        <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                                                            <label>कमाइृकाे स्राेत</label>
                                                            <input type="text" class="form-control" name="relations[0][income_source]"
                                                                value="{{ old('relations.0.income_source') }}" required>
                                                            <div class="invalid-feedback">कृपया कमाइको स्रोत भर्नुहोस्</div>
                                                        </div>

                                                        <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                                                            <label>कमाई गरिएका ठाँउ</label>
                                                            <input type="text" class="form-control" name="relations[0][income_place]"
                                                                value="{{ old('relations.0.income_place') }}" required>
                                                            <div class="invalid-feedback">कृपया कमाई गरिएको ठाँउ भर्नुहोस्</div>
                                                        </div>

                                                        <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                                                            <label>रकम</label>
                                                            <input type="text" class="form-control" name="relations[0][income_price]"
                                                                value="{{ old('relations.0.income_price') }}" required>
                                                            <div class="invalid-feedback">कृपया रकम भर्नुहोस्</div>
                                                        </div>

                                                        <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                                                            <label>रिमार्क</label>
                                                            <input type="text" class="form-control" name="relations[0][income_remark]"
                                                                value="{{ old('relations.0.income_remark') }}" required>
                                                            <div class="invalid-feedback">कृपया रिमार्क भर्नुहोस्</div>
                                                        </div>

                                                        <div class="form-group col-12">
                                                            <button type="button" class="btn btn-danger remove-relation-btn">
                                                                <i class="fas fa-minus"></i> हटाउनुहोस्
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- End Relations Section -->

                                            <!-- Form Actions -->
                                            <div class="col-12">
                                                <div class="d-flex flex-wrap gap-2 justify-content-end mt-3">
                                                    <button type="submit" class="btn btn-primary">
                                                        <i class="bx bx-save me-1"></i> सुरक्षित गर्नुहोस्
                                                    </button>
                                                    <button type="reset" class="btn btn-secondary">
                                                        <i class="bx bx-undo me-1"></i> रद्द गर्नुहोस्
                                                    </button>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    /* Mobile responsive improvements */
    @media (max-width: 576px) {
        .card-header h4 {
            font-size: 1.1rem;
        }
        
        .form-group {
            margin-bottom: 1rem !important;
        }
        
        .form-group label {
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .form-control {
            font-size: 0.9rem;
            padding: 0.5rem 0.75rem;
            min-height: 44px;
        }
        
        select.form-control {
            background-size: 12px 8px;
            padding-right: 2.5rem;
        }
        
        .btn {
            width: 100%;
            margin-bottom: 0.5rem;
            min-height: 44px;
        }
        
        .btn:last-child {
            margin-bottom: 0;
        }
        
        .relation-row .form-group {
            margin-bottom: 0.75rem !important;
        }
        
        .relation-row .form-group:last-child {
            margin-bottom: 0 !important;
        }
        
        .card-header .d-flex {
            flex-direction: column;
            align-items: stretch !important;
        }
        
        .card-header .btn {
            width: 100%;
        }
    }
    
    @media (max-width: 768px) {
        .page-breadcrumb {
            flex-wrap: wrap;
        }
        
        .breadcrumb-title {
            font-size: 1rem;
        }
        
        .container {
            padding-left: 10px;
            padding-right: 10px;
        }
        
        .card-body {
            padding: 1rem !important;
        }
        
        .card-header {
            padding: 0.75rem 1rem !important;
        }
    }
    
    /* Better form group spacing */
    .form-group {
        margin-bottom: 1.25rem;
    }
    
    /* Better error message display */
    .invalid-feedback {
        font-size: 0.8rem;
        margin-top: 0.25rem;
    }
    
    /* Relation row styling */
    .relation-row {
        background: #f8f9fa;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
        border: 1px solid #e9ecef;
    }
    
    .relation-row .form-group {
        margin-bottom: 0.75rem;
    }
    
    .relation-row .remove-relation-btn {
        margin-top: 0.5rem;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize relationIndex based on existing rows
    let relationIndex = document.querySelectorAll('.relation-row').length;
    const container = document.getElementById('relations-container');
    const addButton = document.querySelector('.add-relation-top-btn');

    function addRelationRow() {
        const newRow = document.createElement('div');
        newRow.className = 'row relation-row mb-3';
        newRow.setAttribute('data-index', relationIndex);

        newRow.innerHTML = `
            <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                <label>नाता</label>
                <input type="text" class="form-control" name="relations[${relationIndex}][relation]" required>
                <div class="invalid-feedback">कृपया नाता भर्नुहोस्</div>
            </div>

            <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                <label>नाताकाे नाम</label>
                <input type="text" class="form-control" name="relations[${relationIndex}][relation_name]" required>
                <div class="invalid-feedback">कृपया नाताको नाम भर्नुहोस्</div>
            </div>

            <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                <label>विवाहित</label>
                <select name="relations[${relationIndex}][married_status]" class="form-control" required>
                    <option value="">--Select--</option>
                    <option value="Married">Married</option>
                    <option value="Unmarried">Unmarried</option>
                </select>
                <div class="invalid-feedback">कृपया वैवाहिक स्थिति चयन गर्नुहोस्</div>
            </div>

            <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                <label>लिङ्ग</label>
                <select name="relations[${relationIndex}][gender]" class="form-control" required>
                    <option value="">--Select--</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
                <div class="invalid-feedback">कृपया लिङ्ग चयन गर्नुहोस्</div>
            </div>

            <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                <label>कमाइृकाे स्राेत</label>
                <input type="text" class="form-control" name="relations[${relationIndex}][income_source]" required>
                <div class="invalid-feedback">कृपया कमाइको स्रोत भर्नुहोस्</div>
            </div>

            <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                <label>कमाई गरिएका ठाँउ</label>
                <input type="text" class="form-control" name="relations[${relationIndex}][income_place]" required>
                <div class="invalid-feedback">कृपया कमाई गरिएको ठाँउ भर्नुहोस्</div>
            </div>

            <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                <label>रकम</label>
                <input type="text" class="form-control" name="relations[${relationIndex}][income_price]" required>
                <div class="invalid-feedback">कृपया रकम भर्नुहोस्</div>
            </div>

            <div class="form-group col-md-6 col-lg-3 col-12 mb-2">
                <label>रिमार्क</label>
                <input type="text" class="form-control" name="relations[${relationIndex}][income_remark]" required>
                <div class="invalid-feedback">कृपया रिमार्क भर्नुहोस्</div>
            </div>

            <div class="form-group col-12">
                <button type="button" class="btn btn-danger remove-relation-btn">
                    <i class="fas fa-minus"></i> हटाउनुहोस्
                </button>
            </div>
        `;

        container.appendChild(newRow);
        relationIndex++;
    }

    // Add new row when clicking the button
    if (addButton) {
        addButton.addEventListener('click', addRelationRow);
    }

    // Remove row when clicking remove button
    container.addEventListener('click', function(e) {
        const removeBtn = e.target.closest('.remove-relation-btn');
        if (removeBtn) {
            const row = removeBtn.closest('.relation-row');
            // Don't remove if it's the last row
            if (container.children.length > 1) {
                row.remove();
            } else {
                alert('कम्तिमा एउटा नाता राख्नुहोस्');
            }
        }
    });
});
</script>
@endpush