<!DOCTYPE html>
<html>
<head>
  <title>Definir Les Objectifs</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
        /* Style pour le formulaire */
        form {
          max-width: 400px;
          margin: 0 auto;
          padding: 20px;
          background-color: #f2f2f2;
          border: 1px solid #ccc;
          border-radius: 5px;
          font-family: Arial, sans-serif;
        }

        /* Style pour les champs de saisie */
        select, input {
          width: 100%;
          padding: 10px;
          margin-bottom: 10px;
          border: 1px solid #ccc;
          border-radius: 4px;
          box-sizing: border-box;
        }

        /* Style pour les boutons */
        button {
          padding: 10px 20px;
          margin-right: 10px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          font-size: 14px;
          font-weight: bold;
        }

        button[type="reset"] {
          background-color: #ddd;
        }

        button[type="submit"] {
          background-color: #4CAF50;
          color: white;
        }

        /* Styles pour le modal popup */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
          }

          .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 400px;
          }

          .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
          }

          .close:hover,
          .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
          }
  </style>
<body>
<div class="sidebar">
    <ul>
    <li><a href="index.html">Acceuil</a></li>
      <li><a href="abonneEdit.php">Formulaire d'edition du nombre d'abonne</a></li>
      <li><a href="edit.php">Formulaire d'edition des objectif des influenseur</a></li>
      <!-- <li><a href="#">Servicios</a></li>
      <li><a href="#">Contacto</a></li> -->
    </ul>
  </div>
  <div class="container content">
    <h2>Definir Les Objectifs</h2>
    <?php
      require_once('../ConnectMySQLDB.php');
          $bd;$actionsTypes;$influencers;
          try {
            $bd = new ConnectMySQLDB('localhost','inflfiel_social_traking','root','');
            
            //Requête pour récupérer les types d'actions
            $sql = "SELECT id, name FROM actions_types";

            $actionsTypes = $bd->executeCustomQuery($sql);

            //Requête pour récupérer les types d'actions
            $sql = "SELECT id, full_name FROM influencers";
         
            $influencers = $bd->executeCustomQuery($sql);

          } catch (PDOException $e) {
            echo 'Erreur de connexion : ' . $e->getMessage();
            exit();
          }
          ?>



    <form method="POST" action="">
      <div class="form-group">
        <label for="actions_types_id">Type d'action :</label>
        <select class="form-control" id="actions_types_id" name="actions_types_id">
          <?php
         
           
            foreach ($actionsTypes as $actionType) {
              echo '<option value="' . $actionType['id'] . '">' . $actionType['name'] . '</option>';
            }
         
          ?>
        </select>
      </div>
      <div class="form-group">
        <label for="influencers_id">Influenceur :</label>
        <select class="form-control" id="influencers_id" name="influencers_id">
          <?php
          // Requête pour récupérer les influenceurs  
         
          foreach ($influencers as $influencer) {
            echo '<option value="' . $influencer['id'] . '">' . $influencer['full_name'] . '</option>';
          }
          ?>
        </select>
      </div>
      <div class="form-group">
        <label for="objectif">Objectif :</label>
        <input type="number" class="form-control" id="objectif" name="objectif">
      </div>
      <button type="submit" name="submit" class="btn btn-primary">Ajouter</button>
    </form>
  </div>



  <?php

  if(isset($_POST['submit'])) {

      $actions_types_id = isset($_POST['actions_types_id']) ? $_POST['actions_types_id'] : null;
      $influencers_id = isset($_POST['influencers_id']) ? $_POST['influencers_id'] : null;
      $objectif = isset($_POST['objectif']) ? $_POST['objectif'] : null;
  
      
      // Créer un tableau associatif avec les données récupérées
      $data = [
        'id'=>NULL,
        'actions_types_id' => $actions_types_id,
        'influencers_id' => $influencers_id,
        'objectif' => $objectif,
    ];
  
    $insert=$bd->create('actions_types_influencers',$data);
    if ($insert){
      echo "<script>showModal();</script>";
      echo '<p id="successMessage"><span style="color: green;"><strong><em>Enregistrement effectuée avec succès.</em></strong></span></p>';
    }
    else
    {
        echo '<p id="successMessage"><span style="color: red;"><strong><em>Echec d\'Enregistrement</em></strong></span></p>';
    }

  }
?>
</body>
</html>