@extends('layouts.app')

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

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

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

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

                {{-- Diocese --}}
                <div class="mb-3">
                    <label class="form-label">
                        Diocese<span class="text-danger">*</span>
                    </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 (loaded via AJAX) --}}
                <div class="mb-3">
                    <label class="form-label">
                        Pastorate<span class="text-danger">*</span>
                    </label>
                    <select
                        name="pastorate_id"
                        id="pastorate-select"
                        class="form-select"
                        required
                    >
                        <option value="">Select Pastorate…</option>
                    </select>
                </div>

                {{-- Local Church (loaded via AJAX) --}}
                <div class="mb-3">
                    <label class="form-label">
                        Local Church<span class="text-danger">*</span>
                    </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"
                        placeholder="Enter spouse name"
                        value="{{ old('married_to') }}"
                    >
                </div>

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

                {{-- Start Date --}}
                <div class="mb-3">
                    <label class="form-label">
                        Year when Pastorship Started<span class="text-danger">*</span>
                    </label>
                    <input
                        type="date"
                        name="start_date"
                        class="form-control"
                        value="{{ old('start_date') }}"
                        required
                    >
                </div>

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

                {{-- Submit --}}
                <div class="text-end">
                    <button type="submit" class="btn btn-success px-4">
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <!-- CKEditor full toolbar -->
    <script src="https://cdn.ckeditor.com/4.25.1/full/ckeditor.js"></script>
    <script>
        CKEDITOR.replace('biography-editor', {
            height: 200,
            toolbarCanCollapse: true
        });
    </script>

    <!-- jQuery for dynamic selects -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // When Diocese changes, load its Pastorates
        $('#diocese-select').on('change', function () {
            const dioceseId = $(this).val();
            $('#pastorate-select').html('<option>Loading…</option>');
            $('#church-select').html('<option value="">Select Local Church…</option>');

            if (!dioceseId) {
                $('#pastorate-select').html('<option value="">Select Pastorate…</option>');
                return;
            }

            $.get(`/api/dioceses/${dioceseId}/pastorates`, function (data) {
                let opts = '<option value="">Select Pastorate…</option>';
                data.forEach(p => {
                    opts += `<option value="${p.id}">${p.name}</option>`;
                });
                $('#pastorate-select').html(opts);
            });
        });

        // When Pastorate changes, load its Churches
        $('#pastorate-select').on('change', function () {
            const pastorateId = $(this).val();
            $('#church-select').html('<option>Loading…</option>');

            if (!pastorateId) {
                $('#church-select').html('<option value="">Select Local Church…</option>');
                return;
            }

            $.get(`/api/pastorates/${pastorateId}/churches`, function (data) {
                let opts = '<option value="">Select Local Church…</option>';
                data.forEach(c => {
                    opts += `<option value="${c.id}">${c.name}</option>`;
                });
                $('#church-select').html(opts);
            });
        });

        // Optional: re-trigger on page load if old values exist
        $(function(){
            const oldDiocese = "{{ old('diocese_id') }}";
            const oldPastorate = "{{ old('pastorate_id') }}";
            const oldChurch = "{{ old('church_id') }}";

            if (oldDiocese) {
                $('#diocese-select').val(oldDiocese).trigger('change');
                // wait for pastorates to load
                $(document).ajaxComplete(()=> {
                    if (oldPastorate) {
                        $('#pastorate-select').val(oldPastorate).trigger('change');
                    }
                    if (oldChurch) {
                        $('#church-select').val(oldChurch);
                    }
                });
            }
        });
    </script>
@endsection