@extends('layout')
@section('content')
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
  <h1>Liste des clients</h1>
  <p>Utilisateur connecté : {{ auth()->user()->email }}</p>
  <ul id="clients-list"></ul>
    {{-- Définition et exécution d'une fonction javascript pour afficher les clients --}}
    <script>
        async function loadClients() {
            try {
                //appel de l'api
                const response = await fetch('http://192.168.56.56:8000/api/clients');
                const clients = await response.json();
                const list = document.getElementById('clients-list');
                list.innerHTML = `<table> 
                                    <thead> 
                                        <tr> 
                                            <th scope=\"col\">Nom du client</th> 
                                            <th scope=\"col\">Adresse e-mail</th> 
                                            <th scope=\"col\">Voir le client</th>
                                            <th scope=\"col\">Supprimer</th>
                                        </tr> 
                                    </thead>
                                    <tbody> `;
                 const table = list.querySelector("table")                   
                clients.forEach(c => {
                table.innerHTML += `<tr> 
                                        <td>${c.nom}</td>
                                        <td>${c.email}</td>
                                        <td><a href="#" onclick="leClient(${c.id});">Informations</a></td>
                                        <td><a href="#" onclick="supprimer(${c.id});">supprimer</a></td>
                                    </tr>`;
                });
                list.innerHTML += "</tbody> </table> "

            } catch (error) {
                console.error('Erreur :', error);
                list.innerHTML = '<li>Impossible de charger les clients</li>';
            }
        }
        
        async function supprimer(id){
                try{
                    await fetch(`http://192.168.56.56:8000/api/clients/${id}`, {
                        method: 'DELETE'
                    });
                    await loadClients();
                }catch(err){
                    console.error(err);
                }
            }

        async function leClient(id) {
            try {
                const response = await fetch(`http://192.168.56.56:8000/api/clients/${id}`, {
                    method: 'GET'
                });

                if (!response.ok) {
                    throw new Error("Client introuvable");
                }

                const client = await response.json();

                // zone d'affichage
                const zone = document.getElementById("client-info");

                // formulaire
                zone.innerHTML = `
                    <h2>Modifier le client</h2>

                    <form onsubmit="updateClient(${client.id}); return false;">
                        @csrf
                        <label>Nom :</label><br>
                        <input type="text" id="edit-nom" value="${client.nom}" required><br><br>

                        <label>Prénom :</label><br>
                        <input type="text" id="edit-prenom" value="${client.prenom}" required><br><br>

                        <label>Email :</label><br>
                        <input type="email" id="edit-email" value="${client.email}" required><br><br>

                        <label>Numéro de téléphone :</label><br>
                        <input type="text" id="edit-ntelephone" value="${client.ntelephone ?? ''}"><br><br>

                        <button type="submit">Mettre à jour</button>
                    </form>
                `;
            } catch (error) {
                console.error(error);
                document.getElementById("client-info").innerHTML =
                    "<p>Erreur lors du chargement du client.</p>";
            }
        }

        async function updateClient(id) {
            try {
                const nom = document.getElementById("edit-nom").value;
                const prenom = document.getElementById("edit-prenom").value;
                const email = document.getElementById("edit-email").value;
                const telephone = document.getElementById("edit-ntelephone").value;

                const response = await fetch(`http://192.168.56.56:8000/api/clients/${id}`, {
                    method: 'PUT',
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ nom, prenom, email, telephone })
                });

                if (!response.ok) {
                    throw new Error("Erreur de mise à jour");
                }

                alert("Client mis à jour !");
                loadClients();
                
            } catch (err) {
                console.error(err);
                alert("Impossible de mettre à jour le client.");
            }
        }


        loadClients();

        
    </script>
    <div id="client-info"></div>
@endsection