@extends('layouts.app')

@section('content')
<div class="container-login">
    <h2>Modifier la réalisation</h2>

    <form action="{{ route('realisations.update', $realisation->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        {{-- 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" value="{{ old('nom', $realisation->nom) }}" 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>{{ old('description', $realisation->description) }}</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" value="{{ old('annee', $realisation->annee) }}" 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" value="{{ old('theme', $realisation->theme) }}">
        </div>

        {{-- Lien --}}
        <div class="mb-3">
            <label for="lien" class="form-label">Lien :</label>
            <input type="url" id="lien" name="lien" class="form-control" value="{{ old('lien', $realisation->lien) }}">
        </div>

        {{-- Langages --}}
        <div class="mb-3">
            <label class="form-label">Langages :</label>
            <div id="langages-container">
                @foreach($realisation->langages as $langage)
                <div id="langage-{{ $langage->id }}" class="d-flex align-items-center mb-2">
                    <input type="text" name="langages[]" class="form-control me-2" value="{{ $langage->langage }}">
                    <button type="button" class="btn btn-danger btn-sm" onclick="supprimerElement({{ $langage->id }}, 'langage')">X</button>
                </div>
                @endforeach
            </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">
                @foreach($realisation->competences as $competence)
                <div id="competence-{{ $competence->id }}" class="d-flex align-items-center mb-2">
                    <input type="text" name="competences[]" class="form-control me-2" value="{{ $competence->competence }}">
                    <button type="button" class="btn btn-danger btn-sm" onclick="supprimerElement({{ $competence->id }}, 'competence')">X</button>
                </div>
                @endforeach
            </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">
                @foreach($realisation->types as $type)
                <div id="type-{{ $type->id }}" class="d-flex align-items-center mb-2">
                    <input type="text" name="types[]" class="form-control me-2" value="{{ $type->type }}">
                    <button type="button" class="btn btn-danger btn-sm" onclick="supprimerElement({{ $type->id }}, 'type')">X</button>
                </div>
                @endforeach
            </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">
                @foreach($realisation->apprentissages as $apprentissage)
                    <div id="apprentissage-{{ $apprentissage->id }}" class="d-flex align-items-center mb-2">
                        <input type="text" name="apprentissages[]" class="form-control me-2" value="{{ $apprentissage->nom }}">
                        <button type="button" class="btn btn-danger btn-sm" onclick="supprimerElement({{ $apprentissage->id }}, 'apprentissage')">X</button>
                    </div>
                @endforeach
            </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>
            @if($realisation->pdfs && $realisation->pdfs->count() > 0)
                <p><a href="{{ asset('pdfs/' . $realisation->pdfs->first()->lien) }}" target="_blank">Télécharger le PDF</a></p>
            @else
                <p>Aucun fichier PDF pour cette réalisation.</p>
            @endif
        </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 class="mt-2">
                @foreach($realisation->photos as $photo)
                    <div class="d-inline-block position-relative photo-container" data-photo-id="{{ $photo->id }}">
                        <img src="{{ asset('images/' . $photo->lien) }}" alt="Photo" class="img-thumbnail" width="100">
                        
                        <button type="button" class="btn btn-danger btn-sm delete-photo" data-photo-id="{{ $photo->id }}" style="position: absolute; top: 0; right: 0;">
                            Supprimer
                        </button>
                        
                       
                    </div>
                @endforeach
            </div>
        </div>

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

        {{-- Bouton de soumission --}}
        <button type="submit" class="btn btn-primary">Modifier</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);
}

document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".delete-photo").forEach(button => {
        button.addEventListener("click", function () {
            let photoId = this.getAttribute("data-photo-id");
            let photoContainer = document.querySelector(`.photo-container[data-photo-id="${photoId}"]`);

            if (confirm("Voulez-vous vraiment supprimer cette photo ?")) {
                fetch(`/realisations/deletePhoto/${photoId}`, {
                    method: "DELETE",
                    headers: {
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content"),
                        "Content-Type": "application/json"
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        photoContainer.remove();
                    } else {
                        alert("Erreur lors de la suppression de la photo.");
                    }
                })
                .catch(error => console.error("Erreur :", error));
            }
        });
    });
});

function supprimerElement(id, type) {
    if (!id || !type) {
        console.error("ID ou Type invalide !");
        return;
    }

    fetch(`/realisations/delete/${type}/${id}`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Erreur lors de la suppression');
        }
        return response.json();
    })
    .then(data => {
        console.log(`${type} supprimé avec succès`, data);
        const element = document.getElementById(`${type}-${id}`);
        if (element) {
            element.remove();
        }
    })
    .catch(error => console.error('Erreur:', error));
}


</script>

@endsection