<?php
require_once("db/functions.php");
require_once("db/db-const.php");

$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
$mysqli->set_charset("utf8");

$sql = "SELECT * from image_organes ORDER BY nom ASC";
$organes = $mysqli->query($sql);

$sql = "SELECT * from image_pathologie ORDER BY nom ASC";
$pathologies = $mysqli->query($sql);


?>


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<?php include 'includes/head.php'; ?>
<body>
<?php include 'includes/header.php';?>
<!-- LOGO HEADER END-->
<?php include 'includes/navbar.php';?>
<!-- MENU SECTION END-->

<div class="tab-content">
    <div class="container">
        <div class="row" style="margin-top:15px">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="well well-sm">
                    <form class="form-horizontal" enctype="multipart/form-data" action="db/imageUpload.php" method="post" >
                        <input type="hidden" name="MAX_FILE_SIZE" value="5120000" />
                        <fieldset>
                            <legend class="text-center header">Transférer une photo</legend>
                            <!--Titre-->
                            <div class="form-group">
                                <div class="col-md-10 col-md-offset-1">
                                    <input id="titre" name="titre" type="text" placeholder="Titre"
                                           required minlength="3" maxlength="30" class="form-control">
                                </div>
                            </div>
                            <!--Description-->
                            <div class="form-group">
                                <div class="col-md-10 col-md-offset-1">
                                    <textarea class="form-control" id="description" name="description"
                                              placeholder="Entrez une description de l'image" rows="8"
                                              required minlength="3" maxlength="200"></textarea>
                                </div>
                            </div>

                            <!--UPLOADER-->
                            <div class="form-group">
                                <div class="col-md-10 col-md-offset-1">
                                    <div class="fileinput fileinput-new" data-provides="fileinput">
                                         <div>
                                            <span class="btn btn-default btn-file">
                                                <span class="fileinput-new">Cliquez ici pour selectionner une photo</span>
                                                <span class="fileinput-exists">Changer</span>
                                                <input type="file" name="myimage" id="myimage"></span>
                                            <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Supprimer</a>
                                        </div>
                                        <div class="fileinput-preview thumbnail" data-trigger="fileinput"></div>

                                    </div>
                                </div>
                            </div>
                            <!-- /UPLOADER-->



                            <!--Radio to choose category-->


                            <div class="form-group">
                                <div class="col-md-10 col-md-offset-1">
                                    <div class="label">
                                        <label> <h4 style="color: black"> Ajouter à la photothèque par : </h4> </label>
                                    </div>
                                    <div class="radio">
                                        <label><input type="radio" value="Organe" name="radioPhototheque">Organe</label>
                                    </div>
                                    <div class="radio">
                                        <label><input type="radio" value="Pathologie" name="radioPhototheque">Pathologie</label>
                                    </div>
                                </div>
                            </div>


                            <div class="form-group typeOrganeSelect" style="display: none; visibility: hidden;">
                                <div class="col-md-10 col-md-offset-1">
                                    <label for="sel1">Veuillez choisir l'organe :</label>
                                    <select class="form-control selectpicker" data-live-search="true" name="typeOrgane" id="typeOrgane">
                                        <?php while ($organe = $organes->fetch_assoc()) { ?>
                                            <option value="<?= $organe["id"] ?>" ><?= $organe["nom"] ?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group typePathologieSelect" style="display: none; visibility: hidden;">
                                <div class="col-md-10 col-md-offset-1">
                                    <label for="sel1">Veuillez choisir la pathologie :</label>
                                    <select class="form-control selectpicker" data-live-search="true" name="typePathologie" id="typePathologie">
                                        <?php while ($pathologie = $pathologies->fetch_assoc()) { ?>
                                            <option value="<?= $pathologie["id"] ?>" ><?= $pathologie["nom"] ?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-10 col-md-offset-1">
                                    <div class="label">
                                        <label> <h4 style="color: black"> Privé ou public : </h4> </label>
                                    </div>
                                    <div class="radio">
                                        <label><input type="radio" value="prive" name="radioPrive">Privé</label>
                                    </div>
                                    <div class="radio">
                                        <label><input type="radio" value="public" name="radioPrive">Public</label>
                                    </div>
                                </div>
                            </div>


                            <!--Button-->
                            <div class="form-group ">
                                <div class="col-md-12 text-center">
                                    <button type="submit" class="btn btn-primary btn-lg">Envoyer</button>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
            <div class="col-md-3"></div>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>

</div>

<?php include 'includes/footer-scripts.php';?>
<script>
    $(document).ready(function() {
        $("input:radio[name=radioPhototheque]").change(function() {
            var value = $(this).val();

            if (value == 'Pathologie') {
                $(".typePathologieSelect").css({"display":"block","visibility":"visible"});
                $(".typeOrganeSelect").css({"display":"none","visibility":"hidden"});

            }
            if (value == 'Organe') {
                $(".typePathologieSelect").css({"display":"none","visibility":"hidden"});
                $(".typeOrganeSelect").css({"display":"block","visibility":"visible"});
            }
        });
    });
</script>
</body>
</html>


