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

{% block title %}{{ vetement.title }}{% endblock %}

{% block body %}

<div class="container-xl">
    <div class="row">
        <div class="col-12 bg-dark text-white">
            <div class="row">
                <div class="col-1"></div>
                <div class="col-11 pt-1">
                    <h1>
                        {% if vetement.categorie is not null %}
                        <a class="text-decoration-none text-white" href="{{ path('show_vetements_from_category', {'title': vetement.categorie}) }}">{{ vetement.categorie }}
                        </a> / 
                        {% if vetement.souscategorie is not null %}
                        
                        <a class="text-decoration-none text-white" href="{{ path('show_souscategorie_from_category', {'title1': vetement.categorie, 'title': vetement.souscategorie}) }}">{{ vetement.souscategorie }}
                        </a>
                         / {% endif %}{% if vetement.artist is not null %}{{ vetement.artist }}{% else %}{{ vetement.title }}
                            {% endif %}
                        {% endif %}

                        {% if vetement.categorieMerchandising is not null %}
                        <a class="text-decoration-none text-white" href="{{ path('show_from_category_merchandising', {'title': vetement.categorieMerchandising}) }}">{{ vetement.categorieMerchandising }}
                        </a> / 
                        <a class="text-decoration-none text-white" href="{{ path('show_merchandising_sous_categorie', {'title1': vetement.categorieMerchandising, 'title': vetement.souscategorieMerchandising}) }}">{{ vetement.souscategorieMerchandising }}
                        </a>
                         / {{ vetement.title }}
                        {% endif %}
                    </h1>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
    
        <div class="col-1 d-sm-none d-none d-md-none d-lg-block p-0 text-center bg-dark">

            {% for image in images %}
                <a href="{{ asset('images/' ~ image.image) }}" data-toggle="lightbox" data-gallery="gallery">
                    <img src="{{ asset('images/' ~ image.image) }}" onmouseover="imageSwap(this)" class="img-fluid ps-2 pe-2 pt-0 pb-1" title="{{ vetement.title }}" alt="{{ vetement.title }}" />
                </a>
            {% endfor %}
            
        </div>

        <div class="col-md-7 pt-3 text-center" style="background-color: white;">

            <a href="{{ asset('images/'~images.0.image) }}" data-toggle="lightbox" data-gallery="gallery">
        
                <img id="imageBox" src="{{ asset('images/'~images.0.image) }}" class="img-fluid p-2" title="{{ vetement.title }}" alt="{{ vetement.title }}"/>

            </a>

        </div>

        <div class="col-md-4 pt-3" style="background-color: white;">
        
            <div class="row">
                <div class="col-8">
                    <h2>{{ vetement.artist }}</h2>
                    
                </div>

                {% if app.request.get('success') == 'success' %}
                    <script>
                        $(function() {
                            $('#cartModal').modal('show');
                        });
                    </script>
                {% endif %}
                
                <div class="col-4 my-auto justify-content-end d-flex">
                    <h3 class="my-auto fw-bold">{{ (vetement.price/100) | number_format(2)}}€</h3>

                </div>
                <h4>{{ vetement.title }}</h3>

                {% if vetement.marques is not null %}
                    <div class="col-8">
                        <a href="{{ path('show_specific_brands', {'id': vetement.marques.id }) }}" class="text-underline-hover text-dark">
                            <h5 >{{ vetement.marques.title }}</h5>
                        </a>
                    </div>
                {% endif %}
            </div>

            
            

            <form method="post">
            
                    {% include "include/_flashes.html.twig" %}

                    {% if vetement.categorie != null %}       

                        {% if (vetement.categorie.title != 'CDs') and (vetement.categorie.title != 'Vinyles') and (vetement.categorie.title != 'Livres') %}

                            <div class="col-12 py-4">

                                <p><span>Choisissez une couleur :</span></p>

                                <div id="colorOption">

                                    {% for couleur in couleurs %}<label class="mx-2" style="cursor:pointer;">
                                    <input checked type="radio" id="" name="color" value="{{couleur.id}}" class="mx-auto test colorRadio" title="{{ couleur.color }}" style="height: 36px; width: 36px; background-color: white; border-radius: 50%; display: inline-block; cursor:pointer;" required="required">
                                            <div class="colorSelect" style="height: 46px; width: 46px; background-color: white; border-radius: 50%; display: inline-block; cursor:pointer;">

                                                <div class="mx-auto colorDiv" style="height: 36px; width: 36px; background-color: {{ couleur.code }}; border-radius: 50%; margin-top: 3px; cursor:pointer;"></div>

                                            </div>
                                        </input>
                                    </label>{% endfor %}

                                </div>

                            </div>

                            <div class="col-12 pt-3 pb-4">

                                <p><span>Choisissez une taille :</span></p>

                                <div id="test3">
                                    {% for size in sizes %}<label class="mx-2 mb-2" title="{{size.size}}"><input checked type="radio" class="testRadio sizeOption" name="size" value="{{size.id}}" required="required"><div class="text-center align-middle testSelect" alt="Option 1" style='width: 3em; height: 2.4em; border-radius: 4px; border: solid 1px black; justify-content: center; align-items: center;display: flex;'>{{ size.size }}</div></label>{% endfor %}
                                </div>

                                <div class="pt-3 text-primary" data-bs-toggle="modal" data-bs-target="#sizeGuideModal" style="cursor: pointer;">
                                    <i class="fa-solid fa-ruler-horizontal"></i> Guide des tailles
                                </div>

                            </div>

                            <script>

                            var test = {{ vetementVariations|json_encode(constant('JSON_HEX_TAG'))|raw }};
                
                            var options=""; 
                            
                            $(".test").on('click',function(){ 
                                var value=$(this).val();

                                size=""

                                for(let i = 0 ; i < test.length; i++) {
                                    if(value == test[i].color.id)
                                    {
                                        size+="<label class='mx-2 mb-2' title='" + test[i].size.size + "'><input checked type='radio' name='size' class='testRadio' name='test' value='" + test[i].size.id + "' required='required'><div class='text-center align-middle testSelect' alt='Option 1' style='width: 3em; height: 2.4em; border-radius: 4px; border: solid 1px black; justify-content: center; align-items: center;display: flex;'>" + test[i].size.size + "</div></label>"

                                        $("#test3").html(size);

                                    }
                                }
                            });

                            $(".sizeOption").on('click',function(){ 
                                var value=$(this).val();

                                color=""

                                for(let i = 0 ; i < test.length; i++) {
                                    if(value == test[i].size.id)
                                    {
                                        color+="<label class='mx-2' style='cursor:pointer;'><input checked type='radio' title='" + test[i].color.color + "' name='color' value='" + test[i].color.id + "'  class='mx-auto test colorRadio' style='height: 36px; width: 36px; background-color: white; border-radius: 50%; display: inline-block; cursor:pointer;' required='required'><div class='colorSelect' style='height: 46px; width: 46px; background-color: white; border-radius: 50%; display: inline-block; cursor:pointer;'><div class='mx-auto colorDiv' style='height: 36px; width: 36px; background-color:" + test[i].color.code + "; border-radius: 50%; margin-top: 3px; cursor:pointer;'></div></div></input></label>"

                                        $("#colorOption").html(color);

                                    }
                                }
                            });
                        
                            </script>

                        {% endif %}

                    {% endif %}

                    {% if vetement.categorieMerchandising != null %}       

                            <div class="col-12 py-4">

                                <p><span>Choisissez une couleur :</span></p>

                                <div id="colorOption">

                                    {% for couleur in couleurs %}<label class="mx-2" style="cursor:pointer;">
                                    <input checked type="radio" id="" name="color" value="{{couleur.id}}" class="mx-auto test colorRadio" title="{{ couleur.color }}" style="height: 36px; width: 36px; background-color: white; border-radius: 50%; display: inline-block; cursor:pointer;" required="required">
                                            <div class="colorSelect" style="height: 46px; width: 46px; background-color: white; border-radius: 50%; display: inline-block; cursor:pointer;">

                                                <div class="mx-auto colorDiv" style="height: 36px; width: 36px; background-color: {{ couleur.code }}; border-radius: 50%; margin-top: 3px; cursor:pointer;"></div>

                                            </div>
                                        </input>
                                    </label>{% endfor %}

                                </div>

                            </div>

                            <div class="col-12 pt-3 pb-4">

                                <p><span>Choisissez une taille :</span></p>

                                <div id="test3">
                                    {% for size in sizes %}<label class="mx-2 mb-2" title="{{size.size}}"><input checked type="radio" class="testRadio sizeOption" name="size" value="{{size.id}}" required="required"><div class="text-center align-middle testSelect" alt="Option 1" style='width: 3em; height: 2.4em; border-radius: 4px; border: solid 1px black; justify-content: center; align-items: center;display: flex;'>{{ size.size }}</div></label>{% endfor %}
                                </div>

                                <div class="pt-3 text-primary" data-bs-toggle="modal" data-bs-target="#sizeGuideModal" style="cursor: pointer;">
                                    <i class="fa-solid fa-ruler-horizontal"></i> Guide des tailles
                                </div>

                            </div>

                            <script>

                            var test = {{ vetementVariations|json_encode(constant('JSON_HEX_TAG'))|raw }};
                
                            var options=""; 
                            
                            $(".test").on('click',function(){ 
                                var value=$(this).val();

                                size=""

                                for(let i = 0 ; i < test.length; i++) {
                                    if(value == test[i].color.id)
                                    {
                                        size+="<label class='mx-2 mb-2' title='" + test[i].size.size + "'><input checked type='radio' name='size' class='testRadio' name='test' value='" + test[i].size.id + "' required='required'><div class='text-center align-middle testSelect' alt='Option 1' style='width: 3em; height: 2.4em; border-radius: 4px; border: solid 1px black; justify-content: center; align-items: center;display: flex;'>" + test[i].size.size + "</div></label>"

                                        $("#test3").html(size);

                                    }
                                }
                            });

                            $(".sizeOption").on('click',function(){ 
                                var value=$(this).val();

                                color=""

                                for(let i = 0 ; i < test.length; i++) {
                                    if(value == test[i].size.id)
                                    {
                                        color+="<label class='mx-2' style='cursor:pointer;'><input checked type='radio' title='" + test[i].color.color + "' name='color' value='" + test[i].color.id + "'  class='mx-auto test colorRadio' style='height: 36px; width: 36px; background-color: white; border-radius: 50%; display: inline-block; cursor:pointer;' required='required'><div class='colorSelect' style='height: 46px; width: 46px; background-color: white; border-radius: 50%; display: inline-block; cursor:pointer;'><div class='mx-auto colorDiv' style='height: 36px; width: 36px; background-color:" + test[i].color.code + "; border-radius: 50%; margin-top: 3px; cursor:pointer;'></div></div></input></label>"

                                        $("#colorOption").html(color);

                                    }
                                }
                            });
                        
                            </script>


                    {% endif %}
      
                <p>{{ vetement.sousCategorie }}</p>

                {% if material is not empty %}
                    <p>{{ material.0.material }}</p>
                {% endif %}
                {% if vetement.materials is not empty %}
                    <p>{{ vetement.materials }}</p>
                {% endif %}
                <p>{{ vetement.genre }}</p>
                <div class="col-12 mb-1">
                    {{form_start(form)}}
                        <div class="col-2">
                            {{form_row(form.quantity)}}
                        </div>
                        <div class="row ps-4">
                            
                            {# Favorite button #}
                            {% if app.user is null %}
                                <a class="col-1 ms-2 p-0 mt-1 d-flex text-decoration-none text-dark" href="{{ path('app_login')}}">
                                    <i type="button" class="fa-regular fa-heart fa-2x"></i>
                                </a>
                            {% else %}
                                {% if userFavorites is not empty %}
                                    <a class="col-1 ms-2 p-0 mt-1 d-flex text-decoration-none text-dark" alt="blabla" href="{{ path('remove_favorite_product', {'id':vetement.id})}}">
                                        <i type="button" class="fa-solid fa-heart fa-2x"></i>
                                    </a>
                                {% else %}
                                    <a class="col-1 ms-2 p-0 mt-1 d-flex text-decoration-none text-dark" href="{{ path('add_favorite_product', {'id':vetement.id})}}">
                                        <i type="button" class="fa-regular fa-heart fa-2x"></i>
                                    </a>
                                {% endif %}
                            {% endif %}
                            {# End favorite button #}

                            <div class="col-9">
                                {{form_row(form.submit)}}
                            </div>

                    </div>
                    {{form_end(form)}}
                    
                </div>
                

            </form>
            
            <div class="col-12 p-2 border-top border-dark" style="background-color: white;">

                <div class="row align-items-center" onclick="showDescription()" style="cursor: pointer;">

                    <h3 class="col-10">Description</h3>
                    <div class="col-2">
                        <i class="fa-solid fa-minus d-flex justify-content-end" id="fleche"></i>
                    </div>

                </div> 

                <div id="description" style="display: inline;">
                 {{ vetement.longDescription | raw }}
                </div>

            </div>

            <div class="col-12 p-2 border-top border-dark" style="background-color: white;">
                <h3><i class="fa-solid fa-truck-fast"></i>  {{ expedition.0.title }}</h3> 
                <p>{{ expedition.0.description }}</p> 
                <p>{{ expedition.0.longDescription }}</p> 
            </div> 
        </div>

    </div>
</div>

{# ------------------------------------------------------------------------------------ #}
<div class="container-xl py-3">
    <div class="row pt-2" style="background-color: white;">
        <div class="col-12">
            
            <h2>Produits similaires</h2>

        </div>

        {% for vetement in similarItm |slice(0,4) %} 
         
                <div class="card mx-auto mb-3 border-0" style="width: 18rem; background-color: white;">
                    <img src={{ asset('images/'~vetement.images.values.0.image) }} style="object-fit: contain" class="card-img-top" title="{{ vetement.title }}" alt="{{ vetement.title }}" >
                    <div class="card-body">
                        <h5 class="card-title">{{ vetement.title }}</h5> 
                        <p>{{ vetement.price/100 }}€</p>
                        <div class="text-center">
                            <a href={{ path('view_products', {'id':vetement.id})}} class="btn btn-warning">Plus d'informations</a>
                        </div>
                    </div>
                </div>
          
        {% endfor %}

    </div>
    {# end row #}
    
</div> 
{# end Container #}

<!-- Modal taille-->
<div class="modal fade" id="sizeGuideModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-xl modal-fullscreen-lg-down">
		<div class="modal-content">
			<div class="modal-header">
				<h2 class="modal-title" id="exampleModalLabel">Guide des tailles</h2>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				{{ render(url('size_guide')) }}
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
			</div>
		</div>
	</div>
</div>

<!-- Modal -->
<div class="modal rounded-0" id="cartModal" tabindex="-1" aria-labelledby="addedArticleModal" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered rounded-0 modal-lg">
		<div class="modal-content rounded-0">
			<div class="modal-header">
				<h1 class="modal-title fs-5" id="exampleModalLabel">Article ajouté a votre panier</h1>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">

				<div class="row mb-4 d-flex justify-content-between align-items-center">
					<div class="col-md-2 col-lg-2 col-xl-2">
						<img src="{{ asset('images/' ~ images.0.image) }}" class="img-fluid rounded-3" alt="Cotton T-shirt">
					</div>
					<div class="col-md-3 col-lg-3 col-xl-3">
                        {% if vetement.sousCategorie is not null %}
                        
						    <h6 class="text-muted">{{ vetement.sousCategorie }}</h6>

                        {% endif %}
                        {% if vetement.sousCategorieMerchandising is not null %}
                        
						    <h6 class="text-muted">{{ vetement.sousCategorieMerchandising }}</h6>

                        {% endif %}
						<h5 class="text-black fw-bold mb-0">{{ vetement.title }}</h5>
						<p class="text-black mb-0">Couleur : {{ app.request.get('colorAdded') }}</p>
						<p class="text-black mb-0">Taille : {{ app.request.get('sizeAdded') }}</p>
					</div>
					<div class="col-md-3 mx-auto col-lg-3 col-xl-2 d-flex justify-content-center">

						<div class="col-6 text-center mt-1 border-2 border" style="border-radius: 5px">{{ app.request.get('quantityAdded') }}</div>
					
					</div>
					<div class="col-md-3 justify-content-center ms-auto col-lg-2 col-xl-2 offset-lg-1">
						<h6 class="mb-0 text-center">{{ app.request.get('totalPrice')/100 }} €</h6>
					</div>
				</div>

			</div>
			<div class="modal-footer">
				<a href="{{ path('show_cart_details') }}" type="button rounded-0 no-border-radius" class="btn" style="background-color: rgb(10, 19, 32); color: white">Voir notre panier</a>
			</div>
		</div>
	</div>
</div>

{% endblock %}