
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inscription | Diffusion EDI</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #4361ee;
            --primary-hover: #3a56d4;
            --card-bg: rgba(255, 255, 255, 0.94);
            --text-main: #1e293b;
            --text-muted: #64748b;
            --border-color: #e2e8f0;
            --success: #10b981;
            --warning: #f59e0b;
        }

        * { box-sizing: border-box; }

        body { 
            font-family: 'Inter', sans-serif; 
            margin: 0; padding: 40px 20px;
            min-height: 100vh;
            display: flex; justify-content: center; align-items: center;
            background: linear-gradient(rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.65)), 
                        url('fond.jpg') no-repeat center center fixed;
            background-size: cover;
        }

        .form-card { 
            background: var(--card-bg); 
            padding: 40px; 
            border-radius: 24px; 
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            width: 100%; max-width: 700px;
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        header { text-align: center; margin-bottom: 30px; }
        header h2 { margin: 0; font-size: 1.9rem; color: var(--primary); font-weight: 800; }
        header p { color: var(--text-muted); margin-top: 5px; font-size: 0.95rem; }

        .toast { padding: 15px; border-radius: 12px; margin-bottom: 25px; display: flex; align-items: center; gap: 12px; font-weight: 600; }
        .success { background: #ecfdf5; color: var(--success); border: 1px solid #d1fae5; }
        .warning { background: #fffbeb; color: var(--warning); border: 1px solid #fef3c7; }

        .form-group { margin-bottom: 20px; width: 100%; }
        .form-row { display: flex; gap: 20px; width: 100%; }
        .form-row > div { flex: 1; min-width: 0; }

        label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; }
        
        .input-wrapper { position: relative; width: 100%; }
        .input-wrapper i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }

        input[type="text"], input[type="email"], select, textarea { 
            width: 100%; padding: 12px 12px 12px 40px; border: 1.5px solid var(--border-color); border-radius: 10px; 
            font-size: 0.95rem; background: white; display: block;
        }
        textarea { padding-left: 15px; resize: none; margin-top: 10px; }
        
        .section-title { font-size: 0.9rem; font-weight: 700; margin: 30px 0 15px 0; display: flex; align-items: center; gap: 10px; color: var(--primary); text-transform: uppercase; }
        .section-title::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }

        .edi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; background: #f8fafc; padding: 15px; border-radius: 15px; border: 1px solid var(--border-color); }
        .edi-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: white; border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; transition: 0.2s; }
        .edi-item:hover { border-color: var(--primary); }
        .edi-item span { font-size: 0.8rem; font-weight: 700; color: var(--text-main); }
        
        /* Masquage des EDI > 19 */
        .hidden-edi { display: none; }
        
        #btn-more { grid-column: 1 / -1; background: #f1f5f9; border: 1.5px dashed var(--primary); color: var(--primary); padding: 10px; border-radius: 10px; cursor: pointer; font-weight: 700; margin-top: 5px; }

        .nouveau-edi-box { margin-top: 15px; padding: 15px; background: #eff6ff; border-radius: 12px; border: 1px solid #bfdbfe; display: none; }

        .btn-submit { width: 100%; padding: 16px; background: var(--primary); color: white; border: none; border-radius: 12px; font-size: 1rem; font-weight: 700; cursor: pointer; margin-top: 30px; display: flex; justify-content: center; align-items: center; gap: 12px; }
        .btn-submit:hover { background: var(--primary-hover); }
    </style>
</head>
<body>

<div class="form-card">
    <header>
        <h2>Fiche de Renseignement</h2>
        <p>Listes de diffusion Mise à jour et Nouveautés</p>
    </header>

    
    <form method="POST">
        <div class="form-row">
            <div class="form-group">
                <label>Prénom</label>
                <div class="input-wrapper"><i class="fa-solid fa-user"></i><input type="text" name="prenom" placeholder="Prénom" required></div>
            </div>
            <div class="form-group">
                <label>Nom</label>
                <div class="input-wrapper"><i class="fa-solid fa-id-card"></i><input type="text" name="nom" placeholder="Nom" required></div>
            </div>
        </div>

        <div class="form-group">
            <label>Société</label>
            <div class="input-wrapper"><i class="fa-solid fa-building"></i><input type="text" name="societe" id="societe_input" placeholder="Nom de l'entreprise" required autocomplete="off"></div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label>Email Pro</label>
                <div class="input-wrapper"><i class="fa-solid fa-envelope"></i><input type="email" name="mail" placeholder="mail@entreprise.fr" required></div>
            </div>
            <div class="form-group">
                <label>Téléphone</label>
                <div class="input-wrapper"><i class="fa-solid fa-phone"></i><input type="text" name="tel" placeholder="06XXXXXXXX"></div>
            </div>
        </div>

        <div class="form-group">
            <label>Fonction</label>
            <div class="input-wrapper"><i class="fa-solid fa-briefcase"></i><input type="text" name="fonction" placeholder="Poste ou Service"></div>
        </div>

        <div class="section-title"><i class="fa-solid fa-microchip"></i> Configuration EDI</div>
        
        <div class="edi-grid">
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="1"> 
                    <span>SCHMIDT</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="2"> 
                    <span>NOBILIA</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="3"> 
                    <span>FOURNIER</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="4"> 
                    <span>IKEA</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="5"> 
                    <span>POLTRONESOFA</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="6"> 
                    <span>NOLTE</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="7"> 
                    <span>BURGER</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="8"> 
                    <span>IMPULS</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="9"> 
                    <span>SCHUELLER</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="10"> 
                    <span>BECKERMANN</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="13"> 
                    <span>COMERA</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="14"> 
                    <span>ARTHUR BONNET</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="15"> 
                    <span>DARTY</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="16"> 
                    <span>FIDELEM</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="17"> 
                    <span>WOOP</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="18"> 
                    <span>CALVA</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="19"> 
                    <span>BEELIV</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="122"> 
                    <span>JANET</span>
                </label>
                            <label class="edi-item ">
                    <input type="checkbox" name="edis[]" value="123"> 
                    <span>MTXXTLVDEY</span>
                </label>
                            <label class="edi-item hidden-edi">
                    <input type="checkbox" name="edis[]" value="124"> 
                    <span>JAKE</span>
                </label>
                            <label class="edi-item hidden-edi">
                    <input type="checkbox" name="edis[]" value="125"> 
                    <span>JOANNA</span>
                </label>
                            <label class="edi-item hidden-edi">
                    <input type="checkbox" name="edis[]" value="126"> 
                    <span>GEMMA</span>
                </label>
            
                            <button type="button" id="btn-more" onclick="showAllEdis()">Afficher plus d'EDI...</button>
            
            <label class="edi-item" style="border-color: #10b981; color: #10b981;">
                <input type="checkbox" id="check-nouveau" onchange="toggleNouveau()"> 
                <span>+ NOUVEAU</span>
            </label>
        </div>

        <div id="nouveau-input-box" class="nouveau-edi-box">
            <label style="color: var(--primary);">Nom du nouvel EDI</label>
            <input type="text" name="nouveau_edi_nom" placeholder="Saisir le nom de l'enseigne..." style="padding-left:15px;">
        </div>

        <div class="form-group" style="margin-top: 25px;">
            <label>Liste souhaitée</label>
            <div class="input-wrapper">
                <i class="fa-solid fa-list-ul"></i>
                <select name="liste_id">
                    <option value="">Sélectionnez une liste...</option>
                    <option value="1">Mise à jour</option><option value="2">Nouveautés</option>                </select>
            </div>
        </div>

        <textarea name="commentaire" rows="2" placeholder="Informations complémentaires..."></textarea>
        <button type="submit" class="btn-submit"><span>Valider ma fiche</span><i class="fa-solid fa-paper-plane"></i></button>
    </form>
</div>

<script>
    // Révéler les EDI masqués
    function showAllEdis() {
        document.querySelectorAll('.hidden-edi').forEach(el => el.style.display = 'flex');
        document.getElementById('btn-more').style.display = 'none';
    }

    // Afficher le champ texte si "+ NOUVEAU" est coché
    function toggleNouveau() {
        const box = document.getElementById('nouveau-input-box');
        const check = document.getElementById('check-nouveau');
        box.style.display = check.checked ? 'block' : 'none';
    }

    // Auto-cochage par société
    document.getElementById('societe_input').addEventListener('blur', function() {
        const nomSoc = this.value.trim();
        if (nomSoc.length > 1) {
            fetch('get_societe_edis.php?nom=' + encodeURIComponent(nomSoc))
                .then(response => response.json())
                .then(ediIds => {
                    document.querySelectorAll('input[name="edis[]"]').forEach(cb => cb.checked = false);
                    if (ediIds) ediIds.forEach(id => {
                        let checkbox = document.querySelector('input[name="edis[]"][value="' + id + '"]');
                        if (checkbox) checkbox.checked = true;
                    });
                });
        }
    });
</script>
</body>
</html>
