| Current File : /home/d/i/g/digitaw/Ycof/.history/client/assurancesauto_20230607085622.php |
<?php
session_start();
if (empty($_SESSION['email'])) {
header("Location: ../connexion.php");
exit();
} ?>
<?php
if (isset($_SESSION['email'])) {
$email = $_SESSION['email'];
$db_user = "root";
$db_pass = "";
$db_name = "ycof";
$db = new PDO('mysql:host=localhost;dbname=' . $db_name . ';charset=utf8', $db_user, $db_pass);
$sql = "SELECT * FROM assuranceauto WHERE email = '$email'";
$reponse = $db->query($sql);
$assurances = $reponse->fetchAll();
}
?>
<!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>Mes documents</title>
<!-- ========== All CSS files linkup ========= -->
<link rel="stylesheet" href="../admin/css/bootstrap.min.css" />
<link rel="stylesheet" href="../admin/css/lineicons.css" />
<link rel="stylesheet" href="../admin/css/quill/bubble.css" />
<link rel="stylesheet" href="../admin/css/quill/snow.css" />
<link rel="stylesheet" href="../admin/css/fullcalendar.css" />
<link rel="stylesheet" href="../admin/css/morris.css" />
<link rel="stylesheet" href="../admin/css/datatable.css" />
<link rel="stylesheet" href="../admin/css/main.css" />
<link rel="stylesheet" href="res.css" />
<style>
label {
font-family: initial;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!--script du pupop-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$("#p1").hide();
$("#p2").hide();
$("#btn1").click(function() {
$("#p1").toggle();
$("#p2").hide();
});
$("#btn2").click(function() {
$("#p2").toggle();
$("#p1").hide();
});
});
</script>
</head>
<body>
<!-- ======== sidebar-nav start =========== -->
<aside class="sidebar-nav-wrapper">
<div class="navbar-logo">
<a href="client.php">
<img src="../admin/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">
<a href="../about.php">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" />
</svg>
</span>
<span class="text">
Qui sommes-nous?
</span>
</a>
</li>
<li class="nav-item">
<a href="../contact.php">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-inbound" viewBox="0 0 16 16">
<path d="M15.854.146a.5.5 0 0 1 0 .708L11.707 5H14.5a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 1 0v2.793L15.146.146a.5.5 0 0 1 .708 0zm-12.2 1.182a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z" />
</svg>
</span>
<span class="text">
Contactez-nous
</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="../habitation.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: 10px;">
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 href="./logout.php" class="collapsed" data-bs-toggle="collapse" data-bs-target="#ddmenu_3" aria-controls="ddmenu_3" aria-expanded="false" aria-label="Toggle navigation">
<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>
<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">
<!-- profile start -->
<!-- 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>
<a href="#0">
<i class="lni lni-user"></i> Voir Profile
</a>
</li>
<li>
<a data-bs-toggle="modal" data-bs-target="#deconnexion" data-bs-whatever="@mdo"> <i class="lni lni-cog"></i> Deconnexion </a>
</li>
</ul>
</div>
<!-- profile end -->
<!-- profile end -->
</div>
</div>
</div>
</div>
</header>
<!-- ========== header end ========== -->
<section class="section">
<div class="container-fluid">
<div class="title d-flex bg-white mt-1 p-3 flex-wrap align-items-center justify-content-between">
<a class="btn btn-primary p-2" href="client.php" role="button">retourner</a>
<h2 class="text-medium left">Liste de mes assurances </h2>
</div>
<!-- ========== title-wrapper start ========== -->
<div class="title-wrapper card pb-4">
<div class="row infos flex-wrap align-items-center justify-content-between" >
<h3 class="text-center m-4">Choisissez une option afficher mes assurance auto</h3><br>
<div class="col-lg-6">
<button id="btn1" class="w-100 bg-body-tertiary align-items-center text-center border p-3 mb-4 bg-white shadow-sm" type="button">
<h5 class="m-0"><i class="fa fa-eye" aria-hidden="true"></i> Afficher les devis par carte grise</h5>
</button>
</div>
<div class="col-lg-6">
<button class="w-100 bg-body-tertiary align-items-center text-center border p-3 mb-4 bg-white shadow-sm" id="btn2" type="button">
<h5 class="m-0"><i class="fa fa-eye" aria-hidden="true"></i> Afficher les devis par formulaire
</h5>
</button>
</div>
<div class="row">
<div class="col-lg-12 bg-white shadow ">
<div class=" ">
<div class="tab-pane show" id="p1">
<h3>Liste par carte grise</h3>
<table class="table top-selling-table">
<thead>
<tr>
<th class="min-width">
#
</th>
<th id="t" class="min-width">
Titre
</th>
<th class="min-width">
Carte grise
</th>
<th class="text-end">
Actions
</th>
</tr>
</thead>
<tbody>
<?php if (!empty($assurances)) {
$i = 1;
foreach ($assurances as $assurance) {
if (!empty($assurance["photo"])) {
?>
<tr>
<td>
<span class="text-center"><?php echo $i++; ?></span>
</td>
<td id="t">
<span class="text-center"><?php echo $assurance['photo']; ?></span>
</td>
<td>
<span class="text-center"><img width="40" src="../cartegrise/<?php echo $assurance['photo']; ?>" alt="" srcset=""></span>
</td>
<td>
<div class="action justify-content-end">
<a class="btn btn-primary p-1" data-toggle="modal" data-target="#my<?php echo $assurance['id'] ?>">
<span class="text-center">+ détails</span>
</a>
</div>
</td>
</tr>
<div id="my<?php echo $assurance['id'] ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">Détails de l'assurance</h4>
<button type="button" class="btn-close" data-dismiss="modal"> </button>
</div>
<div class="modal-body">
<div class="shadow p-2">
<img id="carteg" style="width:100%" src="../cartegrise/<?php echo $assurance['photo']; ?>" alt="" srcset="">
</div>
</div>
</div>
</div>
</div>
<?php
}
}
}
?>
</tbody>
</table>
</div>
<div class="tab-pane show" id="p2">
<h3>Liste par formulaire</h3>
<table class="table top-selling-table">
<thead>
<tr>
<th>
#
</th>
<th class="min-width">
Immatriculation
</th>
<th id="t" class="min-width">
Marque
</th>
<th id="t" class="min-width">
Modele
</th>
<th class="text-end">
Actions
</th>
</tr>
</thead>
<tbody>
<?php if (!empty($assurances)) {
$i = 1;
foreach ($assurances as $assurance) {
if (empty($assurance["photo"])) {
?>
<tr>
<td>
<span class="text-center"><?php echo $i++; ?></span>
</td>
<td>
<span class="text-center"><?php echo $assurance['immatriculation']; ?></span>
</td>
<td id="t">
<span class="text-center"><?php echo $assurance['marque']; ?></span>
</td>
<td id="t">
<span class="text-center"><?php echo $assurance['modele']; ?></span>
</td>
<td>
<div class="action justify-content-end">
<a class="btn btn-primary p-1" data-toggle="modal" data-target="#myf<?php echo $assurance['id'] ?>">
<span class="text-center">+ détails</span>
</a>
</div>
</td>
</tr>
<div id="myf<?php echo $assurance['id'] ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">Détails de l'assurance</h4>
<button type="button" class="btn-close" data-dismiss="modal"> </button>
</div>
<div class="modal-body">
<div class="row p-3">
<div class="col-6">
<span class="table-secondary"><b>Categorisation : </b><?php echo $assurance['categorisation'] ?></span>
</div>
<div class="col-6">
<span class="table-secondary"><b>Immatriculation : </b><?php echo $assurance['immatriculation'] ?></span>
</div>
</div>
<div class="row p-3">
<div class="col-6">
<span class="table-secondary"><b>Carburant : </b><?php echo $assurance['carburant'] ?></span>
</div>
<div class="col-6">
<span class="table-secondary"><b>Marque : </b><?php echo $assurance['marque'] ?></span>
</div>
</div>
<div class="row p-3">
<div class="col-6">
<span class="table-secondary"><b> Modele : </b><?php echo $assurance['modele'] ?></span>
</div>
<div class="col-6">
<span class="table-secondary"><b>Puissance : </b><?php echo $assurance['puissance'] ?></span>
</div>
</div>
<div class="row p-3">
<div class="col-6">
<span class="table-secondary"><b>Date de circulation : </b><?php echo $assurance['dateCirculation'] ?></span>
</div>
<div class="col-6">
<span class="table-secondary"><b>Nombre de place : </b><?php echo $assurance['nbrPlace'] ?></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
</div>
<!-- end row -->
</div>
</div>
</section>
<!-- ========== 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="client.php">
<img src="../img/ycof_bac.png" alt="" width="100px" style="margin-top: 35%; margin-left: 35%;">
</a>
</div>
<!-- ============ POPOP DECONNEXION============= -->
<div class="modal fade" id="deconnexion" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<form method="post" action="logout.php">
<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 text-center">
<h6>Voulez-vous vous déconnectez ?</h6>
</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>
<button type="submit" 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>
</div>
</div>
</form>
</div>
</div>
<!-- ============ Theme Option End ============= -->
<!-- ========= All Javascript files linkup ======== -->
<script src="../admin/js/bootstrap.bundle.min.js"></script>
<script src="../admin/js/Chart.min.js"></script>
<script src="../admin/js/apexcharts.min.js"></script>
<script src="../admin/js/dynamic-pie-chart.js"></script>
<script src="../admin/js/moment.min.js"></script>
<script src="../admin/js/fullcalendar.js"></script>
<script src="../admin/js/jvectormap.min.js"></script>
<script src="../admin/js/world-merc.js"></script>
<script src="../admin/js/polyfill.js"></script>
<script src="../admin/js/quill.min.js"></script>
<script src="../admin/js/datatable.js"></script>
<script src="../admin/js/Sortable.min.js"></script>
<script src="../admin/js/main.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>