<!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-container {
            background-color: #f8f9fa;
            padding: 2rem;
            border-radius: 0.5rem;
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
        }

        .form-title {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 1.5rem;
            color: #007bff;
        }

        .form-group label {
            font-weight: bold;
        }

        .form-control {
            border-radius: 0.25rem;
        }

        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
            font-weight: bold;
            padding: 0.75rem 1.5rem;
            border-radius: 0.25rem;
        }

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

        .form-group .input-group-text {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 0.25rem 0 0 0.25rem;
        }
    </style>
	
	    <!-- 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>Créer un Fournisseur</h2>
						<form id="createSupplierForm">
							<div class="form-group">
								<label for="supplierReference">Référence Fournisseur</label>
								<input type="text" class="form-control" id="supplierReference" readonly><br>
							</div>
							<div class="form-group">
								<label for="supplierName">Nom du fournisseur</label>
								<input type="text" class="form-control" id="supplierName" placeholder="Entrez le nom du fournisseur" required><br>
							</div>
							<div class="form-group">
								<label for="supplierCategory">Catégorie fournisseur</label>
								<input type="text" class="form-control" id="supplierCategory" placeholder="Entrez la catégorie du fournisseur" required><br>
							</div>
							<div class="form-group">
								<label for="supplierDescription">Description d'activités / Service</label>
								<textarea class="form-control" id="supplierDescription" rows="3" placeholder="Décrivez les activités ou services du fournisseur" required></textarea><br>
							</div>
							<button type="button" class="btn btn-primary" onclick="createSupplier()">Créer</button>
						</form>
					</div>
                </div>
            </div>
        </div>
    </section>



    <script>
        $(document).ready(function() {
            // Charger la référence du dernier fournisseur et générer la nouvelle
            generateSupplierReference();

            // Autocomplétion pour le champ catégorie
            $('#supplierCategory').autocomplete({
                source: function(request, response) {
                    // Appel à l'API pour charger les catégories
                    $.ajax({
                        url: 'https://furytech-sa.com/voodoo/api/index.php/categories',
                        method: 'GET',
                        data: {
                            sortfield: 't.rowid',
                            sortorder: 'ASC',
                            limit: 100,
                            sqlfilters: "(t.label:like:'%" + request.term + "%')" // Filtrer par clé de recherche
                        },
                        headers: {
                            'DOLAPIKEY': '2139d15a5867882fa53f5daf98e82030d138b4d7'
                        },
                        success: function(data) {
                            const categories = data.map(category => ({
                                label: category.label,
                                value: category.id
                            }));
                            response(categories);
                        },
                        error: function(error) {
                            $.notify('Erreur lors du chargement des catégories: ' + error.responseText, 'error');
                        }
                    });
                },
                minLength: 2,
				select: function(event, ui) {
					// Définir l'élément sélectionné
					$('#supplierCategory').val(ui.item.label); // Afficher le label sélectionné dans le champ
					$('#supplierCategory').data('selected-id', ui.item.value); // Stocker l'ID de la catégorie sélectionnée
					return false; // Empêche le comportement par défaut de jQuery UI (qui est de définir la valeur sélectionnée)
				}
            });
        });

        function generateSupplierReference() {
            const prefix = "SU";
            const date = new Date();
            const day = String(date.getDate()).padStart(2, '0');
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const datePart = day + month;

            // Récupérer la dernière référence fournisseur depuis l'API
            $.ajax({
                url: 'https://furytech-sa.com/voodoo/api/index.php/thirdparties',
                method: 'GET',
                data: {
                    sortfield: 't.rowid',
                    sortorder: 'DESC', // Pour obtenir le plus récent
                    limit: 1, // Un seul résultat
					mode: 4,
                    sqlfilters: "(t.code_fournisseur:like:'SU%')" // Filtrer pour les références commençant par SU
                },
                headers: {
                    'DOLAPIKEY': '2139d15a5867882fa53f5daf98e82030d138b4d7'
                },
                success: function(data) {
                    if (data.length > 0) {
                        // Extraire le numéro séquentiel de la dernière référence
                        const lastReference = data[0].code_fournisseur;
                        const lastSequence = parseInt(lastReference.split('-')[1]);
                        const newSequence = String(lastSequence + 1).padStart(5, '0');

                        // Générer la nouvelle référence
                        const newReference = prefix + datePart + '-' + newSequence;
                        $('#supplierReference').val(newReference);
                    } else {
                        // Si aucune référence précédente, commencer à 00001
                        $('#supplierReference').val(prefix + datePart + '-00001');
                    }
                },
                error: function(error) {
                    $.notify('Erreur lors de la génération de la référence fournisseur: ' + error.responseText, 'error');
                    // Générer une référence par défaut en cas d'erreur
                    $('#supplierReference').val(prefix + datePart + '-00001');
                }
            });
        }


        function createSupplier() {
            const supplierReference = $('#supplierReference').val();
            const supplierName = $('#supplierName').val();
            const supplierCategory = $('#supplierCategory').val();
            const supplierDescription = $('#supplierDescription').val();

            const requestData = {
                "code_fournisseur": supplierReference,
                "name": supplierName,
                "category": supplierCategory,
                "fournisseur": 1,
                "note_public": supplierDescription
            };

            $.ajax({
                url: 'https://furytech-sa.com/voodoo/api/index.php/thirdparties',
                method: 'POST',
                contentType: 'application/json',
                headers: {
                    'DOLAPIKEY': '2139d15a5867882fa53f5daf98e82030d138b4d7'
                },
                data: JSON.stringify(requestData),
                success: function(response) {
                    $.notify('Fournisseur créé avec succès', 'success');
                    // Redirection vers la page gestion
                    setTimeout(() => {
                        window.location.href = 'https://furytech-sa.com/frontend/gestion.php';
                    }, 1500);
                },
                error: function(error) {
                    $.notify('Erreur lors de la création du fournisseur: ' + error.responseText, '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>