@extends('layouts.app')
@section('title', 'Nouveau Cas')
@section('page-title', 'Ajouter un Cas Clinique')

@section('content')
<div class="row justify-content-center">
<div class="col-lg-9">
<div class="card">
    <div class="card-header"><i class="fas fa-plus-circle me-2 text-primary"></i>Nouveau Cas Clinique</div>
    <div class="card-body">
        <form method="POST" action="{{ route('cases.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Région *</label>
                    <select name="category" class="form-select" required>
                        <option value="">– Sélectionner –</option>
                        @foreach($categories as $c)
                        <option value="{{ $c }}" {{ old('category')==$c?'selected':'' }}>{{ $c }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Modalité *</label>
                    <select name="type" class="form-select" required>
                        <option value="">– Sélectionner –</option>
                        @foreach($types as $t)
                        <option value="{{ $t }}" {{ old('type')==$t?'selected':'' }}>{{ $t }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12">
                    <label class="form-label fw-semibold">Nom du Cas *</label>
                    <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
                </div>
                <div class="col-12">
                    <label class="form-label fw-semibold">Histoire / Information Clinique *</label>
                    <textarea name="clinical_history" class="form-control" rows="4" required>{{ old('clinical_history') }}</textarea>
                </div>
                <div class="col-12">
                    <label class="form-label fw-semibold">Réponse / Interprétation correcte</label>
                    <textarea name="response" class="form-control" rows="4">{{ old('response') }}</textarea>
                    <div class="form-text">Cette réponse sera visible uniquement pour les formateurs lors de la correction.</div>
                </div>

                {{-- Photos --}}
                <div class="col-12">
                    <label class="form-label fw-semibold">Photos</label>
                    <div id="images-container">
                        <div class="row g-2 mb-2 image-row">
                            <div class="col-md-6">
                                <input type="file" name="images[0][file]" class="form-control form-control-sm" accept="image/*">
                            </div>
                            <div class="col-md-5">
                                <input type="text" name="images[0][origin]" class="form-control form-control-sm" placeholder="Origine (ex: HUEH, CHU…)">
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary mt-1" onclick="addImage()">
                        <i class="fas fa-plus me-1"></i>Ajouter une photo
                    </button>
                </div>

                {{-- Liens --}}
                <div class="col-12">
                    <label class="form-label fw-semibold">Liens</label>
                    <div id="links-container">
                        <div class="row g-2 mb-2 link-row">
                            <div class="col-md-7">
                                <input type="url" name="links[0][url]" class="form-control form-control-sm" placeholder="https://…">
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="links[0][origin]" class="form-control form-control-sm" placeholder="Origine">
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary mt-1" onclick="addLink()">
                        <i class="fas fa-plus me-1"></i>Ajouter un lien
                    </button>
                </div>
            </div>
            <hr>
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i>Enregistrer le Cas</button>
                <a href="{{ route('cases.index') }}" class="btn btn-outline-secondary">Annuler</a>
            </div>
        </form>
    </div>
</div>
</div>
</div>

@push('scripts')
<script>
let imgIdx = 1, linkIdx = 1;
function addImage() {
    const c = document.getElementById('images-container');
    c.insertAdjacentHTML('beforeend', `<div class="row g-2 mb-2 image-row">
        <div class="col-md-6"><input type="file" name="images[${imgIdx}][file]" class="form-control form-control-sm" accept="image/*"></div>
        <div class="col-md-5"><input type="text" name="images[${imgIdx}][origin]" class="form-control form-control-sm" placeholder="Origine"></div>
        <div class="col-md-1"><button type="button" class="btn btn-sm btn-outline-danger" onclick="this.closest('.image-row').remove()"><i class="fas fa-times"></i></button></div>
    </div>`);
    imgIdx++;
}
function addLink() {
    const c = document.getElementById('links-container');
    c.insertAdjacentHTML('beforeend', `<div class="row g-2 mb-2 link-row">
        <div class="col-md-7"><input type="url" name="links[${linkIdx}][url]" class="form-control form-control-sm" placeholder="https://…"></div>
        <div class="col-md-4"><input type="text" name="links[${linkIdx}][origin]" class="form-control form-control-sm" placeholder="Origine"></div>
        <div class="col-md-1"><button type="button" class="btn btn-sm btn-outline-danger" onclick="this.closest('.link-row').remove()"><i class="fas fa-times"></i></button></div>
    </div>`);
    linkIdx++;
}
</script>
@endpush
@endsection