@extends('layouts.app')

@section('title', 'Data Anak Yatim Piatu')
@section('page-title', 'Data Anak Yatim Piatu')
@section('breadcrumb', 'Beranda / Anak Yatim Piatu')

@section('content')

<div class="card">
    <div class="card-header">
        <i class="fa-solid fa-child-reaching" style="color:#1e6f5c;"></i>
        <span class="card-title">Daftar Anak Yatim Piatu</span>

        <div style="display:flex; gap:10px; margin-left:auto;">
            <form method="GET" style="display:flex; gap:8px;">
                <input type="text" name="search" class="form-control"
                    placeholder="Cari nama / kode..." value="{{ request('search') }}"
                    style="width:220px; padding:7px 13px;">
                <button type="submit" class="btn btn-outline btn-sm">
                    <i class="fa-solid fa-search"></i>
                </button>
                @if(request('search'))
                    <a href="{{ route('anak-yatim.index') }}" class="btn btn-outline btn-sm">Reset</a>
                @endif
            </form>

            <a href="{{ route('anak-yatim.create') }}" class="btn btn-primary">
                <i class="fa-solid fa-plus"></i> Tambah Anak
            </a>
        </div>
    </div>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th style="width:50px;">No</th>
                    <th>Kode</th>
                    <th>Nama</th>
                    <th>Mushola</th>
                    <th>Tanggal Lahir</th>
                    <th>Umur</th>
                    <th>Sekolah</th>
                    <th>Keterangan</th>
                    <th>Status Hari Ini</th>
                    <th style="width:130px;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($anakYatim as $i => $anak)
                <tr>
                    <td style="color:#9db8ac;">{{ $anakYatim->firstItem() + $i }}</td>
                    <td><span class="badge badge-blue">{{ $anak->kode }}</span></td>
                    <td style="font-weight:600;">{{ $anak->nama }}</td>
                    <td style="font-size:13px;">{{ $anak->mushola }}</td>
                    <td style="font-size:13px;">{{ \Carbon\Carbon::parse($anak->tanggal_lahir)->format('d M Y') }}</td>
                    <td style="font-size:13px;">{{ $anak->umur }} th</td>
                    <td style="font-size:13px;">{{ $anak->sekolah ?? '—' }}</td>
                    <td style="font-size:13px; color:#6b8f7e;">{{ Str::limit($anak->keterangan ?? '—', 30) }}</td>
                    <td>
                        @if($anak->scanLogs()->whereDate('scanned_at', today())->exists())
                            <span class="badge badge-green"><i class="fa-solid fa-check"></i> Hadir</span>
                        @else
                            <span class="badge badge-gray">Belum Scan</span>
                        @endif
                    </td>
                    <td>
                        <div style="display:flex; gap:6px;">
                            <a href="{{ route('anak-yatim.show', $anak) }}" class="btn btn-outline btn-sm" title="Detail">
                                <i class="fa-solid fa-eye"></i>
                            </a>
                            <a href="{{ route('anak-yatim.edit', $anak) }}" class="btn btn-outline btn-sm" title="Edit">
                                <i class="fa-solid fa-pen"></i>
                            </a>
                            <button onclick="confirmDelete('del-anak-{{ $anak->id }}', '{{ addslashes($anak->nama) }}')"
                                class="btn btn-danger btn-sm" title="Hapus">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                            <form id="del-anak-{{ $anak->id }}" action="{{ route('anak-yatim.destroy', $anak) }}"
                                method="POST" style="display:none">
                                @csrf @method('DELETE')
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="10" style="text-align:center; padding:40px; color:#9db8ac;">
                        <i class="fa-solid fa-circle-xmark" style="font-size:28px; display:block; margin-bottom:8px;"></i>
                        Tidak ada data anak yatim
                        @if(request('search'))
                            untuk pencarian "<strong>{{ request('search') }}</strong>"
                        @endif
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($anakYatim->hasPages())
    <div style="padding:16px 22px; border-top:1px solid #e8f0ec;">
        {{ $anakYatim->withQueryString()->links('vendor.pagination.custom') }}
    </div>
    @endif
</div>

{{-- Modal Konfirmasi Hapus --}}
<div class="modal-backdrop" id="modal-delete">
    <div class="modal" style="max-width:400px;">
        <div class="modal-header">
            <span class="modal-title">Konfirmasi Hapus</span>
            <button type="button" onclick="closeDeleteModal()"
                style="background:none;border:none;font-size:20px;cursor:pointer;color:#7aaa94;">&times;</button>
        </div>
        <div class="modal-body">
            <p style="margin:0; color:#374151;">
                Yakin ingin menghapus <strong id="delete-nama"></strong>?
                Semua data scan anak ini juga akan dihapus.
            </p>
        </div>
        <div class="modal-footer">
            <button type="button" onclick="closeDeleteModal()" class="btn btn-outline">Batal</button>
            <button type="button" onclick="submitDelete()" class="btn btn-danger">
                <i class="fa-solid fa-trash"></i> Hapus
            </button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    let deleteFormId = null;

    function confirmDelete(formId, nama) {
        deleteFormId = formId;
        document.getElementById('delete-nama').textContent = nama;
        document.getElementById('modal-delete').classList.add('open');
    }

    function submitDelete() {
        if (deleteFormId) {
            document.getElementById(deleteFormId).submit();
        }
    }

    function closeDeleteModal() {
        deleteFormId = null;
        document.getElementById('modal-delete').classList.remove('open');
    }

    document.getElementById('modal-delete').addEventListener('click', function(e) {
        if (e.target === this) closeDeleteModal();
    });
</script>
@endpush