@extends('layouts.app')

@section('content')
<div class="container py-4">
    <h4 class="mb-4">Add New Leader</h4>

    {{-- Validation Errors --}}
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul class="mb-0">
          @foreach ($errors->all() as $e)
            <li>{{ $e }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <form action="{{ route('leaders.department.storeDepartmentLeader') }}"
          method="POST"
          enctype="multipart/form-data">
        @csrf

        {{-- Full Name --}}
        <div class="mb-3">
            <label class="form-label">Full Names*</label>
            <input type="text"
                   name="full_name"
                   class="form-control"
                   value="{{ old('full_name') }}"
                   required>
        </div>

        {{-- Profile Picture --}}
        <div class="mb-3">
            <label class="form-label">Profile Picture</label>
            <input type="file" name="photo" class="form-control">
        </div>

        {{-- CV Upload --}}
        <div class="mb-3">
            <label class="form-label">Upload CV (.pdf, .doc, .docx)</label>
            <input type="file" name="cv" class="form-control">
        </div>

        {{-- Department --}}
        <div class="mb-3">
            <label class="form-label">Department*</label>
            <select name="department_id" class="form-select" required>
                <option value="">Select Department...</option>
                @foreach($departments as $d)
                    <option value="{{ $d->id }}"
                        {{ old('department_id')==$d->id?'selected':'' }}>
                        {{ $d->name }}
                    </option>
                @endforeach
            </select>
        </div>

        {{-- Position --}}
        <div class="mb-3">
            <label class="form-label">Position*</label>
            <input type="text"
                   name="position"
                   class="form-control"
                   value="{{ old('position') }}"
                   required>
        </div>

        {{-- Is Director? --}}
        <div class="form-check mb-3">
            <input class="form-check-input"
                   type="checkbox"
                   name="is_director"
                   id="directorCheck"
                   {{ old('is_director')?'checked':'' }}>
            <label class="form-check-label" for="directorCheck">
                Is Department Leader Director?
            </label>
        </div>

        {{-- Diocese --}}
        <div class="mb-3">
            <label class="form-label">Diocese*</label>
            <select name="diocese_id"
                    id="diocese-select"
                    class="form-select"
                    required>
                <option value="">Select Diocese...</option>
                @foreach($dioceses as $dio)
                    <option value="{{ $dio->id }}"
                        {{ old('diocese_id')==$dio->id?'selected':'' }}>
                        {{ $dio->name }}
                    </option>
                @endforeach
            </select>
        </div>

        {{-- Pastorate (AJAX loaded) --}}
        <div class="mb-3">
            <label class="form-label">Pastorate*</label>
            <select name="pastorate_id"
                    id="pastorate-select"
                    class="form-select"
                    required>
                <option value="">Select Pastorate...</option>
            </select>
        </div>

        {{-- Local Church (AJAX loaded) --}}
        <div class="mb-3">
            <label class="form-label">Local Church*</label>
            <select name="church_id"
                    id="church-select"
                    class="form-select"
                    required>
                <option value="">Select Local Church...</option>
            </select>
        </div>

        {{-- Married To --}}
        <div class="mb-3">
            <label class="form-label">Married To</label>
            <input type="text"
                   name="married_to"
                   class="form-control"
                   value="{{ old('married_to') }}">
        </div>

        {{-- Date of Birth --}}
        <div class="mb-3">
            <label class="form-label">Date of Birth*</label>
            <input type="date"
                   name="dob"
                   class="form-control"
                   value="{{ old('dob') }}"
                   required>
        </div>

        {{-- Start Year --}}
        <div class="mb-3">
            <label class="form-label">Year When Leadership Started*</label>
            <input type="number"
                   name="start_year"
                   class="form-control"
                   value="{{ old('start_year') }}"
                   min="1900"
                   max="{{ now()->year }}"
                   required>
        </div>

        {{-- Biography --}}
        <div class="mb-3">
            <label class="form-label">Biography</label>
            <textarea name="biography"
                      id="bio-editor"
                      class="form-control"
                      rows="6">{{ old('biography') }}</textarea>
        </div>

        {{-- Submit / Cancel --}}
        <button type="submit" class="btn btn-success">Add Leader</button>
        <a href="{{ route('leaders.department.index') }}"
           class="btn btn-secondary ms-2">Cancel</a>
    </form>
</div>

{{-- CKEditor (4.25.1 LTS) --}}
<script src="https://cdn.ckeditor.com/4.25.1-lts/standard/ckeditor.js"></script>
<script>CKEDITOR.replace('bio-editor');</script>

{{-- jQuery (for AJAX) --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // When Diocese changes, fetch its Pastorates
    $('#diocese-select').on('change', function () {
        const id = $(this).val();
        $('#pastorate-select').html('<option>Loading...</option>');
        $('#church-select').html('<option>Select Local Church...</option>');
        if (!id) {
            return $('#pastorate-select').html('<option>Select Pastorate...</option>');
        }
        $.get(`/api/dioceses/${id}/pastorates`, data => {
            let html = '<option value="">Select Pastorate...</option>';
            data.forEach(p => html += `<option value="${p.id}">${p.name}</option>`);
            $('#pastorate-select').html(html);
        });
    });

    // When Pastorate changes, fetch its Churches
    $('#pastorate-select').on('change', function () {
        const id = $(this).val();
        $('#church-select').html('<option>Loading...</option>');
        if (!id) {
            return $('#church-select').html('<option>Select Local Church...</option>');
        }
        $.get(`/api/pastorates/${id}/churches`, data => {
            let html = '<option value="">Select Local Church...</option>';
            data.forEach(c => html += `<option value="${c.id}">${c.name}</option>`);
            $('#church-select').html(html);
        });
    });
</script>
@endsection