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

{% block content %}
<style>
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f7fc;
    margin: 0;
    padding: 0;
}

a {
    color: white;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.document-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.document-table th, .document-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.document-table th {
    background-color: green;
    color: white;
}

.document-table tr:hover {
    background-color: #313237;
}

.btn {
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: bold;
}

.btn-primary {
    background-color: green;
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
    border: none;
}

.btn-danger:hover {
    background-color: #c82333;
}

#interventionModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 60%;
    max-width: 800px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
}

.close-btn:hover {
    color: #007bff;
}

h2 {
    color: #007bff;
    font-size: 24px;
    margin-bottom: 20px;
}

.tab-button {
    background-color: #f1f1f1;
    color: #333;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin: 0 5px;
    border-radius: 5px;
}

.tab-button.active {
    background-color: #007bff;
    color: white;
}

.tab-content {
    padding: 20px 0;
}

.tab-panel {
    display: none;
}

.tab-panel.hidden {
    display: block;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table td {
    padding: 8px;
}

table td strong {
    color: #333;
}


</style>
<h1>Liste des interventions</h1>
<table class="document-table">
    <thead>
        <tr>
            <th>Descriptif</th>
            <th>Instrument</th>
            <th>Date de début</th>
            <th>Prix</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for i in iInterventions %}
            <tr>
                <td>
                    <a href="#" class="intervention-name" 
                       data-id="{{ i.id }}"
                       data-dateDebut="{{ i.dateDebut|date('y:M:d') }}"
                       data-dateFin="{{ i.dateFin|date('y:M:d') }}"
                       data-descriptif="{{ i.descriptif }}"
                       data-prix="{{ i.prix }}"
                       data-quotite="{{ i.quotite }}">
                        {{ i.descriptif }}
                    </a>
                </td>
                <td>{{ i.instrument.typeInstrument.libelle }}</td>
                <td>{{ i.dateDebut|date('y:M:d') }}</td>
                <td>{{ i.prix }}</td>
                <td>
                    <a href="{{ path('intervention_modifier', {'id': i.id}) }}" class="btn btn-primary">
                        Modifier
                    </a>
                    <form action="{{ path('intervention_supprimer', {'id': i.id}) }}" method="post" style="display:inline;">
                        <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ i.id) }}">
                        <button type="submit" class="btn btn-danger" 
                                onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette intervention ?')">
                            Supprimer
                        </button>
                    </form>
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="5">Aucune intervention n'a été trouvée.</td>
            </tr>
        {% endfor %}
    </tbody>
</table>

<div id="interventionModal" class="modal">
    <div class="modal-content">
        <button class="close-btn">&times;</button>
        <h2>Détails de l'intervention</h2>
        <div class="tabs">
            <button class="tab-button active" data-target="intervention">Intervention</button>
        </div>

        <div class="tab-content">
            <div class="tab-panel" id="intervention">
                <table>
                    <tr>
                        <td><strong>Date de début :</strong></td>
                        <td id="modal-dateDebut"></td>
                    </tr>
                    <tr>
                        <td><strong>Date de fin :</strong></td>
                        <td id="modal-dateFin"></td>
                    </tr>
                    <tr>
                        <td><strong>Descriptif :</strong></td>
                        <td id="modal-descriptif"></td>
                    </tr>
                    <tr>
                        <td><strong>Prix :</strong></td>
                        <td id="modal-prix"></td>
                    </tr>
                    <tr>
                        <td><strong>Quotité :</strong></td>
                        <td id="modal-quotite"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    const modal = document.getElementById("interventionModal");
    const closeModal = document.querySelector(".close-btn");

    document.querySelectorAll(".intervention-name").forEach(link => {
        link.addEventListener("click", function(event) {
            event.preventDefault();

            const interventionId = this.getAttribute("data-id");
            const dateDebut = new Date(this.getAttribute("data-dateDebut"));
            const dateFin = new Date(this.getAttribute("data-dateFin"));
            const descriptif = this.getAttribute("data-descriptif");
            const prix = this.getAttribute("data-prix");
            const quotite = this.getAttribute("data-quotite");

            document.getElementById("modal-dateDebut").innerText = dateDebut.toLocaleString();
            document.getElementById("modal-dateFin").innerText = dateFin.toLocaleString();
            document.getElementById("modal-descriptif").innerText = descriptif;
            document.getElementById("modal-prix").innerText = prix;
            document.getElementById("modal-quotite").innerText = quotite;

            modal.style.display = "flex";
        });
    });

    closeModal.addEventListener("click", function() {
        modal.style.display = "none";
    });

    window.onclick = function(event) {
        if (event.target === modal) {
            modal.style.display = "none";
        }
    };

    document.addEventListener("DOMContentLoaded", function () {
        const tabButtons = document.querySelectorAll(".tab-button");
        const tabPanels = document.querySelectorAll(".tab-panel");

        tabButtons.forEach(button => {
            button.addEventListener("click", () => {
                tabButtons.forEach(btn => btn.classList.remove("active"));
                tabPanels.forEach(panel => panel.classList.add("hidden"));

                button.classList.add("active");
                const target = button.getAttribute("data-target");
                document.getElementById(target).classList.remove("hidden");
            });
        });

        tabButtons[0].classList.add("active");
        tabPanels[0].classList.remove("hidden");
    });
</script>
</body>
</html>

{% endblock %}