{% extends 'base2.html.twig' %}

{% block title %}Médecine esthétique{% endblock %}

{% block body %}
    <h3>Gestion de Médecine esthétique</h3>
{% for type, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ type }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endfor %}
    <!-- Add a search option by default in DataTables -->
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Id</th>
                <th>Titre</th>
                <th>Description</th>
                <th>Image ou vidéo avant</th>
		<th>Image ou vidéo après</th>
		<th>Catégorie</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for medecineesthetique in medecineesthetiques %}
            <tr>
                <td>{{ medecineesthetique.id }}</td>
                <td>{{ medecineesthetique.getTitre(app.request.locale) }}</td>
                <td>{{ medecineesthetique.getDescription(app.request.locale)|slice(0, 35) ~ ( medecineesthetique.getDescription(app.request.locale)|length > 35 ? '...' : '') }}</td>
                <td>
                   {% if medecineesthetique.imageavant %}
    {% set file_extension = medecineesthetique.imageavant|split('.')|last %}

    {% if file_extension in ['jpg', 'jpeg', 'png', 'gif', 'bmp'] %}
        <!-- Affichage de l'image -->
        <img src="{{ asset('upload/images/' ~ medecineesthetique.imageavant) }}" 
             alt="Image de {{ medecineesthetique.getTitre(app.request.locale) }}" 
             style="max-width:100px;">
    {% elseif file_extension in ['mp4', 'webm', 'ogg'] %}
        <!-- Affichage de la vidéo -->
        <video controls style="max-width:100px;">
            <source src="{{ asset('upload/images/' ~ medecineesthetique.imageavant) }}" type="video/{{ file_extension }}">
            Votre navigateur ne prend pas en charge la vidéo.
        </video>
    {% else %}
        <span>Format de fichier non supporté.</span>
    {% endif %}
{% else %}
    <span>Pas de photo avant</span>
{% endif %}

                </td>
<td>{% if medecineesthetique.imageapres %}
    {% set file_extension = medecineesthetique.imageapres|split('.')|last %}

    {% if file_extension in ['jpg', 'jpeg', 'png', 'gif', 'bmp'] %}
        <!-- Affichage de l'image -->
        <img src="{{ asset('upload/images/' ~ medecineesthetique.imageapres) }}" 
             alt="Image de {{ medecineesthetique.getTitre(app.request.locale) }}" 
             style="max-width:100px;">
    {% elseif file_extension in ['mp4', 'webm', 'ogg'] %}
        <!-- Affichage de la vidéo -->
        <video controls style="max-width:100px;">
            <source src="{{ asset('upload/images/' ~ medecineesthetique.imageapres) }}" type="video/{{ file_extension }}">
            Votre navigateur ne prend pas en charge la vidéo.
        </video>
    {% else %}
        <span>Format de fichier non supporté.</span>
    {% endif %}
{% else %}
    <span>Pas de photo après</span>
{% endif %}

                </td>
		<td>{{medecineesthetique.relation.titre}}</td>
                <td>
                    <a href="{{ path('app_medecine_esthetique_adminis_show', {'id': medecineesthetique.id}) }}" class="btn-golden">Afficher</a><br>
                    <a href="{{ path('app_medecine_esthetique_adminis_edit', {'id': medecineesthetique.id}) }}" class="btn-golden">Modifier</a><br>
                    <!-- Delete Link -->
                    {{ include('medecine_esthetique_adminis/_delete_form.html.twig') }}

                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="5">No records found</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <a href="{{ path('app_medecine_esthetique_adminis_new') }}" class="btn-golden" style="font-size:12px; width:150px;">Créer</a>

    <!-- Custom button styling -->
    <style>
        .btn-golden {
            background: linear-gradient(45deg, #ffd700, #b8860b, #f5c400, #cd7f32); /* Golden background */
            color: black; /* Black text */
            padding: 4px 4px; /* Padding to make it look nice */
            border-radius: 5px; /* Rounded corners */
            text-decoration: none; /* Remove underline */
            display: inline-block; /* Make the link behave like a button */
            font-weight: bold;
	    margin-top:2%;
            text-align:center;
	    font-size:10px;
	    width:90px;
        }

        .btn-golden:hover {
            background-color: #FFC107; /* Lighter golden color on hover */
            color: white; /* White text on hover */
        }

        .btn-golden:active {
            background-color: #FF9800; /* Darker golden color when clicked */
        }
    </style>

<script>
    $(document).ready(function() {
        // Initialize DataTable with search functionality
        $('.table').DataTable({
            paging: true,        // Pagination
            searching: true,     // Search box
            ordering: true,      // Sorting
            info: true           // Info text (e.g., "Showing 1 to 10 of 50 entries")
        });
    });
</script>

{% endblock %}