@section('title', 'TTD Sertifikat')
<div>
    <div class="row g-3 mb-3">
        <div class="col-6">
            <h3 class="fw-semibold mb-0">TTD Sertifikat</h3>
        </div>
        <div class="col-6 text-end">
            <div class="d-inline-flex gap-2">
                <button class="btn btn-secondary btn-sm" wire:click="resetForm">
                    <i class="fa-regular fa-rotate fa-fw me-1"></i> Reset
                </button>
                <button class="btn btn-primary btn-sm" wire:click="save">
                    <i class="fa-regular fa-floppy-disk fa-fw me-1"></i> Simpan
                </button>
            </div>
        </div>
    </div>
    <hr class="my-3">
    <div class="card mb-3">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-lg-5 col-12">
                    <label class="form-label">Ketua</label>
                    <select class="form-select" wire:model.live="chair_user_id">
                        <option value="">Pilih Ketua</option>
                        @foreach ($users as $user)
                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-3 col-6">
                    <label class="form-label">Mulai Tahun</label>
                    <input class="form-control" max="9999" min="1900" type="number" wire:model.live="start_year">
                </div>
                <div class="col-lg-3 col-6">
                    <label class="form-label">Sampai Tahun</label>
                    <input class="form-control" max="9999" min="1900" placeholder="Biarkan kosong jika belum ditentukan" type="number" wire:model.live="end_year">
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="row g-3 justify-content-between">
                <div class="col-lg-5 col-6">
                    <div class="row">
                        <div class="col-lg-6 col-12 d-flex align-items-center gap-2">
                            <div>Lihat</div>
                            <select class="form-select" wire:model.live="perPage">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                            <div class="ms-auto">Hasil</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fa-regular fa-magnifying-glass fa-fw"></i></span>
                        <input class="form-control" placeholder="Cari Ketua/Tahun.." type="text" wire:model.live="search">
                    </div>
                </div>
            </div>
        </div>
        <div class="table-responsive scrollbar-x">
            <table class="table-bordered table">
                <thead class="table-light">
                    <tr class="text-center">
                        <th style="width: 60px;">NO</th>
                        <th>Ketua</th>
                        <th>Mulai Tahun</th>
                        <th>Sampai Tahun</th>
                        <th style="width: 160px;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($periods as $result)
                        <tr>
                            <td class="text-center">{{ $periods->currentPage() * $perPage - $perPage + $loop->iteration }}</td>
                            <td>{{ $result->chair?->name }}</td>
                            <td class="text-center">{{ $result->start_year }}</td>
                            <td class="text-center">{{ $result->end_year ?? '—' }}</td>
                            <td class="text-center">
                                <button class="btn btn-warning btn-sm" wire:click="edit('{{ $result->id }}')">
                                    <i class="fa-regular fa-pen-to-square fa-fw"></i>
                                </button>
                                <button class="btn btn-danger btn-sm" wire:click="delete('{{ $result->id }}')">
                                    <i class="fa-regular fa-trash-can fa-fw"></i>
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td class="fw-bold text-center" colspan="5">Belum Ada Data</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="card-body">
            <div class="row d-flex align-items-center g-3">
                <div class="col-lg-6 col-12">
                    Menampilkan {{ $periods->firstItem() ?? 0 }} sampai {{ $periods->lastItem() ?? 0 }} dari {{ $periods->total() }}
                </div>
                <div class="col-lg-6 col-12">{{ $periods->links('vendor.livewire.bootstrap') }}</div>
            </div>
        </div>
    </div>
</div>