@extends('layouts.app')

@section('content')
<div class="container py-4 main-content">
    <h4 class="mb-4 fw-bold text-dark">Add Staff Member</h4>

    <div class="card shadow-sm">
        <div class="card-body">
            <form action="{{ route('dioceses.staff.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <h5 class="fw-semibold mb-3">Add Staff</h5>

                {{-- Full Names --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Full Names<span class="text-danger">*</span></label>
                    <input type="text" name="full_name" class="form-control" placeholder="enter fullname" required>
                </div>

                {{-- Diocese --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Diocese<span class="text-danger">*</span></label>
                    <select name="diocese_id" class="form-select" required>
                        <option value="">Select Diocese..</option>
                        @foreach($dioceses as $diocese)
                            <option value="{{ $diocese->id }}">{{ $diocese->name }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- Profile picture --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Profile picture<span class="text-danger">*</span></label>
                    <input type="file" name="photo" class="form-control" required>
                </div>

                {{-- Position --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Position</label>
                    <input type="text" name="position" class="form-control" placeholder="enter Position">
                </div>

                {{-- Email --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Email</label>
                    <input type="email" name="email" class="form-control" placeholder="enter Email">
                </div>

                {{-- Phone --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Phone</label>
                    <input type="text" name="phone" class="form-control" placeholder="enter Phone">
                </div>

                {{-- Gender --}}
                <div class="mb-4">
                    <label class="form-label fw-semibold">Gender</label>
                    <select name="gender" class="form-select">
                        <option value="">select Gender</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select>
                </div>

                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary px-4">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection