@php
    $baselineRecords = $baselines ?? [];
@endphp

<div class="component4-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="baseline_search_input"
        placeholder="Search baseline..."
        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="baseline_add_btn"
                data-kt-modal-toggle="#baseline_modal"
                style="background-color:#2563eb;color:#fff;border-color:#2563eb;"
            >
                <i class="ki-filled ki-plus"></i>
                Add Baseline
            </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="baseline_datatable_wrapper" class="p-0">
                <div class="kt-scrollable-x-auto">

                    <table class="kt-table kt-table-border roles-table w-full" id="baseline_datatable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>

                        <tbody id="baseline_tbody">
                            @forelse ($baselineRecords as $record)
                                <tr data-id="{{ $record->id }}" data-record='@json($record)'>
                                    <td>{{ $record->id }}</td>
                                    <td>{{ $record->name ?? '-' }}</td>
                                    <td>{{ $record->status ?? '-' }}</td>

                                    <td class="text-right">
                                        <div class="component4-action-links">
                                            <a class="component4-action-link edit baseline-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="component4-action-link delete baseline-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="4" class="text-center py-8 text-muted-foreground">
                                        No baseline records found. <a href="javascript:void(0)" onclick="document.getElementById('baseline_add_btn').click()">Add one now</a>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>

                    </table>

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

{{-- MODAL --}}
<div class="kt-modal" data-kt-modal="true" id="baseline_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="baseline_modal_title">
                Add Baseline
            </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="baseline_form" class="flex flex-col gap-5">
                @csrf

                <input type="hidden" name="id" id="baseline_id">

                <div class="flex flex-col gap-2">
                    <label class="text-sm font-semibold">Name <span class="text-red-500">*</span></label>
                    <input type="text" name="name" id="baseline_name" class="kt-input w-full form-control" required>
                    <div class="invalid-feedback" style="display: none;"></div>
                </div>

                <div class="flex flex-col gap-2">
                    <label class="text-sm font-semibold">Status</label>
                    <select name="status" id="baseline_status" class="kt-input w-full form-control">
                        <option value="ongoing">Ongoing</option>
                        <option value="completed">Completed</option>
                        <option value="pending">Pending</option>
                    </select>
                    <div class="invalid-feedback" style="display: none;"></div>
                </div>

                <div class="flex justify-end gap-3 pt-2 modal-btns">

                    <button type="button"
                        class="kt-btn kt-btn-light cancel"
                        data-kt-modal-dismiss="true">
                        Cancel
                    </button>

                    <button type="submit"
                        class="kt-btn kt-btn-primary save"
                        id="baseline_submit_btn"
                        style="background-color:#2563eb;color:#fff;border-color:#2563eb;">
                        Save
                    </button>

                </div>

            </form>
        </div>

    </div>
</div>


<script>
$(document).ready(function () {
    const $table = $('#baseline_datatable');
    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,
            language: {
                lengthMenu: "Show _MENU_",
                info: "Showing _START_ to _END_ of _TOTAL_ entries",
                emptyTable: "No records found.",
            }
        });
    }

    document.getElementById('baseline_search_input')?.addEventListener('keyup', function() {
        if (!dt) {
            return;
        }

        dt.search(this.value).draw();
    });
});
</script>