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

{% block body %}
<div class="bg-white p-8 container mx-auto mt-20 lg:flex lg:flex-row flex flex-col gap-4 items-center justify-between rounded-lg">
  <div class="lg:flex lg:flex-row flex flex-col items-center gap-4">
    <div class="overflow-hidden">
      <img class="hover:scale-150 transition duration-400" src="{{ product.imageUrl }}" >
    </div>
    <div class="flex flex-col gap-2">
      <span class="text-xl font-bold text-center">{{ product.name }}</span>
      جزئیات
      <span>نکته ۱</span>
      <span>نکته ۲</span>
      <span>نکته ۳</span>
      <span>نکته ۴</span>
      <span>نکته ۵</span>
    </div>
  </div>
  
  <form action="{{ path('app_new_cart', {
      'id': product.id
    }) }}"
    class="h-fit border border-gray-200 flex flex-col items-center gap-6 p-6 rounded-lg">
    <div class="flex gap-2 items-center">
      <span class="font-bold text-3xl">{{ numberConvertor(product.price) }}</span><span class="text-xl">تومان</span>
    </div>
    <div class="flex gap-8 border border-gray-300 p-2 text-2xl rounded-lg">
      <button class="outline-none cursor-pointer hover:text-red-600" id="increaseBtn" type="button">+</button>
      <input class="w-full max-w-10 text-center outline-none" name="amount" id="amount" type="text" value="{{ 1 }}" >
      <button class="outline-none cursor-pointer hover:text-red-600" id="decreaseBtn" type="button">-</button>
    </div>
    <input class="cursor-pointer py-4 px-6 bg-red-500 rounded-lg text-lg text-white outline-none" type="submit" value="افزودن به سبد خرید" >
  </form>
</div>
{% block javascripts %}
<script>
  var increaseBtn = document.getElementById('increaseBtn');
  var decreaseBtn = document.getElementById('decreaseBtn');

  increaseBtn.addEventListener('click', function() {
    document.getElementById('amount').value++;
  })

  decreaseBtn.addEventListener('click', function() {
    document.getElementById('amount').value--;
  })
</script>
{% endblock %}
{% endblock %}