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

{% block title %}Hello OrderController!{% endblock %}

{% block body %}



<div class="container mx-auto mt-10 grid lg:grid-cols-3 grid-cols-2 gap-4 justify-evenly">
    <div class="col-span-2 gap-4">
        {% if not cartItems %}
        <div class="text-center p-6 bg-white rounded-lg border border-gray-200">
            <span>سبد خرید شما خالی میباشد.</span>
        </div>
        {% endif %}
        {% for cartItem in cartItems %}
        <div class="sm:flex sm:flex-row flex flex-col p-6 justify-between gap-4 bg-white rounded-lg border border-gray-200">
            <div class="flex items-center gap-4">
                <div class="w-16">
                    <img class="w-full" src="{{ cartItem.product.imageUrl }}">
                </div>
                <div class="flex flex-col">
                    <span class="sm:text-base text-sm font-bold">{{ cartItem.product.name }}</span>
                    <span class="text-sm">جزئیات</span>
                </div>
            </div>
            <div class="flex items-center gap-4">
                <div class="flex gap-8 border border-gray-300 p-2 sm:text-xl text-sm rounded-lg">
                    <a href="{{ path('app_increaseAmount', {
                        'id': cartItem.id
                    }) }}" class="outline-none cursor-pointer hover:text-red-600" type="button">+</a>
                    <span class="outline-none" type="text">{{ numberConvertor(cartItem.amount) }}</span>
                    <a href="{{ path('app_decreaseAmount', {
                        'id': cartItem.id
                    }) }}" class="outline-none cursor-pointer hover:text-red-600" type="button">-</a>
                </div>
                <a href="{{ path('app_delete_cartItem', {
                    'id': cartItem.id
                }) }}">
                    <div class="cursor-pointer">
                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="25" viewBox="0,0,256,256">
                        <g fill="#ff0000" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(8,8)"><path d="M15,4c-0.52344,0 -1.05859,0.18359 -1.4375,0.5625c-0.37891,0.37891 -0.5625,0.91406 -0.5625,1.4375v1h-6v2h1v16c0,1.64453 1.35547,3 3,3h12c1.64453,0 3,-1.35547 3,-3v-16h1v-2h-6v-1c0,-0.52344 -0.18359,-1.05859 -0.5625,-1.4375c-0.37891,-0.37891 -0.91406,-0.5625 -1.4375,-0.5625zM15,6h4v1h-4zM10,9h14v16c0,0.55469 -0.44531,1 -1,1h-12c-0.55469,0 -1,-0.44531 -1,-1zM12,12v11h2v-11zM16,12v11h2v-11zM20,12v11h2v-11z"></path></g></g>
                        </svg>
                    </div>
                </a>
                <div class="flex justify-center gap-1 sm:text-base text-sm font-bold w-36">
                    <span>{{ numberConvertor(cartItem.product.price) }}</span><span>تومان</span>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="lg:col-span-1 col-span-2 flex flex-col items-center gap-2 h-fit p-8 bg-white border border-gray-200 rounded-lg">
        <span class="text-xl font-bold mb-4">خلاصه صورتحساب</span>
        <div class="w-full lg:gap-20 gap-10 flex justify-between">
            <span class="text-gray-500 text-sm">مبلغ کل</span>
            <span class="text-gray-500 text-sm">{{ numberConvertor(totalPrice) }} تومان</span>
        </div>
        <div class="w-full lg:gap-20 gap-10 flex justify-between">
            <span class="text-gray-500 text-sm">هزینه ارسال</span>
            <span class="text-gray-500 text-sm">وابسته به آدرس</span>
        </div>
        <div class="w-full lg:gap-20 gap-10 flex justify-between">
            <span class="text-gray-500 text-sm">مبلغ قابل پرداخت</span>
            <span class="text-gray-500 text-sm">{{ numberConvertor(totalPrice) }} تومان</span>
        </div>
        <a href="{{ path('app_checkout_order') }}">
            <input 
            {% if not cartItems %} disabled {% endif %}
            class="cursor-pointer py-2 px-6 bg-black mt-4 rounded-lg text-lg text-white outline-none" type="button" value="تکمیل خرید" >
        </a>
    </div>
</div>
{% endblock %}