<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Panier</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<style>
    @layer utilities {
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }
</style>
<%if(panier.length !== 0){ let total = 0;%>
<%- include('../components/navbar'); -%>
<div class="h-screen bg-gray-100 pt-20">
    <h1 class="mb-10 text-center text-2xl font-bold">Mon panier</h1>
    <div class="mx-auto max-w-5xl justify-center px-6 md:flex md:space-x-6 xl:px-0">
        <div class="rounded-lg md:w-2/3">
            <%for(let i = 0; i < panier.length; i++) { total += panier[i].bonbon.prix * panier[i].quantity;%>
            <div id="product-<%- i%>" class="justify-between mb-6 rounded-lg bg-white p-6 shadow-md sm:flex sm:justify-start">
                <img src="<%- panier[i].bonbon.image %>" alt="product-image" class="w-full rounded-lg sm:w-40" />
                <div class="sm:ml-4 sm:flex sm:w-full sm:justify-between">
                    <div class="mt-5 sm:mt-0">
                        <h2 class="text-lg font-bold text-gray-900"><%- panier[i].bonbon.nom %></h2>
                        <p class="mt-1 text-xs text-gray-700"><%- panier[i].bonbon.description %></p>
                    </div>
                    <div class="mt-4 flex justify-between sm:space-y-6 sm:mt-0 sm:block sm:space-x-6">
                        <div class="flex items-center border-gray-100">
                            <span id="minus" data-panierpos="<%- i %>" class="cursor-pointer rounded-l bg-gray-100 py-1 px-3.5 duration-100 hover:bg-blue-500 hover:text-blue-50"> - </span>
                            <input class="h-8 w-8 border bg-white text-center text-xs outline-none" type="number" value="<%- panier[i].quantity%>" min="1" />
                            <span id="add" data-panierpos="<%- i %>" class="cursor-pointer rounded-r bg-gray-100 py-1 px-3 duration-100 hover:bg-blue-500 hover:text-blue-50"> + </span>
                        </div>
                        <div class="flex items-center space-x-4">
                            <p class="text-sm"><%- panier[i].bonbon.prix %> €</p>
                            <svg id="delete" data-panierpos="<%- i %>" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 cursor-pointer duration-150 hover:text-red-500">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
            <%}%>
        </div>
        <!-- Sub total -->
        <div class="mt-6 h-full rounded-lg border bg-white p-6 shadow-md md:mt-0 md:w-1/3">
            <div class="mb-2 flex justify-between">
                <p class="text-gray-700">Sous-total</p>
                <p class="text-gray-700" id="sous-total"><%- total %> €</p>
            </div>
            <div class="flex justify-between">
                <p class="text-gray-700">Livraison</p>
                <p class="text-gray-700">GRATUIT</p>
            </div>
            <hr class="my-4" />
            <div class="flex justify-between">
                <p class="text-lg font-bold">Total</p>
                <div class="">
                    <p class="mb-1 text-lg font-bold" id="total"><%- total %> €</p>
                    <p class="text-sm text-gray-700">TAV incluse</p>
                </div>
            </div>
            <form action="/order" method="POST">
                <button type="submit" class="mt-6 w-full rounded-md bg-blue-500 py-1.5 font-medium text-blue-50 hover:bg-blue-600">Finaliser</button>
            </form>
        </div>
    </div>
</div>
<div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
    <h2 class="text-2xl font-bold tracking-tight text-gray-900">Produits en fonction de votre panier ainsi que des préférences d'achats de tous les utilisateurs</h2>
    <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
        <% for (let j = 0; j < recommandationSimilaire.length; j++) { %>
            <div class="group relative">
                <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md bg-gray-200 lg:aspect-none group-hover:opacity-75 lg:h-80">
                    <img src="<%- recommandationSimilaire[j].image %>" alt="<%- recommandationSimilaire[j].nom %>" class="h-full w-full object-cover object-center lg:h-full lg:w-full">
                </div>
                <div class="mt-4 flex justify-between">
                    <div>
                        <h3 class="text-sm text-gray-700">
                            <a href="/produit/<%- recommandationSimilaire[j].id %>">
                                <span aria-hidden="true" class="absolute inset-0"></span>
                                <%- recommandationSimilaire[j].nom %>
                            </a>
                        </h3>
                    </div>
                    <p class="text-sm font-medium text-gray-900"><%- recommandationSimilaire[j].prix %> €</p>
                </div>
            </div>
        <% } %></div>
    <h2 class="text-2xl font-bold tracking-tight text-gray-900">Produits en fonction de votre panier et vos préférences d'achats</h2>
    <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
        <% for (let j = 0; j < recommandationUserSimilaire.length; j++) { %>
            <div class="group relative">
                <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md bg-gray-200 lg:aspect-none group-hover:opacity-75 lg:h-80">
                    <img src="<%- recommandationUserSimilaire[j].image %>" alt="<%- recommandationUserSimilaire[j].nom %>" class="h-full w-full object-cover object-center lg:h-full lg:w-full">
                </div>
                <div class="mt-4 flex justify-between">
                    <div>
                        <h3 class="text-sm text-gray-700">
                            <a href="/produit/<%- recommandationUserSimilaire[j].id %>">
                                <span aria-hidden="true" class="absolute inset-0"></span>
                                <%- recommandationUserSimilaire[j].nom %>
                            </a>
                        </h3>
                    </div>
                    <p class="text-sm font-medium text-gray-900"><%- recommandationUserSimilaire[j].prix %> €</p>
                </div>
            </div>
        <% } %>
    </div>
</div>
<script>
    const minus = document.querySelectorAll('#minus');
    const add = document.querySelectorAll('#add');
    const del = document.querySelectorAll('#delete');
    for(let i = 0; i < minus.length; i++){
        minus[i].addEventListener('click', function(){

            let panierpos = this.getAttribute('data-panierpos');
            let quantity = document.querySelectorAll('input[type="number"]')[panierpos].value;
            if(quantity > 1){
                quantity--;
                document.querySelectorAll('input[type="number"]')[panierpos].value = quantity;
            }
            fetch(`/panier/edit/${panierpos}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    quantity: quantity
                })
            }).then(res => res.json()).then(data => {
                document.querySelector('#sous-total').innerHTML = `${data.total} €`;
                document.querySelector('#total').innerHTML = `${data.total} €`;
            }).catch(err => console.log(err))
        });

    }
    for(let i = 0; i < add.length; i++){
        add[i].addEventListener('click', function(){
            let panierpos = this.getAttribute('data-panierpos');
            let quantity = document.querySelectorAll('input[type="number"]')[panierpos].value;
            quantity++;
            document.querySelectorAll('input[type="number"]')[panierpos].value = quantity;
            fetch(`/panier/edit/${panierpos}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    quantity: quantity
                })
            }).then(res => res.json()).then(data => {
                document.querySelector('#sous-total').innerHTML = `${data.total} €`;
                document.querySelector('#total').innerHTML = `${data.total} €`;
            }).catch(err => console.log(err))
        });
    }
    for(let i =0; i < del.length; i++) {
        del[i].addEventListener('click', function(){
            let panierpos = this.getAttribute('data-panierpos');
            fetch(`/panier/delete/${panierpos}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(res => res.json()).then(data => {
                document.querySelector('#sous-total').innerHTML = `${data.total} €`;
                document.querySelector('#total').innerHTML = `${data.total} €`;
                document.getElementById(`product-${panierpos}`).remove();
                //vérfier s'il reste des balises avec un id qui commence par : 'product-'
                let balises = document.querySelectorAll('[id^="product-"]');
                if(balises.length === 0) {
                    document.querySelector("body").innerHTML = `
                        <main class="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
                        <div class="text-center">
                            <p class="text-base font-semibold text-indigo-600">Pas de produit</p>
                            <p class="mt-6 text-base leading-7 text-gray-600">Veuillez ajouter un produit au panier</p>
                            <div class="mt-10 flex items-center justify-center gap-x-6">
                                <a href="/" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Retourner à l'accueil</a>
                            </div>
                        </div>
                    </main>`
                }

            }).catch(err => console.log(err))
        });
    }
</script>
<%- include('../components/footer'); -%>
<%} else{ %>
    <main class="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
        <div class="text-center">
            <p class="text-base font-semibold text-indigo-600">Pas de produit</p>
            <p class="mt-6 text-base leading-7 text-gray-600">Veuillez ajouter un produit au panier</p>
            <div class="mt-10 flex items-center justify-center gap-x-6">
                <a href="/" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Retourné à l'accueil</a>
            </div>
        </div>
    </main>
<%}%>

</body>
</html>