{% extends 'admin/baseAdmin.html.twig' %}
{% block page_title %}Mes réservations{% endblock %}
{% block breadcump_main %}Compte Coach{% endblock %}
{% block breadcump_subtitle %}Les Réservations{% endblock %}
{% block menu_left_sidebar %}
{% include 'include/menu/menuCoach.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/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('admin/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('admin/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.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 title %}{{"Gerer mes resevation"|trans }}{% endblock %}
{% block content %}
<div class="row">
<div class="col-lg-12">
<div class="mb-3">
<h4 class="card-title flex-grow-1">Gerer vos réservations</h4>
<p class="text-muted">Gerer les réservation de vos éxperiences enligne</p>
</div>
</div><!--end col-->
{% for experience in app.user.experiences %}
<div class="col-lg-4 col-md-6 mb-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-copy-alt"></i>
</span>
</div>
<div class="ms-3 flex-grow-1">
<h5 class="mb-0 card-title">{{ experience.title }}</h5>
<p class="text-muted mb-0">{{ experience.destination.name }}</p>
</div>
</div>
<hr>
<div class="text-muted mt-4">
<p class="text-muted mb-3">Vous avez {{ experience.bookings|length }} reservation(s) pour cette éxperience.</p>
<div class="d-flex gap-3">
<div>
<a href="javascript: void(0);" class="text-primary">Voir tous <i class="mdi mdi-arrow-right"></i></a>
<a href="javascript: void(0);" class="text-primary">À venir <i class="mdi mdi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{# Mes derneire reservation #}
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="card-title mb-3">Mes derniéres réservations</h4>
<!-- Nav tabs -->
<!-- Tab panes -->
<div class="row">
<div class="col-lg-12">
<div class="card job-filter">
<div class="card-body p-3">
<div class="table-responsive">
<table class="table align-middle table-nowrap table-hover">
<thead class="table-light">
<tr>
<th scope="col" style="width: 100px">#</th>
<th scope="col">Experience</th>
<th scope="col">Date</th>
<th scope="col">Détails</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{% for booking in app.user.bookings %}
<tr>
<td><img src="{{ asset(''~booking.experience.image) }}" alt="" class="avatar-sm"></td>
<td>
<h5 class="text-truncate font-size-14"><a href="javascript: void(0);" class="text-dark">{{ booking.experience.title }}</a></h5>
<p class="text-muted mb-0">#{{ booking.experience.id }}</p>
</td>
<td>
<p class="mb-0"><small>Le : {{ booking.datestart|date('d/M/Y') }}</small></p>
<p class="mb-0"><small>Depart : {{ booking.datestart|date('d/M/Y') }}</small></p>
</td>
<td>
<p class="mb-0">{{ booking.total }} {{ booking.currency }} </p>
<p class="text-muted mb-0">#{{ booking.reference }} | {{ booking.pax }} Pax</p>
</td>
<td>
{% if booking.status == '1' %}
<span class="badge bg-success">Confimé</span>
{% elseif booking.status == '2' %}
<span class="badge bg-danger">Annulé</span>
{% else %}
<span class="badge bg-warning">En Attente</span>
{% endif %}
</td>
<td>
<ul class="list-inline font-size-20 contact-links mb-0">
<li class="list-inline-item px-2">
<a href="javascript: void(0);" title="Message"><i class="bx bx-edit"></i></a>
</li>
<li class="list-inline-item px-2">
<a href="javascript: void(0);" title="Profile"><i class="bx bx-show"></i></a>
</li>
</ul>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('admin/libs/select2/js/select2.min.js')}}"></script>
<script src="{{ asset('admin/libs/select2/js/select2.min.js')}}"></script>
<script src="{{ asset('admin/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
<script src="{{ asset('admin/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('admin/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{ asset('admin/libs/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{ asset('admin/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{ asset('admin/js/pages/crypto-orders.init.js')}}"></script>
<script src="{{ asset('admin/js/app.js')}}"></script>
{% endblock %}