@extends('app')
@section('content')
    <div class="container-fluid px-4">
        <h5 class="mt-4">{{ $title }}</h5>
        <div class="mb-3">
            <div class="card shadow-sm">
                <div class="card-body">
                    <p>Filter Data</p>
                    <form method="GET" action="{{ route('anak.index') }}">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="jenis_kelamin">Jenis Kelamin</label>
                                <select name="jenis_kelamin" class="form-select form-select-sm"
                                    onchange="this.form.submit()">
                                    <option value="">-- Semua Jenis Kelamin --</option>
                                    <option value="Laki-laki"
                                        {{ request('jenis_kelamin') == 'Laki-laki' ? 'selected' : '' }}>
                                        Laki - laki
                                    </option>
                                    <option value="Perempuan"
                                        {{ request('jenis_kelamin') == 'Perempuan' ? 'selected' : '' }}>
                                        Perempuan
                                    </option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="akta">Status Akta Kelahiran</label>
                                <select name="akta" class="form-select form-select-sm" onchange="this.form.submit()">
                                    <option value="">-- Semua Status Akta Lahir --</option>
                                    <option value="Ya" {{ request('akta') == 'Ya' ? 'selected' : '' }}>
                                        Ya
                                    </option>
                                    <option value="Tidak" {{ request('akta') == 'Tidak' ? 'selected' : '' }}>
                                        Tidak
                                    </option>
                                </select>
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <a href="{{ route('anak.index') }}" class="btn btn-sm btn-danger">
                                    <i class="fas fa-undo"></i> Reset Filter
                                </a>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
        <div class="card mb-4">
            <div class="card-header btn-kriteria">
                <i class="fas fa-table me-1"></i>
                Data {{ $title }}
                <a href="{{ route('anak.create') }}" class="btn btn-kriteria float-end">
                    <i class="fas fa-plus"></i> Tambah Anak
                </a>
            </div>
            <div class="card-body">
                <table id="datatablesSimple" class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Nama Anak</th>
                            <th>Tempat Lahir</th>
                            <th>Tanggal Lahir</th>
                            <th>Jenis Kelamin</th>
                            <th>Alamat</th>
                            <th>Memiliki Akta Lahir?</th>
                            <th>Nama Ayah</th>
                            <th>Nama Ibu</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>#</th>
                            <th>Nama Anak</th>
                            <th>Tempat Lahir</th>
                            <th>Tanggal Lahir</th>
                            <th>Jenis Kelamin</th>
                            <th>Alamat</th>
                            <th>Memiliki Akta Lahir</th>
                            <th>Nama Ayah</th>
                            <th>Nama Ibu</th>
                            <th>Aksi</th>
                        </tr>
                    </tfoot>
                    <tbody>
                        @foreach ($anak as $a)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $a->nama_anak }}</td>
                                <td>{{ $a->tempat_lahir }}</td>
                                <td>{{ $a->tanggal_lahir }}</td>
                                <td>{{ $a->jenis_kelamin }}</td>
                                <td>{{ $a->alamat }}</td>
                                <td>{{ $a->akta }}</td>
                                <td>{{ $a->nama_ayah }}</td>
                                <td>{{ $a->nama_ibu }}</td>
                                <td>
                                    <a href="{{ route('anak.edit', $a->id) }}" class="btn btn-sm btn-warning"
                                        title="Ubah">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="{{ route('anak.destroy', $a->id) }}" method="POST"
                                        style="display:inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger" title="Hapus"
                                            onclick="return confirm('Yakin hapus data?')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection