@extends('admin.layout')

@section('content')

<h4 class="mb-3">
    <i data-feather="message-circle" class="icon"></i> Chat Orang Tua
</h4>

<div class="card-box">

    <table id="datatable" class="table table-hover">
        <thead>
            <tr>
                <th>Nama Orang Tua</th>
                <th>Status</th>
                <th>Aksi</th>
            </tr>
        </thead>

        <tbody>
            @foreach($chats as $c)
            <tr class="{{ $c->unread > 0 ? 'table-warning' : '' }}">

                <!-- NAMA + BADGE -->
                <td>
                    {{ $c->ortu->nama ?? '-' }}

                    @if($c->unread > 0)
                    <span class="badge bg-danger ms-2">
                        {{ $c->unread }} baru
                    </span>
                    @endif
                </td>

                <!-- STATUS -->
                <td>
                    @if($c->status == 'open')
                    <span class="badge bg-success">Aktif</span>
                    @else
                    <span class="badge bg-secondary">Tutup</span>
                    @endif
                </td>

                <!-- AKSI -->
                <td>
                    <a href="/admin/chat/{{ $c->id }}"
                        class="btn btn-sm {{ $c->unread > 0 ? 'btn-danger' : 'btn-primary' }}">
                        {{ $c->unread > 0 ? 'Chat Baru!' : 'Buka' }}
                    </a>
                </td>

            </tr>
            @endforeach
        </tbody>
    </table>

</div>

@endsection


{{-- ===================== SCRIPT ===================== --}}
@section('scripts')
<script>
$(document).ready(function() {
    $('#datatable').DataTable({
        pageLength: 10,
        lengthMenu: [5, 10, 25, 50, 100],
        order: [], // 🔥 WAJIB → matikan sorting default

        columnDefs: [{
                orderable: false,
                targets: [1, 2]
            } // opsional (status & aksi)
        ],
        language: {
            search: "🔍 Cari:",
            lengthMenu: "Tampilkan _MENU_ data",
            zeroRecords: "Data tidak ditemukan",
            info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
            paginate: {
                next: "›",
                previous: "‹"
            }
        }
    });

    feather.replace();
});
</script>
@endsection


{{-- ===================== STYLE TAMBAHAN ===================== --}}
<style>
/* animasi badge */
.badge.bg-danger {
    animation: pulse 1.2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* highlight baris */
.table-warning {
    background-color: #fff3cd !important;
}
</style>