<!DOCTYPE html>
<html>
<head>
    <title>Location d'Équipements</title>
    <style>
        body { max-width: 600px; margin: 0 auto; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input, select { width: 100%; padding: 8px; }
        button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; }
    </style>
</head>
<body>
    <h1>Location d'Équipements de Bricolage</h1>
    <form id="rentalForm" onsubmit="submitForm(event)">
        <div class="form-group">
            <label for="product">Produit:</label>
            <select id="product" name="product" required>
                <option value="perceuse">Perceuse</option>
                <option value="tondeuse">Tondeuse</option>
                <option value="ponceuse">Ponceuse</option>
                <option value="scie">Scie</option>
            </select>
        </div>
        <div class="form-group">
            <label for="quantity">Quantité:</label>
            <input type="number" id="quantity" name="quantity" min="1" required>
        </div>
        <div class="form-group">
            <label for="customer_name">Nom du client:</label>
            <input type="text" id="customer_name" name="customer_name" required>
        </div>
        <div class="form-group">
            <label for="duration">Durée de location (jours):</label>
            <input type="number" id="duration" name="duration" min="1" required>
        </div>
        <button type="submit">Soumettre</button>
    </form>

    <script>
    function submitForm(event) {
        event.preventDefault();
        const formData = new FormData(document.getElementById('rentalForm'));
        
        fetch('/submit_rental', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => alert(data.message))
        .catch(error => alert('Erreur: ' + error));
    }
    </script>
</body>
</html>
