@extends('layouts.app')

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

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

                {{-- Form Title --}}
                <h5 class="fw-semibold mb-3">Add Bishop</h5>

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

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

                {{-- Diocese Dropdown --}}
                <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>

                {{-- Status --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Status <span class="text-danger">*</span></label>
                    <select name="status" class="form-select" required>
                        <option value="">Select Status...</option>
                        <option value="active">Active</option>
                        <option value="retired">Retired</option>
                        <option value="passed_away">Passed Away</option>
                    </select>
                </div>

                {{-- Date of Birth --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Date of Birth <span class="text-danger">*</span></label>
                    <input type="date" name="dob" class="form-control" required>
                </div>

                {{-- Married To --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Married To</label>
                    <input type="text" name="married_to" class="form-control" placeholder="Enter spouse’s name">
                </div>

                {{-- Year Joined Diocese --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Year Joined Diocese</label>
                    <input type="number" name="joined_year" class="form-control" placeholder="Enter year (e.g. 2020)" min="1900" max="{{ date('Y') }}">
                </div>

                {{-- Biography --}}
                <div class="mb-4">
                    <label class="form-label fw-semibold">Biography</label>
                    <textarea name="biography" class="form-control" rows="6" placeholder="Enter biography"></textarea>
                </div>

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