{{-- Modal Nouveau Lot
    Les espèces sont chargées via AJAX (GET species.index avec Accept: application/json)
    Bouton déclencheur : data-bs-target="#qaModalLot" data-target-select="<id_du_select>"
--}}
<div class="modal fade" id="qaModalLot" tabindex="-1" aria-labelledby="qaModalLotLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="qaModalLotLabel"><i class="bi bi-plus-circle me-1"></i>Nouveau lot</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="qaLotErrors" class="alert alert-danger d-none"></div>
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Espèce <span class="text-danger">*</span></label>
                        <select class="form-select" id="qaLotSpeciesId">
                            <option value="">Chargement...</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Origine <span class="text-danger">*</span></label>
                        <select class="form-select" id="qaLotOrigin">
                            <option value="">-- Selectionner --</option>
                            <option value="naissance">Naissance</option>
                            <option value="achat">Achat</option>
                            <option value="transfert">Transfert</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Destination <span class="text-danger">*</span></label>
                        <select class="form-select" id="qaLotPurpose">
                            <option value="">-- Selectionner --</option>
                            <option value="ponte">Ponte</option>
                            <option value="chair">Chair</option>
                            <option value="reproduction">Reproduction</option>
                            <option value="mixte">Mixte</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Quantité initiale <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="qaLotQty" min="1" placeholder="Ex: 100">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Date d'arrivée <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" id="qaLotDate" value="{{ date('Y-m-d') }}">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-success" id="qaLotSave">
                    <i class="bi bi-plus-lg"></i> Ajouter
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    const modal = document.getElementById('qaModalLot');
    if (!modal) return;

    let speciesLoaded = false;

    modal.addEventListener('show.bs.modal', async (e) => {
        modal.dataset.targetSelect = e.relatedTarget?.dataset?.targetSelect || '';
        document.getElementById('qaLotErrors').classList.add('d-none');

        if (!speciesLoaded) {
            const sel = document.getElementById('qaLotSpeciesId');
            sel.innerHTML = '<option value="">Chargement...</option>';
            try {
                const r = await fetch('{{ route('species.index') }}', {
                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': qaUtils.csrf }
                });
                const list = await r.json();
                sel.innerHTML = '<option value="">-- Selectionner --</option>';
                list.forEach(s => sel.add(new Option(s.name, s.id)));
                speciesLoaded = true;
            } catch (err) {
                sel.innerHTML = '<option value="">Erreur de chargement</option>';
            }
        }
    });

    // Quand une nouvelle espèce est ajoutée sur la même page
    document.addEventListener('quickadd:species', (e) => {
        qaUtils.addOption('qaLotSpeciesId', e.detail.id, e.detail.name);
    });

    document.getElementById('qaLotSave').addEventListener('click', async () => {
        document.getElementById('qaLotErrors').classList.add('d-none');
        const { ok, data } = await qaUtils.post('{{ route('lots.store') }}', {
            species_id: document.getElementById('qaLotSpeciesId').value,
            origin: document.getElementById('qaLotOrigin').value,
            purpose: document.getElementById('qaLotPurpose').value,
            initial_quantity: document.getElementById('qaLotQty').value,
            arrival_date: document.getElementById('qaLotDate').value,
        });
        if (!ok) { qaUtils.showErrors('qaLotErrors', data.errors ?? {}); return; }

        // Ajouter à tous les selects de lot marqués data-qa-type="lot"
        document.querySelectorAll('[data-qa-type="lot"]').forEach(sel => {
            qaUtils.addOption(sel, data.id, data.name);
        });
        // Et au select cible s'il n'est pas marqué
        const targetSel = document.getElementById(modal.dataset.targetSelect);
        if (targetSel && !targetSel.dataset.qaType) {
            qaUtils.addOption(targetSel, data.id, data.name);
        }
        document.dispatchEvent(new CustomEvent('quickadd:lot', { detail: data }));

        document.getElementById('qaLotSpeciesId').value = '';
        document.getElementById('qaLotOrigin').value = '';
        document.getElementById('qaLotPurpose').value = '';
        document.getElementById('qaLotQty').value = '';
        document.getElementById('qaLotDate').value = '{{ date('Y-m-d') }}';
        bootstrap.Modal.getInstance(modal).hide();
    });
})();
</script>
@endpush