@extends('layouts.app')

@section('title', 'Detail: ' . $anak->nama)
@section('page-title', 'Detail Anak Yatim')
@section('breadcrumb', 'Beranda / Anak Yatim / Detail')

@section('content')

<div style="display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start;">

    {{-- Left: Profile card --}}
    <div>
        <div class="card" style="margin-bottom:16px;">
            <div class="card-body" style="text-align:center; padding:28px 22px;">
                <div style="width:72px; height:72px; border-radius:50%; background:var(--primary-l);
                    display:flex; align-items:center; justify-content:center;
                    font-size:28px; font-weight:700; color:var(--primary);
                    margin:0 auto 14px;">
                    {{ strtoupper(substr($anak->nama, 0, 1)) }}
                </div>
                <div style="font-size:16px; font-weight:700; margin-bottom:4px;">{{ $anak->nama }}</div>
                <span class="badge badge-blue" style="font-size:13px;">{{ $anak->kode }}</span>

                @if($anak->scanLogs()->whereDate('scanned_at', today())->exists())
                    <div style="margin-top:12px;"><span class="badge badge-green" style="font-size:13px;">✓ Hadir Hari Ini</span></div>
                @else
                    <div style="margin-top:12px;"><span class="badge badge-gray" style="font-size:13px;">Belum Hadir</span></div>
                @endif
            </div>

            <div style="border-top:1px solid #e8f0ec;">
                @php $rows = [
                    ['Tanggal Lahir', \Carbon\Carbon::parse($anak->tanggal_lahir)->translatedFormat('d F Y') . ' (' . \Carbon\Carbon::parse($anak->tanggal_lahir)->age . ' th)'],
                    ['Mushola', $anak->mushola],
                    ['Sekolah', $anak->sekolah ?? '—'],
                    ['Keterangan', $anak->keterangan ?? '—'],
                ]; @endphp
                @foreach($rows as $row)
                <div style="padding:10px 18px; border-bottom:1px solid #f0f5f2; display:flex; gap:12px;">
                    <div style="font-size:12px; color:#7aaa94; width:100px; flex-shrink:0;">{{ $row[0] }}</div>
                    <div style="font-size:13px; font-weight:500; color:#1a2e26;">{{ $row[1] }}</div>
                </div>
                @endforeach
            </div>

            <div class="card-body">
                <div style="display:flex; gap:8px;">
                    <a href="{{ route('anak-yatim.edit', $anak) }}" class="btn btn-outline" style="flex:1; justify-content:center;">
                        <i class="fa-solid fa-pen"></i> Edit
                    </a>
                    <a href="{{ route('qrcode.show', $anak) }}" class="btn btn-primary" style="flex:1; justify-content:center;">
                        <i class="fa-solid fa-qrcode"></i> QR Code
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Right: Scan history --}}
    <div class="card">
        <div class="card-header">
            <i class="fa-solid fa-clock-rotate-left" style="color:#1e6f5c;"></i>
            <span class="card-title">Riwayat Kehadiran</span>
            <span class="badge badge-blue">{{ $anak->scanLogs->count() }} scan</span>
        </div>
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Tanggal & Waktu</th>
                        <th>Discan oleh</th>
                        <th>Keterangan</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($anak->scanLogs()->latest()->paginate(15) as $log)
                    <tr>
                        <td>
                            <div style="font-weight:600;">{{ $log->scanned_at->format('d M Y') }}</div>
                            <div style="font-size:12px; color:#7aaa94;">{{ $log->scanned_at->format('H:i:s') }}</div>
                        </td>
                        <td style="font-size:13px;">{{ $log->panitia->nama ?? '—' }}</td>
                        <td style="font-size:13px; color:#6b8f7e;">{{ $log->keterangan ?? '—' }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="3" style="text-align:center; padding:36px; color:#9db8ac;">
                            <i class="fa-solid fa-circle-xmark" style="font-size:24px; display:block; margin-bottom:6px;"></i>
                            Belum pernah scan
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection