@extends('layouts.app')

@section('content')
<div class="container">
    <x-header title="إضافة مدرس جديد" />
    
    @if(session('success'))
        <div class="alert alert-success text-center alert-dismissible fade show">{{ session('success') }}</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    @endif

    <form action="{{ route('teachers.store') }}" method="POST" class="row g-3 needs-validation" novalidate>
        @csrf

        <div class="col-md-4">
            <label for="name" class="form-label">الاسم</label>
            <input  type="text"
                    name="name"
                    id="name"
                    value="{{ old('name')}}"
                    class="form-control @error('name') is-invalid @enderror @if(old('name') && !$errors->has('name')) is-valid @endif"
                    >
            @error('name')
                <div class="invalid-feedback">{{ $message }}</div>
            @else
                <div class="valid-feedback">كده تمام 👍</div>
            @enderror
        </div>

        <div class="col-md-4">
            <label for="NID" class="form-label">الرقم القومي</label>
            <input type="number" name="NID" id="NID" value="{{ old('NID')}}" class="form-control @error('NID') is-invalid @enderror @if(old('NID') && !$errors->has('NID')) is-valid @endif" >
            @error('NID')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-4">
            <label class="form-label d-block mb-2">الديانة</label>

            <input type="radio" 
                class="btn-check" 
                name="religion" 
                id="religion_1" 
                value="مسيحى" 
                autocomplete="off" 
                {{ old('religion') == 'مسيحى' ? 'checked' : '' }}>
            <label class="btn btn-outline-primary me-2" for="religion_1">مسيحى</label>

            <input type="radio" 
                class="btn-check" 
                name="religion" 
                id="religion_2" 
                value="مسلم" 
                autocomplete="off" 
                {{ old('religion') == 'مسلم' ? 'checked' : '' }}>
            <label class="btn btn-outline-primary" for="religion_2">مسلم</label>

            @error('religion')
                <div class="invalid-feedback d-block">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-4">
            <label for="phone" class="form-label">الهاتف</label>
            <input type="number" name="phone[]" id="phone" value="{{ old('phone.0')}}" class="form-control @error('phone') is-invalid @enderror" >
            @error('phone.0')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-4">
            <label for="phone_1" class="form-label">هاتف أخر</label>
            <input type="number" name="phone[]" id="phone_1" value="{{ old('phone.1')}}" class="form-control @error('phone') is-invalid @enderror" >
            @error('phone.1')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-4">
            <label for="address" class="form-label">العنوان</label>
            <input type="text" name="address" id="address" value="{{ old('address')}}" class="form-control @error('address') is-invalid @enderror" >
            @error('address')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-4">
            <label for="qualification" class="form-label">المؤهل</label>
            <input type="text" name="qualification" id="qualification" value="{{old('qualification')}}" class="form-control @error('qualification') is-invalid @enderror @if(old('qualification') && !$errors->has('qualification')) is-valid @endif">
            @error('qualification')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-4">
            <label for="major" class="form-label">التخصص</label>
            <input type="text" name="major" id="major" value="{{old('major')}}" class="form-control @error('major') is-invalid @enderror @if(old('major') && !$errors->has('major')) is-valid @endif">
            @error('major')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="text-center my-3">
            <button type="submit" class="btn btn-success text-center">إضافة</button>
        </div>
    </form>
</div>
@endsection