{{-- Birth details section – included in create & edit --}}
<h6 class="text-muted text-uppercase mt-4 mb-3 border-bottom pb-2">Birth details</h6>
<div class="row g-3 mb-3">
    <div class="col-md-4">
        <div class="form-check mt-md-4">
            <input class="form-check-input" type="checkbox" name="born_in_farm" id="born_in_farm" value="1"
                   @checked(old('born_in_farm', $bornInFarm ?? false))>
            <label class="form-check-label" for="born_in_farm">Born in farm</label>
        </div>
    </div>
    <div class="col-md-4">
        <label class="form-label" for="born_date">Born date</label>
        <input class="form-control" type="date" name="born_date" id="born_date"
               value="{{ old('born_date', $bornDate ?? '') }}">
    </div>
    <div class="col-md-4">
        <label class="form-label" for="mother_id">Mother</label>
        <select class="form-select" name="mother_id" id="mother_id">
            <option value="">None</option>
        </select>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var categoryEl = document.getElementById('category');
        var motherEl   = document.getElementById('mother_id');
        var mothersUrl = @json(route('animals.mothers'));
        var preselected = @json(old('mother_id', $motherId ?? null));

        function loadMothers(category) {
            motherEl.innerHTML = '<option value="">None</option>';
            if (!category) return;
            fetch(mothersUrl + '?category=' + encodeURIComponent(category), {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                data.forEach(function (m) {
                    var opt = document.createElement('option');
                    opt.value = m.id;
                    opt.textContent = m.tag_no;
                    if (preselected && String(m.id) === String(preselected)) opt.selected = true;
                    motherEl.appendChild(opt);
                });
            });
        }

        categoryEl.addEventListener('change', function () { loadMothers(this.value); });
        if (categoryEl.value) loadMothers(categoryEl.value);
    });
</script>
@endpush