<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Générateur de Propriétés</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 0;
            background-color: #121212;
            color: #f1f1f1;
        }
        h1 {
            text-align: center;
            color: #f1f1f1;
        }
        form {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: #1e1e1e;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
        form label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #f1f1f1;
        }
        form input, form textarea, form select {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #333;
            border-radius: 5px;
            background-color: #252525;
            color: #f1f1f1;
            box-sizing: border-box; /* Ajout pour éviter les dépassements */
        }

        form button {
            background-color: #28a745;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        form button:hover {
            background-color: #218838;
        }
        #output-container {
            max-width: 800px;
            margin: 20px auto;
            position: relative;
            background-color: #1e1e1e;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            padding: 20px;
        }
        #output-container pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            background-color: #1e1e1e;
            color: #00ff99;
            padding: 15px;
            margin: 0;
            border-radius: 5px;
            font-family: monospace;
            overflow-x: auto;
        }
        #copy-button {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #007bff;
            color: white;
            padding: 5px 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #copy-button:hover {
            background-color: #0056b3;
        }

        footer {
            /* position: fixed; */
            bottom: 0;
            color: white;
            text-align: center;
            padding: 1rem;
            margin-top: 2rem;
        }
    </style>
</head>
<body>
    <h1>Générateur de Propriétés</h1>
    <form id="propertyForm">
        <label for="nom">Nom de la propriété</label>
        <input type="text" id="nom" name="nom" placeholder="Ex: Villa de Luxe" autocomplete="off" required>

        <label for="prix">Prix</label>
        <input type="number" id="prix" name="prix" placeholder="Ex: 2500000" required>

        <label for="espace_stockage">Espace de stockage (m²)</label>
        <input type="number" id="espace_stockage" name="espace_stockage" placeholder="Ex: 30" required>

        <label for="slots_stockage">Slots de stockage</label>
        <input type="number" id="slots_stockage" name="slots_stockage" placeholder="Ex: 8" required>

        <label for="type">Type</label>
        <select id="type" name="type" required>
            <option value="Villa">Villa</option>
            <option value="Appartement">Appartement</option>
            <option value="Chalet">Chalet</option>
            <option value="Maison">Maison</option>
        </select>

        <label for="image">URL de l'image principale</label>
        <input type="url" id="image" name="image" placeholder="Ex: https://example.com/image.jpg" required>

        <label for="photos_interieur">URLs des photos intérieures (séparées par des virgules)</label>
        <textarea id="photos_interieur" name="photos_interieur" placeholder="Ex: https://example.com/photo1.jpg, https://example.com/photo2.jpg"></textarea>

        <label for="vip">VIP</label>
        <select id="vip" name="vip">
            <option value="false">Non</option>
            <option value="true">Oui</option>
        </select>

        <button type="submit">Ajouter la propriété</button>
    </form>

    <div id="output-container">
        <button id="copy-button">Copier</button>
        <pre id="output"></pre>
    </div>


    <footer>
        &copy; 2024 Dynasty 8 - Tous droits réservés. | Made with ❤️ by <a href="https://github.com/MandoDB" style="color:white;">MandoDB</a>
        <br>
        <span style="font-size: 0.9rem;">Ce site est la propriété exclusive de <a href="https://discord.gg/CHqxghp5Q7" style="color:white;">Melissya</a>, et de <a href="https://github.com/MandoDB" style="color:white;">MandoDB</a>. Toutes utilisation du code source est fortuite.</span>
    </footer>

    <script>
        let properties = []; // Tableau pour stocker les propriétés

        // Charger le fichier JSON existant
        async function loadProperties() {
            try {
                const response = await fetch('../data/properties.json');
                if (!response.ok) {
                    throw new Error('Erreur lors du chargement du fichier properties.json.');
                }
                properties = await response.json();
            } catch (error) {
                console.error(error);
            }
        }

        // Ajouter une nouvelle propriété
        document.getElementById('propertyForm').addEventListener('submit', (event) => {
            event.preventDefault();

            const formData = new FormData(event.target);
            const newProperty = {
                id: properties.length > 0 ? Math.max(...properties.map(p => p.id)) + 1 : 1, // ID unique
                nom: formData.get('nom'),
                prix: parseFloat(formData.get('prix')),
                espace_stockage: parseFloat(formData.get('espace_stockage')),
                slots_stockage: parseInt(formData.get('slots_stockage')),
                type: formData.get('type'),
                image: formData.get('image'),
                photos_interieur: formData.get('photos_interieur').split(',').map(url => url.trim()),
                vip: formData.get('vip') === 'true'
            };

            properties.push(newProperty);
            displayUpdatedJSON();
            event.target.reset(); // Réinitialiser le formulaire
        });

        // Afficher le JSON mis à jour
        function displayUpdatedJSON() {
            const output = document.getElementById('output');
            output.textContent = JSON.stringify(properties, null, 4);
        }

        // Copier le JSON
        document.getElementById('copy-button').addEventListener('click', () => {
            const output = document.getElementById('output');
            navigator.clipboard.writeText(output.textContent)
                .then(() => alert('JSON copié dans le presse-papiers !'))
                .catch(err => console.error('Erreur lors de la copie :', err));
        });

        // Charger les propriétés au démarrage
        document.addEventListener('DOMContentLoaded', async () => {
            await loadProperties();
            displayUpdatedJSON();
        });
    </script>
</body>
</html>
