<?php
acf_form_head(); // permet acces CSS et JS pour appliquer le style : permet de créer un nouvel élément + display conditionnel
?>


<section id="popup_admin">
    <fieldset style="display: none;" class="bloc-3">
        <legend>Contenu :</legend>
        <div>
            <label for="title">Titre :</label>
            <input type="text" name="title" id="title" value="<?= stripslashes(get_option('title')); ?>">

            <label for="link">Lien : </label>
            <input type="text" name="link" id="link" value="<?= stripslashes(get_option('link')); ?>">
            <label for="text">Texte :</label>
            <!-- éditeur WP -->
            <?php
            // Définissez le contenu initial de l'éditeur, si nécessaire.
            if (isset($_POST['text']) && !empty($_POST['text'])) {
                $content = get_option('text');
            } else {
                // Utilisez la valeur sauvegardée si elle existe, sinon définissez une valeur par défaut
                $content = get_option('text', 'Votre contenu ici...');
            }
            $editor_id = 'text';
            // Paramètres pour l'éditeur
            $settings = array(
                'textarea_name' => 'text', // Doit être le même que $editor_id.
                'media_buttons' => true, // Si vous voulez permettre l'insertion de médias.
                'tinymce'       => true, // Si vous voulez activer le TinyMCE (éditeur WYSIWYG).
                'quicktags'     => true, // Si vous voulez activer les Quicktags (barre d'outils simple).
            );
            // Affichez l'éditeur de texte personnalisé.
            wp_editor($content, $editor_id, $settings);
            ?>
        </div>
        <!---------------------------------------------------------------------------------------------------- MEDIA -->
        <div>
            <label for="image">Média : </label> <br>
            <?php
            // $image_id = get_option('meta-box-image', '');
            $image_id = get_option('meta-box-image');
            $media_id = get_option('meta-box-video');
            if ($image_id) {
                $image = wp_get_attachment_image_src($image_id, 'medium');
                $image_url = $image ? $image[0] : '';
            } elseif ($media_id) {
                $media_url = wp_get_attachment_url($media_id);
            }
            ?>
            <!-- ajout du média via les boutons et apperçu dans les inputs -->
            <input name="meta-box-image" id="meta-box-image" type="hidden" value="<?php if (isset($image_id)) : echo $image_id;
                                                                                    endif; ?>">
            <img id="meta-box-image-preview" src="<?php if (isset($image_url)) : echo $image_url;
                                                    endif; ?>">
            <input name="meta-box-video" id="meta-box-video" type="hidden" value="<?php if (isset($media_id)) : echo $media_id;
                                                                                    endif; ?>">
            <video name="meta-box-video-preview" id="meta-box-video-preview" controls="conrols" src="<?php if (isset($media_url)) {
                                                                                                            echo $media_url;
                                                                                                        } else {
                                                                                                            echo '';
                                                                                                        }; ?>"></video> <br>
            <button type="button" id="meta-box-image-button" class="button">Choisir un média</button>
            <button type="button" id="meta-box-image-button-remove" class="button">Supprimer le média</button>

            <div class="add_poster">
                <?php
                $poster_id = get_option('meta-box-poster');
                if ($poster_id) {
                    $poster_image = wp_get_attachment_image_src($poster_id, 'medium');
                    $poster_url = $poster_image ? $poster_image[0] : '';
                }
                ?>
                <input name="meta-box-poster" id="meta-box-poster" type="hidden" value="<?php if (isset($poster_id)) : echo $poster_id;
                                                                                        endif; ?>">
                <img id="meta-box-poster-preview" src="<?php if (isset($poster_url)) : echo $poster_url;
                                                        endif;; ?>">
                <br>
                <button type="button" id="meta-box-poster-button" class="button">Choisir un poster</button>
                <button type="button" id="meta-box-poster-button-remove" class="button">Supprimer le poster</button>
            </div>
        </div>
    </fieldset>
    </fieldset>
    <!------------------------------------------------------------------------------------- pop-up size, position, animation -->
    <form class="bloc-2 settings" method="post" action="">
        <?php // ------------------------------------------------------------------------------------------- PLUGIN ACTIVATION
        $checked2 = get_option('set_active') ? 'checked' : ''; ?>
        <label for="set_active"> Activer le popup :
            <div class="switch">
                <input type="checkbox" name="set_active" id="set_active" value="set_active" <?= $checked2; ?>>
                <span class="slider"></span>
            </div>
        </label>
        <fieldset class="bloc-2-3">
            <legend>Paramètres de la popup :</legend>

            <fieldset>
                <legend>Taille :</legend>

                <label for="type">Type : <br>
                    <select name="type" id="type">
                        <option value="card" <?php selected(get_option('type'), 'card'); ?>>carte</option>
                        <option value="band" <?php selected(get_option('type'), 'band'); ?>>bandeau</option>
                    </select>
                </label>

                <!-- récupérer valeur de "type" de popup  : si carte -> afficher width et height, bandeau, juste height -->
                <label for="width">Largeur : <br>
                    <input type="number" name="width" id="width" value="<?php echo get_option('width'); ?>">px
                </label>

                <label for="height">Hauteur : <br>
                    <input type="number" name="height" id="height" value="<?php echo get_option('height'); ?>">px
                </label>

            </fieldset>
            <fieldset>
                <legend>Position :</legend>

                <label for="position_type">Type de positionnement:<br>
                    <!-- si centré : donner position top/left 50% + translate(-50%) -->
                    <select name="position_type" id="position_type">
                        <option value="center" <?php selected(get_option('position_type'), 'center'); ?>>centré</option>
                        <option value="side" <?php selected(get_option('position_type'), 'side'); ?>>bord</option>
                    </select>
                </label> <br>

                <div>
                    <label for="position_y_side">Alignement :<br>
                        <select name="position_y_side" id="position_y_side">
                            <option value="top" <?php selected(get_option('position_y_side'), 'top'); ?>>haut</option>
                            <option value="bottom" <?php selected(get_option('position_y_side'), 'bottom'); ?>>bas</option>
                        </select>
                    </label>
                    <label class="neg-marg" for="position_y_val"><br>
                        <input type="number" id="position_y_val" name="position_y_val" value="<?php echo get_option('position_y_val'); ?>">px
                    </label>
                </div>
                <div>
                    <label for="position_x_side">Alignement :<br>
                        <select name="position_x_side" id="position_x_side">
                            <option value="left" <?php selected(get_option('position_x_side'), 'left'); ?>>gauche</option>
                            <option value="right" <?php selected(get_option('position_x_side'), 'right'); ?>>droite</option>
                        </select>
                    </label>
                    <label class="neg-marg" for="position_x_val"><br>
                        <input type="number" id="position_x_val" name="position_x_val" value="<?php echo get_option('position_x_val'); ?>">px
                    </label>
                </div>
            </fieldset>
            <fieldset>
                <legend>Animation :</legend>
                <label for="animation_type">Type d'animation :
                    <select name="animation_type" id="animation_type">
                        <option value="fade_in" <?php selected(get_option('animation_type'), 'fade_in'); ?>>fade-in</option>
                        <option value="slide_in" <?php selected(get_option('animation_type'), 'slide_in'); ?>>slide-in</option>
                        <option value="zoom_in" <?php selected(get_option('animation_type'), 'zoom_in'); ?>>zoom-in</option>
                    </select>
                </label>
                <br>
                <label for="animation_duration">Durée d'animation :
                    <select name="animation_duration" id="animation_duration">
                        <option value="1-2" <?php selected(get_option('animation_duration'), '1-2'); ?>>0,5s</option>
                        <option value="1" <?php selected(get_option('animation_duration'), '1'); ?>>1s</option>
                        <option value="2" <?php selected(get_option('animation_duration'), '2'); ?>>2s</option>
                    </select>
                </label>
            </fieldset>
            <fieldset class="boxes">
                <legend>
                    Afficher la pop-up sur les pages :
                </legend>
                <?php

                $excluded_pages = [
                    '404-2',
                    'contact',
                    'mentions-legales',
                    'partenaires',
                    'politique-de-confidentialite'
                ];
                $pages = get_pages();
                $selected_pages = [];


                foreach ($pages as $page) {
                    if (!in_array($page->post_name, $excluded_pages)) :
                        $checked = get_option($page->post_name) ? 'checked' : '';
                        if ($checked) {
                            $selected_pages[] = $page->post_name;
                        }
                ?>
                        <label>
                            <input type="checkbox" name="<?= $page->post_name; ?>" value="<?= $page->post_name; ?>" <?= $checked; ?>>
                            <?= $page->post_name; ?></label>
                        </option>
                <?php endif;
                }
                ?>
                </select>
            </fieldset>
        </fieldset>



        <?php wp_nonce_field('pop_up_save', 'pop_up_nonce'); ?>
        <input type="submit" class="button" value="Enregistrer">
    </form>
    <div class="bloc-2">
        <?php
        $fields = [
            'input_group',
        ];
        acf_form(array(
            'form' => true,
            'fields' => $fields,
            'submit_value' => 'Mettre à jour',
            // 'id' => 'acf_form',
            'post_id' => 'acf_form'
        ));
        ?>
    </div>

</section>

<!-- -------------------------------------------------------------------------------- TESTE BUILDER -->