<!DOCTYPE html>
<html lang="en">
<head>
<!-- Title Meta -->
<meta charset="utf-8"/>
<title>Delsap'</title>
{% block stylesheets %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A fully responsive premium admin dashboard template"/>
<meta name="author" content="Techzaa"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- App favicon -->
<link rel="shortcut icon" href="/assets/images/logo_delsart.png">
<!-- Vendor css (Require in all Page) -->
<link href="/ecommerce/assets/css/vendor.min.css" rel="stylesheet" type="text/css"/>
<!-- Icons css (Require in all Page) -->
<link href="/ecommerce/assets/css/icons.min.css" rel="stylesheet" type="text/css"/>
<!-- App css (Require in all Page) -->
<link href="/ecommerce/assets/css/app.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/libs/select2/css/select2.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<!-- Theme Config js (Require in all Page) -->
<script src="/ecommerce/assets/js/config.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdi/css/materialdesignicons.min.css">
{% endblock %}
</head>
<body>
<!-- START Wrapper -->
<div class="wrapper">
{% block header %}
<header class="topbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="d-flex align-items-center">
<div class="topbar-item">
<button type="button" class="button-toggle-menu me-2">
<iconify-icon icon="solar:hamburger-menu-broken"
class="fs-24 align-middle"></iconify-icon>
</button>
</div>
<div class="topbar-item">
<h4 class="fw-bold topbar-button pe-none text-uppercase mb-0">{{ "hello"|trans}} {{ app.user.firstName }} {{ app.user.lastname }} <br><small>{{ app.user.connectedAt ? app.user.connectedAt.name : "" }}</small></h4></h4>
</div>
</div>
{% if app.request.server.get('APP_ENV') != 'prod' %}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<i class="mdi mdi-alert-outline me-2"></i>
Attention environnement de test
</div>
{% endif %}
<div class="d-flex align-items-center gap-1">
<div class="dropdown topbar-item">
<button type="button" class="btn header-item noti-icon waves-effect" onclick="window.location.href='/admin/'">
<i class="bx bx-desktop"></i>
</button>
</div>
<div class="dropdown topbar-item">
<a type="button" class="topbar-button" id="page-header-user-dropdown"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle language-title" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{{ app.session.get('_locale') ? app.session.get('_locale')|upper : 'FR' }}
<i class="ri-arrow-down-s-line"></i>
</a>
</a>
<div class="dropdown-menu dropdown-menu-end">
<h6 class="dropdown-header">Sélectionnez votre langue !</h6>
<a class="dropdown-item" href="/ecommerce/change-langage/fr">
<span
class="align-middle">FR - Français </span>
</a>
<a class="dropdown-item" href="/ecommerce/change-langage/fr">
<span
class="align-middle">EN - English </span>
</a>
<a class="dropdown-item" href="/ecommerce/change-langage/fr">
<span
class="align-middle">NL - Nederlands </span>
</a>
</div>
</div>
<div class="dropdown topbar-item">
<a type="button" class="topbar-button" id="page-header-user-dropdown"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle language-title" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{{ app.user.connectedAt ? app.user.connectedAt.name : 'Selectionner un établissement' }}
<i class="ri-arrow-down-s-line"></i>
</a>
</a>
<div class="dropdown-menu dropdown-menu-end">
<h6 class="dropdown-header">Connectez votre établissement</h6>
{% set establishments = twig_service.userEstablishments(app.user) %}
{% for establishment in establishments.userEstablishments %}
{% if app.user.connectedAt is not null %}
{% if establishment.establishment.id != app.user.connectedAt.id %}
<a class="dropdown-item" href="/ecommerce/connected-to/{{ establishment.establishment.id }}">
<span
class="align-middle"> {{ establishment.establishment.name }} </span>
</a>
{% endif %}
{% else %}
<a class="dropdown-item" href="/ecommerce/connected-to/{{ establishment.establishment.id }}">
<span
class="align-middle"> {{ establishment.establishment.name }} </span>
</a>
{% endif %}
{% endfor %}
</div>
</div>
<div class="topbar-item">
<button type="button" class="topbar-button" id="light-dark-mode">
<iconify-icon icon="solar:moon-bold-duotone" class="fs-24 align-middle"></iconify-icon>
</button>
</div>
<div class="topbar-item">
<a type="button" class="topbar-button position-relative" id="cart" href="/ecommerce/cart/detail">
<iconify-icon icon="solar:cart-large-2-bold-duotone" class="fs-24 align-middle"></iconify-icon>
{% set articles = twig_service.cartArticles(app.user.connectedAt) %}
{% if articles %}
<span class="badge bg-danger rounded-pill position-absolute top-0 start-100 translate-middle"
style="font-size: 0.75rem; transform: translate(-50%, -50%);">
{{ articles }}
</span>
{% endif %}
</a>
</div>
{# <div class="dropdown topbar-item">#}
{# <button type="button" class="topbar-button position-relative"#}
{# id="page-header-notifications-dropdown" data-bs-toggle="dropdown"#}
{# aria-haspopup="true" aria-expanded="false">#}
{# <iconify-icon icon="solar:bell-bing-bold-duotone"#}
{# class="fs-24 align-middle"></iconify-icon>#}
{# <span class="position-absolute topbar-badge fs-10 translate-middle badge bg-danger rounded-pill">3<span#}
{# class="visually-hidden">unread messages</span></span>#}
{# </button>#}
{# <div class="dropdown-menu py-0 dropdown-lg dropdown-menu-end"#}
{# aria-labelledby="page-header-notifications-dropdown">#}
{# <div class="p-3 border-top-0 border-start-0 border-end-0 border-dashed border">#}
{# <div class="row align-items-center">#}
{# <div class="col">#}
{# <h6 class="m-0 fs-16 fw-semibold"> Notifications</h6>#}
{# </div>#}
{# <div class="col-auto">#}
{# <a href="javascript: void(0);" class="text-dark text-decoration-underline">#}
{# <small>Clear All</small>#}
{# </a>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div data-simplebar style="max-height: 280px;">#}
{# <!-- Item -->#}
{# <a href="javascript:void(0);" class="dropdown-item py-3 border-bottom text-wrap">#}
{# <div class="d-flex">#}
{# <div class="flex-shrink-0">#}
{# <img src="/ecommerce/assets/images/users/avatar-1.jpg"#}
{# class="img-fluid me-2 avatar-sm rounded-circle" alt="avatar-1"/>#}
{# </div>#}
{# <div class="flex-grow-1">#}
{# <p class="mb-0"><span class="fw-medium">Josephine Thompson </span>commented#}
{# on admin panel <span>" Wow 😍! this admin looks good and awesome design"</span>#}
{# </p>#}
{# </div>#}
{# </div>#}
{# </a>#}
{# <!-- Item -->#}
{# <a href="javascript:void(0);" class="dropdown-item py-3 border-bottom">#}
{# <div class="d-flex">#}
{# <div class="flex-shrink-0">#}
{# <div class="avatar-sm me-2">#}
{# <span class="avatar-title bg-soft-info text-info fs-20 rounded-circle">#}
{# D#}
{# </span>#}
{# </div>#}
{# </div>#}
{# <div class="flex-grow-1">#}
{# <p class="mb-0 fw-semibold">Donoghue Susan</p>#}
{# <p class="mb-0 text-wrap">#}
{# Hi, How are you? What about our next meeting#}
{# </p>#}
{# </div>#}
{# </div>#}
{# </a>#}
{# <!-- Item -->#}
{# <a href="javascript:void(0);" class="dropdown-item py-3 border-bottom">#}
{# <div class="d-flex">#}
{# <div class="flex-shrink-0">#}
{# <img src="assets/images/users/avatar-3.jpg"#}
{# class="img-fluid me-2 avatar-sm rounded-circle" alt="avatar-3"/>#}
{# </div>#}
{# <div class="flex-grow-1">#}
{# <p class="mb-0 fw-semibold">Jacob Gines</p>#}
{# <p class="mb-0 text-wrap">Answered to your comment on the cash flow#}
{# forecast's graph 🔔.</p>#}
{# </div>#}
{# </div>#}
{# </a>#}
{# <!-- Item -->#}
{# <a href="javascript:void(0);" class="dropdown-item py-3 border-bottom">#}
{# <div class="d-flex">#}
{# <div class="flex-shrink-0">#}
{# <div class="avatar-sm me-2">#}
{# <span class="avatar-title bg-soft-warning text-warning fs-20 rounded-circle">#}
{# <iconify-icon#}
{# icon="iconamoon:comment-dots-duotone"></iconify-icon>#}
{# </span>#}
{# </div>#}
{# </div>#}
{# <div class="flex-grow-1">#}
{# <p class="mb-0 fw-semibold text-wrap">You have received <b>20</b> new#}
{# messages in the#}
{# conversation</p>#}
{# </div>#}
{# </div>#}
{# </a>#}
{# <!-- Item -->#}
{# <a href="javascript:void(0);" class="dropdown-item py-3 border-bottom">#}
{# <div class="d-flex">#}
{# <div class="flex-shrink-0">#}
{# <img src="assets/images/users/avatar-5.jpg"#}
{# class="img-fluid me-2 avatar-sm rounded-circle" alt="avatar-5"/>#}
{# </div>#}
{# <div class="flex-grow-1">#}
{# <p class="mb-0 fw-semibold">Shawn Bunch</p>#}
{# <p class="mb-0 text-wrap">#}
{# Commented on Admin#}
{# </p>#}
{# </div>#}
{# </div>#}
{# </a>#}
{# </div>#}
{# <div class="text-center py-3">#}
{# <a href="javascript:void(0);" class="btn btn-primary btn-sm">View All Notification#}
{# <i class="bx bx-right-arrow-alt ms-1"></i></a>#}
{# </div>#}
{# </div>#}
{# </div>#}
<!-- Theme Setting -->
{# <div class="topbar-item d-none d-md-flex">#}
{# <button type="button" class="topbar-button" id="theme-settings-btn"#}
{# data-bs-toggle="offcanvas" data-bs-target="#theme-settings-offcanvas"#}
{# aria-controls="theme-settings-offcanvas">#}
{# <iconify-icon icon="solar:settings-bold-duotone"#}
{# class="fs-24 align-middle"></iconify-icon>#}
{# </button>#}
{# </div>#}
<!-- User -->
<div class="dropdown topbar-item">
<a type="button" class="topbar-button" id="page-header-user-dropdown"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="d-flex align-items-center" style="font-size: 30px;">
<iconify-icon icon="iconamoon:profile-circle-fill"></iconify-icon>
</span>
</a>
<div class="dropdown-menu dropdown-menu-end">
<!-- item-->
<h6 class="dropdown-header">{{ app.user.firstName }} {{ app.user.lastName }}</h6>
<a class="dropdown-item" href="/ecommerce/profile/">
<i class="bx bx-user-circle text-muted fs-18 align-middle me-1"></i><span
class="align-middle">Profil</span>
</a>
<a class="dropdown-item" href="/ecommerce/profile/team">
<i class="bx bx-message-dots text-muted fs-18 align-middle me-1"></i><span
class="align-middle">Mon équipe</span>
</a>
<a class="dropdown-item" onclick="$('#modalHelp').modal('show')">
<i class="bx bx-help-circle text-muted fs-18 align-middle me-1"></i><span
class="align-middle">Help</span>
</a>
<div class="dropdown-divider my-1"></div>
<a class="dropdown-item text-danger" href="/logout">
<i class="bx bx-log-out fs-18 align-middle me-1"></i><span class="align-middle">Déconnexion</span>
</a>
</div>
</div>
</div>
</div>
</div>
</header>
<div>
<div class="offcanvas offcanvas-end border-0" tabindex="-1" id="theme-settings-offcanvas">
<div class="d-flex align-items-center bg-primary p-3 offcanvas-header">
<h5 class="text-white m-0">Theme Settings</h5>
<button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body p-0">
<div data-simplebar class="h-100">
<div class="p-3 settings-bar">
<div>
<h5 class="mb-3 font-16 fw-semibold">Color Scheme</h5>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="data-bs-theme"
id="layout-color-light" value="light">
<label class="form-check-label" for="layout-color-light">Light</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="data-bs-theme"
id="layout-color-dark" value="dark">
<label class="form-check-label" for="layout-color-dark">Dark</label>
</div>
</div>
<div>
<h5 class="my-3 font-16 fw-semibold">Topbar Color</h5>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="data-topbar-color"
id="topbar-color-light" value="light">
<label class="form-check-label" for="topbar-color-light">Light</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="data-topbar-color"
id="topbar-color-dark" value="dark">
<label class="form-check-label" for="topbar-color-dark">Dark</label>
</div>
</div>
<div>
<h5 class="my-3 font-16 fw-semibold">Menu Color</h5>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="data-menu-color"
id="leftbar-color-light" value="light">
<label class="form-check-label" for="leftbar-color-light">
Light
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="data-menu-color"
id="leftbar-color-dark" value="dark">
<label class="form-check-label" for="leftbar-color-dark">
Dark
</label>
</div>
</div>
<div>
<h5 class="my-3 font-16 fw-semibold">Sidebar Size</h5>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="data-menu-size"
id="leftbar-size-default" value="default">
<label class="form-check-label" for="leftbar-size-default">
Default
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="data-menu-size"
id="leftbar-size-small" value="condensed">
<label class="form-check-label" for="leftbar-size-small">
Condensed
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="data-menu-size"
id="leftbar-hidden" value="hidden">
<label class="form-check-label" for="leftbar-hidden">
Hidden
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="data-menu-size"
id="leftbar-size-small-hover-active" value="sm-hover-active">
<label class="form-check-label" for="leftbar-size-small-hover-active">
Small Hover Active
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="data-menu-size"
id="leftbar-size-small-hover" value="sm-hover">
<label class="form-check-label" for="leftbar-size-small-hover">
Small Hover
</label>
</div>
</div>
</div>
</div>
</div>
<div class="offcanvas-footer border-top p-3 text-center">
<div class="row">
<div class="col">
<button type="button" class="btn btn-danger w-100" id="reset-layout">Reset</button>
</div>
</div>
</div>
</div>
</div>
<!-- ========== Topbar End ========== -->
<!-- ========== App Menu Start ========== -->
<div class="main-nav" id="sidebarContainer">
<!-- Sidebar Logo -->
<div class="logo-box">
<a href="/ecommerce" class="logo-dark">
<img src="/assets/images/logo_delsart.png" class="logo-sm" alt="logo sm">
<img src="/assets/images/logo_delsart.png" class="logo-lg" alt="logo dark">
</a>
<a href="/ecommerce" class="logo-light">
<img src="/assets/images/logo_delsart.png" class="logo-sm" alt="logo sm">
<img src="/assets/images/logo_delsart.png" class="logo-lg" alt="logo light">
</a>
<button type="button" class="button-sm-hover" aria-label="Show Full Sidebar">
<iconify-icon icon="solar:double-alt-arrow-right-bold-duotone" class="button-sm-hover-icon"></iconify-icon>
</button>
</div>
<!-- Barre latérale (menu) -->
<div class="sidebar d-block" data-simplebar>
<ul class="navbar-nav" id="navbar-nav">
<li class="menu-title">Menu</li>
<li class="nav-item">
<a class="nav-link" href="/ecommerce/">
<span class="nav-icon">
<iconify-icon icon="solar:widget-5-bold-duotone"></iconify-icon>
</span>
<span class="nav-text"> Accueil </span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/ecommerce/product/list">
<span class="nav-icon">
<iconify-icon icon="material-symbols:list"></iconify-icon>
</span>
<span class="nav-text"> Ma carte </span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/ecommerce/profile/articles-waiting">
<span class="nav-icon">
<iconify-icon icon="mingcute:loading-fill"></iconify-icon>
</span>
<span class="nav-text"> Articles en attente </span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/ecommerce/wishlist/list">
<span class="nav-icon">
<iconify-icon icon="solar:heart-angle-bold-duotone"></iconify-icon>
</span>
<span class="nav-text"> Wishlist </span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/ecommerce/promotion/">
<span class="nav-icon">
<iconify-icon icon="iconamoon:discount-fill"></iconify-icon>
</span>
<span class="nav-text"> Promotions </span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/ecommerce/product/news">
<span class="nav-icon">
<iconify-icon icon="emojione-monotone:new-button"></iconify-icon>
</span>
<span class="nav-text"> Nouveautés </span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/ecommerce/order/list">
<span class="nav-icon">
<iconify-icon icon="lets-icons:order"></iconify-icon>
</span>
<span class="nav-text"> Mes commandes </span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/ecommerce/invoices/list">
<span class="nav-icon">
<iconify-icon icon="fa6-solid:file-invoice-dollar"></iconify-icon>
</span>
<span class="nav-text"> Mes factures </span>
</a>
</li>
<li class="nav-item">
<a class="nav-link menu-arrow" href="#sidebarOrders" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarOrders">
<span class="nav-icon">
<iconify-icon icon="solar:settings-bold"></iconify-icon>
</span>
<span class="nav-text">Paramètres</span>
</a>
<div class="collapse" id="sidebarOrders">
<ul class="nav sub-navbar-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="/ecommerce/profile/">Mes informations</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="/ecommerce/profile/establishments">Mes établissements</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="/ecommerce/profile/team">Equipes & accès</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="/logout">Déconnexion</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="position-absolute bottom-0 start-0 end-0 mb-2">
<ul class="navbar-nav">
<li class="nav-item">
<button class="nav-link" onclick="$('#modalHelp').modal('show')">
<span class="nav-icon">
<iconify-icon icon="material-symbols:help-outline"></iconify-icon>
</span>
<span class="nav-text"> Aide </span>
</button>
</li>
</ul>
</div>
</div>
{% endblock %}
<!-- ==================================================== -->
<div class="page-content">
{% block body %}
{% endblock %}
{% block footer %}
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<script>document.write(new Date().getFullYear())</script>
© Delsart | Develop by <a href="https://www.wecodx.com" target="_blank">Wecodx</a>
</div>
</div>
</div>
</footer>
{% endblock %}
</div>
<div class="modal fade" id="modalHelp" tabindex="-1" aria-labelledby="modalHelpLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modalHelpLabel">Besoin d'aide ?</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="helpForm" onsubmit="event.preventDefault(); sendHelp();">
<div class="modal-body">
<div class="text-muted mb-3 d-flex align-items-center">
<i class="bi bi-telephone me-2"></i>
<span>Pour une demande urgente, contactez-nous au
<a href="tel:+3281205457" class="text-decoration-none text-dark">+3281205457</a>
</span>
</div>
<div class="mb-3">
<label for="problemTitle" class="form-label">Titre de votre problème</label>
<input type="text" class="form-control" id="title" required>
</div>
<div class="mb-3">
<label for="problem" class="form-label">Décrivez votre problème</label>
<textarea class="form-control" id="description" rows="3" required></textarea>
</div>
</div>
<div class="modal-footer d-flex flex-column align-items-start">
<div class="d-flex justify-content-end w-100 gap-2">
<button type="submit" class="btn btn-success" id="buttonSend">Envoyer</button>
<div id="loading-send" class="spinner-border text-primary" role="status" style="display:none"></div>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% block javascript %}
<!-- Vendor Javascript (Require in all Page) -->
<script src="/ecommerce/assets/js/vendor.js"></script>
<!-- App Javascript (Require in all Page) -->
<script src="/ecommerce/assets/js/app.js"></script>
<!-- Vector Map Js -->
<script src="/ecommerce/assets/vendor/jsvectormap/js/jsvectormap.min.js"></script>
<script src="/ecommerce/assets/vendor/jsvectormap/maps/world-merc.js"></script>
<script src="/ecommerce/assets/vendor/jsvectormap/maps/world.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Dashboard Js -->
<script src="/ecommerce/assets/js/pages/dashboard.js"></script>
<script src="/assets/libs/select2/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
function sendHelp() {
$('#loading-send').show();
$('#buttonSend').hide();
// Envoi de la requête AJAX
$.ajax({
type: "POST",
url: '/ecommerce/help/send',
data: {
title: $('#title').val(),
description: $('#description').val(),
},
success: (response) => {
$('#modalHelp').modal('hide');
$('#loading-send').hide();
$('#buttonSend').show();
$('#title').val('');
$('#description').val('');
toastr["success"]("Message envoyé ! ");
},
error: function(error) {
$('#loading-send').hide();
$('#buttonSend').show();
toastr["error"]("Erreur lors de l'envoi du message ");
}
});
}
</script>
{% endblock %}
</body>
</html>