<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mon magasin</title>
  <link rel="shortcut icon" href="../image/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.5/css/mdb.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../plugins/globalOwl.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" /> 
    <link rel="stylesheet" type="text/css" href="../plugins/jquery-ui-1.12.1.custom/jquery-ui.css">
    <link href="Multi-file-Image/styles.imageuploader.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/style.css">
    <style>
    
    .label,
    .fa {
        transition: all 0.5s ease;
    }

    .label:hover {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .32);
    }

    .label:hover .fa {
        transform: scale(1.2);
        transform: rotate(720deg);
    }

    </style>

</head>

<body>

   <!-- start navbar -->
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top z-depth-0" style="z-index: 10">
    <a class="navbar-brand" href="../index.html">
      <img src="../image/logs.gif" height="42" alt="">
    </a>
    <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId"
      aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavId">
      <ul class="navbar-nav ml-auto mt-2 mt-lg-0 text-center">
      <li class="nav-item">
          <a class="nav-link" href="../index.html#overview">Overview</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../index.html#services">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../index.html#articles">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="shop.html">Boutique</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../index.html#temoignage">temoignage</a>
        </li>
        <li class="nav-item d-none dash">
          <a class="nav-link" href="../Admin-Dashboard/dashboard.html">Dashbord</a>
        </li>

        <li class="nav-item avatar dropdown prof d-none"><a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img src="../image/user.png" class="rounded-circle z-depth-0" alt="avatar image" id="profileImg"
            width="35" height="35"></a>
          <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item disabled" href="mystore.php">mon magasin</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#" id="Deconnexion">Deconnexion</a>
          </div>
        </li>

        <li class="nav-item d-none sisi" id="sisi">
          <a class="nav-link " href="../signin/signin.php"><input name="" class="btn btn-primary si" type="button"
              value="Connexion ou inscription" style="padding:3px 6px;"></a>
        </li>
      </ul>

    </div>
  </nav>



    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="info_prod mt-5">
                    <div class="card">
                        <div class="card-header blue-gradient">
                            <h2 class="title-header text-center text-light">
                                article info
                            </h2>
                        </div>

                        <div class="uploader__box js-uploader__box l-center-box mt-3">
                            <form action="your/nonjs/fallback/" method="POST">
                                <div class="uploader__contents">
                                    <label class="button button--secondary" for="fileinput">Select Files</label>
                                    <input id="fileinput" class="uploader__file-input" type="file" multiple
                                        value="choisissez des images">
                                </div>
                                <input class="button button--big-bottom" type="submit" value="Upload Selected Files">
                            </form>
                        </div>

                        <div class="card-body">
                            <!-- 
							<label for="imgup" class="label blue-gradient"
								style="display:flex; justify-content:center;align-items:center; width:100%; height:100px; cursor:pointer;">
								<i class="fa fa-download text-light fa-2x d-block" aria-hidden="true" style=""></i>
								<input type="file" id="imgup" class="d-none">
							</label>
							<div style="display:flex;justify-content:space-around;">
								<label for="imgup1" class="label blue-gradient"
									style="display:flex; justify-content:center;align-items:center; width:31%; height:100px; cursor:pointer;">
									<i class="fa fa-download text-light fa-2x d-block" aria-hidden="true" style=""></i>
									<input type="file" id="imgup1" class="d-none">
								</label>
								<label for="imgup2" class="label blue-gradient"
								style="display:flex; justify-content:center;align-items:center; width:31%; height:100px; cursor:pointer;">
								<i class="fa fa-download text-light fa-2x d-block" aria-hidden="true" style=""></i>
									<input type="file" id="imgup2" class="d-none">
								</label>
								<label for="imgup3" class="label blue-gradient"
									style="display:flex; justify-content:center;align-items:center; width:31%; height:100px; cursor:pointer;">
									<i class="fa fa-download text-light fa-2x d-block" aria-hidden="true" style=""></i>
									<input type="file" id="imgup3" class="d-none">
								</label>
							 </div> -->



                            <div class="inField mt-3 z-depth-2 p-2">

                                <!-- Material input -->
                                <div class="md-form">
                                    <input type="text" id="titreProd" class="form-control">
                                    <label for="titreProd">Nom du produit</label>
                                </div>
                                <div class="md-form mt-2">
                                    <i class="fas fa-pencil-alt prefix"></i>
                                    <textarea id="descProd" class="md-textarea form-control" rows="10"></textarea>
                                    <label for="descProd">Description du produit</label>
                                </div>
                                <div class="md-form mt-2 text-center">
                                    <input type="number" name="" id="quantProd" placeholder="Quantité" min="0">
                                </div>
                                <div class="md-form mt-2 text-center">
                                    <input type="number" name="" id="prixProd" placeholder="Prix D.A" min="0">
                                </div>
                                <div class="disnew ml-5">
                                    <!-- Group of default radios - option 2 -->
                                    <div class="custom-control custom-radio">
                                        <input type="radio" class="custom-control-input" id="defaultGroupExample1"
                                            name="groupOfDefaultRadios" value="new" checked>
                                        <label class="custom-control-label" for="defaultGroupExample1">new</label>
                                    </div>

                                    <!-- Group of default radios - option 1 -->
                                    <div class="custom-control custom-radio">
                                        <input type="radio" class="custom-control-input" id="defaultGroupExample2"
                                            name="groupOfDefaultRadios" value="discount">
                                        <label class="custom-control-label" for="defaultGroupExample2">remise</label>
                                        <div class="md-form my-0 ml-3 d-none">
                                            <input type="number" max="100" name="" id="disc" min="0" max="99"
                                                placeholder="remise ex: 50%">
                                        </div>
                                    </div>

                                </div>

                                <div class="row mx-4">
                                    <div class="col-md-6">
                                        <div class="md-form">
                                            <i class="fas fa-phone prefix"></i>
                                            <input type="text" id="numTel1" class="form-control">
                                            <label for="numTel1">Numero de télephone 1</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="md-form">
                                            <i class="fas fa-phone prefix"></i>
                                            <input type="text" id="numTel2" class="form-control">
                                            <label for="numTel2">Numero de télephone 2</label>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="bSett mt-3 z-depth-2 p-3">
                                <div class="row">
                                    <div class="col-md-12">
                                        <button
                                            class="btn btn-outline-primary waves-effect waves-primary btn-block mb-2 "
                                            id="publierProd">publier<i class="ml-2 fas fa-pencil-alt"
                                                aria-hidden="true"></i>
                                        </button>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="progress">
                                            <div class="progress-bar" role="progressbar" style="width: 0%"
                                                aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="mesProd z-depth-2 mt-5 p-5">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta accusamus odio fugiat ipsa ut, modi
                    facere inventore itaque aspernatur! Iure nam reprehenderit, odio quae non numquam fugit omnis eum
                    sunt a ducimus doloremque pariatur adipisci asperiores labore iusto eaque? Minus aspernatur mollitia
                    porro debitis, veniam in perspiciatis sequi dolor nulla?
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente tempora placeat iusto sunt saepe
                    quaerat! Minus blanditiis, accusamus iusto cupiditate corporis expedita hic delectus impedit ipsam,
                    autem nobis itaque rerum suscipit magnam quae. Modi amet dolor est error aliquid officiis cupiditate
                    praesentium distinctio? Nam, repudiandae! Tenetur voluptate adipisci sequi ullam.
                </div>
            </div>
        </div>
    </div>




    <!-- Modal -->
    <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">produit ajouté</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    le produit a bien été ajouté
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>




    <!-- <div class="form-row">
		<div class="col">

			<form name="statusForm" id="statusForm">
				<div class="form-group">
					<label for="pictures">Pictures</label>
					<input name="pictures" type="file" class="form-control" id="pictures" accept="image/*" multiple>
				</div>
				<div class="form-group">
					<button class="btn btn-outline-success" type="submit" id="post">Post</button>
				</div>
			</form>

			<div class="img-preview" id="form-image-preview">

			</div>
		
		</div>

	</div> -->




    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js">
    </script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.5/js/mdb.min.js">
    </script>
    <!-- wow animation -->
    <script src="../js/animation.js"></script>
    <script>
    new WOW().init();
    </script>


    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.3.0/firebase-storage.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
    <script src="../plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script src="../plugins/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
    <script src="Multi-file-Image/jquery.imageuploader.js"></script>
    <script src="../js/connect.js"></script>
    <script src="../signin/signin.js"></script>



    <script>
    $("input[type='radio']").on("change", function() {

        if ($("input[name=groupOfDefaultRadios]:checked").val() != "new") {
            $("#disc").parent().removeClass("d-none").addClass("d-inline-block");
        } else {
            $("#disc").parent().removeClass("d-inline-block").addClass("d-none");
        }

    })




    $("li.nav-item.avatar.dropdown.prof").addClass("d-none");
    var dash = $(".dash");
    $(".dropdown-menu").css({
        "right": "0 ",
        "left": "auto",
    })
    firebase.auth().onAuthStateChanged(function(user) {
        if (!user) {
            location.replace("../index.html")  
        } 
    });


    // télecharger les fichiers sélectionnés 
    var options = {
        submitButtonCopy: 'les images sélectionnés ',
        instructionsCopy: 'Glisser et Déposer, ou',
        furtherInstructionsCopy: 'vous pouvez ajouter d\'autre photos',
        selectButtonCopy: 'Choisissez vos images',
        secondarySelectButtonCopy: 'Ajouter plus d\'images',
        dropZone: $(this),
        fileTypeWhiteList: ['jpg', 'png', 'jpeg', 'gif'],
        badFileTypeMessage: 'desolé ce type de fichier n\'est pas pris en charge',
        ajaxUrl: '/ajax/upload',
        testMode: false
    };
    $('.js-uploader__box').uploader(options);


    $("#fileinput").on("change", function(e) {
        console.log(e.target.files[0]);
    })
    </script>

</body>

</html>