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

<div class="component2-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="component2_search"
        data-kt-datatable-search="#kt_datatable_component2"
        placeholder="Search Component 2"
        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="component2_add_btn"
                data-kt-modal-toggle="#component2_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="component2_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_component2">
                        <thead>
                            <tr>
                                <th class="hidden">ID</th>
                                <th>Serial No</th>
                                <th>Activity</th>
                                <th>Target Start</th>
                                <th>Planned End</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="component2_tbody">
                            @forelse ($records as $record)
                                <tr data-id="{{ $record->id }}" data-record='@json($record)'>
                                    <td class="hidden">{{ $record->id }}</td>
                                    <td>{{ $record->serial_no ?? '-' }}</td>
                                    <td>{{ $record->activity ?? '-' }}</td>
                                    <td>{{ $record->target_start_date ?? '-' }}</td>
                                    <td>{{ $record->planned_end_date ?? '-' }}</td>
                                    <td>{{ $record->status ?? '-' }}</td>
                                    <td class="text-right">
                                        <div class="component2-action-links">
                                            <a class="component2-action-link edit component2-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="component2-action-link delete component2-delete-btn" href="javascript:void(0)" data-id="{{ $record->id }}" aria-label="Delete record">
                                                <i class="ki-filled ki-trash text-base"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center py-8 text-muted-foreground">No records found. <a href="javascript:void(0)" onclick="document.getElementById('component2_add_btn').click()">Add one now</a></td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="kt-modal" data-kt-modal="true" id="component2_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[1000px] top-[5%] max-h-[90vh]">
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold" id="component2_modal_title">Add Component 2 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">
            <form id="component2_form" class="flex flex-col gap-6">
                @csrf
                <input type="hidden" name="id" id="component2_id">

                <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">Basic Information</h4>
                        <p class="mt-1 text-xs text-muted-foreground">Capture the core component details first.</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">Serial No</label>
                            <input type="text" name="serial_no" id="component2_serial_no" class="kt-input w-full form-control" />
                            <div class="invalid-feedback" style="display: none;"></div>
                        </div>

                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Activity</label>
                            <input type="text" name="activity" id="component2_activity" class="kt-input w-full form-control" />
                            <div class="invalid-feedback" style="display: none;"></div>
                        </div>

                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Target Start Date</label>
                            <input type="date" name="target_start_date" id="component2_target_start_date" class="kt-input w-full form-control" />
                            <div class="invalid-feedback" style="display: none;"></div>
                        </div>

                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Planned End Date</label>
                            <input type="date" name="planned_end_date" id="component2_planned_end_date" class="kt-input w-full form-control" />
                            <div class="invalid-feedback" style="display: none;"></div>
                        </div>

                        <div class="flex flex-col gap-2 lg:col-span-2">
                            <label class="text-sm font-semibold text-foreground">Description</label>
                            <textarea
                                name="description"
                                id="component2_description"
                                class="kt-input w-full form-control min-h-[96px]"
                                rows="4"
                            ></textarea>
                            <div class="invalid-feedback" style="display: none;"></div>
                        </div>

                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Add</label>
                            <input type="text" name="add" id="component2_add" class="kt-input w-full form-control" />
                            <div class="invalid-feedback" style="display: none;"></div>
                        </div>

                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">No</label>
                            <input type="number" name="no" id="component2_no" class="kt-input w-full form-control" />
                            <div class="invalid-feedback" style="display: none;"></div>
                        </div>

                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Actual End Date</label>
                            <div class="kt-input w-full">
                                <input type="date" name="actual_end_date" id="component2_actual_end_date" class="w-full" />
                            </div>
                        </div>

                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-foreground">Status</label>
                            <div class="kt-input w-full">
                                <input type="text" name="status" id="component2_status" class="w-full" />
                            </div>
                        </div>
                    </div>
                </div>

                <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">Progress Details</h4>
                        <p class="mt-1 text-xs text-muted-foreground">Add supporting progress notes for each stage.</p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @for ($i = 1; $i <= 10; $i++)
                            <div class="flex flex-col gap-2">
                                <label class="text-sm font-semibold text-foreground">Progress {{ $i }}</label>
                                <textarea
                                    name="progress_{{ $i }}"
                                    id="component2_progress_{{ $i }}"
                                    class="kt-input w-full min-h-[92px]"
                                    rows="3"
                                ></textarea>
                            </div>
                        @endfor
                    </div>
                </div>

                <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">Additional Notes</h4>
                        <p class="mt-1 text-xs text-muted-foreground">Use remarks for final comments or special instructions.</p>
                    </div>

                    <div class="flex flex-col gap-2">
                        <label class="text-sm font-semibold text-foreground">Remarks</label>
                        <textarea
                            name="remarks"
                            id="component2_remarks"
                            class="kt-input w-full min-h-[120px]"
                            rows="4"
                        ></textarea>
                    </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="component2_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_component2');
    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_component2"]');
    if (searchInput && dt) {
        searchInput.addEventListener('keyup', function() {
            dt.search(this.value).draw();
        });
    }
});
</script>