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

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

<div class="financial-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="financial_search"
                    data-kt-datatable-search="#kt_datatable_financial"
                    placeholder="Search Financial..."
                    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="financial_add_btn"
                data-kt-modal-toggle="#financial_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="financial_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_financial">
                        <thead>
                            <tr>
                                <th class="hidden">UUID</th>
                                <th>Budget Allocation (PKR)</th>
                                <th>Expenditure Amount (PKR)</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($records as $record)
                                <tr data-record='@json($record)'>
                                    <td class="hidden">{{ $record->uuid ?? '' }}</td>
                                    <td>{{ $record->budget_allocation ?? '-' }}</td>
                                    <td>{{ $record->expenditure_amount ?? '-' }}</td>
                                    <td class="text-right">
                                        <div class="financial-action-links" style="display:flex;gap:8px;justify-content:flex-end;">
                                            <a class="financial-action-link edit financial-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="financial-action-link delete financial-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>

<div class="kt-modal" data-kt-modal="true" id="financial_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[600px] top-[10%]">
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold" id="financial_modal_title">Add Financial 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="financial_form" class="flex flex-col gap-6" novalidate>
                @csrf
                <input type="hidden" name="uuid" id="financial_uuid">

                <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">Financial Details</h4>
                        <p class="mt-1 text-xs text-muted-foreground">Budget and expenditure information (frontend preview).</p>
                    </div>
                    <div class="grid grid-cols-1 gap-4">
                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Budget Allocation (PKR)</label>
                            <div class="kt-input w-full">
                                <input type="number" name="budget_allocation" id="financial_budget_allocation" class="w-full" min="0" step="1" placeholder="e.g. 5000000" />
                            </div>
                        </div>
                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Expenditure Amount (PKR)</label>
                            <div class="kt-input w-full">
                                <input type="number" name="expenditure_amount" id="financial_expenditure_amount" class="w-full" min="0" step="1" placeholder="e.g. 1250000" />
                            </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="financial_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_financial');
    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_financial"]');
    if (searchInput && dt) {
        searchInput.addEventListener('keyup', function () {
            dt.search(this.value).draw();
        });
    }

    const modal = document.getElementById('financial_modal');
    if (modal) {
        modal.addEventListener('kt.modal.hide', function () {
            document.getElementById('financial_form').reset();
            document.getElementById('financial_uuid').value = '';
            document.getElementById('financial_modal_title').textContent = 'Add Financial Record';
            document.getElementById('financial_submit_btn').textContent = 'Save';
        });
    }

    $(document).on('click', '.financial-edit-btn', function () {
        const record = $(this).data('record');
        document.getElementById('financial_modal_title').textContent = 'Edit Financial Record';
        document.getElementById('financial_submit_btn').textContent = 'Update';

        Object.keys(record).forEach(key => {
            const el = document.getElementById('financial_' + key);
            if (el) {
                el.value = record[key] ?? '';
            }
        });

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

    $(document).on('click', '.financial-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('financial_form').addEventListener('submit', function (e) {
        e.preventDefault();
        console.log('Financial form submitted (frontend only)');
        KTModal.getOrCreateInstance(document.getElementById('financial_modal')).hide();
    });
});
</script>