<div class="alert-wrapper">
    <?php
    global $msg;

    if (isset($msg) && $msg != '') {
        echo $msg;
    }

    global $gestionCouleurs;
    if ($gestionCouleurs == 'NULL' || $gestionCouleurs == NULL) {
        $couleurOptions = get_option('personnalisationCouleur');
        if ($couleurOptions != '') {
            $gestionCouleurs = $couleurOptions;
        }
    }
    ?>
</div>
<div class="parametreA111-form">
    <h2>Personnalisation du site</h2>
    <br />
    <h3>Gestion des logos</h3>
    <div class="wrapper-image">
        <form enctype="multipart/form-data" id="uploadLogos" action="" method="post">
            <!-- Row fichiers Header -->
            <div class="row">
                <div class="col-md-6">
                    <div class="col-wrapper">
                        <label class="control-label">Logo Header</label>
                        <div class="clearfix"></div>
                        <?php
                        $logoHeader = get_option('logo_header');

                        if (file_exists(WP_CONTENT_DIR . '/uploads/logos/' . $logoHeader) && $logoHeader != '') {
                            ?>
                            <div class="row">
                                <div class="col-md-1">
                                    Aperçu: 
                                </div>
                                <div class="col-md-8">
                                    <img src="<?php echo content_url() . '/uploads/logos/' . $logoHeader; ?>" alt="" />
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <?php
                        }
                        ?>
                        <div class="row">
                            <div class="col-md-2">
                                <span class="btn btn-success fileinput-button">
                                    <i class="glyphicon glyphicon-plus"></i>
                                    <span>Select files...</span>
                                    <!-- The file input field used as target for the file upload widget -->
                                    <input id="fileHeader" type="file" class="file" name="file_header" />
                                </span>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group fichierExt"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="col-wrapper">
                        <label class="control-label">Logo Header Mobile</label>
                        <div class="clearfix"></div>
                        <?php
                        $logoHeaderSmall = get_option('logo_header_small');
                        if ((file_exists(WP_CONTENT_DIR . '/uploads/logos/' . $logoHeaderSmall) && $logoHeaderSmall != '')) {
                            ?>
                            <div class="row">
                                <div class="col-md-1">
                                    Aperçu: 
                                </div>
                                <div class="col-md-8">
                                    <img src="<?php echo content_url() . '/uploads/logos/' . $logoHeaderSmall; ?>" alt="" />
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <?php
                        }
                        ?>
                        <div class="row">
                            <div class="col-md-2">
                                <span class="btn btn-success fileinput-button">
                                    <i class="glyphicon glyphicon-plus"></i>
                                    <span>Select files...</span>
                                    <!-- The file input field used as target for the file upload widget -->
                                    <input id="fileHeaderSmall" type="file" class="file" name="file_header_small" />
                                </span>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group fichierExt"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Fin row fichier header -->
            <!-- Row fichier footer -->
            <div class="row">
                <div class="col-md-6">
                    <div class="col-wrapper">
                        <label class="control-label">Logo Footer</label>
                        <div class="clearfix"></div>
                        <?php
                        $logoFooter = get_option('logo_footer');

                        if (file_exists(WP_CONTENT_DIR . '/uploads/logos/' . $logoFooter) && $logoFooter != '') {
                            ?>
                            <div class="row">
                                <div class="col-md-1">
                                    Aperçu: 
                                </div>
                                <div class="col-md-8">
                                    <img src="<?php echo content_url() . '/uploads/logos/' . $logoFooter; ?>" alt="" />
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <?php
                        }
                        ?>
                        <div class="row">
                            <div class="col-md-2">
                                <span class="btn btn-success fileinput-button">
                                    <i class="glyphicon glyphicon-plus"></i>
                                    <span>Select files...</span>
                                    <!-- The file input field used as target for the file upload widget -->
                                    <input id="fileFooter" type="file" class="file" name="file_footer" />
                                </span>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group fichierExt"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="col-wrapper">
                        <label class="control-label">Logo Footer Mobile</label>
                        <div class="clearfix"></div>
                        <?php
                        $logoFooterSmall = get_option('logo_footer_small');
                        if ((file_exists(WP_CONTENT_DIR . '/uploads/logos/' . $logoFooterSmall) && $logoFooterSmall != '')) {
                            ?>
                            <div class="row">
                                <div class="col-md-1">
                                    Aperçu: 
                                </div>
                                <div class="col-md-8">
                                    <img src="<?php echo content_url() . '/uploads/logos/' . $logoFooterSmall; ?>" alt="" />
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <?php
                        }
                        ?>
                        <div class="row">
                            <div class="col-md-2">
                                <span class="btn btn-success fileinput-button">
                                    <i class="glyphicon glyphicon-plus"></i>
                                    <span>Select files...</span>
                                    <!-- The file input field used as target for the file upload widget -->
                                    <input id="fileFooterSmall" type="file" class="file" name="file_footer_small" />
                                </span>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group fichierExt"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Fin row fichier footer -->
            <!-- Row fichier inverse -->
            <div class="row">
                <div class="col-md-6">
                    <div class="col-wrapper">
                        <label class="control-label">Logo Inverse</label>
                        <div class="clearfix"></div>
                        <?php
                        $logoInverse = get_option('logo_inverse');

                        if (file_exists(WP_CONTENT_DIR . '/uploads/logos/' . $logoInverse) && $logoInverse != '') {
                            ?>
                            <div class="row">
                                <div class="col-md-1">
                                    Aperçu: 
                                </div>
                                <div class="col-md-8">
                                    <img src="<?php echo content_url() . '/uploads/logos/' . $logoInvers; ?>" alt="" />
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <?php
                        }
                        ?>
                        <div class="row">
                            <div class="col-md-2">
                                <span class="btn btn-success fileinput-button">
                                    <i class="glyphicon glyphicon-plus"></i>
                                    <span>Select files...</span>
                                    <!-- The file input field used as target for the file upload widget -->
                                    <input id="fileInverse" type="file" class="file" name="file_inverse" />
                                </span>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group fichierExt"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Fin row fichier inverse -->
            <div class="row">
                <div class="col-md-6">
                    <div class="checkExt"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <input onclick="formSubmit('uploadLogos');" class="btn btn-default btn-submit" name="uploadLogos" value="Envoyer" class="btn btn-default form-control" />
                </div>

            </div>
        </form>
    </div>
    <br />
    <h3>Gestion image par défaut</h3>
    <div class="wrapper-image">
        <form enctype="multipart/form-data" id="uploadImageDefaut" action="" method="post">
            <!-- Row image par défaut -->
            <div class="row">
                <div class="col-md-6">
                    <div class="col-wrapper">
                        <label class="control-label">Image par défaut</label>
                        <div class="clearfix"></div>
                        <?php
                        $imageDefaut = get_option('image_defaut');
                        if (file_exists(WP_CONTENT_DIR . '/uploads/logos/' . $imageDefaut) && $imageDefaut != '') {
                            ?>
                            <div class="row">
                                <div class="col-md-1">
                                    Aperçu: 
                                </div>
                                <div class="col-md-8">
                                    <img src="<?php echo content_url() . '/uploads/logos/' . $imageDefaut; ?>" alt="" />
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <?php
                        }
                        ?>
                        <div class="row">
                            <div class="col-md-2">
                                <span class="btn btn-success fileinput-button">
                                    <i class="glyphicon glyphicon-plus"></i>
                                    <span>Select files...</span>
                                    <!-- The file input field used as target for the file upload widget -->
                                    <input id="fileImageDefaut" type="file" class="file" name="file_image_defaut" />
                                </span>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group fichierExt"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Fin row image par défaut -->
            <div class="row">
                <div class="col-md-6">
                    <div class="checkExt"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <input onclick="formSubmit('uploadImageDefaut');" class="btn btn-default btn-submit" name="uploadImageDefaut" value="Envoyer" class="btn btn-default form-control" />
                </div>

            </div>
        </form>
    </div>
    <br />
    <h3>Gestion des couleurs</h3>
    <div class="wrapper-image">
        <form id="gestionCouleurs" action="" method="post">
            <div class="row">
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-md-12">
                            <h4>Couleur du site</h4>
                        </div>
                        <?php
                        for ($i = 1; $i <= 5; $i++) {

                            if (isset($gestionCouleurs['COULEUR_SITE_' . $i])) {
                                $couleur = $gestionCouleurs['COULEUR_SITE_' . $i];
                            } else {
                                $couleur = '#00AABB';
                            }


                            echo'
						<div class="col-md-12">
							<div class="input-group">
								Couleur #' . $i . ':
							</div>
							<div class="input-group colorpicker-component gestionCouleurSite">
								<input type="text" name="couleur_site_' . $i . '" value="' . $couleur . '" class="form-control" /> <span class="input-group-addon"><i></i></span>
							</div>
						</div>';
                        }
                        ?>
                    </div>

                </div>
                <div class="col-md-3 col-md-offset-1">
                    <div class="row">
                        <div class="col-md-12">
                            <h4>Couleur des polices</h4>
                        </div>
                        <?php
                        for ($i = 1; $i <= 5; $i++) {

                            if (isset($gestionCouleurs['COULEUR_POLICE_' . $i])) {
                                $couleur = $gestionCouleurs['COULEUR_POLICE_' . $i];
                            } else {
                                $couleur = '#00AABB';
                            }


                            echo'
						<div class="col-md-12">
							<div class="input-group">
								Couleur #' . $i . ':
							</div>
							<div class="input-group colorpicker-component gestionCouleurSite">
								<input type="text" name="couleur_police_' . $i . '" value="' . $couleur . '" class="form-control" /> <span class="input-group-addon"><i></i></span>
							</div>
						</div>';
                        }
                        ?>
                    </div>
                </div>
                <div class="col-md-3 col-md-offset-1">
                    <div class="row">
                        <div class="col-md-12">
                            <h4>Choix de la police</h4>
                        </div>
                        <div class="col-md-12">
                            <div class="input-group">
                                Police #1:
                            </div>
                            <div class="input-group">
                                <select name="police_site_1">
                                    <?php
                                    $selected = '';
                                    if ($gestionCouleurs['POLICE_SITE_1'] == '') {
                                        $selected = 'selected = "selected"';
                                    }
                                    echo '<option value=""></option>';

                                    foreach (PersonnalisationAtelier111_Plugin::listePolices as $nomPolice => $police) {
                                        $selected = '';
                                        if ($gestionCouleurs['POLICE_SITE_1'] == $nomPolice) {
                                            $selected = 'selected = "selected"';
                                        }

                                        echo '<option value="' . $nomPolice . '" ' . $selected . '>' . $nomPolice . '</option>';
                                    }
                                    ?>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2  col-md-offset-1">
                    <input  type="submit" class="btn btn-default btn-submit form-control" name="gestionCouleurSite" value="Mettre à jour les couleurs" />
                </div>

            </div>
        </form>
    </div>
</div>
<script type="text/javascript">

    jQuery(document).ready(function () {

        jQuery('.file').change(function () {
            var ext = jQuery(this).val().split('.').pop().toLowerCase();
            if (jQuery.inArray(ext, ['png', 'jpg', 'jpeg']) == -1) {
                // Affichage du message sur le formulaire correspondant
                jQuery(this).closest('form').find('.checkExt').html('<div class="alert alert-danger" role="alert">L\'extension "' + ext + '" n\est pas autorisée</div>');
                jQuery(this).closest('form').find('.btn-submit').attr('disabled', 'disabled');
            }
            if (!document.getElementById('annulerChoix')) {
                jQuery(this).parent().parent().next().children().append('<button id="annulerChoix" onclick="removeFile(this, \'' + jQuery(this).attr('id') + '\')" type="button" class="btn btn-danger">Annuler le fichier ' + jQuery(this).val() + '</button>');

            }else{
                jQuery(this).parent().parent().next().children().replaceWith('<button id="annulerChoix" onclick="removeFile(this, \'' + jQuery(this).attr('id') + '\')" type="button" class="btn btn-danger">Annuler le fichier ' + jQuery(this).val() + '</button>');
            }


        });

        jQuery(function () {
            jQuery('.gestionCouleurSite').colorpicker({format: 'rgba'});
        });

    });

// Fonction de vérification de chaque input file
    function removeFile(elem, id) {
        arrInputFile = jQuery('.file');
        jQuery('#' + id).attr('value', '');
        jQuery(elem).parent().empty();
        var inputDisabled = false;
        jQuery.each(arrInputFile, function () {
            var ext = jQuery(this).val().split('.').pop().toLowerCase();
            if (jQuery.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1 && ext != '') {
                inputDisabled = true
            }
        });
        // Si inputDisabled vaut true alors il faut désactiver le bouton de validation
        if (inputDisabled == true) {
            if (jQuery('.btn-submit').is(':disabled')) {

            } else {
                jQuery('.checkExt').append('<div class="alert alert-danger" role="alert">L\'extension "' + ext + '" n\est pas autorisée</div>');
                jQuery('.btn-submit').attr('disabled', 'disabled');
            }
        } else {
            jQuery('.checkExt').html('');
            jQuery('.btn-submit').removeAttr('disabled');
        }
    }

// Fonction de vérification du formulaire
    function formSubmit(idForm) {
        arrInputFile = jQuery('.file');
        var inputDisabled = false;
        var arrayExtention
        jQuery.each(arrInputFile, function () {
            var ext = jQuery(this).val().split('.').pop().toLowerCase();
            if (jQuery.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1 && ext != '') {
                inputDisabled = true
            }
        });

        // Si inputDisabled vaut true alors il faut désactiver le bouton de validation
        if (inputDisabled == true) {
            jQuery('#' + idForm + ' .checkExt').append('<div class="alert alert-danger" role="alert">L\'extension "' + ext + '" n\est pas autorisée</div>');
            jQuery('#' + idForm + ' .btn-submit').attr('disabled', 'disabled');
        } else {

            var noFile = true;

            // On parcourt les input type file du formulaire posté
            jQuery.each(jQuery('#' + idForm + ' input:file'), function () {
                console.log(jQuery(this));
                if (jQuery(this).val() != '') {
                    noFile = false;
                    return false;
                }
            });

            if (noFile == true) {
                alert('Aucun fichier à charger');
            } else {
                jQuery('#' + idForm).submit();
            }

            /*
             if(jQuery('#fileHeader').val() == ''
             && jQuery('#fileHeaderSmall').val() == ''
             && jQuery('#fileFooter').val() == ''
             && jQuery('#fileFooterSmall').val() == ''
             && jQuery('#fileInverse').val() == ''){
             alert('Aucun fichier à charger');
             }else{
             jQuery('#'+idForm).submit();
             }*/
        }
    }

</script>