Current File : /home/digitaw/Ycof/.history/admin/clients_20230607122413.php
<?php

require 'configuration.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') { 
  


//   if (isset($_POST['modifier'])) { 
//  $nom = $_POST['nom'];
//  $prenom = $_POST['prenom'];
//  $email = $_POST['email'];
//  $phone = $_POST['phone'];
//  $username = $_POST['username'];
//  if (!empty($nom) && !empty($prenom) && !empty($email) && !empty($phone) && !empty($username)) {
//   $query="update utilisateurs set nom='$nom',prenom='$prenom',email='$email',phone='$phone',username='$username' where email='$email'";
//   $connection->query($query); 
//   $verification=$connection->query($query);
//   if ($verification) {
//     $msg = "Modification reussie !";
//     $_SESSION['msg'] = "<div class='alert alert-success alert-dismissible fade show ' role='alert'>
//     <svg xmlns='http://www.w3.org/2000/svg' style='margin-right:10px' width='20' height='20' fill='currentColor' class='bi bi-check2-all' viewBox='0 0 16 16'>
//     <path d='M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z'/>
//     <path d='m5.354 7.146.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708z'/>
//   </svg>
//          <strong style='font-size:17px;'>$msg</strong>
//          <button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>
//      </div>";
    
//   }
//  } 
//  } 



 if (isset($_POST['enregistrer'])) {
  $nom = $_POST['nom'];
  $prenom = $_POST['prenom'];
  $email = $_POST['email'];
  $phone = $_POST['phone'];
  $username = $_POST['username'];
  $passwd = $_POST['password'];
  $passwdcrype = sha1($_POST['password']);
  $messageErreur = '';
  $messageSuccess = '';


  do {

    $requete = "SELECT * FROM utilisateurs WHERE username='$username' OR email='$email'";
    $verification = $connection->query($requete);
    if ($verification->num_rows > 0) {
      $msg = "ce compte existe déja !";
      $_SESSION['msg'] = "<div class='alert alert-danger alert-dismissible fade show ' role='alert'>
           <i class='bi bi-check-circle ml-5' style='font-size:25px;'></i>
           <strong style='font-size:17px;'>$msg</strong>
           <button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>
       </div>";
      header("Location: clients.php");
    } else {
      //insertion
      $requete = "INSERT INTO utilisateurs(nom,prenom,email,phone,username,passwd,action) VALUES('$nom','$prenom','$email','$phone','$username','$passwdcrype',1)";
      $verification = $connection->query($requete);
      if ($verification) {
        $msg = "Inscription reussie !";
        $_SESSION['msg'] = "<div class='alert alert-success alert-dismissible fade show ' role='alert'>
               <i class='bi bi-check-circle ml-5' style='font-size:25px;'></i>
               <strong style='font-size:17px;'>$msg</strong>
               <button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>
           </div>";

        header("Location: clients.php"); 
      }
    }
  } while (false);
}
}
$db_user = "root";
$db_pass = "";
$db_name = "ycof";
$db = new PDO('mysql:host=localhost;dbname=' . $db_name . ';charset=utf8', $db_user, $db_pass);
$reponse =$db->query("SELECT * FROM utilisateurs ORDER BY  id DESC");
?>

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

<!-- Mirrored from demo.plainadmin.com/ by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 02 May 2023 10:57:48 GMT -->
<!-- Added by HTTrack -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="/images/favicon.svg" type="image/x-icon" />
  <title>Ycof_Assurances_Admin</title>

  <!-- ========== All CSS files linkup ========= -->
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/lineicons.css" />
  <link rel="stylesheet" href="css/quill/bubble.css" />
  <link rel="stylesheet" href="css/quill/snow.css" />
  <link rel="stylesheet" href="css/fullcalendar.css" />
  <link rel="stylesheet" href="css/morris.css" />
  <link rel="stylesheet" href="css/datatable.css" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="res.css" />
</head>

<body>
  <!-- ======== sidebar-nav start =========== -->
  <aside class="sidebar-nav-wrapper">
    <div class="navbar-logo">
      <a href="index.html">
        <img src="../img/ycof_bac.png" width="90px" alt="logo" />
      </a>
    </div>
    <nav class="sidebar-nav">
      <ul>
        <li class="nav-item nav-item-has-children ">
          <a href="#0" data-bs-toggle="collapse" data-bs-target="#ddmenu_1" aria-controls="ddmenu_1"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon">
              <svg width="22" height="22" viewBox="0 0 22 22">
                <path
                  d="M17.4167 4.58333V6.41667H13.75V4.58333H17.4167ZM8.25 4.58333V10.0833H4.58333V4.58333H8.25ZM17.4167 11.9167V17.4167H13.75V11.9167H17.4167ZM8.25 15.5833V17.4167H4.58333V15.5833H8.25ZM19.25 2.75H11.9167V8.25H19.25V2.75ZM10.0833 2.75H2.75V11.9167H10.0833V2.75ZM19.25 10.0833H11.9167V19.25H19.25V10.0833ZM10.0833 13.75H2.75V19.25H10.0833V13.75Z" />
              </svg>
            </span>
            <span class="text">Dashboard</span>
          </a>
          <ul id="ddmenu_1" class="collapse show dropdown-nav">

            </a>
        </li>
        <li class="nav-item active">
          <a href="clients.php">
            <span class="icon">
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M11.0001 3.66675C11.9725 3.66675 12.9052 4.05306 13.5928 4.74069C14.2804 5.42832 14.6667 6.36095 14.6667 7.33341C14.6667 8.30587 14.2804 9.23851 13.5928 9.92614C12.9052 10.6138 11.9725 11.0001 11.0001 11.0001C10.0276 11.0001 9.09499 10.6138 8.40736 9.92614C7.71972 9.23851 7.33341 8.30587 7.33341 7.33341C7.33341 6.36095 7.71972 5.42832 8.40736 4.74069C9.09499 4.05306 10.0276 3.66675 11.0001 3.66675ZM11.0001 5.50008C10.5139 5.50008 10.0475 5.69324 9.70372 6.03705C9.3599 6.38087 9.16675 6.84718 9.16675 7.33341C9.16675 7.81964 9.3599 8.28596 9.70372 8.62978C10.0475 8.97359 10.5139 9.16675 11.0001 9.16675C11.4863 9.16675 11.9526 8.97359 12.2964 8.62978C12.6403 8.28596 12.8334 7.81964 12.8334 7.33341C12.8334 6.84718 12.6403 6.38087 12.2964 6.03705C11.9526 5.69324 11.4863 5.50008 11.0001 5.50008ZM11.0001 11.9167C13.4476 11.9167 18.3334 13.1359 18.3334 15.5834V18.3334H3.66675V15.5834C3.66675 13.1359 8.55258 11.9167 11.0001 11.9167ZM11.0001 13.6584C8.27758 13.6584 5.40841 14.9967 5.40841 15.5834V16.5917H16.5917V15.5834C16.5917 14.9967 13.7226 13.6584 11.0001 13.6584Z" />
              </svg>
            </span>
            <span class="text">
              Clients
            </span>
          </a>
        </li>
        <li class="nav-item">
          <a href="voyage.php">
            <span class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-airplane"
                viewBox="0 0 16 16">
                <path
                  d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Zm.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1c-.213 0-.458.158-.678.599Z" />
              </svg>
            </span>
            <span class="text">Assurance Voyage</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="auto.php">
            <span class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-car-front"
                viewBox="0 0 16 16">
                <path
                  d="M4 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm10 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6 8a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2H6ZM4.862 4.276 3.906 6.19a.51.51 0 0 0 .497.731c.91-.073 2.35-.17 3.597-.17 1.247 0 2.688.097 3.597.17a.51.51 0 0 0 .497-.731l-.956-1.913A.5.5 0 0 0 10.691 4H5.309a.5.5 0 0 0-.447.276Z" />
                <path
                  d="M2.52 3.515A2.5 2.5 0 0 1 4.82 2h6.362c1 0 1.904.596 2.298 1.515l.792 1.848c.075.175.21.319.38.404.5.25.855.715.965 1.262l.335 1.679c.033.161.049.325.049.49v.413c0 .814-.39 1.543-1 1.997V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.338c-1.292.048-2.745.088-4 .088s-2.708-.04-4-.088V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.892c-.61-.454-1-1.183-1-1.997v-.413a2.5 2.5 0 0 1 .049-.49l.335-1.68c.11-.546.465-1.012.964-1.261a.807.807 0 0 0 .381-.404l.792-1.848ZM4.82 3a1.5 1.5 0 0 0-1.379.91l-.792 1.847a1.8 1.8 0 0 1-.853.904.807.807 0 0 0-.43.564L1.03 8.904a1.5 1.5 0 0 0-.03.294v.413c0 .796.62 1.448 1.408 1.484 1.555.07 3.786.155 5.592.155 1.806 0 4.037-.084 5.592-.155A1.479 1.479 0 0 0 15 9.611v-.413c0-.099-.01-.197-.03-.294l-.335-1.68a.807.807 0 0 0-.43-.563 1.807 1.807 0 0 1-.853-.904l-.792-1.848A1.5 1.5 0 0 0 11.18 3H4.82Z" />
              </svg>
            </span>
            <span class="text">
              Assurance Auto
            </span>
          </a>
        </li>
        <li class="nav-item">
          <a href="habitat.php">
            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-house"
              viewBox="0 0 16 16">
              <path
                d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z" />
            </svg>
            <span class="text" style="margin-left: 8px;">
              Assurance Habitation
            </span>
          </a>
        </li>
        <li class="nav-item">
          <a href="sante.php">
            <span class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-lungs"
                viewBox="0 0 16 16">
                <path
                  d="M8.5 1.5a.5.5 0 1 0-1 0v5.243L7 7.1V4.72C7 3.77 6.23 3 5.28 3c-.524 0-1.023.27-1.443.592-.431.332-.847.773-1.216 1.229-.736.908-1.347 1.946-1.58 2.48-.176.405-.393 1.16-.556 2.011-.165.857-.283 1.857-.241 2.759.04.867.233 1.79.838 2.33.67.6 1.622.556 2.741-.004l1.795-.897A2.5 2.5 0 0 0 7 11.264V10.5a.5.5 0 0 0-1 0v.764a1.5 1.5 0 0 1-.83 1.342l-1.794.897c-.978.489-1.415.343-1.628.152-.28-.25-.467-.801-.505-1.63-.037-.795.068-1.71.224-2.525.157-.82.357-1.491.491-1.8.19-.438.75-1.4 1.44-2.25.342-.422.703-.799 1.049-1.065.358-.276.639-.385.833-.385a.72.72 0 0 1 .72.72v3.094l-1.79 1.28a.5.5 0 0 0 .58.813L8 7.614l3.21 2.293a.5.5 0 1 0 .58-.814L10 7.814V4.72a.72.72 0 0 1 .72-.72c.194 0 .475.11.833.385.346.266.706.643 1.05 1.066.688.85 1.248 1.811 1.439 2.249.134.309.334.98.491 1.8.156.814.26 1.73.224 2.525-.038.829-.224 1.38-.505 1.63-.213.19-.65.337-1.628-.152l-1.795-.897A1.5 1.5 0 0 1 10 11.264V10.5a.5.5 0 0 0-1 0v.764a2.5 2.5 0 0 0 1.382 2.236l1.795.897c1.12.56 2.07.603 2.741.004.605-.54.798-1.463.838-2.33.042-.902-.076-1.902-.24-2.759-.164-.852-.38-1.606-.558-2.012-.232-.533-.843-1.571-1.579-2.479-.37-.456-.785-.897-1.216-1.229C11.743 3.27 11.244 3 10.72 3 9.77 3 9 3.77 9 4.72V7.1l-.5-.357V1.5Z" />
              </svg>
            </span>
            <span class="text">
              Assurance Santé
            </span>
          </a>
        </li>
        <li class="nav-item">
          <a> <span class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
                class="bi bi-person-lock" viewBox="0 0 16 16">
                <path
                  d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 5.996V14H3s-1 0-1-1 1-4 6-4c.564 0 1.077.038 1.544.107a4.524 4.524 0 0 0-.803.918A10.46 10.46 0 0 0 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h5ZM9 13a1 1 0 0 1 1-1v-1a2 2 0 1 1 4 0v1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2Zm3-3a1 1 0 0 0-1 1v1h2v-1a1 1 0 0 0-1-1Z" />
              </svg>
            </span>
            <span class="text" data-bs-toggle="modal" data-bs-target="#deconnexion"
              data-bs-whatever="@mdo">Déconnexion</span>
          </a>

        </li>



      </ul>
    </nav>

  </aside>
  <!-- ============  POPOP DECONNEXION============= -->
  <div class="modal fade" id="deconnexion" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalLabel">Déconnexion</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="md-form ">
            <div class="input_wrap mt-4" style="color: black; text-align: center;">
              <label for="">Voulez-vous vous déconnectez ?</label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><svg xmlns="http://www.w3.org/2000/svg"
              width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
              <path
                d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
            </svg> NON</button>
          <a href="logout.php"><button type="button" class="btn btn-success"><svg xmlns="http://www.w3.org/2000/svg"
                width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
                <path
                  d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z" />
              </svg>OUI</button></a>
        </div>

      </div>
    </div>
  </div>
  <div class="overlay"></div>
  <!-- ======== sidebar-nav end =========== -->

  <!-- ======== main-wrapper start =========== -->
  <main class="main-wrapper">
    <!-- ========== header start ========== -->
    <header class="header">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-5 col-md-5 col-6">
            <div class="header-left d-flex align-items-center">
              <div class="menu-toggle-btn mr-20">
                <button id="menu-toggle" class="main-btn primary-btn btn-hover">
                  <i class="lni lni-chevron-left me-2"></i> Menu
                </button>
              </div>
              <div class="header-search d-none d-md-flex">
                <form action="#">
                  <input type="text" placeholder="Search..." />
                  <button><i class="lni lni-search-alt"></i></button>
                </form>
              </div>
            </div>
          </div>
          <div class="col-lg-7 col-md-7 col-6">
            <div class="header-right">
              <!-- notification start -->
              <div class="notification-box ml-15 d-none d-md-flex">
                <button class="dropdown-toggle" type="button" id="notification" data-bs-toggle="dropdown"
                  aria-expanded="false">
                  <i class="lni lni-alarm"></i>
                  <span>2</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notification">
                  <li>
                    <a href="#0">
                      <div class="image">
                        <img src="/images/lead/lead-6.png" alt="" />
                      </div>
                      <div class="content">
                        <h6>
                          John Doe
                          <span class="text-regular">
                            comment on a product.
                          </span>
                        </h6>
                        <p>
                          Lorem ipsum dolor sit amet, consect etur adipiscing
                          elit Vivamus tortor.
                        </p>
                        <span>10 mins ago</span>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#0">
                      <div class="image">
                        <img src="/images/lead/lead-1.png" alt="" />
                      </div>
                      <div class="content">
                        <h6>
                          Jonathon
                          <span class="text-regular">
                            like on a product.
                          </span>
                        </h6>
                        <p>
                          Lorem ipsum dolor sit amet, consect etur adipiscing
                          elit Vivamus tortor.
                        </p>
                        <span>10 mins ago</span>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
              <!-- notification end -->
              <!-- message start -->
              <div class="header-message-box ml-15 d-none d-md-flex">
                <button class="dropdown-toggle" type="button" id="message" data-bs-toggle="dropdown"
                  aria-expanded="false">
                  <i class="lni lni-envelope"></i>
                  <span>3</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="message">
                  <li>
                    <a href="#0">
                      <div class="image">
                        <img src="/images/lead/lead-5.png" alt="" />
                      </div>
                      <div class="content">
                        <h6>Jacob Jones</h6>
                        <p>Hey!I can across your profile and ...</p>
                        <span>10 mins ago</span>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#0">
                      <div class="image">
                        <img src="/images/lead/lead-3.png" alt="" />
                      </div>
                      <div class="content">
                        <h6>John Doe</h6>
                        <p>Would you mind please checking out</p>
                        <span>12 mins ago</span>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#0">
                      <div class="image">
                        <img src="/images/lead/lead-2.png" alt="" />
                      </div>
                      <div class="content">
                        <h6>Anee Lee</h6>
                        <p>Hey! are you available for freelance?</p>
                        <span>1h ago</span>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
              <!-- message end -->
              <!-- filter start -->
              <div class="filter-box ml-15 d-none d-md-flex">
                <button class="" type="button" id="filter">
                  <i class="lni lni-funnel"></i>
                </button>
              </div>
              <!-- filter end -->
              <!-- profile start -->
              <div class="profile-box ml-15">
                <button class="dropdown-toggle bg-transparent border-0" type="button" id="profile"
                  data-bs-toggle="dropdown" aria-expanded="false">
                  <div class="profile-info">
                    <div class="info">
                      <h6>
                        <?php echo $_SESSION['email']; ?>
                      </h6>
                      <div class="image">
                        <img src="/images/profile/profile-image.png" alt="" />
                        <span class="status"></span>
                      </div>
                    </div>
                  </div>
                  <i class="lni lni-chevron-down"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profile">
                  <li>
                    <span class="icon ml-15">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-person" viewBox="0 0 16 16">
                        <path
                          d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z" />
                      </svg>
                    </span>
                    <span class="text ml-5" data-bs-toggle="modal" data-bs-target="#deconnexion1"
                      data-bs-whatever="@mdo" style="cursor: pointer;font-size: 13px;">Voir profile</span>

                  </li>

                  <li>
                    <a href="#0"> <i class="lni lni-inbox"></i> Messages </a>
                  </li>
                  <li>
                    <span class="icon ml-15">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-person-lock" viewBox="0 0 16 16">
                        <path
                          d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 5.996V14H3s-1 0-1-1 1-4 6-4c.564 0 1.077.038 1.544.107a4.524 4.524 0 0 0-.803.918A10.46 10.46 0 0 0 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h5ZM9 13a1 1 0 0 1 1-1v-1a2 2 0 1 1 4 0v1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2Zm3-3a1 1 0 0 0-1 1v1h2v-1a1 1 0 0 0-1-1Z" />
                      </svg>
                    </span>
                    <span class="text ml-5" data-bs-toggle="modal" data-bs-target="#deconnexion" data-bs-whatever="@mdo"
                      style="cursor: pointer;font-size: 13px;">Déconnexion</span>


                  </li>

                </ul>
              </div>
              <!-- profile end -->
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- ========== header end ========== -->

    <!-- ========== section start ========== -->
    <section class="section">
      <div class="container-fluid">
        <!-- ========== title-wrapper start ========== -->
        <div class="title-wrapper pt-30 ">
          <div class="row align-items-center ">
            <div class="col-md-12 d-flex justify-content-between">
              <h2>Clients</h2>
              <!-- Button  modal client -->
              <?php if (!empty($_SESSION['msg'])) {
                echo $_SESSION['msg'];
                unset($_SESSION['msg']);
              } ?>
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
                data-bs-whatever="@mdo"><i class="lni lni-add-files"></i> Ajouter client</button>
            </div>
            <!-- end button modal santé-->
          </div>
          <!-- end col -->
        </div>
        <div class=" d-flex justify-content-center align-items-center">

          <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Ajouter client</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <form action="" method="post">
                    <div class="mb-3">

                      <input type="text" class="form-control" id="password" placeholder="Nom" required name="nom">
                    </div>
                    <div class="mb-3">

                      <input type="text" class="form-control" id="password" placeholder="Prénom" required name="prenom">
                    </div>
                    <div class="mb-3">

                      <input type="email" class="form-control" id="password" placeholder="Email" required name="email">
                    </div>
                    <div class="mb-3">

                      <input type="number" class="form-control" id="password" placeholder="Téléphone" required
                        name="phone">
                    </div>
                    <div class="mb-3">

                      <input type="text" class="form-control" id="Username" placeholder="Utilisateur" required
                        name="username">
                    </div>
                    <div class="mb-3">

                      <input type="password" class="form-control" id="password" placeholder="Password" required
                        name="password">
                    </div>

                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><svg
                      xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
                      viewBox="0 0 16 16">
                      <path
                        d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
                    </svg> Annuler</button>
                  <button type="submit" name="enregistrer" class="btn btn-success"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                      height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
                      <path
                        d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z" />
                    </svg> Enregistrer</button>
                </div>
                </form>
              </div>
            </div>
          </div>
        </div>

        <!-- end row -->
      </div>


      <!-- End Col -->
      <div class="col-lg-12 mt-3 ">
        <div class="card-style mb-30">
          <div class="title d-flex flex-wrap align-items-center justify-content-between">
            <div class="left">
              <h6 class="text-medium mb-30">Liste des clients inscrits</h6>
            </div>
            <div class="right">
              <div class="select-style-1">

              </div>
              <!-- end select -->
            </div>
          </div>
          <!-- End Title -->
          <div class="table-responsive">
            
          
            <table class="table top-selling-table">
              <thead>
                <tr>
                  <th>#</th>
                  <th id="t">Nom</th>
                  <th id="t" class="min-width">Prénom</th>
                  <th id="t" class="min-width">Email</th>
                  <th class="min-width">Téléphone</th>
                  <th class="min-width">Statut</th>
                  <th class="text-end">Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                <?php
                $i=1;
                // On affiche chaque entrée une à une
                while ($donnees = $reponse->fetch()) {
                ?>
                <td><?php echo $i++; ?></td>
                    <td id="t"><?php echo $donnees['nom']; ?></td>
                    <td id="t"><?php echo $donnees['prenom']; ?></td>
                    <td id="t"><?php echo $donnees['email'] ; ?></td>
                    <td><?php echo $donnees['phone']; ?></td>
                    <td><?php 
                    if($donnees['action']==1){
                    echo    '<span style="color:green;border:10px solid green;border-radius:50%"></span>'; 
                    }else{
                    echo    '<span style="color:red;border:10px solid red;border-radius:50%" ></span>';
                    } ?>
                    </td>
                              
                  <td>
                    <div class="action justify-content-end">
                      <button class="more-btn ml-10 dropdown-toggle" id="moreAction1" data-bs-toggle="modal"
                        data-bs-target="#detail_client<?php echo $donnees['id'] ?>" data-bs-toggle="dropdown" aria-expanded="false"><i
                          class="lni lni-eye"></i>
                      </button>
                      <button class="edit" id="moreAction1" data-bs-toggle="modal" data-bs-target="#modifier_client<?php echo $donnees['id'] ?>"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="lni lni-pencil"></i>
                      </button>
                      <button class="disable" id="moreAction1" data-bs-toggle="modal" data-bs-target="#desactive_client<?php echo $donnees['id'] ?>"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-gear" viewBox="0 0 16 16">
  <path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm.256 7a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Zm3.63-4.54c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382l.045-.148ZM14 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"/>
</svg>
                      </button>

                    </div>
                  </td>
                </tr>

                  <!-- Modal pup up detail-->
  <div class="modal fade" id="detail_client<?php echo $donnees['id'] ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalLabel">Détail du client</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
        <div class="shadow">
                                    <div class="row p-3">
                                      <div class="col-6">
                                        <span class="table-secondary"><b>Nom :
                                            <?php echo $donnees['nom']; ?></span>
                                      </div>
                                      <div class="col-6">
                                        <span class="table-secondary"><b>Prénom :
                                            <?php echo $donnees['prenom']; ?></span>
                                      </div>
                                    </div>
                                    <div class="row p-3">
                                      <div class="col-6">
                                        <span class="table-secondary"><b>E-mail :
                                            <?php echo $donnees['email']; ?></span>
                                      </div>
                                      <div class="col-6">
                                        <span class="table-secondary"><b>Username :
                                            <?php echo $donnees['username']; ?></span>
                                      </div>
                                    </div>
                                    <div class="row p-3">
                                      <div class="col-12">
                                        <span class="table-secondary"><b>Téléphone :
                                            <?php echo $donnees['phone']; ?></span>
                                      </div>
                                      
                                    </div>
          
               
              
              
              

        </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><svg xmlns="http://www.w3.org/2000/svg"
              width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
              <path
                d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
            </svg> Fermer</button>

        </div>

      </div>
    </div>
  </div>
    <!-- Modal pup up modifier-->
    <div class="modal fade" id="modifier_client<?php echo $donnees['id'] ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalLabel">Modifier les informations</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form  action="upd_client.php" method="post">
            
            <div class="mb-3">

              <input type="text" class="form-control" id="password" placeholder="Nom" name="nom" required value="<?php echo $donnees['nom']; ?>">
            </div>
            <div class="mb-3">

              <input type="text" class="form-control" id="password" placeholder="Prénom" name="prenom" required value="<?php echo $donnees['prenom']; ?>">
            </div>
            <div class="mb-3">

              <input type="email" class="form-control" id="password" placeholder="Email" required name="email"  value="<?php echo $donnees['email']; ?>">
            </div>
            <div class="mb-3">

              <input type="number" class="form-control" id="password" placeholder="Téléphone" name="phone" required value="<?php echo $donnees['phone']; ?>">
            </div>
            <div class="mb-3">

              <input type="text" class="form-control" id="Username" placeholder="Utilisateur" name="username" required value="<?php echo $donnees['username']; ?>">
            </div>

         
  

        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><svg xmlns="http://www.w3.org/2000/svg"
              width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
              <path
                d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
            </svg> Annuler</button>
            <button type="submit" id="modifier" name="modifier" class="btn btn-success" data-bs-dismiss="modal"><svg
              xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
              viewBox="0 0 16 16">
              <path
                d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
            </svg> Valider</button>

        </div>
        </form>

        </div>
      </div>
    </div>
  </div>
  <!-- ============  POPOP DECONNEXION============= -->
  <div class="modal fade" id="desactive_client<?php echo $donnees['id'] ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalLabel">Nouveau statut</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form action="action.php" method="post">
        <div class="modal-body">
          <div class="md-form p-2">
            <div class="input_wrap" style="color: black; text-align: center;"> 
           <input type="text" name="id" id="id" hidden value="<?php echo $donnees['id'] ?>">
           <p>Selectionner un nouveau statut :</p> 
            <select name="action" id="action" required class="form-control">  
              <option value="0">Désactiver</option>
              <option value="1">Activer</option>
            </select>
       </div> 
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><svg xmlns="http://www.w3.org/2000/svg"
              width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16" >
              <path
                d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
            </svg> Annuler</button>
           
            <button type="submit" name="action_client" id="action_client" class="btn btn-success"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
              fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
              <path
                d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z" />
            </svg> Valider</button>
            </form>
         
        </div>

      </div>
    </div>
  </div>
<?php
    }
     $reponse->closeCursor(); // Termine le traitement de la requête
 ?>

              </tbody>
            </table>
            <!-- End Table -->
          </div>
        </div>
      </div>
      <!-- End Col -->
      </div>
      <!-- End Row -->
      </div>
      <!-- end container -->
      <a href="#" class=" btn-primary btn-lg-square rounded-circle back-to-top"><svg xmlns="http://www.w3.org/2000/svg"
          width="35" height="35" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16">
          <path fill-rule="evenodd"
            d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z" />
        </svg></a>
    </section>
    <!-- ========== section end ========== -->

    <!-- ========== footer start =========== -->
    <footer class="footer">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12 order-last order-md-first">
            <div class="copyright text-center text-md-start">
              <p class="text-sm">
                Copyright © 2023 | Powered by ®
                <a href="https://digitalis-sn.com/" rel="nofollow" target="_blank">
                  DIGITALIS SN
                </a>
              </p>
            </div>
          </div>

        </div>
        <!-- end row -->
      </div>
      <!-- end container -->
    </footer>
    <!-- ========== footer end =========== -->
  </main>
  <!-- ======== main-wrapper end =========== -->

  <!-- ============ Theme Option Start ============= -->
  <button class="option-btn">
    <i class="lni lni-cog"></i>
  </button>
  <div class="option-overlay"></div>
  <div class="option-box">
    <div class="option-header">
      <div>
        <h6 class="mb-10">Personnalisez</h6>
        <p class="text-gray">Vous pouvez personnalisez et prévisualisez</p>
      </div>
      <button class="option-btn-close text-gray">
        <i class="lni lni-close"></i>
      </button>
    </div>
    <h6 class="mb-10">Menu</h6>
    <ul class="mb-30">
      <li><button class="leftSidebarButton active">Afficher à gauche</button></li>
      <li><button class="rightSidebarButton">Afficher à droite</button></li>
    </ul>

    <h6 class="mb-10">Thèmes</h6>
    <ul class="d-flex flex-wrap align-items-center">
      <li>
        <button class="lightThemeButton active">
          Thème Claire 1
        </button>
      </li>
      <li>
        <button class="lightThemeButton2"> Thème Claire 2</button>
      </li>
      <li><button class="darkThemeButton"> Thème Sombre 1</button></li>
      <li>
        <button class="darkThemeButton2">Thème Sombre 2</button>
      </li>
    </ul>
    <a href="index.html">
      <img src="../img/ycof_bac.png" alt="" width="100px" style="margin-top: 35%; margin-left: 35%;">

    </a>
  </div>
  <!-- ============ Theme Option End ============= -->




  
  <!-- ========= All Javascript files linkup ======== -->
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/Chart.min.js"></script>
  <script src="js/apexcharts.min.js"></script>
  <script src="js/dynamic-pie-chart.js"></script>
  <script src="js/moment.min.js"></script>
  <script src="js/fullcalendar.js"></script>
  <script src="js/jvectormap.min.js"></script>
  <script src="js/world-merc.js"></script>
  <script src="js/polyfill.js"></script>
  <script src="js/quill.min.js"></script>
  <script src="js/datatable.js"></script>
  <script src="js/Sortable.min.js"></script>
  <script src="js/main.js"></script>
  <script src="js/clients.js"></script>


  <script>

  // ======== jvectormap activation
    var markers = [{
      name: "Egypt",
      coords: [26.8206, 30.8025]
    },
    {
      name: "Russia",
      coords: [61.524, 105.3188]
    },
    {
      name: "Canada",
      coords: [56.1304, -106.3468]
    },
    {
      name: "Greenland",
      coords: [71.7069, -42.6043]
    },
    {
      name: "Brazil",
      coords: [-14.235, -51.9253]
    },
    ];

    var jvm = new jsVectorMap({
      map: "world_merc",
      selector: "#map",
      zoomButtons: true,

      regionStyle: {
        initial: {
          fill: "#d1d5db",
        },
      },

      labels: {
        markers: {
          render: (marker) => marker.name,
        },
      },

      markersSelectable: true,
      selectedMarkers: markers.map((marker, index) => {
        var name = marker.name;

        if (name === "Russia" || name === "Brazil") {
          return index;
        }
      }),
      markers: markers,
      markerStyle: {
        initial: {
          fill: "#4A6CF7"
        },
        selected: {
          fill: "#ff5050"
        },
      },
      markerLabelStyle: {
        initial: {
          fontWeight: 400,
          fontSize: 14,
        },
      },
    });
    // ====== calendar activation
    document.addEventListener("DOMContentLoaded", function () {
      var calendarMiniEl = document.getElementById("calendar-mini");
      var calendarMini = new FullCalendar.Calendar(calendarMiniEl, {
        initialView: "dayGridMonth",
        headerToolbar: {
          end: "today prev,next",
        },
      });
      calendarMini.render();
    });

    // =========== chart one start
    const ctx1 = document.getElementById("Chart1").getContext("2d");
    const chart1 = new Chart(ctx1, {
      // The type of chart we want to create
      type: "line", // also try bar or other graph types

      // The data for our dataset
      data: {
        labels: [
          "Jan",
          "Fab",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ],
        // Information about the dataset
        datasets: [{
          label: "",
          backgroundColor: "transparent",
          borderColor: "#4A6CF7",
          data: [
            600, 800, 750, 880, 940, 880, 900, 770, 920, 890, 976, 1100,
          ],
          pointBackgroundColor: "transparent",
          pointHoverBackgroundColor: "#4A6CF7",
          pointBorderColor: "transparent",
          pointHoverBorderColor: "#fff",
          pointHoverBorderWidth: 5,
          pointBorderWidth: 5,
          pointRadius: 8,
          pointHoverRadius: 8,
        },],
      },

      // Configuration options
      defaultFontFamily: "Inter",
      options: {
        tooltips: {
          callbacks: {
            labelColor: function (tooltipItem, chart) {
              return {
                backgroundColor: "#ffffff",
              };
            },
          },
          intersect: false,
          backgroundColor: "#f9f9f9",
          titleFontFamily: "Inter",
          titleFontColor: "#8F92A1",
          titleFontColor: "#8F92A1",
          titleFontSize: 12,
          bodyFontFamily: "Inter",
          bodyFontColor: "#171717",
          bodyFontStyle: "bold",
          bodyFontSize: 16,
          multiKeyBackground: "transparent",
          displayColors: false,
          xPadding: 30,
          yPadding: 10,
          bodyAlign: "center",
          titleAlign: "center",
        },

        title: {
          display: false,
        },
        legend: {
          display: false,
        },

        scales: {
          yAxes: [{
            gridLines: {
              display: false,
              drawTicks: false,
              drawBorder: false,
            },
            ticks: {
              padding: 35,
              max: 1200,
              min: 500,
            },
          },],
          xAxes: [{
            gridLines: {
              drawBorder: false,
              color: "rgba(143, 146, 161, .1)",
              zeroLineColor: "rgba(143, 146, 161, .1)",
            },
            ticks: {
              padding: 20,
            },
          },],
        },
      },
    });

    // =========== chart one end

    // =========== chart two start
    const ctx2 = document.getElementById("Chart2").getContext("2d");
    const chart2 = new Chart(ctx2, {
      // The type of chart we want to create
      type: "bar", // also try bar or other graph types
      // The data for our dataset
      data: {
        labels: [
          "Jan",
          "Fab",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ],
        // Information about the dataset
        datasets: [{
          label: "",
          backgroundColor: "#4A6CF7",
          barThickness: 6,
          maxBarThickness: 8,
          data: [
            600, 700, 1000, 700, 650, 800, 690, 740, 720, 1120, 876, 900,
          ],
        },],
      },
      // Configuration options
      options: {
        borderColor: "#F3F6F8",
        borderWidth: 15,
        backgroundColor: "#F3F6F8",
        tooltips: {
          callbacks: {
            labelColor: function (tooltipItem, chart) {
              return {
                backgroundColor: "rgba(104, 110, 255, .0)",
              };
            },
          },
          backgroundColor: "#F3F6F8",
          titleFontColor: "#8F92A1",
          titleFontSize: 12,
          bodyFontColor: "#171717",
          bodyFontStyle: "bold",
          bodyFontSize: 16,
          multiKeyBackground: "transparent",
          displayColors: false,
          xPadding: 30,
          yPadding: 10,
          bodyAlign: "center",
          titleAlign: "center",
        },

        title: {
          display: false,
        },
        legend: {
          display: false,
        },

        scales: {
          yAxes: [{
            gridLines: {
              display: false,
              drawTicks: false,
              drawBorder: false,
            },
            ticks: {
              padding: 35,
              max: 1200,
              min: 0,
            },
          },],
          xAxes: [{
            gridLines: {
              display: false,
              drawBorder: false,
              color: "rgba(143, 146, 161, .1)",
              zeroLineColor: "rgba(143, 146, 161, .1)",
            },
            ticks: {
              padding: 20,
            },
          },],
        },
      },
    });
    // =========== chart two end

    // =========== chart three start
    const ctx3 = document.getElementById("Chart3").getContext("2d");
    const chart3 = new Chart(ctx3, {
      // The type of chart we want to create
      type: "line", // also try bar or other graph types

      // The data for our dataset
      data: {
        labels: [
          "Jan",
          "Fab",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ],
        // Information about the dataset
        datasets: [{
          label: "Revenue",
          backgroundColor: "transparent",
          borderColor: "#4a6cf7",
          data: [80, 120, 110, 100, 130, 150, 115, 145, 140, 130, 160, 210],
          pointBackgroundColor: "transparent",
          pointHoverBackgroundColor: "#4a6cf7",
          pointBorderColor: "transparent",
          pointHoverBorderColor: "#fff",
          pointHoverBorderWidth: 3,
          pointBorderWidth: 5,
          pointRadius: 5,
          pointHoverRadius: 8,
        },
        {
          label: "Profit",
          backgroundColor: "transparent",
          borderColor: "#9b51e0",
          data: [
            120, 160, 150, 140, 165, 210, 135, 155, 170, 140, 130, 200,
          ],
          pointBackgroundColor: "transparent",
          pointHoverBackgroundColor: "#9b51e0",
          pointBorderColor: "transparent",
          pointHoverBorderColor: "#fff",
          pointHoverBorderWidth: 3,
          pointBorderWidth: 5,
          pointRadius: 5,
          pointHoverRadius: 8,
        },
        {
          label: "Order",
          backgroundColor: "transparent",
          borderColor: "#f2994a",
          data: [180, 110, 140, 135, 100, 90, 145, 115, 100, 110, 115, 150],
          pointBackgroundColor: "transparent",
          pointHoverBackgroundColor: "#f2994a",
          pointBorderColor: "transparent",
          pointHoverBorderColor: "#fff",
          pointHoverBorderWidth: 3,
          pointBorderWidth: 5,
          pointRadius: 5,
          pointHoverRadius: 8,
        },
        ],
      },

      // Configuration options
      options: {
        tooltips: {
          intersect: false,
          backgroundColor: "#fbfbfb",
          titleFontColor: "#8F92A1",
          titleFontSize: 16,
          titleFontFamily: "Inter",
          titleFontStyle: "400",
          bodyFontFamily: "Inter",
          bodyFontColor: "#171717",
          bodyFontSize: 16,
          multiKeyBackground: "transparent",
          displayColors: false,
          xPadding: 30,
          yPadding: 15,
          borderColor: "rgba(143, 146, 161, .1)",
          borderWidth: 1,
          title: false,
        },

        title: {
          display: false,
        },

        layout: {
          padding: {
            top: 0,
          },
        },

        legend: false,

        scales: {
          yAxes: [{
            gridLines: {
              display: false,
              drawTicks: false,
              drawBorder: false,
            },
            ticks: {
              padding: 35,
              max: 300,
              min: 50,
            },
          },],
          xAxes: [{
            gridLines: {
              drawBorder: false,
              color: "rgba(143, 146, 161, .1)",
              zeroLineColor: "rgba(143, 146, 161, .1)",
            },
            ticks: {
              padding: 20,
            },
          },],
        },
      },
    });
    // =========== chart three end

    // ================== chart four start
    const ctx4 = document.getElementById("Chart4").getContext("2d");
    const chart4 = new Chart(ctx4, {
      // The type of chart we want to create
      type: "bar", // also try bar or other graph types
      // The data for our dataset
      data: {
        labels: ["Jan", "Fab", "Mar", "Apr", "May", "Jun"],
        // Information about the dataset
        datasets: [{
          label: "",
          backgroundColor: "#4A6CF7",
          barThickness: "flex",
          maxBarThickness: 8,
          data: [600, 700, 1000, 700, 650, 800],
        },
        {
          label: "",
          backgroundColor: "#d50100",
          barThickness: "flex",
          maxBarThickness: 8,
          data: [690, 740, 720, 1120, 876, 900],
        },
        ],
      },
      // Configuration options
      options: {
        borderColor: "#F3F6F8",
        borderWidth: 15,
        backgroundColor: "#F3F6F8",
        tooltips: {
          callbacks: {
            labelColor: function (tooltipItem, chart) {
              return {
                backgroundColor: "rgba(104, 110, 255, .0)",
              };
            },
          },
          backgroundColor: "#F3F6F8",
          titleFontColor: "#8F92A1",
          titleFontSize: 12,
          bodyFontColor: "#171717",
          bodyFontStyle: "bold",
          bodyFontSize: 16,
          multiKeyBackground: "transparent",
          displayColors: false,
          xPadding: 30,
          yPadding: 10,
          bodyAlign: "center",
          titleAlign: "center",
        },

        title: {
          display: false,
        },
        legend: {
          display: false,
        },

        scales: {
          yAxes: [{
            gridLines: {
              display: false,
              drawTicks: false,
              drawBorder: false,
            },
            ticks: {
              padding: 35,
              max: 1200,
              min: 0,
            },
          },],
          xAxes: [{
            gridLines: {
              display: false,
              drawBorder: false,
              color: "rgba(143, 146, 161, .1)",
              zeroLineColor: "rgba(143, 146, 161, .1)",
            },
            ticks: {
              padding: 20,
            },
          },],
        },
      },
    });
    // =========== chart four end
  </script>
</body>

<!-- Mirrored from demo.plainadmin.com/ by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 02 May 2023 10:59:35 GMT -->

</html>