<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GESTION DES FOURNISSEURS - Application de gestion des Fournisseurs</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />	
	<!-- NotifyJS CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/styles/metro/notify-metro.min.css">
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	
	 <style>
        .form-group {
            margin-bottom: 15px;
        }

        .form-control {
            width: 100%;
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }

        .btn {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #0056b3;
        }

        .container {
            margin-top: 50px;
        }
    </style>
</head>
	
	    <!-- jQuery, jQuery UI, Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
	
	    <!-- NotifyJS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js"></script>

	<script>
		document.addEventListener('DOMContentLoaded', function() {
		  const token = localStorage.getItem('apiToken');
		  if (!token) {
			// Redirect to login page if no token is found
			window.location.href = 'login.html';
		  }
		});
	   document.addEventListener('DOMContentLoaded', function() {
				var logoutButton = document.getElementById('logout');
				if (logoutButton) {
					logoutButton.addEventListener('click', function() {
						localStorage.removeItem('apiToken');
						localStorage.removeItem('loggedIn');
						localStorage.removeItem('userName');
						localStorage.removeItem('lastActivity');
						window.location.href = 'login.html';
					});
				}
			});
	  </script>

  </head>
  <body>
    <!-- *****NAVBAR**** -->
    <header class="container">
      <div class="set-logo mb-3">
        <a href="#"><img src="assets/images/logo.png" alt="logo"></a>
      </div>
      <div class="set-divider-sm"></div>
      <nav class="navbar navbar-expand-lg set-nav-org">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item d-flex align-items-center gap-2">
                <img src="assets/images/home.png" alt="home">
                <a class="nav-link " aria-current="page" href="index.php">ACCUEIL</a>
              </li>
              <li class="nav-item">
                <a class="nav-link set-active" href="gestion.php">GESTION DES FOURNISSEURS</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="produits-services.php">PRODUITS & SERVICES</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="commandes.php">COMMANDES</a>
              </li>
            </ul>
            <div class="d-flex set-nav-icons dropdown" role="search">              <a href="#" class="set-border-right"><img src="assets/images/bell.png" alt=""></a>              <a href="#" class="dropdown-toggle"  data-bs-toggle="dropdown" aria-expanded="false"><img src="assets/images/user.png" alt=""></a>              <ul class="dropdown-menu">                <li><button class="dropdown-item" type="button">Profil</button></li>                <li><button class="dropdown-item" id="logout" type="button">Déconnexion</button></li>              </ul>            </div>			</div>
          </div>
        </div>
      </nav>
    </header>
    <!-- ***** BANNER ***** -->
    <section class="set-org-banner">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-7">
            <div class="row">
              <div class="col-lg-11 set-relative">
                <img src="assets/images/half-user.png" alt="user" class="set-img-top-avatar">
                <div class="set-card-main px-5 py-4 mb-5">
                  <!-- <div class="d-flex align-items-center gap-3">
                    <h5 class="m-0">Fournisseur par </h5>
                    <img src="assets/images/angle-right.png" height="16px">
                  </div>-->
                  <form>
                    <!--<select class="form-select set-select-box mt-4" aria-label="Default select example">
                      <option selected>Selectionner</option>
                      <option value="1">Nom</option>
                      <option value="2">Contact</option>
                      <option value="3">Categorie</option>
                      <option value="3">Contact acheteur</option>
                    </select>
					<input type="text" id="categoryInput" placeholder="Choisissez une catégorie..." class="form-control set-input-main  mb-3">
					<input type="text" id="searchInput" <?php if (isset($_GET['s'])){ echo "value='".$_GET['s']."'"; } ?> placeholder="Mot clé de recherche..." class="form-control set-input-main mt-4">-->
                    <!--<div class="set-btn-all mt-4">
                      <button type="submit" name="" >Entrez</button>
                    </div>-->
                  </form>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-5">
            <div class="set-main-banner-text">
              <h1>REFERENCER <span>UN</span> <br> FOURNISSEUR</h1>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ***** BOX GREY ***** -->
    <!-- <section class="set-main-grey-box py-5">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-7">
            <div class="row">
              <div class="col-lg-11 set-relative">
                <div class="set-card-main set-bg-black px-5 py-4 mb-5">
                  <div class="d-flex align-items-center gap-3">
                    <h5 class="m-0 text-light">Fournisseur par </h5>
                    <img src="assets/images/angle-right.png" height="16px">
                  </div>
                  <form>
                    <select class="form-select set-select-box mt-4" aria-label="Default select example">
                      <option selected>Selectionner</option>
                      <option value="1"> Avec blocage d’achats</option>
                      <option value="2"> Fournisseurs préalables</option>
                      <option value="2"> Fournisseurs inactifs</option>
                      <option value="3"> Fournisseurs de diversité</option>
                      <option value="3"> Exporter fournisseurs sélectionnés</option>
                      <option value="3"> Tous les fournisseurs</option>
                      <option value="3"> Évaluation fournisseurs</option>
                      <option value="3"> Contact acheteur</option>
                    </select>
                    <div class="set-btn-all mt-4">
                      <button type="submit" name="" >Entrez</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-5">
            <div class="set-main-box-img">
              <img src="assets/images/box.png" alt="" class="img-fluid">
            </div>
          </div>
        </div>
      </div>
    </section> -->
	
	
	
	
	<section class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="form-container">
						 <h2>Ajouter un Produit ou un Service</h2>
						<form id="productServiceForm">
							<div class="form-group">
								<label for="type">Type</label>
								<select id="type" name="type" class="form-control" required>
									<option value="PRODUIT">Produit</option>
									<option value="SERVICE">Service</option>
								</select>
							</div>

							<div class="form-group">
								<label for="label">Label</label>
								<input type="text" id="label" name="label" class="form-control" placeholder="Nom du produit ou service" required>
							</div>

							<div class="form-group">
								<label for="description">Description</label>
								<textarea id="description" name="description" class="form-control" placeholder="Description du produit ou service" required></textarea>
							</div>

							<div class="form-group">
								<label for="price">Prix de vente</label>
								<input type="number" id="price" name="price" class="form-control" placeholder="Prix de vente" step="0.01" required>
							</div>

							<div class="form-group">
								<label for="buyprice">Prix d'achat</label>
								<input type="number" id="buyprice" name="buyprice" class="form-control" placeholder="Prix d'achat" step="0.01" required>
							</div>

							<div class="form-group">
								<label for="ref">Référence</label>
								<input type="text" id="ref" name="ref" class="form-control" placeholder="Référence automatique" readonly>
							</div>

							<div class="form-group">
								<label for="category">Catégorie</label>
								<input type="text" id="category" name="category" class="form-control" placeholder="Choisissez une catégorie" required>
							</div>

							<button type="submit" class="btn btn-primary">Ajouter</button>
						</form>
					</div>
                </div>
            </div>
        </div>
    </section>


    <script>
    $(document).ready(function() {
        // Générer une référence automatique
        $('#type').change(function() {
            const type = $(this).val().substring(0, 3).toUpperCase();
            const timestamp = Date.now().toString().slice(-5);
            $('#ref').val(type + '-' + timestamp);
        });

        // Autocomplétion pour la catégorie
        $('#category').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "https://furytech-sa.com/voodoo/api/index.php/categories",
                    headers: {
                        'DOLAPIKEY': '2139d15a5867882fa53f5daf98e82030d138b4d7'
                    },
                    dataType: "json",
                    success: function(data) {
                        response($.map(data, function(item) {
                            return {
                                label: item.label,
                                value: item.rowid
                            };
                        }));
                    }
                });
            },
            minLength: 2,
            select: function(event, ui) {
                $('#category').val(ui.item.label);
                return false;
            }
        });

        // Soumission du formulaire
        $('#productServiceForm').submit(function(e) {
            e.preventDefault();
            const requestData = {
                label: $('#label').val(),
                description: $('#description').val(),
                price: parseFloat($('#price').val()),
                ref: $('#ref').val(),
                buyprice: parseFloat($('#buyprice').val())
            };

            $.ajax({
                url: "https://furytech-sa.com/voodoo/api/index.php/products",
                method: "POST",
                headers: {
                    'DOLAPIKEY': '2139d15a5867882fa53f5daf98e82030d138b4d7'
                },
                data: requestData,
                success: function(response) {
                    $.notify("Produit/Service ajouté avec succès", "success");
					setTimeout(() => {
                        window.location.href = 'https://furytech-sa.com/frontend/produits-services.php';
                    }, 1500);
                },
                error: function(xhr, status, error) {
                    $.notify("Erreur lors de l'ajout", "error");
                }
            });
        });
    });
</script>


	
	
	 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-Q6IAg1CjX7p3te9wT5v1r1R1lNOB/iR2K/HgXc66uwvQwsQnmZzj9N6Tf5Jq78M8" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-5sAR7xN4YKETP66H1W34LZ0i+4nj/sXQtiM5XY8R4W7pmdX8ajgFblgIrfSCPkQu" crossorigin="anonymous"></script>
  </body>
</html>