@extends('layouts.app')

@section('title', 'Add Student')

@section('content')
<div class="card" style="max-width:640px;">
    <h2 style="font-size:17px;color:#0b4f2c;margin-bottom:16px;">Add Student</h2>

    <form method="POST" action="{{ url('/api/students') }}">
        @csrf
        <div style="display:flex;gap:10px;margin-bottom:12px;">
            <div style="flex:1;">
                <label style="display:block;font-size:12px;margin-bottom:4px;">First Name</label>
                <input type="text" name="first_name" 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;">Last Name</label>
                <input type="text" name="last_name" required style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;">
            </div>
        </div>

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

        <div style="display:flex;gap:10px;margin-bottom:12px;">
            <div style="flex:1;">
                <label style="display:block;font-size:12px;margin-bottom:4px;">Admission Number</label>
                <input type="text" name="admission_number" 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;">Gender</label>
                <select name="gender" required style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
            </div>
        </div>

        <div style="display:flex;gap:10px;margin-bottom:12px;">
            <div style="flex:1;">
                <label style="display:block;font-size:12px;margin-bottom:4px;">Date of Birth</label>
                <input type="date" name="date_of_birth" 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;">Class Arm</label>
                <select name="class_arm_id" style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;">
                    <option value="">Select</option>
                    @foreach($classArms as $arm)
                        <option value="{{ $arm->id }}">{{ $arm->schoolClass->name }} {{ $arm->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <h3 style="font-size:13px;color:#555;margin:16px 0 8px;">Guardian Information</h3>
        <div style="margin-bottom:12px;">
            <label style="display:block;font-size:12px;margin-bottom:4px;">Guardian Name</label>
            <input type="text" name="guardian_name" style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;">
        </div>
        <div style="display:flex;gap:10px;margin-bottom:16px;">
            <div style="flex:1;">
                <label style="display:block;font-size:12px;margin-bottom:4px;">Phone</label>
                <input type="text" name="guardian_phone" 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;">Email</label>
                <input type="email" name="guardian_email" style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;">
            </div>
        </div>

        <button type="submit" style="background:#0b4f2c;color:#fff;border:none;padding:10px 22px;border-radius:6px;font-size:13px;cursor:pointer;">Save Student</button>
    </form>
</div>
@endsection