@extends('employee.app')
@section('title', __('employeeAffairs.add_employee'))
@section('content')
    @include('components.errors')
    <div class="card mb-3">
        <div class="card-body">
            <div class="row flex-between-center">
                <div class="col-md">
                    <h5 class="mb-2 mb-md-0">@lang('employeeAffairs.add_employee')</h5>
                </div>
                <div class="col-auto">
                    <a href="{{ url()->current() }}" class="btn btn-falcon-primary btn-sm" role="button"><i
                            class="fa fa-sync"></i></a>
                    <a href="{{ route('employees.index', $entity_id) }}" class="btn btn-secondary btn-sm"
                        role="button">@lang('employeeAffairs.back')
                    </a>
                </div>
            </div>
        </div>
    </div>
    <form action="{{ route('employees.store') }}" method="POST" class="row g-3">
        @csrf

        {{-- card 1  --}}
        <div class="card">
            <div class="card-body">
                {{-- row 1  --}}
                <div class="row mt-2">

                    <div class="col-md-3">
                        <label for="employee_code" class="form-label">@lang('employee.employee_code')</label>
                        <input type="text" name="employee_code" class="form-control" id="employee_code"
                            value="{{ $employee_code }}" required readonly>
                    </div>
                    <div class="col-md-3">
                        <label for="financial_number" class="form-label">@lang('employee.financial_number')</label>
                        <input type="text" name="financial_number" class="form-control" id="financial_number"
                            value="{{ old('financial_number') }}" required>
                        <input type="hidden" name="entity_id" class="form-control" id="entity_id"
                            value="{{ $entity_id }}" required>
                    </div>



                    <div class="col-md-3">
                        <label for="name" class="form-label">@lang('form.name')</label>
                        <input type="text" name="name" class="form-control" id="name" value="{{ old('name') }}"
                            required>
                    </div>

                    <div class="col-md-3">
                        <label for="father_name" class="form-label">@lang('employee.father_name')</label>
                        <input type="text" name="father_name" class="form-control" id="father_name"
                            value="{{ old('father_name') }}" required>
                    </div>
                </div>
                {{-- row 2  --}}
                <div class="row mt-2">

                    <div class="col-md-3">
                        <label for="surname" class="form-label">@lang('employee.surname')</label>
                        <input type="text" name="surname" class="form-control" id="surname"
                            value="{{ old('surname') }}" required>
                    </div>

                    <div class="col-md-3">
                        <label for="mother_name" class="form-label">@lang('employee.mother_name')</label>
                        <input type="text" name="mother_name" class="form-control" id="mother_name"
                            value="{{ old('mother_name') }}" required>
                    </div>

                    <div class="col-md-3">
                        <label for="birthplace" class="form-label">@lang('employee.birthplace')</label>
                        <input type="text" name="birthplace" class="form-control" id="birthplace"
                            value="{{ old('birthplace') }}" required>
                    </div>

                    <div class="col-md-3">
                        <label for="birthdate" class="form-label">@lang('employee.birthdate')</label>
                        <input type="date" name="birthdate" class="form-control" id="birthdate"
                            value="{{ old('birthdate') }}" required>
                    </div>
                </div>
                {{-- row 3 --}}
                <div class="row mt-2">
                    <div class="col-md-3">
                        <label for="national_id" class="form-label">@lang('employee.national_id')</label>
                        <input type="text" name="national_id" class="form-control" id="national_id"
                            value="{{ old('national_id') }}" required>
                    </div>
                    <div class="col-md-3">
                        <label for="registry_number" class="form-label">@lang('employeeAffairs.registry_number')</label>
                        <input type="text" name="registry_number" class="form-control" id="registry_number"
                            value="{{ old('registry_number') }}" required>
                    </div>
                    <div class="col-md-3">
                        <label for="gender" class="form-label">@lang('employee.gender')</label>
                        <select name="gender" id="gender" class="form-select" required>
                            <option value="" selected disabled>@lang('form.select')</option>
                            <option value="male" @selected(old('gender') == 'male')>@lang('employee.male')</option>
                            <option value="female" @selected(old('gender') == 'female')>@lang('employee.female')</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label for="marital_status" class="form-label">@lang('employee.marital_status')</label>
                        <select name="marital_status" id="marital_status" class="form-select" required>
                            <option value="" selected disabled>@lang('form.select')</option>
                            <option value="married" @selected(old('marital_status') == 'married')>@lang('employee.married')</option>
                            <option value="single" @selected(old('marital_status') == 'single')>@lang('employee.single')</option>
                            <option value="divorced" @selected(old('marital_status') == 'divorced')>@lang('employee.divorced')</option>
                            <option value="widowed" @selected(old('marital_status') == 'widowed')>@lang('employee.widowed')</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label for="children_count" class="form-label">@lang('employee.children_count')</label>
                        <input type="number" name="children_count" class="form-control" id="children_count"
                            value="{{ old('children_count') }}">
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <label for="component_id" class="form-label">@lang('employee.component')</label>
                        <select name="component_id" id="component_id" class="form-select" required>
                            <option value="" selected disabled>@lang('form.select')</option>
                            @foreach ($components as $component)
                                <option value="{{ $component->id }}" @selected(old('component_id') == $component->id)>{{ $component->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label for="native_language_id" class="form-label">@lang('employee.language')</label>
                        <select name="native_language_id" id="native_language_id" class="form-select" required>
                            <option value="" selected disabled>@lang('form.select')</option>
                            @foreach ($languages as $language)
                                <option value="{{ $language->id }}" @selected(old('native_language_id') == $language->id)>{{ $language->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label for="religion_id" class="form-label">@lang('employee.religion')</label>
                        <select name="religion_id" id="religion_id" class="form-select" required>
                            <option value="" selected disabled>@lang('form.select')</option>
                            @foreach ($religions as $religion)
                                <option value="{{ $religion->id }}" @selected(old('religion_id') == $religion->id)>{{ $religion->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label for="qualification_id" class="form-label">@lang('employee.qualification')</label>
                        <select name="qualification_id" id="qualification_id" class="form-select" required>
                            <option value="" selected disabled>@lang('form.select')</option>
                            @foreach ($qualifications as $qualification)
                                <option value="{{ $qualification->id }}" @selected(old('qualification_id') == $qualification->id)>
                                    {{ $qualification->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row mt-2">
                    <div class="form-group col-md-3">
                        <label class="form-label" for="exampleFormControlTextarea1">@lang('employeeAffairs.other_certificates')</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="other_certificates">{{ old('other_certificates') ?? '' }}</textarea>
                    </div>

                    <div class="col-md-3">
                        <label for="graduation_year" class="form-label">@lang('employee.graduation_year')</label>
                        <input type="number" name="graduation_year" class="form-control" id="graduation_year"
                            value="{{ old('graduation_year') }}">
                    </div>

                    <div class="col-md-3">
                        <label for="job_title_id" class="form-label">@lang('employee.job_title')</label>
                        <select name="job_title_id" id="job_title_id" class="form-select" required>
                            <option value="" selected disabled>@lang('form.select')</option>
                            @foreach ($jobTitles as $jobTitle)
                                <option value="{{ $jobTitle->id }}" @selected(old('job_title_id') == $jobTitle->id)>{{ $jobTitle->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label for="job_status_id" class="form-label">@lang('employee.job_status')</label>
                        <select name="job_status_id" id="job_status_id" class="form-select" required>
                            <option value="" selected disabled>@lang('form.select')</option>
                            @foreach ($jobStatuses as $jobStatus)
                                <option value="{{ $jobStatus->id }}" @selected(old('job_status_id') == $jobStatus->id)>{{ $jobStatus->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row mt-2">
                    <div class="col-md-3">
                        <label for="appointment_decision" class="form-label">@lang('employee.appointment_decision')</label>
                        <input type="text" name="appointment_decision" class="form-control" id="appointment_decision"
                            value="{{ old('appointment_decision') }}" required>
                    </div>

                    <div class="col-md-3">
                        <label for="appointment_date" class="form-label">@lang('employee.appointment_date')</label>
                        <input type="date" name="appointment_date" class="form-control" id="appointment_date"
                            value="{{ old('appointment_date') }}" required>
                    </div>

                    <div class="col-md-3">
                        <label for="start_date" class="form-label">@lang('employee.start_date')</label>
                        <input type="date" name="start_date" class="form-control" id="start_date"
                            value="{{ old('start_date') }}" required>
                    </div>

                    <div class="col-md-3" style="display: none;" id="self_defense_duty_container">
                        <label for="self_defense_duty" class="form-label">@lang('employee.self_defense_duty')</label>
                        <select name="self_defense_duty" id="self_defense_duty" class="form-select">
                            <option value="" selected disabled>@lang('form.select')</option>
                            <option value="required" @selected(old('self_defense_duty') == 'required')>@lang('employee.required')</option>
                            <option value="not_required" @selected(old('self_defense_duty') == 'not_required')>@lang('employee.not_required')</option>
                            <option value="exempt" @selected(old('self_defense_duty') == 'exempt')>@lang('employee.exempt')</option>
                            <option value="duty_fulfilled" @selected(old('self_defense_duty') == 'duty_fulfilled')>@lang('employee.duty_fulfilled')</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="card" id="duty_details_card" style="display: none;">
            <div class="card-body">
                <div class="row">

                    <div class="col-md-3">
                        <label for="duty_start_date" class="form-label">@lang('employeeAffairs.duty_start_date')</label>
                        <input type="date" name="duty_start_date" class="form-control" id="duty_start_date"
                            value="{{ old('duty_start_date') }}">
                    </div>

                    <div class="col-md-3">
                        <label for="duty_end_date" class="form-label">@lang('employeeAffairs.duty_end_date')</label>
                        <input type="date" name="duty_end_date" class="form-control" id="duty_end_date"
                            value="{{ old('duty_end_date') }}">
                    </div>

                    <div class="col-md-3">
                        <label for="duty_book_number" class="form-label">@lang('employeeAffairs.duty_book_number')</label>
                        <input type="text" name="duty_book_number" class="form-control" id="duty_book_number"
                            value="{{ old('duty_book_number') }}">
                    </div>

                    <div class="col-md-3">
                        <label for="duty_book_date" class="form-label">@lang('employeeAffairs.duty_book_date')</label>
                        <input type="date" name="duty_book_date" class="form-control" id="duty_book_date"
                            value="{{ old('duty_book_date') }}">
                    </div>
                </div>

            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="row mt-2">
                    <div class="col-md-3">
                        <label for="blood_type" class="form-label">@lang('employee.blood_type')</label>
                        <select name="blood_type" id="blood_type" class="form-select" required>
                            <option value="" selected disabled>@lang('form.select')</option>
                            <option value="O−" @selected(old('blood_type') == 'O−')>O−</option>
                            <option value="O+" @selected(old('blood_type') == 'O+')>O+</option>
                            <option value="A−" @selected(old('blood_type') == 'A−')>A−</option>
                            <option value="A+" @selected(old('blood_type') == 'A+')>A+</option>
                            <option value="B−" @selected(old('blood_type') == 'B−')>B−</option>
                            <option value="B+" @selected(old('blood_type') == 'B+')>B+</option>
                            <option value="AB−" @selected(old('blood_type') == 'AB-')>AB−</option>
                            <option value="AB+" @selected(old('blood_type') == 'AB+')>AB+</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="salary" class="form-label">@lang('employee.salary')</label>
                        <input type="text" name="salary" class="form-control" id="salary"
                            value="{{ old('salary') }}" required>
                    </div>

                    <div class="col-md-3">
                        <label for="category" class="form-label">@lang('employee.category')</label>
                        <select name="category" id="category" class="form-select" required>
                            <option value="" selected disabled>@lang('form.select')</option>
                            <option value="first" @selected(old('category') == 'first')>@lang('employee.first')</option>
                            <option value="second" @selected(old('category') == 'second')>@lang('employee.second')</option>
                            <option value="third" @selected(old('category') == 'third')>@lang('employee.third')</option>
                            <option value="fourth" @selected(old('category') == 'fourth')>@lang('employee.fourth')</option>
                            <option value="fifth" @selected(old('category') == 'fifth')>@lang('employee.fifth')</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label for="grade" class="form-label">@lang('employee.grade')</label>
                        <select name="grade" id="grade" class="form-select" required>
                            <option value="" selected disabled>@lang('form.select')</option>
                            <option value="first" @selected(old('grade') == 'first')>@lang('employee.first')</option>
                            <option value="second" @selected(old('grade') == 'second')>@lang('employee.second')</option>
                            <option value="third" @selected(old('grade') == 'third')>@lang('employee.third')</option>
                            <option value="fourth" @selected(old('grade') == 'fourth')>@lang('employee.fourth')</option>
                            <option value="fifth" @selected(old('grade') == 'fifth')>@lang('employee.fifth')</option>
                        </select>
                    </div>
                </div>

                <div class="row mt-2">
                    <div class="col-md-3">
                        <label for="contract_type_id" class="form-label">@lang('employee.contract_type')</label>
                        <select name="contract_type_id" id="contract_type_id" class="form-select" required>
                            <option value="" selected disabled>@lang('form.select')</option>
                            @foreach ($contractTypes as $contractType)
                                <option value="{{ $contractType->id }}"
                                    {{ old('contract_type_id') == $contractType->id ? 'selected' : '' }}
                                    data-permanent="{{ $contractType->permanent ? 'true' : 'false' }}">
                                    {{ $contractType->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3 contract-details">
                        <label for="contract_start_date" class="form-label">@lang('employee.contract_start_date')</label>
                        <input type="date" name="contract_start_date" class="form-control" id="contract_start_date"
                            value="{{ old('contract_start_date') }}">
                    </div>

                    <div class="col-md-3 contract-details">
                        <label for="contract_end_date" class="form-label">@lang('employee.contract_end_date')</label>
                        <input type="date" name="contract_end_date" class="form-control" id="contract_end_date"
                            value="{{ old('contract_end_date') }}">
                    </div>

                    <div class="col-md-3 contract-details">
                        <label for="contract_amount" class="form-label">@lang('employee.contract_amount')</label>
                        <input type="text" name="contract_amount" class="form-control" id="contract_amount"
                            value="{{ old('contract_amount') }}">
                    </div>

                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="row mt-2">
                    <div class="col-md-3 ">
                        <label for="first_appointment_date" class="form-label">@lang('employee.first_appointment_date')</label>
                        <input type="date" name="first_appointment_date" class="form-control"
                            id="first_appointment_date" value="{{ old('first_appointment_date') }}" required>
                    </div>

                    <div class="col-md-3">
                        <label for="status_id" class="form-label">@lang('employee.status')</label>
                        <select name="status_id" id="status_id" class="form-select" required>
                            <option value="" selected disabled>@lang('form.select')</option>
                            @foreach ($statuses as $status)
                                <option value="{{ $status->id }}" @selected(old('status_id') == $status->id)>{{ $status->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 ">
                        <label for="phone" class="form-label">@lang('employee.phone')</label>
                        <input type="text" name="phone" class="form-control" id="phone"
                            value="{{ old('phone') }}">
                    </div>
                    <div class="col-md-3 ">
                        <label for="tribe" class="form-label">@lang('employee.tribe')</label>
                        <input type="text" name="tribe" class="form-control" id="tribe"
                            value="{{ old('tribe') }}">
                    </div>

                </div>

                <div class="row mt-2">
                    <div class="col-md-3 ">
                        <label for="commune" class="form-label">@lang('employee.commune')</label>
                        <input type="text" name="commune" class="form-control" id="commune"
                            value="{{ old('commune') }}">
                    </div>

                    <div class="col-md-3">
                        <label for="martyr_family" class="form-label">@lang('employee.martyr_family')</label>
                        <select name="martyr_family" id="martyr_family" class="form-select" required>
                            <option value="1">@lang('employeeAffairs.true')</option>
                            <option value="0" selected>@lang('employeeAffairs.false')</option>
                        </select>
                    </div>

                    <div class="col-md-3" style="display: none;" id="relationship-container">
                        <label for="relationship" class="form-label">@lang('employee.relationship')</label>
                        <select name="relationship" id="relationship" class="form-select">
                            <option value="" selected disabled>@lang('form.select')</option>
                            <option value="father" @selected(old('relationship') == 'father')>@lang('employee.father')</option>
                            <option value="mother" @selected(old('relationship') == 'mother')>@lang('employee.mother')</option>
                            <option value="brother" @selected(old('relationship') == 'brother')>@lang('employee.brother')</option>
                            <option value="sister" @selected(old('relationship') == 'sister')>@lang('employee.sister')</option>
                            <option value="son" @selected(old('relationship') == 'son')>@lang('employee.son')</option>
                            <option value="daughter" @selected(old('relationship') == 'daughter')>@lang('employee.daughter')</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label for="shared_teacher" class="form-label">@lang('employee.shared_teacher')</label>
                        <select name="shared_teacher" id="shared_teacher" class="form-select" required>
                            <option value="1">@lang('employeeAffairs.true')</option>
                            <option value="0" selected>@lang('employeeAffairs.false')</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="card" style="display: none;" id="schools_container">
            <div class="card-body">
                <div class="row mt-2" id="schools_rows">
                    <div class="row mb-2">
                        <div class="mb-3 col-md-4">
                            <label for="item_id" class="form-label">@lang('employeeAffairs.schools')</label>
                            <select class="form-select" id="school_id">
                                <option selected disabled>@lang('employeeAffairs.select')</option>
                                @foreach ($schools as $school)
                                    <option value="{{ $school->id }}">
                                        {{ $school->name }}</option>
                                @endforeach
                            </select>
                            <small id="school_error" class="text-danger"></small>
                        </div>
                        <div class="mb-3 col-md-4">
                            <label for="quantity" class="form-label">@lang('employeeAffairs.working_hours')</label>
                            <input type="number" class="form-control" id="working_hour" min="1">
                            <small id="hours_error" class="text-danger"></small>
                        </div>
                        <div class="form-group col-md-3">
                            <label class="form-label" for="exampleFormControlTextarea1">@lang('employeeAffairs.notes')</label>
                            <textarea class="form-control" rows="1" cols="1" id="school_note"></textarea>
                        </div>
                        <div class="col-md-4 d-flex align-items-end mb-3">
                            <button type="button" class="btn btn-primary" id="add_school">@lang('employeeAffairs.add')</button>
                        </div>
                    </div>
                </div>
                <div class="row mb-2">
                    <table class="table" id="school_table">
                        <thead>
                            <tr>
                                <th>@lang('employeeAffairs.school')</th>
                                <th>@lang('employeeAffairs.working_hours')</th>
                                <th>@lang('employeeAffairs.notes')</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="row mt-2">

                    <div class="form-group col-md-6">
                        <label class="form-label" for="exampleFormControlTextarea1">@lang('employee.address')</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="address">{{ old('address') ?? '' }}</textarea>
                    </div>


                    <div class="form-group col-md-6">
                        <label class="form-label" for="exampleFormControlTextarea1">@lang('employeeAffairs.notes')</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="notes">{{ old('notes') ?? '' }}</textarea>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-12 mt-2">
            <a href="{{ route('employees.index', $entity_id) }}"
                class="btn btn-primary col-md-2 ">@lang('employeeAffairs.back')</a>
            <button type="submit" class="btn btn-success col-md-2">@lang('form.create')</button>

        </div>

    </form>



    <script>
        document.getElementById('add_school').addEventListener('click', function() {
            const school_select = document.getElementById('school_id');
            const working_hour_input = document.getElementById('working_hour');
            const school_note_input = document.getElementById('school_note');
            const school_error = document.getElementById('school_error');
            const hours_error = document.getElementById('hours_error');

            const school_id = school_select.value;
            const school_name = school_select.options[school_select.selectedIndex].text;
            const hours = working_hour_input.value;
            const notes = school_note_input.value;

            let hasError = false;

            // Reset error messages
            school_error.textContent = '';
            hours_error.textContent = '';

            // Validate input

            if (!school_id || isNaN(school_id)) {
                school_error.textContent = '@lang('employeeAffairs.select_school')';
                hasError = true;
            }

            if (!hours) {
                hours_error.textContent = '@lang('employeeAffairs.enter_working_hours')';
                hasError = true;
            }

            if (!hasError) {
                // Create table row
                const tableBody = document.getElementById('school_table').getElementsByTagName('tbody')[
                    0];
                const newRow = document.createElement('tr');

                newRow.innerHTML = `
    <td>
        <input type="hidden" name="school_ids[]" value="${school_id}">
        ${school_name}
    </td>
    <td>
        <input type="hidden" name="working_hours[]" value="${hours}">
        ${hours}
    </td>
    <td>
        <input type="hidden" name="school_notes[]" value="${notes}">
        ${notes}
    </td>
    <td>
        <button type="button" class="btn btn-danger remove_item">@lang('warehouse.remove')</button>
    </td>
    `;

                tableBody.appendChild(newRow);

                // Clear input fields
                school_select.value = '';
                working_hour_input.value = '';
                school_note_input.value = '';

                // Add event listener to remove button
                newRow.querySelector('.remove_item').addEventListener('click', function() {
                    this.closest('tr').remove();
                });
            }
        });


        // make a children count readonly if selected single 
        document.addEventListener('DOMContentLoaded', function() {
            const maritalStatus = document.getElementById('marital_status');
            const childrenCount = document.getElementById('children_count');

            maritalStatus.addEventListener('change', function() {
                if (maritalStatus.value === 'single') {
                    childrenCount.setAttribute('readonly', true);
                    childrenCount.value = '';
                    childrenCount.style.display='none';
                } else {
                    childrenCount.removeAttribute('readonly');
                }
            });
        });

        // for duty fulfilled to show or hide card 
        document.addEventListener('DOMContentLoaded', function() {
            const selfDefenseDuty = document.getElementById('self_defense_duty');
            const dutyDetailsCard = document.getElementById('duty_details_card');

            selfDefenseDuty.addEventListener('change', function() {
                if (selfDefenseDuty.value === 'duty_fulfilled') {
                    dutyDetailsCard.style.display = 'block';
                } else {
                    dutyDetailsCard.style.display = 'none';
                }
            });
        });

        // for contract permanent
        document.addEventListener('DOMContentLoaded', function() {
            const contractTypeSelect = document.getElementById('contract_type_id');
            const contractDetails = document.querySelectorAll('.contract-details');

            function toggleContractDetails() {
                const selectedOption = contractTypeSelect.options[contractTypeSelect.selectedIndex];
                const isPermanent = selectedOption.getAttribute('data-permanent') === 'true';

                // Show or hide fields based on the permanent status
                contractDetails.forEach(detail => {
                    detail.style.display = isPermanent ? 'none' : 'block';
                });
            }

            toggleContractDetails();

            contractTypeSelect.addEventListener('change', toggleContractDetails);
        });


        // for martyr_family
        document.addEventListener('DOMContentLoaded', function() {
            const martyrFamilySelect = document.getElementById('martyr_family');
            const relationshipContainer = document.getElementById('relationship-container');

            function toggleRelationshipField() {
                if (martyrFamilySelect.value === "1") {
                    relationshipContainer.style.display = 'block';
                } else {
                    relationshipContainer.style.display = 'none';
                }
            }

            toggleRelationshipField();

            martyrFamilySelect.addEventListener('change', toggleRelationshipField);
        });

        document.addEventListener('DOMContentLoaded', function() {
            const genderSelect = document.getElementById('gender');
            const selfDefenseContainer = document.getElementById('self_defense_duty_container');

            genderSelect.addEventListener('change', function() {
                if (genderSelect.value === 'male') {
                    selfDefenseContainer.style.display = 'block';
                } else {
                    selfDefenseContainer.style.display = 'none';
                }
            });
        });

        // for shared tacher
        document.addEventListener('DOMContentLoaded', function() {
            const sharedTeacherSelect = document.getElementById('shared_teacher');
            const schoolsContainer = document.getElementById('schools_container');

            sharedTeacherSelect.addEventListener('change', function() {
                if (sharedTeacherSelect.value === '1') {
                    schoolsContainer.style.display = 'block';
                } else {
                    schoolsContainer.style.display = 'none';
                }
            });
        });



        // Show or hide the schools_container based on shared_teacher selection
        sharedTeacherSelect.addEventListener('change', function() {
            if (sharedTeacherSelect.value === '1') {
                schoolsContainer.style.display = 'block';
            } else {
                schoolsContainer.style.display = 'none';
            }
        });
    </script>
@endsection