@extends('layouts.admin')
@section('title', 'Manajemen Guru')
@section('header', 'Manajemen Guru')

@section('content')
<style>
    :root { --navy:#0d1b2a; --gold:#b8962e; --gold-2:#d4af4f; --gold-light:#f7f0dc; --cream:#faf8f4; --cream-2:#f3efe6; --border:#e5e0d5; --muted:#6b6560; }
    .badge { font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px; display:inline-block; }
    .badge-green { background:#d1fae5; color:#065f46; }
    .badge-red { background:#fef2f2; color:#dc2626; }
    .alert-success { background:#d1fae5; border:1px solid #a7f3d0; border-radius:12px; padding:12px 16px; font-size:13px; color:#065f46; margin-bottom:20px; }
    .filter-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
    .filter-group { display:flex; gap:8px; }
    .el-input { border:1px solid var(--border); border-radius:10px; padding:9px 14px; font-size:13px; background:#fff; color:var(--navy); outline:none; font-family:'Inter',sans-serif; }
    .el-input:focus { border-color:var(--gold-2); }
    .btn-filter { background:var(--cream-2); border:1px solid var(--border); border-radius:10px; padding:9px 16px; font-size:12px; font-weight:500; color:var(--navy); cursor:pointer; font-family:'Inter',sans-serif; }
    .btn-primary { display:inline-flex; align-items:center; gap:7px; background:var(--navy); color:#fff; font-size:12px; font-weight:500; padding:9px 18px; border-radius:10px; text-decoration:none; border:none; }
    .btn-primary:hover { opacity:.87; }
    .panel { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
    .el-table { width:100%; border-collapse:collapse; }
    .el-table th { font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:11px 20px; text-align:left; background:var(--cream); border-bottom:1px solid var(--border); }
    .el-table th.center { text-align:center; }
    .el-table td { padding:13px 20px; font-size:13px; border-bottom:1px solid #f5f2ec; vertical-align:middle; }
    .el-table tr:last-child td { border-bottom:none; }
    .el-table tr:hover td { background:#faf8f4; }
    .av { width:36px; height:36px; border-radius:10px; background:#e0e7f7; color:#3b4fa0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
    .action-group { display:flex; align-items:center; justify-content:flex-end; gap:2px; }
    .act-btn { font-size:11px; font-weight:500; padding:5px 10px; border-radius:7px; text-decoration:none; cursor:pointer; font-family:'Inter',sans-serif; border:none; background:transparent; transition:background .12s; display:inline-block; color:var(--navy); }
    .act-btn:hover { background:var(--cream-2); }
    .act-btn.blue { color:#3b82f6; }
    .act-btn.blue:hover { background:#eff6ff; }
    .act-btn.red { color:#dc2626; }
    .act-btn.red:hover { background:#fef2f2; }
    .form-inline { display:inline; }
</style>

@if(session('success'))
<div class="alert-success"><i class="fa fa-check-circle" style="margin-right:6px;"></i>{{ session('success') }}</div>
@endif

<div class="filter-bar">
    <form method="GET" class="filter-group">
        <input name="search" value="{{ request('search') }}" placeholder="Cari nama atau email..." class="el-input" style="width:240px;">
        <button type="submit" class="btn-filter"><i class="fa fa-magnifying-glass" style="font-size:11px; margin-right:5px;"></i>Cari</button>
    </form>
    <a href="{{ route('admin.teacher.create') }}" class="btn-primary">
        <i class="fa fa-plus" style="font-size:10px;"></i> Tambah Guru
    </a>
</div>

<div class="panel">
    <table class="el-table">
        <thead><tr>
            <th>Guru</th>
            <th>NIP</th>
            <th class="center">Kursus</th>
            <th class="center">Status</th>
            <th style="text-align:right; padding-right:20px;">Aksi</th>
        </tr></thead>
        <tbody>
            @forelse($teachers as $teacher)
            <tr>
                <td>
                    <div style="display:flex; align-items:center; gap:10px;">
                        <div class="av">{{ strtoupper(substr($teacher->name, 0, 1)) }}</div>
                        <div>
                            <div style="font-weight:500; color:var(--navy);">{{ $teacher->name }}</div>
                            <div style="font-size:11px; color:var(--muted);">{{ $teacher->email }}</div>
                        </div>
                    </div>
                </td>
                <td style="color:var(--muted); font-size:12px;">{{ $teacher->nis_nip ?? '—' }}</td>
                <td style="text-align:center; font-weight:500; color:var(--navy);">{{ $teacher->courses_count }}</td>
                <td style="text-align:center;">
                    <span class="badge {{ $teacher->is_active ? 'badge-green' : 'badge-red' }}">
                        {{ $teacher->is_active ? 'Aktif' : 'Nonaktif' }}
                    </span>
                </td>
                <td>
                    <div class="action-group">
                        <a href="{{ route('admin.teacher.show', $teacher) }}" class="act-btn blue">Detail</a>
                        <a href="{{ route('admin.teacher.edit', $teacher) }}" class="act-btn">Edit</a>
                        <form class="form-inline" method="POST" action="{{ route('admin.teacher.destroy', $teacher) }}"
                              onsubmit="return confirm('Hapus guru ini?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="act-btn red">Hapus</button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" style="text-align:center; padding:48px; color:var(--muted); font-size:13px;">
                    <i class="fa fa-chalkboard-user" style="font-size:24px; display:block; margin-bottom:8px; opacity:.3;"></i>
                    Belum ada data guru.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
<div style="margin-top:16px;">{{ $teachers->links() }}</div>

@endsection