@props(['type', 'familyTreeId' => null, 'personId' => null, 'action' => null])

<!-- Unified Person Modal -->
<div id="personModal-{{ $type }}" class="modal fade" role="dialog" tabindex="-1"
    aria-labelledby="personModalLabel-{{ $type }}">
    <div class="modal-dialog">
        <div class="modal-content" style="direction: rtl; text-align: right;">

            <div class="modal-header">
                <label id="personModalLabel-{{ $type }}" style="font-size: 16px; color: grey;">
                    @switch($type)
                        @case('children')
                            الذرية
                        @break

                        @case('mother')
                            معلومات الأم
                        @break

                        @case('husband')
                            معلومات الزوج
                        @break

                        @case('wife')
                            معلومات الزوجة
                        @break

                        @default
                            Person Info
                    @endswitch
                </label>
            </div>

            <form method="POST" action="{{ $action }}" id="{{ $type }}_form"
                enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="id" id="{{ $type }}_id_field" value="">
                <input type="hidden" name="related_family_tree_id" id="{{ $type }}_family_tree_id_field"
                    value="">

                <div class="modal-body">

                    <!-- Radio buttons -->
                    <div class=" row" style="text-align: right; direction: rtl;">
                        <div class="col-md-6 pull-left">
                            {{-- <h4>اختيار الحالة</h4> --}}

                            <div id="person_status_radios_{{ $type }}">
                                @php $statusName = $type.'_status'; @endphp

                                <div class="radio">
                                    <input type="radio" name="{{ $statusName }}" value="family"
                                        id="family-{{ $type }}" checked>
                                    <label for="family-{{ $type }}">من داخل الأسرة</label>

                                    @if ($type == 'mother')
                                        <input type="radio" name="{{ $statusName }}" value="father_wives"
                                            id="from_father_wives">
                                        <label for="from_father_wives">تحديد الأم من بيانات الأب</label>
                                    @endif

                                    <input type="radio" name="{{ $statusName }}" value="outside"
                                        id="outside-{{ $type }}">
                                    <label for="outside-{{ $type }}">من خارج الأسرة</label>
                                </div>

                            </div>
                        </div>
                        <div class="col-md-6">
                            @if ($type == 'children')
                                <div class="mb-3" id="children_profile_picture_section" style="display:none">
                                    <label class="form-label fw-bold">الصورة الشخصية</label>
                                    <!-- Hidden Upload -->
                                    <input type="file" id="imageInput" name="profile_picture" accept="image/*"
                                        style="display:none;">
                                    <!-- Image Preview Box -->
                                    <div id="previewContainer">

                                        <img id="previewImage" src="{{ asset('assets/img/no-image.png') }}"
                                            alt="" style="display:none;">
                                    </div>
                                    <!-- Action Buttons -->
                                    <button type="button" id="addChangeBtn" class="btn "
                                        style="margin-top:10px;">اختر
                                        صورة</button>
                                    <button type="button" id="deleteBtn" class="btn " style="display:none;">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                    <button type="button" id="cropBtn" class="btn  "
                                        style="margin-top:10px;display:none;">
                                        قص الصورة
                                    </button>
                                    <button type="button" id="saveCropBtn" class="btn "
                                        style="margin-top:10px;display:none;">
                                        حفظ المحصول
                                    </button>
                                    <button type="button" id="cancelCropBtn" class="btn btn-secondary "
                                        style="margin-top:10px;display:none;">
                                        إلغاء
                                    </button>
                                    <!-- Crop Info -->
                                    <div id="cropInfo" class="mt-2" style="display:none;">
                                        Width: <span id="cropWidth">0</span> px |
                                        Height: <span id="cropHeight">0</span> px
                                    </div>
                                    <div class="img-container" style="display:none;">
                                        <input type="hidden" name="logo_x" id="childImage-x" />
                                        <input type="hidden" name="logo_y" id="childImage-y" />
                                        <input type="hidden" name="logo_w" id="childImage-w" />
                                        <input type="hidden" name="logo_h" id="childImage-h" />
                                    </div>
                                </div>
                            @endif
                        </div>

                    </div>

                    <!-- Family Section -->
                    <div id="{{ $type }}_family_section">
                        <button type="button" class="btn btn-primary btn-lg open-{{ $type }}-modal-btn"
                            style="margin-bottom: 10px">
                            إضافة شخص من الدليل
                        </button>
                    </div>
                    @if ($type == 'mother')
                        <!-- Optional select section (for mother -> father wives) -->
                        <div id="father_wives_section" style="display:none; margin-top:15px;">
                            {{-- <label for="father_wives_select" class="form-label">اختر زوجة الأب</label> --}}
                            <select id="father_wives_select" class="form-control" style="width:200px !important">
                                <option value="">Loading...</option>
                            </select>
                        </div>
                    @endif
                    <div id="{{ $type }}_name_section" style="display:none; margin-bottom: 15px;">

                        <div class="row">
                            @if ($type == 'children')
                                <div id="children_gender_section" class="right col-sm-3 pull-left">
                                    <label for="children_gender" class="form-label">جنس</label>
                                    <select id="children_gender" name="gender" class="form-control" disabled>
                                        <option value="">جنس</option>
                                        <option value="0">ذكر</option>
                                        <option value="1">أنثى</option>
                                    </select>
                                </div>
                                <input type="hidden" id="children_gender_hidden" name="gender">
                            @endif
                        </div>

                        <!-- Name Fields -->
                        <div class="row" style="padding-block: 10px;">
                            <div class="input-with-icon right col-sm-3 pull-left">
                                <input type="text" name="name" class="form-control"
                                    id="{{ $type }}_name_field" placeholder="الإسم الأول" required
                                    maxlength="15" readonly
                                    oninput="this.value = this.value.replace(/[^ء-ي\s]/g,'').slice(0,15)">
                            </div>

                            <div class="input-with-icon right col-sm-3 pull-left">
                                <input type="text" name="father_name" class="form-control" required
                                    id="{{ $type }}_father_name_field" placeholder="إسم الأب" maxlength="15"
                                    readonly oninput="this.value = this.value.replace(/[^ء-ي\s]/g,'').slice(0,15)">
                            </div>

                            <div class="input-with-icon right col-sm-3 pull-left">
                                <input type="text" name="grand_father_name" class="form-control"
                                    id="{{ $type }}_grand_father_name_field" required
                                    placeholder="إسم العائلة" maxlength="15" readonly
                                    oninput="this.value = this.value.replace(/[^ء-ي\s]/g,'').slice(0,15)">
                            </div>
                        </div>

                    </div>
                    @if ($type == 'children')
                        <div class="row" id="children_alive_status" style="display:none; margin-bottom: 15px;">
                            <div class="col-md-6 pull-left">
                                <div class="form-group">
                                    <label>حالة الحياة</label>
                                    <select class="form-control" id="children_living_status"
                                        name="children_living_status">
                                        <option value="alive" selected>على قيد الحياة</option>
                                        <option value="deceased">متوفي</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row" id="children_dob_section" style="display:none; margin-top: 10px;">
                            <!-- DOB -->
                            <div class="col-md-6 pull-left">
                                <label class="form-label">تاريخ الميلاد</label>
                                <div class="radio" style="margin-block:10px">
                                    <input type="radio" name="birth_calendar_type" value="greg" id="birth_greg"
                                        checked>
                                    <label for="birth_greg">ميلادي</label>
                                    <input type="radio" name="birth_calendar_type" value="hijri"
                                        id="birth_hijri">
                                    <label for="birth_hijri">هجري</label>
                                </div>
                                <input type="text" id="children_birth_greg" name="birth_date_greg"
                                    class="form-control normal_calendar" placeholder="تاريخ الميلاد (ميلادي)" readonly
                                    style="cursor:pointer;background-color: #fff !important;">

                                <input type="text" id="children_birth_hijri" name="birth_date_hijri"
                                    class="form-control hijri_calendar" placeholder="تاريخ الميلاد (هجري)" readonly
                                    style="display:none; cursor:pointer;background-color: #fff !important;">


                            </div>

                            <!-- DOD -->
                            <div class="col-md-6 pull-left" id="children_dod_block" style="display:none;">
                                <label class="form-label">تاريخ الوفاة</label>
                                <div class="radio" style="margin-block:10px">
                                    <input type="radio" name="death_calendar_type" value="greg" id="death_greg"
                                        checked>
                                    <label for="death_greg">ميلادي</label>
                                    <input type="radio" name="death_calendar_type" value="hijri"
                                        id="death_hijri">
                                    <label for="death_hijri">هجري</label>
                                </div>

                                <input readonly type="text" id="children_death_greg" name="death_date_greg"
                                    class="form-control death_normal_calendar" placeholder="تاريخ الوفاة (ميلادي)"
                                    style="cursor:pointer;background-color: #fff !important;">
                                <input readonly type="text" id="children_death_hijri" name="death_date_hijri"
                                    class="form-control death_hijri_calendar" placeholder="تاريخ الوفاة (هجري)"
                                    style="display:none; cursor:pointer;background-color: #fff !important;">
                            </div>
                        </div>
                    @endif


                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>
                    <input type="submit" value="تحديث " class="btn btn-primary"
                        id="{{ $type }}_form_submit_btn_txt" disabled>
                </div>
            </form>

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