@props(['parents' => [], 'selected' => null])

<div x-data="{ open: false }" id="parent-picker">
    <div class="flex items-center justify-between">
        <label class="block text-sm font-medium text-gray-700">Parent/Guardian *</label>
        <button type="button" onclick="document.getElementById('addParentModal').classList.remove('hidden')" class="text-xs font-semibold text-primary-600 hover:text-primary-700">+ Add New Parent</button>
    </div>

    <input type="text" id="parent-search" placeholder="Type to search parent by name, phone or email..." autocomplete="off"
           class="mt-1 block w-full rounded-t-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">

    <select name="parent_id" id="parent-select" size="6" required
            class="block w-full rounded-b-lg border border-t-0 border-gray-300 px-3 py-1 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 bg-white">
        @foreach($parents as $parent)
            <option value="{{ $parent->id }}" {{ (string) $selected === (string) $parent->id ? 'selected' : '' }}
                    data-label="{{ strtolower($parent->full_name . ' ' . ($parent->phone ?? '') . ' ' . ($parent->email ?? '')) }}">
                {{ $parent->full_name }}{{ $parent->relationship ? ' (' . ucfirst($parent->relationship) . ')' : '' }}{{ $parent->phone ? ' — ' . $parent->phone : '' }}
            </option>
        @endforeach
    </select>

    @error('parent_id')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
    <p class="mt-1 text-xs text-gray-400">{{ count($parents) }} registered parent(s) available. Click an entry to select.</p>
</div>

{{-- Add New Parent Modal --}}
<div id="addParentModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
    <div class="w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-xl bg-white p-6 shadow-xl">
        <h3 class="mb-4 text-lg font-bold text-gray-900">Register New Parent/Guardian</h3>
        <p class="mb-4 text-xs text-gray-500">The new parent will be saved immediately and selected for this student.</p>

        <div id="add-parent-error" class="mb-3 hidden rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700"></div>

        <form id="add-parent-form" method="POST" action="{{ route('school.parents.store', request()->route('schoolId')) }}">
            @csrf
            <input type="hidden" name="_json_mode" value="1">
            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-gray-700">First Name *</label>
                    <input type="text" name="first_name" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Last Name *</label>
                    <input type="text" name="last_name" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Relationship to Student *</label>
                    <select name="relationship" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        <option value="father">Father</option>
                        <option value="mother">Mother</option>
                        <option value="guardian">Guardian</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Phone Number</label>
                    <input type="text" name="phone" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Email Address</label>
                    <input type="email" name="email" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Occupation</label>
                    <input type="text" name="occupation" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700">Residential Address</label>
                    <input type="text" name="address" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">City</label>
                    <input type="text" name="city" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">State</label>
                    <input type="text" name="state" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700">Other Information</label>
                    <textarea name="notes" rows="2" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></textarea>
                </div>
            </div>

            <div class="mt-5 flex items-center justify-end gap-3">
                <button type="button" onclick="document.getElementById('addParentModal').classList.add('hidden')"
                        class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
                <button type="submit" id="add-parent-submit"
                        class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Save Parent & Select</button>
            </div>
        </form>
    </div>
</div>

<script>
(function () {
    var search = document.getElementById('parent-search');
    var select = document.getElementById('parent-select');
    var form = document.getElementById('add-parent-form');
    if (!select) return;

    search.addEventListener('input', function () {
        var q = this.value.toLowerCase().trim();
        Array.from(select.options).forEach(function (opt) {
            opt.hidden = q !== '' && !(opt.dataset.label || '').includes(q);
        });
    });

    form.addEventListener('submit', function (e) {
        e.preventDefault();
        var errBox = document.getElementById('add-parent-error');
        var submit = document.getElementById('add-parent-submit');
        errBox.classList.add('hidden');
        submit.disabled = true;
        submit.textContent = 'Saving...';

        fetch(form.action, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content || ''
            },
            body: JSON.stringify(Object.fromEntries(new FormData(form).entries()))
        }).then(function (res) {
            return res.json().then(function (data) { return { ok: res.ok, data: data }; });
        }).then(function (_a) {
            var ok = _a.ok;
            var data = _a.data;
            submit.disabled = false;
            submit.textContent = 'Save Parent & Select';
            if (!ok) {
                var msg = Object.values(data.errors || {}).flat().join(' ') || (data.message || 'Could not save parent.');
                errBox.textContent = msg;
                errBox.classList.remove('hidden');
                return;
            }
            var opt = document.createElement('option');
            opt.value = data.parent.id;
            opt.textContent = data.parent.text + ' (new)';
            opt.selected = true;
            select.appendChild(opt);
            document.getElementById('addParentModal').classList.add('hidden');
            form.reset();
        }).catch(function () {
            submit.disabled = false;
            submit.textContent = 'Save Parent & Select';
            errBox.textContent = 'Network error. Please try again.';
            errBox.classList.remove('hidden');
        });
    });
})();
</script>