​@php
use App\Support\BeneficiaryFormFields;

$records = collect($beneficiariesRecords ?? []);
$beneficiaryTableColumns = BeneficiaryFormFields::tableColumns();
$selectStyle = 'height:42px;border:1px solid #d1d5db;border-radius:8px;padding:0 12px;font-size:14px;color:#374151;background:#fff;width:100%;';
@endphp

<style>
    #beneficiaries_datatable_wrapper .kt-scrollable-x-auto {
        width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        display: block;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .dataTables_wrapper .dataTables_scroll {
        width: 1450px !important;
    }

    #beneficiaries_datatable_wrapper .kt-scrollable-x-auto::-webkit-scrollbar {
        height: 8px;
    }

    #beneficiaries_datatable_wrapper .kt-scrollable-x-auto::-webkit-scrollbar-track {
        background: #e2e8f0;
        border-radius: 20px;
    }

    #beneficiaries_datatable_wrapper .kt-scrollable-x-auto::-webkit-scrollbar-thumb {
        background: #94a3b8;
        border-radius: 20px;
    }

    #kt_datatable_beneficiaries {
        min-width: {
                {
                max(count($beneficiaryTableColumns) * 140, 1200)
            }
        }

        px;
        width: max-content;
    }

    #kt_datatable_beneficiaries thead th,
    #kt_datatable_beneficiaries tbody td {
        white-space: nowrap;
        min-width: 120px;
        max-width: 280px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #beneficiaries_form .kt-input input,
    #beneficiaries_form input[type="date"],
    #beneficiaries_form input[type="number"],
    #beneficiaries_form input[type="text"],
    #beneficiaries_form input[type="tel"] {
        height: 42px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 0 12px;
        font-size: 14px;
        color: #374151;
        background: #fff;
        width: 100%;
        outline: none;
        transition: border-color 0.15s;
    }

    #beneficiaries_form textarea {
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 14px;
        color: #374151;
        background: #fff;
        width: 100%;
        outline: none;
        transition: border-color 0.15s;
    }

    #beneficiaries_form input:focus,
    #beneficiaries_form select:focus,
    #beneficiaries_form textarea:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    #beneficiaries_form input:invalid:not(:placeholder-shown) {
        border-color: #ef4444;
    }
</style>

<div class="beneficiaries-screen">
    <div class="management-toolbar mb-4">
        <div style="display: flex;justify-content: right;gap: 5px;margin-bottom: 19px;">
            <button id="beneficiaries_export_btn" class="kt-btn common-secondary-btn roles-add-btn p-4" style="background-color:#2563eb;color:#fff;border-color:#2563eb;">
                Export Excel
            </button>

            <button id="beneficiaries_download_btn" class="kt-btn common-secondary-btn roles-add-btn p-4">
                Download File
            </button>
        </div>
        <div class="roles-actions flex justify-end gap-3">
            <div class="roles-search relative flex items-center">
                <i class="ki-filled ki-magnifier absolute left-3 text-gray-400 pointer-events-none"></i>
                <input
                    id="beneficiaries_search"
                    data-kt-datatable-search="#kt_datatable_beneficiaries"
                    placeholder="Search Beneficiaries..."
                    type="text"
                    class="pl-9 border-none rounded-lg" />
            </div>

            <button
                type="button"
                class="kt-btn common-secondary-btn roles-add-btn p-4"
                id="beneficiaries_add_btn"
                data-kt-modal-toggle="#beneficiaries_modal"
                style="background-color:#2563eb;color:#fff;border-color:#2563eb;">
                <i class="ki-filled ki-plus"></i>
                Add Data
            </button>
        </div>
    </div>

    <div class="roles-panel">
        <div class="kt-card-table" style="border-radius:10px;border:1px solid #e5e7eb;overflow:hidden;background:#fff;">
            <div id="beneficiaries_datatable_wrapper" class="p-0">
                <div class="kt-scrollable-x-auto" style="overflow-x:auto;">
                    <table class="kt-table kt-table-border roles-table" id="kt_datatable_beneficiaries">
                        <thead>
                            <tr>
                                @foreach($beneficiaryTableColumns as $label)
                                <th>{{ $label }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="kt-modal" data-kt-modal="true" id="beneficiaries_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[1000px] top-[2%] max-h-[95vh]">
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold" id="beneficiaries_modal_title">Add Beneficiary Record</h3>
            <button class="kt-btn kt-btn-sm kt-btn-icon kt-btn-dim shrink-0" data-kt-modal-dismiss="true">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>

        <div class="kt-modal-body p-5 lg:p-7.5 overflow-y-auto" style="max-height:calc(95vh - 120px);">
            <form id="beneficiaries_form" class="flex flex-col gap-6" novalidate>
                @csrf
                <input type="hidden" name="uuid" id="beneficiaries_uuid">

                {{-- Location --}}
                <div class="rounded-xl border border-border/70 bg-background/40 p-4 lg:p-5">
                    <div class="mb-4">
                        <h4 class="text-sm font-semibold text-foreground">Location</h4>
                        <p class="mt-1 text-xs text-muted-foreground">Administrative and geographic location details.</p>
                    </div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">UUID</label>
                            <div class="kt-input w-full"><input type="text" name="uuid_display" id="beneficiaries_uuid_display" class="w-full" placeholder="Auto-generated or enter UUID" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">District</label>
                            <div class="kt-input w-full"><input type="text" name="district" id="beneficiaries_district" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Tehsil</label>
                            <div class="kt-input w-full"><input type="text" name="tehsil" id="beneficiaries_tehsil" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">UC</label>
                            <div class="kt-input w-full"><input type="text" name="uc" id="beneficiaries_uc" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Deh</label>
                            <div class="kt-input w-full"><input type="text" name="deh" id="beneficiaries_deh" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Village</label>
                            <div class="kt-input w-full"><input type="text" name="village" id="beneficiaries_village" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2 lg:col-span-2">
                            <label class="text-sm font-semibold text-foreground">Address</label>
                            <textarea name="address" id="beneficiaries_address" rows="3" placeholder="Enter full address..."></textarea>
                        </div>
                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Long</label>
                            <div class="kt-input w-full"><input type="number" name="long" id="beneficiaries_long" class="w-full" step="0.000001" min="-180" max="180" /></div>
                        </div>
                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Lat</label>
                            <div class="kt-input w-full"><input type="number" name="lat" id="beneficiaries_lat" class="w-full" step="0.000001" min="-90" max="90" /></div>
                        </div>
                    </div>
                </div>

                {{-- Personal Information --}}
                <div class="rounded-xl border border-border/70 bg-background/40 p-4 lg:p-5">
                    <div class="mb-4">
                        <h4 class="text-sm font-semibold text-foreground">Personal Information</h4>
                        <p class="mt-1 text-xs text-muted-foreground">Identity, contact, and household head details.</p>
                    </div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">IP Name</label>
                            <div class="kt-input w-full"><input type="text" name="ip_name" id="beneficiaries_ip_name" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Payment By - IFIs</label>
                            <div class="kt-input w-full"><input type="text" name="payment_by_ifis" id="beneficiaries_payment_by_ifis" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">CNIC</label>
                            <div class="kt-input w-full">
                                <input type="text" name="cnic" id="beneficiaries_cnic" class="w-full" maxlength="15" placeholder="XXXXX-XXXXXXX-X" pattern="\d{5}-\d{7}-\d{1}" />
                            </div>
                            <span class="text-xs text-red-500 hidden" id="beneficiaries_cnic_error">Enter valid CNIC: XXXXX-XXXXXXX-X</span>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Occupant Name</label>
                            <div class="kt-input w-full"><input type="text" name="occupant_name" id="beneficiaries_occupant_name" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Cell No.</label>
                            <div class="kt-input w-full"><input type="tel" name="cell_no" id="beneficiaries_cell_no" class="w-full" maxlength="13" placeholder="03XX-XXXXXXX" /></div>
                            <span class="text-xs text-red-500 hidden" id="beneficiaries_cell_error">Enter valid Pakistani number</span>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Father Name</label>
                            <div class="kt-input w-full"><input type="text" name="father_name" id="beneficiaries_father_name" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Spouse Name</label>
                            <div class="kt-input w-full"><input type="text" name="spouse_name" id="beneficiaries_spouse_name" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Gender</label>
                            <select name="gender" id="beneficiaries_gender" class="w-full form-control" style="{{ $selectStyle }}">
                                <option value="">Select Gender</option>
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Marital Status</label>
                            <select name="marital_status" id="beneficiaries_marital_status" class="w-full form-control" style="{{ $selectStyle }}">
                                <option value="">Select Status</option>
                                <option value="married">Married</option>
                                <option value="unmarried">Unmarried</option>
                                <option value="divorced">Divorced</option>
                                <option value="widowed">Widowed</option>
                            </select>
                        </div>
                    </div>
                </div>

                {{-- Property & Land --}}
                <div class="rounded-xl border border-border/70 bg-background/40 p-4 lg:p-5">
                    <div class="mb-4">
                        <h4 class="text-sm font-semibold text-foreground">Property & Land</h4>
                        <p class="mt-1 text-xs text-muted-foreground">Damage, hazard, and land status information.</p>
                    </div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Type</label>
                            <div class="kt-input w-full"><input type="text" name="type" id="beneficiaries_type" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Damage Category</label>
                            <div class="kt-input w-full"><input type="text" name="damage_category" id="beneficiaries_damage_category" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Site near hazardous location</label>
                            <select name="site_near_hazardous_location" id="beneficiaries_site_near_hazardous_location" class="w-full form-control" style="{{ $selectStyle }}">
                                <option value="">Select</option>
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select>
                        </div>
                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Located in Flood Plain</label>
                            <select name="located_in_flood_plain" id="beneficiaries_located_in_flood_plain" class="w-full form-control" style="{{ $selectStyle }}">
                                <option value="">Select</option>
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Status of Land</label>
                            <div class="kt-input w-full"><input type="text" name="status_of_land" id="beneficiaries_status_of_land" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Occupancy Agreement</label>
                            <div class="kt-input w-full"><input type="text" name="occupancy_agreement" id="beneficiaries_occupancy_agreement" class="w-full" /></div>
                        </div>
                    </div>
                </div>

                {{-- Status & Approval --}}
                <div class="rounded-xl border border-border/70 bg-background/40 p-4 lg:p-5">
                    <div class="mb-4">
                        <h4 class="text-sm font-semibold text-foreground">Status & Approval</h4>
                        <p class="mt-1 text-xs text-muted-foreground">Disbursement, engineering, and decision status.</p>
                    </div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Block List</label>
                            <select name="block_list" id="beneficiaries_block_list" class="w-full form-control" style="{{ $selectStyle }}">
                                <option value="">Select</option>
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Disbursement Status</label>
                            <div class="kt-input w-full"><input type="text" name="disbursement_status" id="beneficiaries_disbursement_status" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Eng Status</label>
                            <div class="kt-input w-full"><input type="text" name="eng_status" id="beneficiaries_eng_status" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Decision</label>
                            <div class="kt-input w-full"><input type="text" name="decision" id="beneficiaries_decision" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Purged</label>
                            <select name="purged" id="beneficiaries_purged" class="w-full form-control" style="{{ $selectStyle }}">
                                <option value="">Select</option>
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select>
                        </div>
                    </div>
                </div>

                {{-- Vulnerability Indicators --}}
                <div class="rounded-xl border border-border/70 bg-background/40 p-4 lg:p-5">
                    <div class="mb-4">
                        <h4 class="text-sm font-semibold text-foreground">Vulnerability Indicators</h4>
                        <p class="mt-1 text-xs text-muted-foreground">Social vulnerability and special household categories.</p>
                    </div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Widow</label><select name="widow" id="beneficiaries_widow" class="w-full form-control" style="{{ $selectStyle }}">
                                <option value="">Select</option>
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select></div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Women with disable husband</label><select name="women_with_disable_husband" id="beneficiaries_women_with_disable_husband" class="w-full form-control" style="{{ $selectStyle }}">
                                <option value="">Select</option>
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select></div>
                        <div class="flex flex-col gap-2 lg:col-span-2">
                            <label class="text-sm font-semibold text-foreground">Women with households Divorced / abandoned women / unmarried older women dependent on others</label>
                            <select name="women_hh_divorced_abandoned_unmarried" id="beneficiaries_women_hh_divorced_abandoned_unmarried" class="w-full form-control" style="{{ $selectStyle }}">
                                <option value="">Select</option>
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Unaccompained elders</label><select name="unaccompanied_elders" id="beneficiaries_unaccompanied_elders" class="w-full form-control" style="{{ $selectStyle }}">
                                <option value="">Select</option>
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select></div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Unaccompained minors i.e. orphans</label><select name="unaccompanied_minors" id="beneficiaries_unaccompanied_minors" class="w-full form-control" style="{{ $selectStyle }}">
                                <option value="">Select</option>
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select></div>
                    </div>
                </div>

                {{-- Household Composition --}}
                <div class="rounded-xl border border-border/70 bg-background/40 p-4 lg:p-5">
                    <div class="mb-4">
                        <h4 class="text-sm font-semibold text-foreground">Household Composition</h4>
                        <p class="mt-1 text-xs text-muted-foreground">Family member counts by category.</p>
                    </div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Adult Female</label>
                            <div class="kt-input w-full"><input type="number" name="adult_female" id="beneficiaries_adult_female" class="w-full" min="0" step="1" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Adult Male</label>
                            <div class="kt-input w-full"><input type="number" name="adult_male" id="beneficiaries_adult_male" class="w-full" min="0" step="1" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Disable Adult Female</label>
                            <div class="kt-input w-full"><input type="number" name="disable_adult_female" id="beneficiaries_disable_adult_female" class="w-full" min="0" step="1" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Disable Adult Male</label>
                            <div class="kt-input w-full"><input type="number" name="disable_adult_male" id="beneficiaries_disable_adult_male" class="w-full" min="0" step="1" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Disable Child Female</label>
                            <div class="kt-input w-full"><input type="number" name="disable_child_female" id="beneficiaries_disable_child_female" class="w-full" min="0" step="1" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Disable Child Male</label>
                            <div class="kt-input w-full"><input type="number" name="disable_child_male" id="beneficiaries_disable_child_male" class="w-full" min="0" step="1" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Child Female</label>
                            <div class="kt-input w-full"><input type="number" name="child_female" id="beneficiaries_child_female" class="w-full" min="0" step="1" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Child Male</label>
                            <div class="kt-input w-full"><input type="number" name="child_male" id="beneficiaries_child_male" class="w-full" min="0" step="1" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Total Family Memebers</label>
                            <div class="kt-input w-full"><input type="number" name="total_family_members" id="beneficiaries_total_family_members" class="w-full" min="0" step="1" /></div>
                        </div>
                    </div>
                </div>

                {{-- Income & Political --}}
                <div class="rounded-xl border border-border/70 bg-background/40 p-4 lg:p-5">
                    <div class="mb-4">
                        <h4 class="text-sm font-semibold text-foreground">Income & Political</h4>
                        <p class="mt-1 text-xs text-muted-foreground">Income sources and constituency information.</p>
                    </div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Monthly Income</label>
                            <div class="kt-input w-full"><input type="number" name="monthly_income" id="beneficiaries_monthly_income" class="w-full" min="0" step="1" placeholder="PKR" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Main Source of hh Income</label>
                            <div class="kt-input w-full"><input type="text" name="main_source_of_hh_income" id="beneficiaries_main_source_of_hh_income" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Constituency no</label>
                            <div class="kt-input w-full"><input type="text" name="constituency_no" id="beneficiaries_constituency_no" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Constituency</label>
                            <div class="kt-input w-full"><input type="text" name="constituency" id="beneficiaries_constituency" class="w-full" /></div>
                        </div>
                        <div class="flex flex-col gap-2"><label class="text-sm font-semibold text-foreground">Winning Party</label>
                            <div class="kt-input w-full"><input type="text" name="winning_party" id="beneficiaries_winning_party" class="w-full" /></div>
                        </div>
                    </div>
                </div>

                <div class="flex justify-end gap-3 pt-2 modal-btns">
                    <button type="button" class="kt-btn kt-btn-light cancel min-w-[80px]" data-kt-modal-dismiss="true" style="background-color:#e2e8f0;color:#0f172a;border-color:#e2e8f0;">Cancel</button>
                    <button type="submit" class="kt-btn kt-btn-primary min-w-[80px] save" id="beneficiaries_submit_btn" style="background-color:#2563eb;color:#fff;border-color:#2563eb;">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        const $table = $('#kt_datatable_beneficiaries');
        const beneficiariesConfig = window.adminFormsConfig?.beneficiaries || {};
        const beneficiaryTableColumns = @json(array_keys($beneficiaryTableColumns));
        let dt = null;

        if ($table.length && $.fn.DataTable && !$.fn.DataTable.isDataTable($table)) {
            const dtColumns = beneficiaryTableColumns.map(function(key) {
                return {
                    data: key,
                    defaultContent: '-',
                    render: renderTableText,
                };
            });

            dt = $table.DataTable({
                dom: 'rt<"flex justify-between items-center flex-wrap p-5 border-t border-input"<"flex items-center gap-2"li>p>',
                processing: true,
                serverSide: true,
                scrollX: true,
                scrollCollapse: true,
                ajax: {
                    url: beneficiariesConfig.datatableUrl || `/tenants/projects/${encodeURIComponent(window.projectSettingsConfig?.projectSlug || '')}/beneficiaries-ajax`,
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                },
                pageLength: 10,
                lengthMenu: [10, 25, 50, 100],
                autoWidth: false,
                order: [],
                columns: dtColumns,
                language: {
                    lengthMenu: "Show _MENU_",
                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
                    emptyTable: "No records found.",
                }
            });
        }

        function escapeHtml(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function renderTableText(data) {
            return escapeHtml(data === null || data === undefined || data === '' ? '-' : data);
        }

        function encodeRecordAttr(record) {
            return escapeHtml(JSON.stringify(record || {}));
        }

        function parseRecordAttr(value) {
            if (!value) return {};
            if (typeof value === 'object') return value;

            try {
                return JSON.parse(String(value));
            } catch (e) {
                return {};
            }
        }

        const searchInput = document.querySelector('[data-kt-datatable-search="#kt_datatable_beneficiaries"]');
        if (searchInput && dt) {
            searchInput.addEventListener('keyup', function() {
                dt.search(this.value).draw();
            });
        }

        document.getElementById('beneficiaries_modal').addEventListener('kt.modal.hide', function() {
            document.getElementById('beneficiaries_form').reset();
            document.getElementById('beneficiaries_uuid').value = '';
            document.getElementById('beneficiaries_modal_title').textContent = 'Add Beneficiary Record';
            document.getElementById('beneficiaries_submit_btn').textContent = 'Save';
            document.querySelectorAll('#beneficiaries_form .text-red-500').forEach(el => el.classList.add('hidden'));
        });

        const cnicInput = document.getElementById('beneficiaries_cnic');
        if (cnicInput) {
            cnicInput.addEventListener('input', function() {
                let digits = this.value.replace(/[^0-9]/g, '');
                let val = digits;
                if (digits.length > 5) val = digits.slice(0, 5) + '-' + digits.slice(5);
                if (digits.length > 12) val = digits.slice(0, 5) + '-' + digits.slice(5, 12) + '-' + digits.slice(12);
                this.value = val.slice(0, 15);
            });
        }

        const cellInput = document.getElementById('beneficiaries_cell_no');
        if (cellInput) {
            cellInput.addEventListener('input', function() {
                this.value = this.value.replace(/[^0-9\-]/g, '');
            });
        }

        $(document).on('click', '.beneficiaries-edit-btn', function() {
            const record = parseRecordAttr($(this).attr('data-record'));
            document.getElementById('beneficiaries_modal_title').textContent = 'Edit Beneficiary Record';
            document.getElementById('beneficiaries_submit_btn').textContent = 'Update';

            Object.keys(record).forEach(key => {
                const el = document.getElementById('beneficiaries_' + key);
                if (el) {
                    if (el.type === 'date' && record[key]) {
                        el.value = record[key].toString().slice(0, 10);
                    } else {
                        el.value = record[key] ?? '';
                    }
                }
            });

            if (record.uuid) {
                document.getElementById('beneficiaries_uuid').value = record.uuid;
                const uuidDisplay = document.getElementById('beneficiaries_uuid_display');
                if (uuidDisplay) uuidDisplay.value = record.uuid;
            }

            KTModal.getOrCreateInstance(document.getElementById('beneficiaries_modal')).show();
        });

        $(document).on('click', '.beneficiaries-delete-btn', function() {
            const uuid = $(this).data('uuid');
            if (confirm('Are you sure you want to delete this record?')) {
                console.log('Delete uuid:', uuid);
            }
        });

        document.getElementById('beneficiaries_form').addEventListener('submit', function(e) {
            e.preventDefault();
            let valid = true;

            const cnicVal = cnicInput ? cnicInput.value.trim() : '';
            const cnicError = document.getElementById('beneficiaries_cnic_error');
            if (cnicInput && cnicVal && !/^\d{5}-\d{7}-\d{1}$/.test(cnicVal)) {
                cnicError.classList.remove('hidden');
                cnicInput.style.borderColor = '#ef4444';
                valid = false;
            } else if (cnicError) {
                cnicError.classList.add('hidden');
                if (cnicInput) cnicInput.style.borderColor = '';
            }

            const cellVal = cellInput ? cellInput.value.trim() : '';
            const cellError = document.getElementById('beneficiaries_cell_error');
            if (cellInput && cellVal && !/^(03\d{2}-?\d{7}|92\d{10})$/.test(cellVal)) {
                cellError.classList.remove('hidden');
                cellInput.style.borderColor = '#ef4444';
                valid = false;
            } else if (cellError) {
                cellError.classList.add('hidden');
                if (cellInput) cellInput.style.borderColor = '';
            }

            if (!valid) return;
            console.log('Beneficiaries form submitted (frontend only)');
            KTModal.getOrCreateInstance(document.getElementById('beneficiaries_modal')).hide();
        });
        document.getElementById('beneficiaries_export_btn')
            .addEventListener('click', async function() {

                this.innerText = "Exporting...";
                this.disabled = true;

                try {

                    const res = await fetch(
                        `/tenants/projects/${window.projectSettingsConfig?.projectSlug}/beneficiaries/export`
                    );

                    const data = await res.json();

                    alert("Export started. Please wait...");

                    // window.currentExportId = data.export_id;
                    localStorage.setItem(
                        'beneficiaries_export_id',
                        data.export_id
                    );

                } catch (e) {

                    alert("Export failed");

                } finally {

                    this.innerText = "Export Excel";
                    this.disabled = false;
                }
            });
        document.getElementById('beneficiaries_download_btn')
            .addEventListener('click', async () => {

                const exportId = localStorage.getItem('beneficiaries_export_id');

                if (!exportId) {
                    alert("No file to download");
                    return;
                }

                const res = await fetch(
                    `/tenants/projects/${window.projectSettingsConfig?.projectSlug}/beneficiaries/download/${exportId}`
                );

                if (!res.ok) {
                    alert("No file available to download");
                    return;
                }

                const blob = await res.blob();

                const url = window.URL.createObjectURL(blob);

                const a = document.createElement('a');

                a.href = url;
                a.download = "beneficiaries.csv";

                document.body.appendChild(a);

                a.click();

                a.remove();

                window.URL.revokeObjectURL(url);
            });


    });
</script>