@extends('layouts.app')

@section('content')
 <!-- Message de session -->
 @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
<div class="container-login">
    <h2>Ajouter une réalisation</h2>

    <form action="{{ route('realisations.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        {{-- Nom de la réalisation --}}
        <div class="mb-3">
            <label for="nom" class="form-label">Nom :</label>
            <input type="text" id="nom" name="nom" class="form-control" required>
        </div>

        {{-- Description --}}
        <div class="mb-3">
            <label for="description" class="form-label">Description :</label>
            <textarea id="description" rows="10" name="description" class="form-control" required></textarea>
        </div>

        {{-- Année --}}
        <div class="mb-3">
            <label for="annee" class="form-label">Année :</label>
            <input type="number" id="annee" name="annee" class="form-control" required>
        </div>

        {{-- Thème --}}
        <div class="mb-3">
            <label for="theme" class="form-label">Thème :</label>
            <input type="text" id="theme" name="theme" class="form-control">
        </div>

        {{-- Lien --}}
        <div class="mb-3">
            <label for="lien" class="form-label">Lien :</label>
            <input type="url" id="lien" name="lien" class="form-control">
        </div>

        {{-- Langages --}}
        <div class="mb-3">
            <label class="form-label">Langages :</label>
            <div id="langages-container">
                <input type="text" name="langages[]" class="form-control mb-2" placeholder="Langage (ex: PHP)" value="">
            </div>
            <button type="button" class="btn btn-secondary" onclick="ajouterChamp('langages-container', 'langages[]')">+ Ajouter un langage</button>
        </div>

        {{-- Compétences --}}
        <div class="mb-3">
            <label class="form-label">Compétences :</label>
            <div id="competences-container">
                <input type="text" name="competences[]" class="form-control mb-2" placeholder="Compétence (ex: Laravel)" value="">
            </div>
            <button type="button" class="btn btn-secondary" onclick="ajouterChamp('competences-container', 'competences[]')">+ Ajouter une compétence</button>
        </div>

        {{-- Types --}}
        <div class="mb-3">
            <label class="form-label">Types :</label>
            <div id="types-container">
                <input type="text" name="types[]" class="form-control mb-2" placeholder="Type (ex: Web, Mobile)" value="">
            </div>
            <button type="button" class="btn btn-secondary" onclick="ajouterChamp('types-container', 'types[]')">+ Ajouter un type</button>
        </div>

        <div class="mb-3">
            <label class="form-label">Apprentissages Critiques :</label>
            <div id="apprentissages-container">
                <input type="text" name="apprentissages[]" class="form-control mb-2" placeholder="Apprentissages critiques" value="">
            </div>
            <button type="button" class="btn btn-secondary" onclick="ajouterChamp('apprentissages-container', 'apprentissages[]')">+ Ajouter un apprentissages</button>
        </div>

        {{-- PDF --}}
        <div class="mb-3">
            <label for="pdfs" class="form-label">Fichiers PDF :</label>
            <input type="file" id="pdfs" name="pdf" class="form-control" multiple>
        </div>

        {{-- Photos --}}
        <div class="mb-3">
            <label for="photos" class="form-label">Photos :</label>
            <input type="file" id="photos" name="photos[]" class="form-control" multiple>
        </div>

        {{-- Pro ou academique --}}
        <div class="mb-3">
            <label for="pro" class="form-label">Projet :</label>
            <select id="pro" name="pro" class="form-control" required>
                <option value="0">Académique</option>
                <option value="1">Professionnel</option>
                <option value="2">Les deux</option>
            </select>
        </div>

        {{-- Bouton de soumission --}}
        <button type="submit" class="btn btn-primary">Enregistrer</button>
    </form>
</div>

<script>
function ajouterChamp(containerId, inputName) {
    let container = document.getElementById(containerId);
    let input = document.createElement("input");
    input.type = "text";
    input.name = inputName;
    input.classList.add("form-control", "mb-2");
    input.placeholder = "Ajouter...";
    container.appendChild(input);
}
</script>

@endsection