@php
    $records = collect($mainRecords ?? []);
@endphp

<style>
#main_form .kt-input input,
#main_form input[type="date"],
#main_form input[type="number"],
#main_form input[type="text"],
#main_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;
}
#main_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;
}
#main_form input:focus,
#main_form select:focus,
#main_form textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
#main_form input:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
}
</style>

<div class="main-screen">
    <div class="management-toolbar mb-4">
        <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="main_search"
                    data-kt-datatable-search="#kt_datatable_main"
                    placeholder="Search MAIN..."
                    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="main_add_btn"
                data-kt-modal-toggle="#main_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="main_datatable_wrapper" class="p-0">
                <div class="kt-scrollable-x-auto">
                    <table class="kt-table kt-table-border roles-table w-full" id="kt_datatable_main">
                        <thead>
                            <tr>
                                <th class="hidden">UUID</th>
                                <th>CNIC</th>
                                <th>Occupant Name</th>
                                <th>Father Name</th>
                                <th>District</th>
                                <th>Tehsil</th>
                                <th>Village</th>
                                <th>Gender</th>
                                <th>Status</th>
                                <th>Disbursement</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($records as $record)
                                <tr data-record='@json($record)'>
                                    <td class="hidden">{{ $record->uuid }}</td>
                                    <td>{{ $record->cnic ?? '-' }}</td>
                                    <td>{{ $record->occupant_name ?? '-' }}</td>
                                    <td>{{ $record->father_name ?? '-' }}</td>
                                    <td>{{ $record->district ?? '-' }}</td>
                                    <td>{{ $record->tehsil ?? '-' }}</td>
                                    <td>{{ $record->village ?? '-' }}</td>
                                    <td>{{ $record->gender ?? '-' }}</td>
                                    <td>{{ $record->eng_status ?? '-' }}</td>
                                    <td>{{ $record->disbursement_status ?? '-' }}</td>
                                    <td class="text-right">
                                        <div class="main-action-links" style="display:flex;gap:8px;justify-content:flex-end;">
                                            <a class="main-action-link edit main-edit-btn" href="javascript:void(0)" data-record='@json($record)' aria-label="Edit record">
                                                <i class="ki-filled ki-notepad-edit text-base"></i>
                                            </a>
                                            <a class="main-action-link delete main-delete-btn" href="javascript:void(0)" data-uuid="{{ $record->uuid }}" aria-label="Delete record">
                                                <i class="ki-filled ki-trash text-base"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODAL --}}
<div class="kt-modal" data-kt-modal="true" id="main_modal" data-kt-modal-backdrop-static="true" >
    <div class="kt-modal-content max-w-[400px] top-[10%]" >
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold" id="main_modal_title">Add MAIN 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">
            <form id="main_form" class="flex flex-col gap-6" novalidate>
                @csrf
                <input type="hidden" name="uuid" id="main_uuid">

                <div class="flex flex-col gap-2 cursor-pointer">
                    <label class="text-sm font-semibold text-foreground">Payment By</label>
                    <select name="payment_by" id="main_payment_by" class="w-full form-control cursor-pointer"
                        style="height:42px;border:1px solid #d1d5db;border-radius:8px;padding:0 12px;font-size:14px;color:#374151;background:#fff;">
                        <option value="">Select Payment By</option>
                        <option value="ADB-GOS">ADB-GOS</option>
                        <option value="GoS">GoS</option>
                        <option value="GOS">GOS</option>
                        <option value="ISDB Qarz-e-Hasanah">ISDB Qarz-e-Hasanah</option>
                        <option value="GoP">GoP</option>
                        <option value="ADB">ADB</option>
                        <option value="Retroactive/RFA">Retroactive/RFA</option>
                        <option value="WB">WB</option>
                        <option value="WB-AFI">WB-AFI</option>
                        <option value="ISDB">ISDB</option>
                    </select>
                </div>

                <div class="flex justify-end gap-3 pt-2">
                    <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="main_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_main');
    let dt = null;

    if ($table.length && $.fn.DataTable && !$.fn.DataTable.isDataTable($table)) {
        $table.find('tbody td[colspan]').closest('tr').remove();
        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>',
            pageLength: 10,
            lengthMenu: [10, 25, 50, 100],
            autoWidth: false,
            columnDefs: [{ targets: 0, visible: false }],
            language: {
                lengthMenu: "Show _MENU_",
                info: "Showing _START_ to _END_ of _TOTAL_ entries",
                emptyTable: "No records found.",
            }
        });
    }

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

    // Reset form on modal close
    document.getElementById('main_modal').addEventListener('kt.modal.hide', function () {
        document.getElementById('main_form').reset();
        document.getElementById('main_uuid').value = '';
        document.getElementById('main_modal_title').textContent = 'Add MAIN Record';
        document.getElementById('main_submit_btn').textContent = 'Save';
        document.querySelectorAll('#main_form .text-red-500').forEach(el => el.classList.add('hidden'));
        document.querySelectorAll('#main_form input, #main_form select, #main_form textarea').forEach(el => {
            el.style.borderColor = '';
        });
    });

    // CNIC live format
    const cnicInput = document.getElementById('main_cnic');
    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);
    });

    // Cell no: digits and dashes only
    const cellInput = document.getElementById('main_cell_no');
    cellInput.addEventListener('input', function () {
        this.value = this.value.replace(/[^0-9\-]/g, '');
    });

    // Bank account: digits only
    const bankAccInput = document.getElementById('main_bank_account_number');
    bankAccInput.addEventListener('input', function () {
        this.value = this.value.replace(/[^0-9]/g, '');
    });

    // Monthly income: no negative
    const incomeInput = document.getElementById('main_monthly_income');
    incomeInput.addEventListener('input', function () {
        if (parseFloat(this.value) < 0) this.value = '';
    });

    // Edit button
    $(document).on('click', '.main-edit-btn', function () {
        const record = $(this).data('record');
        document.getElementById('main_modal_title').textContent = 'Edit MAIN Record';
        document.getElementById('main_submit_btn').textContent = 'Update';

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

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

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

    // Form validation on submit
    document.getElementById('main_form').addEventListener('submit', function (e) {
        e.preventDefault();
        let valid = true;

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

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

        const bankVal = bankAccInput.value.trim();
        const bankError = document.getElementById('main_bank_acc_error');
        if (bankVal && !/^\d{8,24}$/.test(bankVal)) {
            bankError.classList.remove('hidden'); bankAccInput.style.borderColor = '#ef4444'; valid = false;
        } else {
            bankError.classList.add('hidden'); bankAccInput.style.borderColor = '';
        }

        if (!valid) return;
        console.log('MAIN form submitted');
    });
});
</script>