@extends('layouts.app')
@section('title', 'Nouvelle demande - '.$typeLabel)
@section('content')
<a href="{{ route('partner.requests.index', $type) }}" class="mb-3 d-inline-block">&laquo; Retour</a>
<h3 class="mb-4">{{ $typeLabel }}</h3>

<div class="card p-4" style="max-width:700px;">
    <form method="POST" action="{{ route('partner.requests.store', $type) }}" enctype="multipart/form-data">
        @csrf

        @if($type === 'prelevement')
            <div class="mb-3">
                <label class="form-label">Nombre estimé d'échantillons
                    @include('partials.info-icon', ['text' => "Indiquez le nombre approximatif de tubes/échantillons à collecter. Le agent de collecte confirmera le chiffre exact sur place au moment du ramassage."])
                </label>
                <input type="number" id="estimatedQuantity" name="estimated_quantity" class="form-control form-control-lg" min="1" required inputmode="numeric">
            </div>
            <div class="mb-3">
                <label class="form-label">Créneau souhaité
                    @include('partials.info-icon', ['text' => "Le moment où le agent de collecte peut passer. Exemple : \"aujourd'hui 14h-16h\" ou \"demain matin\"."])
                </label>
                <input type="text" name="requested_slot" class="form-control form-control-lg" placeholder="Ex : aujourd'hui 14h-16h" required>
            </div>

            <div class="mb-3" id="patientsSection" style="display:none;">
                <label class="form-label mb-1">Nom et prénom de chaque patient
                    <span class="badge bg-info text-dark">Recommandé</span>
                    @include('partials.info-icon', ['text' => "Optionnel mais fortement recommandé : indiquer le nom de chaque patient facilite grandement le travail du agent de collecte et du laboratoire, notamment en cas d'écart à vérifier. Vous pouvez laisser des lignes vides si vous ne connaissez pas encore tous les noms."])
                </label>
                <p class="small text-muted mb-2">Non obligatoire — la demande peut être envoyée même incomplète. Mais plus vous en renseignez, plus vite tout sera identifié en cas de besoin.</p>
                <div id="patientsRows"></div>
            </div>

            <div class="mb-3">
                <label class="form-label">Notes <span class="text-muted small">(optionnel)</span>
                    @include('partials.info-icon', ['text' => "Toute information utile à l'agent de collecte : étage, contact sur place, accès particulier..."])
                </label>
                <textarea name="notes" class="form-control" rows="3"></textarea>
            </div>

        @elseif($type === 'consommable')
            <div class="mb-3">
                <label class="form-label">Consommable souhaité
                    @include('partials.info-icon', ['text' => "Le nom précis du matériel dont vous avez besoin, par exemple : tubes EDTA, sachets, étiquettes."])
                </label>
                <input type="text" name="consumable_name" class="form-control form-control-lg" placeholder="Ex : tubes EDTA, sachets, étiquettes..." required>
            </div>
            <div class="mb-3">
                <label class="form-label">Quantité
                    @include('partials.info-icon', ['text' => "Le nombre d'unités souhaitées."])
                </label>
                <input type="number" name="estimated_quantity" class="form-control form-control-lg" min="1" required inputmode="numeric">
            </div>
            <div class="mb-3">
                <label class="form-label">Notes <span class="text-muted small">(optionnel)</span></label>
                <textarea name="notes" class="form-control" rows="3"></textarea>
            </div>

        @elseif($type === 'reclamation')
            <div class="mb-3">
                <label class="form-label">Catégorie
                    @include('partials.info-icon', ['text' => "Choisissez la catégorie qui correspond le mieux au problème rencontré."])
                </label>
                <select name="category" class="form-select form-select-lg" required>
                    <option value="retard">Retard</option>
                    <option value="perte">Perte</option>
                    <option value="casse">Casse</option>
                    <option value="erreur_etiquetage">Erreur d'étiquetage</option>
                    <option value="autre">Autre</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Description
                    @include('partials.info-icon', ['text' => "Décrivez le problème le plus précisément possible : date, personne concernée, ce qui s'est passé."])
                </label>
                <textarea name="description" class="form-control" rows="4" required></textarea>
            </div>

        @elseif($type === 'resultat')
            <div class="mb-3">
                <label class="form-label">Référence patient / dossier
                    @include('partials.info-icon', ['text' => "Le numéro de dossier ou nom/référence du patient concerné par la demande de résultats."])
                </label>
                <input type="text" name="patient_reference" class="form-control form-control-lg" required>
            </div>
            <div class="mb-3">
                <label class="form-label">Notes <span class="text-muted small">(optionnel)</span></label>
                <textarea name="notes" class="form-control" rows="3"></textarea>
            </div>
        @endif

        <div class="mb-4">
            <label class="form-label">Urgence
                @include('partials.info-icon', ['text' => "\"Urgent\" signale la demande en priorité à l'agent de collecte. À réserver aux cas qui ne peuvent pas attendre le passage habituel."])
            </label>
            <select name="urgency" class="form-select form-select-lg" required>
                <option value="normal">Normal</option>
                <option value="urgent">Urgent</option>
            </select>
        </div>

        <button class="btn btn-primary btn-lg w-100">Envoyer la demande</button>
    </form>
</div>

@if($type === 'prelevement')
<script>
    const qtyInput = document.getElementById('estimatedQuantity');
    const patientsSection = document.getElementById('patientsSection');
    const patientsRows = document.getElementById('patientsRows');

    function renderPatientRows(count) {
        count = Math.min(parseInt(count) || 0, 100); // securite anti-abus
        patientsRows.innerHTML = '';
        if (count <= 0) {
            patientsSection.style.display = 'none';
            return;
        }
        patientsSection.style.display = 'block';
        for (let i = 0; i < count; i++) {
            const row = document.createElement('div');
            row.className = 'row g-2 mb-2';
            row.innerHTML = `
                <div class="col-6">
                    <input type="text" name="patients[${i}][nom]" class="form-control" placeholder="Nom — échantillon ${i + 1}">
                </div>
                <div class="col-6">
                    <input type="text" name="patients[${i}][prenom]" class="form-control" placeholder="Prénom — échantillon ${i + 1}">
                </div>
            `;
            patientsRows.appendChild(row);
        }
    }

    qtyInput.addEventListener('input', function () {
        renderPatientRows(this.value);
    });
</script>
@endif
@endsection