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

{% block title %}Liste des fournisseurs
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    /* Conteneur du bouton */
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 30px;
    }

    /* Cache l'input de type checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* Apparence du slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: red;
        transition: 0.4s;
        border-radius: 30px;
        display: flex;
        align-items: center;
        padding: 0 0 0 10; /* Ajout de padding pour éviter que le texte touche les bords */
        font-size: 14px;
        color: white;
        font-weight: bold;
    }

    /* Texte affiché pour l'état "Non" */
    .slider::before {
        content: "Non";
        position: absolute;
        right: 3px; /* Positionne le texte "Non" à droite */
        transition: 0.4s;
    }

    /* Apparence du cercle */
    .slider::after {
        position: absolute;
        content: "";
        height: 24px;
        width: 24px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: 0.4s;
    }

    /* Styles quand le bouton est coché */
    input:checked + .slider {
        background-color: green;
    }

    input:checked + .slider::before {
        content: "Oui";
        left: auto; /* Enlève l'alignement gauche */
        left: 3px; /* Positionne le texte "Oui" à gauche */
    }

    input:checked + .slider::after {
        transform: translateX(30px);
    }
</style>


{% endblock %}

{% block body %}
	<div
		class="content-page">
		<div
			class="content">
			<div
				class="container-fluid">
				<div
					class="row">
					<div
						class="col-12">
						<div
							class="page-title-box">
							<h1>Liste des fournisseurs</h1>
							<a
								href="{{ path('ajouter_fournisseur') }}" class="custom-link"
								style="margin-bottom: 20px;">Ajouter un fournisseur</a>
							<div
								class="tab-content">
								<div
									class="tab-pane show active"
									id="scroll-horizontal-preview">
									<table
										id="scroll-horizontal-datatable"
										class="table table-striped w-100 nowrap">
										<thead>
											<tr>
												<th
													class="no-sort"/>
												<th>Nom</th>
												<th>Code Interne</th>
												<th>Renommage Facture</th>
												<th>Actif</th>
											</tr>
										</thead>
										<tbody
											style="vertical-align: middle;">
											{% for fournisseur in fournisseurs %}
												<tr>
													<td
														class="no-sort">
														<ul
															class="list-inline">
															<a
																href="{{ path('details_fournisseur', {'id': fournisseur.id}) }}" class="detail-custom"
																style="padding: 0px 5px;">
																<i
																	class="ri-search-eye-line "/></i>
															</a>
															<a
																href="{{ path('modifier_fournisseur', {'id': fournisseur.id}) }}" class="modifier-custom"
																style="padding: 0px 5px;">
																<i
																	class="ri-edit-line "/></i>
															</a>
															<a
																href="{{ path('supprimer_fournisseur', {'id': fournisseur.id}) }}" class="supprimer-custom"
																style="padding: 0px 5px;">
																<i
																	class="ri-delete-bin-line "/></i>
															</a>
														</ul>
													</td>
													<td>
														<a
															href="{{ path('details_fournisseur', {'id': fournisseur.id}) }}">{{ fournisseur.nom }}</a>
													</td>
													<td>{{ fournisseur.numero }}</td>
													<td>{{ fournisseur.renommage }}</td>
													<td>
														<label
															class="switch">
															<input
																type="checkbox"
																class="toggle-activation"
																data-id="{{ fournisseur.id }}" {% if fournisseur.actif %} checked
																{% endif %}>
															<span
																class="slider round"></span>
														</label>
													</td>

												</tr>
											{% endfor %}
										</tbody>
									</table>
								</div>
							</div>
							<a
								href="{{ path('ajouter_fournisseur') }}" class="custom-link">Ajouter un fournisseur</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

{% endblock %}

{% block javascripts %}
	{{ parent() }}
<script>
    document.querySelectorAll('.toggle-activation').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const fournisseurId = this.dataset.id;
            const isActive = this.checked;

            fetch(`/fournisseur/activer/${fournisseurId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({ actif: isActive })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status !== 'success') {
                    alert('Erreur lors de la mise à jour');
                }
            })
            .catch(error => console.error('Erreur:', error));
        });
    });
</script>

{% endblock %}


{#$('#datatableSalarieId').DataTable({
        columnDefs: [
            { targets: [1, 2, 12, 18], orderable: true }, // tri sur les colonnes 1 (Nom), 2 (Prénom), 3 (Contrat), 4 (Responsable hiérarchique)
        
            { targets: [0, 3, 4,5,6,7,8,9,10,11,13,14,15,16,17,19], orderable: false } //voir si on fait vraiment le tri que sur certaine colonne
        ]
    });
});#}