{# templates/admin/projet/new.html.twig #}
{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Nouveau Projet - {% endblock %}

{% block content %}
<div class="container-fluid">
   <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3 class="page-header page-header-top mb-1">Créer un nouveau projet</h3>
        
    </div>
    <div class="d-flex gap-2">
        <a href="{{ path('app_admin_projet_index') }}" class="btn btn-light border shadow-sm show-loader">
            <i class="fas fa-arrow-left me-2 text-secondary"></i>Annuler
        </a>
    </div>
</div>

    <div class="row">
        <div class="col-lg-9">
            <div class="card border-0 shadow-sm p-4">
                <div class="alert alert-info py-2 small mb-4">
                    <i class="fas fa-info-circle me-2"></i>
                    Remplissez les informations ci-dessous. Les champs marqués d'une étoile (*) sont obligatoires.
                </div>

                {# On entoure l'inclusion par une div pour cibler le formulaire si besoin #}
                <div class="project-form-container">
                    {{ include('admin/projet/_form.html.twig') }}
                </div>
            </div>
        </div>

        <div class="col-lg-3">
            <div class="card border-0 bg-light p-3 shadow-sm sticky-top" style="top: 20px;">
                <h6 class="fw-bold"><i class="fas fa-lightbulb text-warning me-2"></i>Conseils</h6>
                <p class="small text-muted mb-3">
                    Pour un projet de <strong>Promotion</strong>, n'oubliez pas de saisir l'agrément ministériel pour rassurer vos futurs acquéreurs.
                </p>
                <div class="d-grid border-top pt-3">
                    <p class="small fw-bold mb-1">Aide à la saisie :</p>
                    <ul class="list-unstyled small text-muted">
                        <li><i class="fas fa-check text-success me-1"></i> Images : JPG/PNG</li>
                        <li><i class="fas fa-check text-success me-1"></i> Poids max : 2 Mo</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        (function () {
            'use strict'

            // Récupérer tous les formulaires auxquels nous voulons appliquer des styles de validation Bootstrap personnalisés
            var forms = document.querySelectorAll('.needs-validation')

            // Boucle sur eux et empêche la soumission
            Array.prototype.slice.call(forms)
                .forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                            
                            // Optionnel : Scroller vers le premier champ en erreur
                            const firstError = form.querySelector(':invalid');
                            if (firstError) {
                                firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            }
                        }

                        form.classList.add('was-validated')
                    }, false)
                })
        })()
    </script>
{% endblock %}