@extends('layouts.app')

@section('content')
    <style>
        .form-shell { margin-top: 18px; display: grid; gap: 16px; }
        .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
        .field label { display: block; margin-bottom: 6px; font-weight: 500; }
        .field input, .field select, .field textarea { width: 100%; border: 1px solid #cfd8e3; border-radius: 8px; padding: 10px 12px; font: inherit; background: #fff; }
        .field textarea { min-height: 96px; resize: vertical; }
        .field.full { grid-column: 1 / -1; }
        .check-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
        .check-row input { width: auto; }
        .error-text { color: #b54708; font-size: 13px; margin-top: 4px; }
        .hint { color: var(--muted); font-size: 13px; margin-top: 4px; }
        .form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
        @media (max-width: 860px) { .form-grid { grid-template-columns: 1fr; } }
    </style>

    @php
        $createAccount = old('create_account', $teacher->exists ? (bool) $account : true);
        $accountUsername = old('account_username', $account->username ?? strtolower($teacher->teacher_code ?? ''));
        $accountRole = old('account_role', $account->role ?? 'advisor');
    @endphp

    <h1 class="page-title">{{ $teacher->exists ? 'แก้ไขข้อมูลครู' : 'เพิ่มครู/บุคลากร' }}</h1>
    <p class="page-subtitle">จัดการข้อมูลครูและบัญชีเข้าสู่ระบบจากหน้าเดียว</p>

    @if ($errors->any())
        <div class="notice" style="background:#fff4ed;border-color:#fedf89;color:#b54708;">
            กรุณาตรวจสอบข้อมูลในฟอร์มอีกครั้ง
        </div>
    @endif

    <form class="form-shell" method="post" action="{{ $teacher->exists ? route('teachers.update', $teacher) : route('teachers.store') }}">
        @csrf
        @if ($teacher->exists)
            @method('put')
        @endif

        <div class="card">
            <h2 style="margin:0 0 14px;font-size:18px;">ข้อมูลพื้นฐาน</h2>
            <div class="form-grid">
                <div class="field">
                    <label for="teacher_code">รหัสครู/บุคลากร</label>
                    <input id="teacher_code" name="teacher_code" value="{{ old('teacher_code', $teacher->teacher_code) }}">
                    @error('teacher_code') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field">
                    <label for="prefix">คำนำหน้า</label>
                    <input id="prefix" name="prefix" value="{{ old('prefix', $teacher->prefix) }}" placeholder="เช่น นาย / นาง / นางสาว / ว่าที่ร.ต.">
                    @error('prefix') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field">
                    <label for="first_name">ชื่อ</label>
                    <input id="first_name" name="first_name" value="{{ old('first_name', $teacher->first_name) }}">
                    @error('first_name') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field">
                    <label for="last_name">นามสกุล</label>
                    <input id="last_name" name="last_name" value="{{ old('last_name', $teacher->last_name) }}">
                    @error('last_name') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field">
                    <label for="position">ตำแหน่ง</label>
                    <input id="position" name="position" value="{{ old('position', $teacher->position) }}" placeholder="เช่น ครู / ครูผู้ช่วย / ผู้อำนวยการ">
                    @error('position') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field">
                    <label for="subject_group">กลุ่มสาระ/งาน</label>
                    <input id="subject_group" name="subject_group" value="{{ old('subject_group', $teacher->subject_group) }}">
                    @error('subject_group') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field">
                    <label for="phone">โทรศัพท์</label>
                    <input id="phone" name="phone" value="{{ old('phone', $teacher->phone) }}">
                    @error('phone') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field">
                    <label for="email">อีเมล</label>
                    <input id="email" type="email" name="email" value="{{ old('email', $teacher->email) }}">
                    @error('email') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field full">
                    <label for="address">ที่อยู่</label>
                    <textarea id="address" name="address">{{ old('address', $teacher->address) }}</textarea>
                    @error('address') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field full">
                    <label class="check-row">
                        <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $teacher->exists ? $teacher->is_active : true))>
                        <span>ใช้งานอยู่</span>
                    </label>
                </div>
            </div>
        </div>

        <div class="card">
            <h2 style="margin:0 0 14px;font-size:18px;">บัญชีเข้าสู่ระบบ</h2>
            <div class="form-grid">
                <div class="field full">
                    <label class="check-row">
                        <input id="create_account" type="checkbox" name="create_account" value="1" @checked($createAccount)>
                        <span>สร้าง/อัปเดตบัญชีเข้าสู่ระบบให้ครูคนนี้</span>
                    </label>
                    <div class="hint">ถ้าไม่กรอกรหัสผ่านใหม่ ระบบจะใช้รหัสเดิม หรือใช้ teacher1234 สำหรับบัญชีใหม่</div>
                </div>

                <div class="field">
                    <label for="account_username">Username</label>
                    <input id="account_username" name="account_username" value="{{ $accountUsername }}">
                    @error('account_username') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field">
                    <label for="account_role">สิทธิ์บัญชี</label>
                    <select id="account_role" name="account_role">
                        <option value="advisor" @selected($accountRole === 'advisor')>ครูที่ปรึกษา</option>
                        <option value="teacher" @selected($accountRole === 'teacher')>ครู</option>
                    </select>
                    @error('account_role') <div class="error-text">{{ $message }}</div> @enderror
                </div>

                <div class="field full">
                    <label for="password">รหัสผ่านใหม่</label>
                    <input id="password" type="password" name="password" autocomplete="new-password">
                    <div class="hint">{{ $teacher->exists && $account ? 'เว้นว่างไว้ถ้าไม่ต้องการเปลี่ยนรหัสผ่าน' : 'เว้นว่างไว้เพื่อใช้ teacher1234 เป็นรหัสเริ่มต้น' }}</div>
                    @error('password') <div class="error-text">{{ $message }}</div> @enderror
                </div>
            </div>
        </div>

        <div class="form-actions">
            <a class="btn secondary" href="{{ $teacher->exists ? route('teachers.show', $teacher) : route('teachers.index') }}">กลับ</a>
            <button class="btn" type="submit">บันทึก</button>
        </div>
    </form>

    <script>
        const codeInput = document.getElementById('teacher_code');
        const usernameInput = document.getElementById('account_username');

        codeInput?.addEventListener('blur', () => {
            if (usernameInput && usernameInput.value.trim() === '') {
                usernameInput.value = codeInput.value.trim().toLowerCase();
            }
        });
    </script>
@endsection