{% extends 'admin/baseAdmin.html.twig' %}
{% block page_title %}Modifier tarrification {% endblock %}
{% block breadcump_main %}Prix{% endblock %}
{% block breadcump_subtitle %}Modification{% 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">
<link href="{{ asset('admin/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('admin/libs/@chenfengyuan/datepicker/datepicker.min.css') }}" rel="stylesheet" type="text/css">
{% endblock %}
{% block content %}
<form id="form-general" class="general-info custom-validation" method="POST" action="{{ path('edit_price',{'id':experience.id}) }}" enctype="multipart/form-data" >
<div class="container-fluid">
<div class="row">
<div class="col-xl-12 px-0">
<div class="card">
<div class="card-body">
<div class="sm:p-4 p-2 pb-0 pt-1">
<h5 class="text-lg font-semibold mt-2 mb-2 ">Prix et tarification </h5>
<p class="pb-1 text-gray-700 text-sm">Calculer le prix de l'expérience, en excluant le prix de l'hébergement standard si c'est le cas d'hebergement.
</p>
<div class="mt-10 flex justify-center gap-5">
<div class="flex gap-2 w-8/12 ">
<div class="w-10/12">
<h6 class="text-13 dark:text-white font-semibold mb-2">Le prix de l'éxperience</h6>
<div class="relative h-16 w-full">
<input value="{{ experience.price }}" style="font-size: 1.5rem;COLOR: #f8853b;text-align: center;" required="" name="price" type="number" id="floating_outlined" class="appearance-none bg-transparent block border border-gray-400 dark:bg-transparent dark:border-zink-50 dark:placeholder:text-zink-200 dark:text-zink-200 focus:border-blue-600 focus:outline-none focus:ring-0 h-100 pb-2.5 peer pt-4 px-2.5 rounded-lg text-gray-900 text-sm w-full" placeholder=" ">
<label for="floating_outlined" class="absolute text-sm text-gray-600 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1 dark:bg-transparent">Prix</label>
</div>
</div>
<div class="w-1/6">
<h6 class="text-13 dark:text-white font-semibold mb-2">Devise</h6>
<div class="relative h-16">
<select required="" name='currency' placeholder="choisir le type d'accomodation" class="h-100 text-sm form-control " aria-invalid="false">
<option {% if experience.currency == 'usd' %}selected=""{% endif %} value="usd">$ USD</option>
<option {% if experience.currency == 'eur' %}selected=""{% endif %} value="eur">€ EUR</option>
<option {% if experience.currency == 'GBP' %}selected=""{% endif %} value="gbp">£ GBP</option>
<option {% if experience.currency == 'mad' %}selected=""{% endif %} value="gbp">dh MAD</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
<h5 class="text-lg font-semibold mt-5 ">Politique d'annulation </h5>
<p class="pb-1 text-gray-700 text-sm">Pour mieux servir tout le monde, nous avons standardisé les politiques d'annulation pour les retraites. Moins de confusion. Plus de clarté. Les deux conduisent à plus de réservations et moins de maux de tête pour vous.
</p>
<div class="flex items-start mt-3">
<p for="" class="form-label font-medium text-sm mr-2 col-3"> Choisir un choix: </p>
<div class="row col-9">
<div class="relative col-3 py-4">
<div class="flex items-center mb-3">
<label class="flex items-start gratuit" >
<input {% if experience.cancellation == '0' %} checked {% endif %} value="0" type="radio" name="cancellation" class="form-checkbox h-5 w-6 text-blue-600 me-3">
<span class=" text-sm">Gratuit</span>
</label>
</div>
<div class="flex items-center mb-3 flexible" >
<label class="flex items-start">
<input {% if experience.cancellation == '1' %} checked {% endif %} value="1" type="radio" name="cancellation" class="form-checkbox h-5 w-6 text-blue-600 me-3">
<span class=" text-sm">Flexible</span>
</label>
</div>
<div class="flex items-center mb-3 modere">
<label class="flex items-start">
<input {% if experience.cancellation == '2' %} checked {% endif %} value="2" type="radio" name="cancellation" class="form-checkbox h-5 w-6 text-blue-600 me-3">
<span class=" text-sm">Modérée</span>
</label>
</div>
</div>
<div class="col-9">
<div id="alert-gratuit" class="p-4 mb-4 text-green-800 border border-green-300 rounded-lg bg-green-50 " role="alert">
<div class="flex items-center justify-center">
<svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
</svg>
<h3 class="text-lg font-medium">Gratuit</h3>
</div>
<div class="my-2 text-sm" >
<ul style="list-style: disc;">
<li>1+ days before the retreat start date.</li>
<li>The remaining balance is due upon arrival.</li>
<li>If paid at the time of booking, a full refund of the remaining balance is available up to the day before your retreat start date.</li>
</ul>
</div>
</div>
<div id="alert-flexible" style="display: none;" class="p-4 mb-4 text-green-800 border border-green-300 rounded-lg bg-green-50 " role="alert">
<div class="flex items-center justify-center ">
<svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
</svg>
<h3 class="text-lg font-medium"> Flexible</h3>
</div>
<div class="my-2 text-sm" >
<ul style="list-style: disc;">
<li>50% deposit refund for cancellation 15-29 days before retreat start date.</li>
<li>0% deposit refund for cancellation 0-14 days before retreat start date.</li>
<li>The remaining balance is due upon arrival.</li>
<li> If paid at the time of booking, a full refund of the remaining balance is available up to the day before your retreat start date.</li>
</ul>
</div>
</div>
<div id="alert-moderate" style="display: none;" class="p-4 mb-4 text-green-800 border border-green-300 rounded-lg bg-green-50 " role="alert">
<div class="flex items-center justify-center">
<svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
</svg>
<h3 class="text-lg font-medium">Moderate</h3>
</div>
<div class="my-2 text-sm" >
<ul style="list-style: disc;">
<li>100% deposit refund for cancellation 60+ days before retreat start date.</li>
<li>50% deposit refund for cancellation 30-59 days before retreat start date.</li>
<li>0% deposit refund for cancellation 0-29 days before retreat start date.</li>
</ul>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 px-0"
<!-- end card body -->
<div class="card">
<div class="card-body">
<div class="mt-1">
<h5 class="text-lg font-semibold mt-2 mb-2 ">Promotion</h5>
<p class="card-title-desc">
<small>Proposer des réductions de prix pour acroitre plus de ventes, vous trouverez tous les outils necessaires pour cette fin en activant le mode promotion.</small>
</p>
<div class="mb-3">
<h5 class="font-size-14" >
Activer la promotion ?
</h5>
<input {% if experience.onpromo == '1' %} checked {% endif %} name="onpromo" type="checkbox" id="switch1" switch="success" data-bs-toggle="collapse" href="#promotionbloc" aria-expanded="false" aria-controls="promotionbloc" />
<label for="switch1" data-on-label="Oui" data-off-label="Non"></label>
</div>
<div class="collapse {% if experience.onpromo == '1' %} show {% endif %}" id="promotionbloc">
<div class="card border shadow-none card-body text-muted mb-0">
<div class="row ">
<div class="mt-3 mb-3 col-md-6">
<label for="formrow-firstname-input" class="form-label">Pourcentage</label>
<div class="input-group">
<div class="input-group-text">%</div>
<input value="{{ experience.promotion.percent }}" required="" name="percent" type="number" class="form-control" id="autoSizingInputGroup" placeholder="Taper le pourcentage de la promo">
</div>
</div>
</div>
<div class="row ">
<div class="mb-4">
<label>Durée de la promoation</label>
<div class="input-daterange input-group" id="datepicker6" data-date-format="dd M, yyyy" data-date-autoclose="true" data-provide="datepicker" data-date-container='#datepicker6'>
<input value="{{ experience.promotion.datestart|date("m/d/Y") }}" required="" type="text" class="form-control" name="datestart" placeholder="Date debut" />
<input value="{{ experience.promotion.dateend|date("m/d/Y") }}" required="" type="text" class="form-control" name="dateend" placeholder="Date Fin" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="mt-3 " >
<h5 class="text-lg font-semibold mt-2 mb-2 ">Prix des chambres</h5>
<p class="card-title-desc">
<small>Si vos proposer aux utilisateurs des chambres pour l'éxperience, vous devez mentionner le prix de chaque chambre.</small>
</p>
<div class="mb-3">
<h5 class="font-size-14" >
Hebergement ?
</h5>
<input {% if experience.hashebergement == '1' %} checked {% endif %} name="hashebergement" type="checkbox" id="switch2" switch="success" data-bs-toggle="collapse" href="#hashebergementbloc" aria-expanded="false" aria-controls="hashebergementbloc" />
<label for="switch2" data-on-label="Oui" data-off-label="Non"></label>
</div>
<div class="collapse {% if experience.hashebergement == '1' %} show {% endif %} " id="hashebergementbloc">
<div class="card border shadow-none card-body text-muted mb-0">
<p class="text-sm"><small>Veuillez mentionner les prix des chambres que vous avez ajouter à cette éxperience, le prix total des réservations sera celui de l'éxperience avec l'hébergement sélectionné.</small></p>
<div id="price-forms" class="row text-sm ">
{% for hebergement in experience.hebergements %}
<div class="price-item mt-4">
<p for="" class="form-label text-sm font-semibold col-2">Chambre {{ loop.index }} </p>
<div class="row mb-3" >
<div class=" col-lg-6 lg:mb-0">
<p for="" class="form-label font-medium ">Nom de la chambre</p>
<div class="relative w-full ">
<input value="{{hebergement.id}}" placeholder="#{{hebergement.id}} - {{ hebergement.name }}" readonly="" type="text" name="n-chambre" class="form-control sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 ps-3 " >
<input value="{{hebergement.id}}" hidden="" type="text" name="idhebergements[]" class="form-control sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 ps-3 " placeholder="Titre ">
</div>
</div>
<div class=" col-lg-6">
<p for="" class="form-label font-medium ">Prix </p>
<div class="relative w-full ">
<input required="" value="{{ hebergement.price }}" type="number" name="pricehebergements[]" class="form-control sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 ps-3 " placeholder="Prix ">
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="flex mt-4 row">
<div class="col-md-6">
<p class="text-xs text-gray-900 mb-2">En cliquant sur le bouton de Enregistrer, vous mettez à jours les informations envoyé dans ce formulaire </p>
</div>
<div class="col-md flex justify-end">
<button type="reset" style=" color: #ffaa00; border: 1px solid;" class="font-medium h-10 py-2.5 rounded-lg text-center text-sm w-40 me-2">
Annuler</button>
<button type="submit" style=" background: #ffaa00;" class="font-medium hover:bg-primary-700 h-10 py-2.5 rounded-lg text-center text-sm text-white w-40">Enregistrer</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- End Page-content -->
</div><!-- container-fluid -->
</form>
{% endblock %}
{% block javascripts %}
<!-- apexcharts -->
<script src="{{ asset('admin/libs/parsleyjs/parsley.min.js')}}"></script>
<script src="{{ asset('admin/libs/select2/js/select2.min.js')}}"></script>
<script src="{{ asset('admin/libs/bootstrap-maxlength/bootstrap-maxlength.min.js')}}"></script>
<script src="{{ asset('admin/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
<script src="{{ asset('admin/libs/@chenfengyuan/datepicker/datepicker.min.js')}}"></script>
<script src="{{ asset('admin/js/pages/form-validation.init.js')}}"></script>
<script src="{{ asset('admin/js/app.js')}}"></script>
<script>
/*
Template Name: Skote - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: themesbrand@gmail.com
File: Form Advanced Js File
*/
!function ($) {
"use strict";
var AdvancedForm = function () { };
AdvancedForm.prototype.init = function () {
// Select2
if ($('.select2').length > 0) {
$(".select2").select2();
}
if ($('.select2-tags').length > 0) {
$(".select2-tags").select2({
tags: true
});
}
if ($('.select2-limiting-3').length > 0) {
$(".select2-limiting-3").select2({
maximumSelectionLength: 3
});
}
//Bootstrap-MaxLength
$('input#defaultconfig').maxlength({
warningClass: "badge bg-info",
limitReachedClass: "badge bg-warning"
});
$('input#thresholdconfig').maxlength({
threshold: 20,
warningClass: "badge bg-info",
limitReachedClass: "badge bg-warning"
});
$('input#moreoptions').maxlength({
alwaysShow: true,
warningClass: "badge bg-success",
limitReachedClass: "badge bg-danger"
});
$('input#alloptions').maxlength({
alwaysShow: true,
warningClass: "badge bg-success",
limitReachedClass: "badge bg-danger",
separator: ' out of ',
preText: 'You typed ',
postText: ' chars available.',
validate: true
});
$('textarea#textarea').maxlength({
alwaysShow: true,
warningClass: "badge bg-info",
limitReachedClass: "badge bg-warning"
});
$('input#placement').maxlength({
alwaysShow: true,
placement: 'top-left',
warningClass: "badge bg-info",
limitReachedClass: "badge bg-warning"
});
},
//init
$.AdvancedForm = new AdvancedForm, $.AdvancedForm.Constructor = AdvancedForm
}(window.jQuery),
//Datepicker
function ($) {
"use strict";
$.AdvancedForm.init();
}(window.jQuery);
</script>
{% endblock %}