@props([
    'children',
    'tableId',
    'title' => null,
])

@php
    $statusMap = [
        'Sponsored' => 'success',
        'Registration Cancelled' => 'neutral',
        'Graduated' => 'warning',
        'Deceased' => 'danger',
        'Non Sponsored' => 'info',
    ];
@endphp

<x-chm.table-toolbar :table-id="$tableId" :title="$title" :datatable="true">
    <thead>
        <tr>
            <th>#</th>
            <th>Child Number</th>
            <th>Name</th>
            <th>Status</th>
            <th>Photo</th>
            <th class="chm-col-actions text-center">Action</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($children as $key => $detail)
            @php
                $status = optional($detail->child_status)->status_name ?? 'N/A';
                $statusType = $statusMap[$status] ?? 'neutral';
            @endphp
            <tr>
                <td class="fw-medium text-center">{{ $key + 1 }}</td>
                <td class="text-center">{{ $detail->child_number }}</td>
                <td>{{ ucfirst($detail->child_fname) . ' ' . ucfirst($detail->child_lname) }}</td>
                <td>
                    <x-chm.status-badge :status="$statusType" :label="$status" />
                </td>
                <td class="text-center">
                    <img
                        src="{{ !empty($detail->photo) ? url('upload/cfdp_child/'.$detail->photo) : url('upload/no_image.jpg') }}"
                        alt=""
                        class="chm-avatar"
                        loading="lazy"
                        width="40"
                        height="40"
                    >
                </td>
                <td class="text-center chm-col-actions">
                    <div class="dropdown">
                        <button type="button" class="btn btn-sm btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-label="Actions">
                            <i class="bx bx-dots-vertical-rounded"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            @if (Auth::user()->can('child.edit'))
                                <li><a class="dropdown-item" href="{{ route('edit.child', ['id_child' => $detail->id_child]) }}"><i class="bx bx-edit-alt me-2"></i> Edit</a></li>
                            @endif
                            @if (Auth::user()->can('child_profile.view'))
                                <li><a class="dropdown-item" href="{{ route('child.profile.view', ['id_child' => $detail->id_child]) }}"><i class="bx bx-user me-2"></i> Profile</a></li>
                            @endif
                            @if (Auth::user()->can('change_child_status.view'))
                                <li><a class="dropdown-item" href="{{ route('child.status.change', ['id_child' => $detail->id_child]) }}"><i class="bx bx-sync me-2"></i> Status Update</a></li>
                            @endif
                            @if (Auth::user()->can('child.delete'))
                                <li>
                                    <a class="dropdown-item text-danger chm-confirm-delete" href="{{ route('delete.child', $detail->id_child) }}">
                                        <i class="bx bx-trash me-2"></i> Delete
                                    </a>
                                </li>
                            @endif
                        </ul>
                    </div>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="6" class="text-center text-muted py-4">No children found.</td>
            </tr>
        @endforelse
    </tbody>
</x-chm.table-toolbar>