@extends('layouts.app')
@section('title', 'Add Staff')
@section('content')
<div class="card" style="max-width:600px;">
    <h2 style="font-size:17px;color:#0b4f2c;margin-bottom:16px;">Add Staff</h2>
    <form method="POST" action="{{ url('/api/teachers') }}">
        @csrf
        <label style="display:block;font-size:12px;margin-bottom:4px;">Full Name</label>
        <input type="text" name="name" required style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;margin-bottom:12px;">

        <div style="display:flex;gap:10px;margin-bottom:12px;">
            <div style="flex:1;">
                <label style="display:block;font-size:12px;margin-bottom:4px;">Email</label>
                <input type="email" name="email" required style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;">
            </div>
            <div style="flex:1;">
                <label style="display:block;font-size:12px;margin-bottom:4px;">Phone</label>
                <input type="text" name="phone" style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;">
            </div>
        </div>

        <label style="display:block;font-size:12px;margin-bottom:4px;">Staff ID</label>
        <input type="text" name="staff_id" required style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;margin-bottom:12px;">

        <div style="display:flex;gap:10px;margin-bottom:12px;">
            <div style="flex:1;">
                <label style="display:block;font-size:12px;margin-bottom:4px;">Department</label>
                <select name="department_id" style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;">
                    <option value="">Select</option>
                    @foreach($departments as $dept)
                        <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                    @endforeach
                </select>
            </div>
            <div style="flex:1;">
                <label style="display:block;font-size:12px;margin-bottom:4px;">Designation</label>
                <select name="designation_id" style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;">
                    <option value="">Select</option>
                    @foreach($designations as $d)
                        <option value="{{ $d->id }}">{{ $d->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div style="display:flex;gap:10px;margin-bottom:16px;">
            <div style="flex:1;">
                <label style="display:block;font-size:12px;margin-bottom:4px;">Qualification</label>
                <input type="text" name="qualification" style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;">
            </div>
            <div style="flex:1;">
                <label style="display:block;font-size:12px;margin-bottom:4px;">Date Employed</label>
                <input type="date" name="date_employed" style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;">
            </div>
        </div>

        <p style="font-size:11.5px;color:#999;margin-bottom:12px;">A temporary password is generated and a reset link emailed automatically. The account is assigned the Teacher role by default.</p>
        <button type="submit" style="background:#0b4f2c;color:#fff;border:none;padding:10px 22px;border-radius:6px;font-size:13px;cursor:pointer;">Save Staff</button>
    </form>
</div>
@endsection