@extends('layouts.guru')
@section('title', 'Notifikasi Alpha WhatsApp')
@section('page-title', 'Notifikasi Alpha WhatsApp')
@section('guru-content')
<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
    <div>
        <div class="text-xs font-bold uppercase tracking-wide text-slate-500">Tanggal</div>
        <div class="text-sm font-semibold text-slate-900">{{ \Illuminate\Support\Carbon::parse($tanggal)->translatedFormat('d F Y') }}</div>
    </div>
    <a href="{{ route('guru.absensi.index') }}" class="inline-flex items-center rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">
        Kembali ke Absensi
    </a>
</div>

<x-table title="Daftar Alpha Hari Ini" subtitle="Kirim notifikasi WhatsApp ke orang tua melalui hyperlink.">
    <table class="min-w-full divide-y divide-slate-200">
        <thead class="bg-slate-50">
            <tr>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">No</th>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Nama Siswa</th>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Nama Orang Tua</th>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Nomor WA</th>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
            @forelse($dataAlpha as $item)
            <tr class="hover:bg-slate-50/70">
                <td class="px-5 py-3 text-sm text-slate-600">{{ $loop->iteration }}</td>
                <td class="px-5 py-3 text-sm font-semibold text-slate-900">{{ $item->nama_siswa }}</td>
                <td class="px-5 py-3 text-sm text-slate-800">{{ $item->nama_orang_tua ?? '-' }}</td>
                <td class="px-5 py-3 text-sm text-slate-800">{{ $item->no_wa_formatted ?? '-' }}</td>
                <td class="px-5 py-3">
                    @if($item->wa_link)
                    <a href="{{ $item->wa_link }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center rounded-xl bg-brand-600 px-3 py-2 text-sm font-semibold text-white hover:bg-brand-700">
                        Kirim WhatsApp
                    </a>
                    @else
                    <button type="button" disabled class="inline-flex cursor-not-allowed items-center rounded-xl bg-slate-200 px-3 py-2 text-sm font-semibold text-slate-500">
                        Kirim WhatsApp
                    </button>
                    @endif
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="px-5 py-6 text-center text-sm text-slate-500">
                    Tidak ada siswa dengan status Alpha pada hari ini.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</x-table>
@endsection