{% extends 'admin/baseAdmin.html.twig' %}
{% block page_title %}Détails : {{ experience.title }} {% endblock %}
{% block breadcump_main %}Expériences{% endblock %}
{% block breadcump_subtitle %}{{ experience.title }} {% endblock %}
{% block menu_left_sidebar %}
{% include 'include/menu/menuAdmin.html.twig' with { menu_active_event : '2'} %}
{% endblock %}
{% block stylesheets %}
<link href="{{ asset('admin/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('admin/css/tailwind.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('admin/css/tailwind2.css') }}" rel="stylesheet" type="text/css">
{% endblock %}
{% block content %}
<!-- end page title -->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-8">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<img src="{% if experience.image != null %}{{ asset(''~experience.image) }}{% else %}{{ asset('admin/images/default/product.png') }}{% endif %}" alt="" class="avatar-md rounded-circle img-thumbnail">
</div>
<div class="flex-grow-1 align-self-center">
<div class="text-muted">
<p class="mb-2">{% if experience.subcategories|length > 0 %}{{ experience.subcategories[0].category.name }}{% endif %}</p>
<h5 class="mb-1">{{ experience.title }}</h5>
<p class="mb-2">{% if experience.coachingtype %}Coaching Privé{% elseif experience.coachingtype =='groupe' %}Coaching en Groupe{% else %}Coaching en Visio{% endif %}</p>
{% if experience.enabled == '1' %}
<span class="badge badge-soft-success font-size-12"> <i class=" font-size-10 mdi mdi-circle text-soft-success align-middle me-1"></i> Activé </span>
{% else %}
<span class="badge badge-soft-danger font-size-12"> <i class=" font-size-10 mdi mdi-circle text-soft-danger align-middle me-1"></i> Désactivé </span>
{% endif %}
{% if experience.published == '1' %}
<span class="badge badge-soft-success font-size-12"> <i class=" font-size-10 mdi mdi-circle text-soft-success align-middle me-1"></i> Publié </span>
{% else %}
<span class="badge badge-soft-warning font-size-12"> <i class=" font-size-10 mdi mdi-circle text-soft-warning align-middle me-1"></i> Non publié </span>
{% endif %}
</div>
</div>
</div>
</div>
<div class="col-4">
<ul class="list-inline user-chat-nav text-end mb-0">
<li class="list-inline-item d-none d-sm-inline-block">
<div class="dropdown">
<button class="btn nav-btn" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="bx bx-cog"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" style="">
<a class="dropdown-item" href="{{ path('edit_general_info',{'id':experience.id}) }}">Informations Génerale</a>
<a class="dropdown-item" href="{{ path('edit_description',{'id':experience.id}) }}">Description</a>
<a class="dropdown-item" href="{{ path('edit_highlights',{'id':experience.id}) }}">Points forts</a>
<a class="dropdown-item" href="{{ path('edit_media',{'id':experience.id}) }}">Media et galerie</a>
<a class="dropdown-item" href="{{ path('edit_price',{'id':experience.id}) }}">Condition d'annulation</a>
<a class="dropdown-item" href="{{ path('edit_price',{'id':experience.id}) }}">Prix et tarification</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{ path('add_hebergement',{'id':experience.id}) }}">Ajouter Chambre</a>
<a class="dropdown-item" {% if experience.availability %}
href="{{ path('edit_availability',{'id':experience.id}) }}"
{% else %}
href="{{ path('add_availability',{'id':experience.id}) }}"
{% endif %}>Calendrier de disponibilité</a>
<a class="dropdown-item" href="{{ path('add_program',{'id':experience.id}) }}">Ajouter Programme</a>
</div>
</div>
</li>
<li class="list-inline-item">
<div class="dropdown">
<button class="btn nav-btn" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="bx bx-dots-horizontal-rounded"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" style="">
<a class="dropdown-item" href="#">Page en ligne</a>
<a class="dropdown-item" href="#">Liste de réservations</a>
<a class="dropdown-item" href="#">Autres</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- end row -->
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="flex items-center gap-x-4">
<div class="w-8 h-8 rounded-full flex items-center justify-center bg-orange/30 dark:bg-orange/30">
<i class="bx bx-copy-alt text-orange text-3xl"></i>
</div>
<div>
<h4 class="text-gray-700 text-15 font-semibold dark:text-gray-50 mb-1">Compléter les informations de votre expérience</h4>
<p class="text-gray-700 text-sm">Voici les sections que vous devez compléter pour finaliser de fournir les informations necessaire pour publié votre éxpeience. </p>
</div>
</div>
<div class="my-4 mb-4.5 text-sm flex flex-wrap sm:gap-5 gap-2 items-center">
<!-- Section: General Info -->
<div class="flex items-center justify-start my-1 space-x-1 mr-2 ">
<i class="bx {% if '1' in experience.steps %}bx-check text-success{% else %}bx-x-circle text-mute{% endif %} font-normal text-base"></i>
<label class="mb-0 font-normal {% if '1' in experience.steps %}fw-medium {% else %}text-muted{% endif %}">Infos génerale</label>
</div>
<!-- Section: Programme -->
<div class="flex items-center justify-start my-1 space-x-1 mr-2 ">
<i class="bx {% if '2' in experience.steps %}bx-check text-success{% else %}bx-x-circle text-muted{% endif %} font-normal text-base"></i>
<label class="mb-0 font-normal {% if '2' in experience.steps %}fw-medium {% else %}text-muted{% endif %}">Description</label>
</div>
<!-- Section: Gallery -->
<div class="flex items-center justify-start my-1 space-x-1 mr-2 ">
<i class="bx {% if '3' in experience.steps %}bx-check text-success{% else %}bx-x-circle text-muted{% endif %} "></i>
<label class="mb-0 font-normal{% if '3' in experience.steps %}fw-medium{% else %}text-muted{% endif %}">Programme</label>
</div>
<!-- Section: Description -->
<div class="flex items-center justify-start my-1 space-x-1 mr-2 ">
<i class="bx {% if '4' in experience.steps %}bx-check text-success{% else %}bx-x-circle text-muted{% endif %} "></i>
<label class="mb-0 font-normal{% if '4' in experience.steps %}fw-medium{% else %}text-muted{% endif %}">Hebergement</label>
</div>
<!-- Section: Prix -->
<div class="flex items-center justify-start my-1 space-x-1 mr-2 ">
<i class="bx {% if '5' in experience.steps %}bx-check text-success{% else %}bx-x-circle text-muted{% endif %}"></i>
<label class="mb-0 font-normal {% if '5' in experience.steps %}fw-medium{% else %}text-muted{% endif %}">Media</label>
</div>
<!-- Section: Highlights -->
<div class="flex items-center justify-start my-1 space-x-1 mr-2 ">
<i class="bx {% if '6' in experience.steps %}bx-check text-success{% else %}bx-x-circle text-muted{% endif %}"></i>
<label class="mb-0 font-normal {% if '6' in experience.steps %}fw-medium{% else %}text-muted{% endif %}">Tarification</label>
</div>
</div>
<div class="border-t border-gray-300 pt-2 flex w-2/5 dark:border-zink-50">
<div class="flex items-center space-x-1 mr-2 my-2">
<i class="bx bx-check-circle text-success font-normal text-base"></i>
<small class="text-xs font-light dark:text-zink-200">Information enregistrés </small>
</div>
<div class="flex items-center space-x-1 mr-2 mx-3">
<i class="bx bx-x-circle text-soft-danger text-lg"></i>
<p class="text-xs mb-0 font-light dark:text-zink-200">Information requise </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="avatar-xs me-3">
<span class="avatar-title rounded-circle bg-primary bg-soft text-primary font-size-18">
<i class="bx bx-dollar-circle"></i>
</span>
</div>
<h5 class="font-size-14 mb-0">Prix</h5>
<div class="dropdown ms-auto">
<a class="text-muted font-size-16" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
<i class="mdi mdi-dots-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="{{ path('edit_price',{'id':experience.id}) }}">Condition d'annulation</a>
<a class="dropdown-item" href="{{ path('edit_price',{'id':experience.id}) }}">Prix et tarification</a>
</div>
</div>
</div>
<div class="text-muted mt-4">
<h4> {{ experience.price }} {{ experience.currency }} <i class="mdi mdi-chevron-up ms-1 text-success"></i></h4>
<div class="d-flex">
<span class="badge badge-soft-success font-size-12"> {{ experience.currency }} </span> <span class="ms-2 text-truncate">Prix de l'éxperience en {{ experience.currency }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="avatar-xs me-3">
<span class="avatar-title rounded-circle bg-primary bg-soft text-primary font-size-18">
<i class="bx bx-dna"></i>
</span>
</div>
<h5 class="font-size-14 mb-0">Promotion</h5>
</div>
<div class="text-muted mt-4">
<h4>% {{ experience.promotion.percent }} <i class="mdi mdi-chevron-up ms-1 text-success"></i></h4>
<div class="d-flex">
{% if experience.onpromo == '1' %}
<span class="badge badge-soft-success font-size-12"> On promo </span> <span class="ms-2 text-truncate">La promotion est activé</span>
{% else %}
<span class="badge badge-soft-danger font-size-12"> Pas de promo </span> <span class="ms-2 text-truncate">Aucun promotion actif</span>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="avatar-xs me-3">
<span class="avatar-title rounded-circle bg-primary bg-soft text-primary font-size-18">
<i class="bx bx-cart"></i>
</span>
</div>
<h5 class="font-size-14 mb-0">Reservation</h5>
</div>
<div class="text-muted mt-4">
<h4>120 <i class="mdi mdi-chevron-up ms-1 text-success"></i></h4>
<div class="d-flex">
<span class="badge badge-soft-warning font-size-12"> Confirmé </span> <span class="ms-2 text-truncate">Nombre de réservation confirmé</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-6 ">
<div class="card">
<div class="card-body">
<div class="p-4">
<h5 class="card-title">Description</h5>
<p class="mb-1">{{ experience.description|u.truncate(50, '...') }}</p>
<h5 class="card-title mt-4">Inclus au prix</h5>
<div class="text-muted">
{% for included in experience.included %}
<p class="mb-1"><i class="mdi mdi-circle-medium align-middle text-primary me-1"></i> {{ included }}</p>
{% endfor %}
</div>
<h5 class="card-title mt-4">Non Inclus au prix</h5>
<div class="text-muted">
{% for notincluded in experience.notincluded %}
<p class="mb-1"><i class="mdi mdi-circle-medium align-middle text-primary me-1"></i> {{ notincluded }}</p>
{% endfor %}
</div>
<div class="text-center mt-4"><a href="{{ path('edit_description',{'id':experience.id}) }}" class="">Modifier description<i class="mdi mdi-arrow-right ms-1"></i></a></div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="p-4">
<h5 class="card-title">Hebergement</h5>
<ul class="list-group list-group-flush">
{% for hebergement in experience.hebergements %}
<li class="list-group-item py-3">
<div class="d-flex">
<div class="me-3">
<img width="80" src="{{ asset(''~experience.image) }}" alt="" class="avatar-sm h-auto d-block rounded">
</div>
<div class="align-self-center overflow-hidden me-auto">
<div>
<h5 class="font-size-14 text-truncate"><a href="{{ path('edit_hebergement',{'id':experience.id,'heber':hebergement.id}) }}" class="text-dark">{{ hebergement.name }}</a></h5>
<p class="text-muted mb-0">{{ hebergement.price }} {{ experience.currency }}</p>
</div>
</div>
<div class="dropdown ms-2">
<a class="text-muted font-size-14" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-dots-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="{{ path('edit_hebergement',{'id':experience.id,'heber':hebergement.id}) }}">Modifier</a>
<a class="dropdown-item" href="{{ path('remove_hebergement',{'id':experience.id,'p':hebergement.id}) }}">Supprimer</a>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
<div class="text-center mt-4"><a href="{{ path('add_hebergement',{'id':experience.id}) }}" class="">Nouveau hebergement<i class="mdi mdi-arrow-right ms-1"></i></a></div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="p-4">
<h5 class="card-title">Calendrier de dispoibilité</h5>
<p>Personnaliser la disponilbilité de cette experience selon votre calendrier.</p>
{% if experience.availability %}
<div class="text-center">
<div class="mb-4">
<i class="bx bx-calendar text-primary display-4"></i>
</div>
<h4>Durée de l'éxperience</h4>
<p>{{ experience.availability.duration }} jours</p>
</div>
<div class="table-responsive mt-4">
<table class="table align-middle table-nowrap">
<tbody>
<tr>
<td >
<p class="mb-0">Périodes de réservations :</p>
</td>
<td>
<p class="mb-0">à partir de <b>{{ experience.availability.duration}} Jours</b>, avant la date de départ </p></td>
</tr>
<tr>
<td>
<p class="mb-0">Type de calendrier :</p>
</td>
<td>
<p class="mb-0">{% if experience.availability.availabilitytype =="1" %}CALENDRIER DE DISPONIBILITÉ <i class="mdi mdi-arrow-right ms-1"></i> Dates de départ{% elseif experience.availability.availabilitytype =="2" %}CALENDRIER OUVERTE <i class="mdi mdi-arrow-right ms-1"></i> Dates d'indisponibilité{% endif %}</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="text-center bg- p-10" >
<div class="text-center mt-4"><a href="{{ path('edit_availability',{'id':experience.id}) }}" class="">Personaliser la disponibilité <i class="mdi mdi-arrow-right ms-1"></i></a></div>
</div>
{% else %}
<div class="text-center bg- p-10" >
<p class="text-muted">Aucune disponibilité enregistré !!</p>
<div class="text-center mt-4"><a href="{{ path('add_availability',{'id':experience.id}) }}" class="">Créer une calendrier <i class="mdi mdi-arrow-right ms-1"></i></a></div>
</div>
{% endif %}
<!-- end card -->
</div>
</div>
</div>
</div>
<div class="col-6 ">
<div class="card">
<div class="card-body">
<h4 class="card-title">Informations génerale</h4>
<p class="mb-2 text-muted">Modifier les informations génerale de l'éxperience :</p>
<div class="tab-pill mt-3 ">
<div class=" text-13">
<div class="tab-pane block">
<div class="row">
<label for="example-text-input" class="block col-3 dark:text-zink-200 font-medium mb-1 text-sm">Type de coaching</label>
<p class="col-9 text-sm text-gray-600 dark:text-zink-200">{% if experience.coachingtype %}Coaching Privé{% elseif experience.coachingtype =='groupe' %}Coaching en Groupe{% else %}Coaching en Visio{% endif %}</p>
</div>
<div class="mt-3 row">
<label for="example-text-input" class="block col-3 dark:text-zink-200 font-medium mb-1 text-sm">Categorie</label>
<p class="col-9 text-xs text-gray-600 dark:text-zink-200">{% if experience.subcategories|length > 0 %}{{ experience.subcategories[0].category.name }}{% endif %}</p>
</div>
<div class="mt-3 row">
<label for="example-text-input" class="block col-3 dark:text-zink-200 font-medium mb-1 text-sm">Resumé</label>
<p class="col-9 text-xs text-gray-600 dark:text-zink-200">{{ experience.resume }}</p>
</div>
<div class="text-center mt-4"><a href="{{ path('edit_general_info',{'id':experience.id}) }}" class="">Modifier les infos general <i class="mdi mdi-arrow-right ms-1"></i></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="p-4">
<h5 class="card-title">Points fort !</h5>
<p>Les point remarquables de l'éxperience :</p>
<div class="text-muted">
{% for highlight in experience.highlights %}
<p class="mb-1"><i class="mdi mdi-circle-medium align-middle text-primary me-1"></i> {{ highlight }}</p>
{% endfor %}
</div>
<div class="text-center mt-4"><a href="{{ path('edit_highlights',{'id':experience.id}) }}" class="">Modifier Points fort<i class="mdi mdi-arrow-right ms-1"></i></a></div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="p-4">
<h5 class="card-title">Programme</h5>
<p>Les activités programmeé durant l'éxperience,pour les éxperience à plusieurs jours, lister regrouper chaque jousr à part.</p>
{% if experience.programs|length > 0 %}
<div data-simplebar class="mt-2" style="max-height: 280px;">
<ul class="verti-timeline list-unstyled">
{% for program in experience.programs %}
<li class="event-list active">
<div class="event-timeline-dot">
<i class="bx bxs-right-arrow-circle font-size-18 bx-fade-right"></i>
</div>
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<h5 class="font-size-14">{{ program.day }} <i class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"></i></h5>
</div>
<div class="flex-grow-1">
<div>
{{ program.description }} <a href="{{ path('edit_program',{'id':experience.id,'p':program.id}) }}" class="text-success p-1"><i class="bx bxs-edit-alt"></i></a> <a href="{{ path('remove_program',{'id':experience.id,'p':program.id}) }}" class="text-ganger p-1"><i class="bx bxs-trash-alt"></i></a>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
{% else %}
<div class="text-center bg- p-10" >
<p class="text-muted">Aucun programme enregistrer !!</p>
</div>
{% endif %}
<!-- end card -->
<div class="text-center mt-4"><a href="{{ path('add_program',{'id':experience.id}) }}" class="">Nouvelle activité au Programe <i class="mdi mdi-arrow-right ms-1"></i></a></div>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
<!-- end row -->
<!-- end row -->
<!-- End Page-content -->
{% endblock %}
{% block javascripts %}
<!-- apexcharts -->
<script src="{{ asset('admin/libs/parsleyjs/parsley.min.js')}}"></script>
<script src="{{ asset('admin/js/app.js')}}"></script>
{% endblock %}