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

@section('content')
<style>
    :root { --navy:#0d1b2a; --gold:#b8962e; --gold-2:#d4af4f; --gold-light:#f7f0dc; --cream:#faf8f4; --cream-2:#f3efe6; --border:#e5e0d5; --muted:#6b6560; }
    .back-link { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); text-decoration:none; margin-bottom:24px; }
    .back-link:hover { color:var(--navy); }
    .edit-layout { display:grid; grid-template-columns:1fr 280px; gap:20px; align-items:start; }
    @media(max-width:900px) { .edit-layout { grid-template-columns:1fr; } }
    .panel { background:#fff; border:1px solid var(--border); border-radius:16px; }
    .panel-head { padding:20px 24px 18px; border-bottom:1px solid var(--border); }
    .panel-body { padding:24px; }
    .panel-title { font-family:'Cormorant Garamond',Georgia,serif; font-size:18px; font-weight:600; color:var(--navy); }
    .field { margin-bottom:18px; }
    .field label { display:block; font-size:12px; font-weight:500; color:var(--navy); margin-bottom:6px; }
    .field label .req { color:#dc2626; margin-left:2px; }
    .field label .hint { color:var(--muted); font-weight:400; font-size:11px; margin-left:4px; }
    .el-input { width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 14px; font-size:13px; color:var(--navy); background:#fff; outline:none; font-family:'Inter',sans-serif; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; }
    .el-input:focus { border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(212,175,79,.1); }
    .el-input.error { border-color:#dc2626; }
    .field-error { font-size:11px; color:#dc2626; margin-top:4px; }
    .divider { border:none; border-top:1px solid var(--border); margin:20px 0; }
    .section-subtitle { font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:600; margin-bottom:14px; }
    .two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .form-actions { display:flex; gap:10px; margin-top:14px; }
    .btn-submit { background:var(--navy); color:#fff; font-size:13px; font-weight:500; padding:10px 22px; border-radius:10px; border:none; cursor:pointer; font-family:'Inter',sans-serif; }
    .btn-submit:hover { opacity:.87; }
    .btn-cancel { background:var(--cream-2); color:var(--navy); font-size:13px; font-weight:500; padding:10px 20px; border-radius:10px; text-decoration:none; border:1px solid var(--border); display:inline-flex; align-items:center; }
    .btn-cancel:hover { background:#ece8de; }

    /* Profile preview */
    .profile-preview { padding:22px 20px; border-bottom:1px solid var(--border); text-align:center; }
    .preview-av { width:52px; height:52px; border-radius:14px; background:#e0e7f7; color:#3b4fa0; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; margin:0 auto 10px; }
    .preview-name { font-size:14px; font-weight:500; color:var(--navy); }
    .preview-email { font-size:11px; color:var(--muted); margin-top:2px; }
    .info-row { display:flex; justify-content:space-between; padding:10px 20px; border-bottom:1px solid #f5f2ec; font-size:12px; }
    .info-row:last-child { border-bottom:none; }
</style>

<a href="{{ route('admin.teacher.index') }}" class="back-link">
    <i class="fa fa-arrow-left" style="font-size:10px;"></i> Kembali ke Daftar Guru
</a>

<div class="edit-layout">
    {{-- Form --}}
    <div class="panel">
        <div class="panel-head">
            <div class="panel-title">Edit Data Guru</div>
        </div>
        <div class="panel-body">
            <form action="{{ route('admin.teacher.update', $teacher) }}" method="POST">
                @csrf @method('PUT')

                <div class="section-subtitle">Informasi Dasar</div>

                <div class="field">
                    <label>Nama Lengkap <span class="req">*</span></label>
                    <input type="text" name="name" value="{{ old('name', $teacher->name) }}"
                           class="el-input @error('name') error @enderror">
                    @error('name') <div class="field-error">{{ $message }}</div> @enderror
                </div>

                <div class="two-col">
                    <div class="field">
                        <label>Email <span class="req">*</span></label>
                        <input type="email" name="email" value="{{ old('email', $teacher->email) }}"
                               class="el-input @error('email') error @enderror">
                        @error('email') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="field">
                        <label>NIP <span class="hint">(opsional)</span></label>
                        <input type="text" name="nis_nip" value="{{ old('nis_nip', $teacher->nis_nip) }}"
                               class="el-input" placeholder="Nomor Induk Pegawai">
                    </div>
                </div>

                <hr class="divider">
                <div class="section-subtitle">Ganti Password</div>

                <div class="two-col">
                    <div class="field" style="margin-bottom:0;">
                        <label>Password Baru <span class="hint">(opsional)</span></label>
                        <input type="password" name="password"
                               class="el-input @error('password') error @enderror"
                               placeholder="Kosongkan jika tidak berubah">
                        @error('password') <div class="field-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="field" style="margin-bottom:0;">
                        <label>Konfirmasi Password</label>
                        <input type="password" name="password_confirmation"
                               class="el-input" placeholder="Ulangi password baru">
                    </div>
                </div>

                <div class="form-actions" style="margin-top:24px;">
                    <button type="submit" class="btn-submit">
                        <i class="fa fa-floppy-disk" style="font-size:11px; margin-right:6px;"></i>Simpan Perubahan
                    </button>
                    <a href="{{ route('admin.teacher.index') }}" class="btn-cancel">Batal</a>
                </div>
            </form>
        </div>
    </div>

    {{-- Profile Sidebar --}}
    <div class="panel">
        <div class="profile-preview">
            <div class="preview-av">{{ strtoupper(substr($teacher->name, 0, 1)) }}</div>
            <div class="preview-name">{{ $teacher->name }}</div>
            <div class="preview-email">{{ $teacher->email }}</div>
        </div>
        <div class="info-row">
            <span style="color:var(--muted);">Kursus Diajarkan</span>
            <span style="font-weight:600; color:var(--navy);">{{ $teacher->courses_count ?? 0 }}</span>
        </div>
        <div class="info-row">
            <span style="color:var(--muted);">Bergabung</span>
            <span style="font-weight:500; color:var(--navy);">{{ $teacher->created_at->format('d M Y') }}</span>
        </div>
        <div class="info-row">
            <span style="color:var(--muted);">Status</span>
            <span style="font-weight:500; color:{{ $teacher->is_active ? '#065f46' : '#dc2626' }};">
                {{ $teacher->is_active ? 'Aktif' : 'Nonaktif' }}
            </span>
        </div>
        <div style="padding:14px 20px;">
            <a href="{{ route('admin.teacher.show', $teacher) }}"
               style="display:flex; align-items:center; justify-content:center; gap:7px; font-size:12px; color:var(--muted); text-decoration:none; padding:9px; border:1px solid var(--border); border-radius:9px; transition:background .15s;"
               onmouseover="this.style.background='var(--cream-2)'" onmouseout="this.style.background='transparent'">
                <i class="fa fa-eye" style="font-size:11px;"></i> Lihat Detail Guru
            </a>
        </div>
    </div>
</div>

@endsection