@extends('admin.layouts.app')

@section('title', 'Kelola Aparatur')

@section('content')
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <h2 class="mb-0">Kelola Aparatur</h2>
            <a href="{{ route('admin.aparatur.create') }}" class="btn btn-success">
                <i class="fas fa-plus me-2"></i>Tambah Aparatur
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if(isset($aparaturs) && $aparaturs->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th>No</th>
                                        <th>Foto</th>
                                        <th>Nama</th>
                                        <th>Jabatan</th>
                                        <th>Email</th>
                                        <th>Telepon</th>
                                        <th>Status</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($aparaturs as $index => $item)
                                    <tr>
                                        <td>{{ $aparaturs->firstItem() + $index }}</td>
                                        <td>
                                            @if($item->foto)
                                                <img src="{{ asset($item->foto) }}" alt="{{ $item->nama }}" class="rounded-circle" width="40" height="40" style="object-fit: cover;">
                                            @else
                                                <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                                    <i class="fas fa-user text-white"></i>
                                                </div>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="fw-semibold">{{ $item->nama }}</div>
                                            @if($item->deskripsi)
                                                <small class="text-muted">{{ Str::limit($item->deskripsi, 50) }}</small>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge bg-primary">{{ $item->jabatan }}</span>
                                        </td>
                                        <td>
                                            @if($item->email)
                                                <a href="mailto:{{ $item->email }}" class="text-decoration-none">{{ $item->email }}</a>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($item->telepon)
                                                <a href="tel:{{ $item->telepon }}" class="text-decoration-none">{{ $item->telepon }}</a>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($item->is_active ?? true)
                                                <span class="badge bg-success">Aktif</span>
                                            @else
                                                <span class="badge bg-danger">Tidak Aktif</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('admin.aparatur.show', $item) }}" class="btn btn-sm btn-info" title="Detail">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('admin.aparatur.edit', $item) }}" class="btn btn-sm btn-primary" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <form action="{{ route('admin.aparatur.destroy', $item) }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin hapus data ini?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-danger" title="Hapus">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-3">
                            {{ $aparaturs->links() }}
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-users fa-4x text-secondary mb-3"></i>
                            <h5 class="mb-2">Belum ada aparatur</h5>
                            <p class="text-muted mb-4">Mulai dengan menambahkan data aparatur pertama.</p>
                            <a href="{{ route('admin.aparatur.create') }}" class="btn btn-success">
                                Tambah Aparatur Pertama
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection