map-generator/app/Views/projects/new.php

<?php
/**
 * Vue de création d'un nouveau projet
 */
include __DIR__ . '/../partials/header.php';
?>

<main class="main-content">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-xl-6">
                <!-- En-tête de la page -->
                <div class="d-flex align-items-center mb-4">
                    <div>
                        <h1 class="h3 mb-0">
                            <i class="bi bi-plus-circle me-2"></i>Nouveau projet
                        </h1>
                        <p class="text-muted mb-0">Créez une nouvelle carte personnalisée</p>
                    </div>
                </div>

                <!-- Formulaire de création -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-pencil-square me-2"></i>Configuration du projet
                        </h5>
                    </div>
                    <div class="card-body">
                        <form id="newProjectForm" action="/projects/create" method="POST">
                            <!-- Nom de la carte -->
                            <div class="mb-3">
                                <label for="mapName" class="form-label">
                                    <i class="bi bi-tag me-1"></i>Nom de la carte <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" id="mapName" name="name" required
                                       placeholder="Ex: Ma belle carte" maxlength="100">
                                <div class="form-text">Choisissez un nom descriptif pour votre carte</div>
                            </div>

                            <!-- Taille de la carte (en cases, orientation hexagonale) -->
                            <div class="mb-3">
                                <label class="form-label">
                                    <i class="bi bi-grid-3x3 me-1"></i>Taille de la carte (en cases) <span class="text-danger">*</span>
                                </label>

                                <!-- Presets hexagonaux (rayons 1..12) uniquement -->

                                <!-- Presets hexagonaux -->
                                <div id="hexPresets" class="mb-2">
                                    <label for="hexRadius" class="form-label small">Choisir une taille hexagonale</label>
                                    <select id="hexRadius" class="form-select" aria-label="Préréglages hexagonaux">
                                        <?php
                                        // Générer dynamiquement les presets rayon 1..15
                                        for ($r = 1; $r <= 15; $r++) {
                                            $count = 1 + 3 * $r * ($r + 1);
                                            $sel = $r === 2 ? ' selected' : '';
                                            // Affichage inversé : 'Rayon N (X cases)'
                                            echo "<option value=\"{$r}\"{$sel}>Rayon {$r} ({$count} cases)</option>\n";
                                        }
                                        ?>
                                    </select>
                                    <div id="hexInfo" class="form-text">Ex: 19 cases pour rayon 2. Les presets utilisent la formule 1 + 3R(R+1).</div>
                                </div>

                                <!-- Aperçu visuel simple -->
                                <div id="hexPreviewContainer" class="mb-3" aria-hidden="false">
                                    <label class="form-label small">Aperçu</label>
                                    <div id="hexPreview" style="width:100%;height:160px;border:1px solid #e9ecef;background:#fafafa;display:flex;align-items:center;justify-content:center;">
                                        <!-- SVG dessiné par JS -->
                                    </div>
                                </div>

                                <!-- Valeurs cachées synchronisées pour compatibilité backend -->
                                <input type="hidden" id="radiusInput" name="radius" value="2">
                            </div>

                            <!-- Description -->
                            <div class="mb-3">
                                <label for="mapDescription" class="form-label">
                                    <i class="bi bi-textarea me-1"></i>Description
                                </label>
                                <textarea class="form-control" id="mapDescription" name="description" rows="3"
                                          placeholder="Décrivez votre carte (optionnel)" maxlength="500"></textarea>
                                <div class="form-text">Ajoutez une description pour vous souvenir du but de cette carte</div>
                            </div>

                            <!-- Modèles -->
                            <div class="mb-4">
                                <label for="mapTemplate" class="form-label">
                                    <i class="bi bi-palette me-1"></i>Modèle de départ <span class="text-danger">*</span>
                                </label>
                                <select class="form-select" id="mapTemplate" name="template" required>
                                    <option value="" disabled selected>Choisissez un modèle</option>
                                    <option value="desert">🏜️ Paysage désertique</option>
                                    <option value="coastal">🏖️ Paysage littoral</option>
                                    <option value="mountain">🏔️ Paysage de montagne</option>
                                    <option value="rural">🌾 Paysage rural</option>
                                    <option value="urban">🏙️ Paysage urbain</option>
                                </select>
                                <div class="form-text">Le modèle définit l'apparence de base de votre carte</div>
                            </div>

                            <!-- Aperçu du modèle sélectionné -->
                            <div id="templatePreview" class="mb-4" style="display: none;">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <div id="templateImage" class="mb-2">
                                            <!-- L'image du modèle sera chargée ici via JavaScript -->
                                        </div>
                                        <h6 id="templateTitle"></h6>
                                        <p id="templateDescription" class="text-muted small mb-0"></p>
                                    </div>
                                </div>
                            </div>

                            <!-- Boutons d'action -->
                            <div class="d-flex gap-2 justify-content-end">
                                <a href="/" class="btn btn-outline-secondary">
                                    <i class="bi bi-x-circle me-1"></i>Annuler
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check-circle me-1"></i>Créer le projet
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Informations supplémentaires -->
                <div class="card mt-4">
                    <div class="card-body">
                        <h6 class="card-title">
                            <i class="bi bi-info-circle me-1"></i>Informations
                        </h6>
                        <ul class="list-unstyled small mb-0">
                            <li class="mb-2">
                                <i class="bi bi-dot me-2"></i>
                                <strong>Dimensions :</strong> Les dimensions recommandées sont entre 50x50 et 500x500 parcelles
                            </li>
                            <li class="mb-2">
                                <i class="bi bi-dot me-2"></i>
                                <strong>Modèles :</strong> Vous pourrez modifier l'apparence de l'arrière plan après la création du projet
                            </li>
                            <li class="mb-0">
                                <i class="bi bi-dot me-2"></i>
                                <strong>Sauvegarde :</strong> Votre projet sera automatiquement sauvegardé lors de la création
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<script src="/assets/js/pages/new-project.js"></script>

<?php
include __DIR__ . '/../partials/footer.php';
?>