<?php
/*
 * CASS_Shortcode_Member_Register - Shortcode for member register
 *
 * This shortcode is used to display the member register form
 */

add_action('init', 'cass_register_shortcode_member_register');

function cass_register_shortcode_member_register()
{
    add_shortcode('cass_member_register', 'cass_shortcode_member_register');
}

function cass_shortcode_member_register()
{
    if (!is_user_logged_in()) {
        return "

        <script>
            window.addEventListener('DOMContentLoaded', function () {
                var input = document.querySelector('#inputTelephone');
                if (input) {
                    window.intlTelInput(input, {
                        separateDialCode: true,
                        preferredCountries: ['ch', 'fr'],
                        initialCountry:'ch'
                    });
                }
            });
        </script>

        <script>
            window.adminPostUrl = " . json_encode(esc_attr(admin_url('admin-post.php'))) . ";
            window.siteUrl = " . json_encode(get_site_url()) . ";
        </script>
        <script src='https://www.google.com/recaptcha/api.js'></script>
        
        <link rel='stylesheet' href='https://cdn.tutorialjinni.com/intl-tel-input/17.0.19/css/intlTelInput.css'/>
        <script src='https://cdn.tutorialjinni.com/intl-tel-input/17.0.19/js/intlTelInput.min.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/lang/fr.js'></script>
        
        <div class='div-center'>
        <div id='cass_member_register'>
                <template>
                <h3>Inscription membre</h3>
                <p>Utilisez ce formulaire pour créer un nouveau compte membre.</p>
                    <form @submit.prevent='submitForm' class='pure-form pure-form-stacked'>
                        <input type='hidden' name='action' value='member_register' />
                        <div class='pure-control-group'>
                            <label for='inputLast'>Nom*</label>
                            <input type='text' class='form-control' id='inputLast' v-model='user.inputLast' required placeholder='Votre nom'>
                        </div>
                        <div class='pure-control-group'>
                            <label for='inputFirst'>Prénom*</label>
                            <input type='text' class='form-control' id='inputFirst' v-model='user.inputFirst' required placeholder='Votre prénom'>
                        </div>
                        <div class='pure-control-group'>
                            <label for='inputMail'>Adresse mail*</label>
                            <input type='email' class='form-control' id='inputMail' v-model='user.inputMail' required placeholder='Votre adresse mail'>
                        </div>
                        <div class='pure-control-group'>
                            <label for='inputPassword'>Mot de passe*</label>
                            <input type='password' class='form-control' id='inputPassword' v-model='user.inputPassword' required placeholder='Mot de passe'>
                        </div>
                        <div class='pure-control-group'>
                            <label for='inputMemberNo'>N° de membre*</label>
                            <input type='text' class='form-control' id='inputMemberNo' v-model='user.inputMemberNo' required placeholder='Votre numéro de membre'>
                        </div>
                        <div class='pure-control-group'>
                            <label for='inputTelephone'>Téléphone*</label>
                            <input name='inputTelephone' type='text' id='inputTelephone' v-model='user.inputTelephone' required/>
                        </div>
                        <div class='pure-control-group'>
                            <label for='inputAddress'>Adresse*</label>
                            <input type='text' class='form-control' id='inputAddress' v-model='user.inputAddress' required placeholder='Votre adresse'>
                        </div>
                        <div class='pure-control-group'>
                            <label for='inputNPA'>NPA*</label>
                            <input type='text' class='form-control' id='inputNPA' v-model='user.inputNPA' required placeholder='Votre NPA'>
                        </div>
                        <div class='pure-control-group'>
                            <label for='inputLocality'>Localité*</label>
                            <input type='text' class='form-control' id='inputLocality' v-model='user.inputLocality' required placeholder='Votre localité'>
                        </div>
                        <div class='pure-control-group'>
                            <label for='cassLevel'>Niveau physique*</label>
                            <select id='cassLevel' v-model='user.cassLevel' required>
                                <option value=''>Sélectionner un niveau physique</option>
                                <option v-for='level in levels' :key='level.IDLevel' :value='level.IDLevel'>{{ level.name }}</option>
                            </select>
                        </div>            
                        <div class='pure-control-group'>
                            <label for='cassGroup'>Groupe*</label>
                            <select id='cassGroup' v-model='user.cassGroup' required>
                                <option value=''>Sélectionner un groupe</option>
                                <option v-for='group in groups' :key='group.IDGroup' :value='group.IDGroup'>{{ group.name }}</option>
                            </select>
                        </br>
                        <div class='g-recaptcha' data-sitekey='6LdZ14gqAAAAAO7jVDacLVrpQbayuurncP8yeIix'></div>
                        <!-- old key 
						<div class='g-recaptcha' data-sitekey='6LdHGBApAAAAAEkA_y9kSP1u28r2nriDVAXs8Nzo'></div>
						-->
                        </br>
                        </div>
                        <button type='submit' class='pure-button pure-button-primary' >
                            Créer un compte
                    </button>
                    </form>
                </div>
            </template>    
        </div>";
    } else {
        return "<h4 align='center'>Vous êtes déjà inscrit.e</h4>";
    }
}