{% extends "base/base.html" %}
{% load static %}
{% load humanize %}
{% load jalali_tags %}
{% block header %}
    <script defer src="{% static 'js/alpinejs.min.js' %}"></script>
    {% include "base/meta_tags.html" %}
{% endblock header %}
{% block content %}
<div class="max-w-[1200px] mx-auto mt-40 flex flex-row">
    <div class="w-2/3 flex flex-col items-start">
        <nav class="flex flex-row " aria-label="Breadcrumb">
            <ol class="flex items-center gap-3" itemscope itemtype="https://schema.org/BreadcrumbList">
                <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                    <a href="{% url 'front:index_fun' %}" itemprop="item" class="text-text3 hover:underline flex items-center font-bold text-lg ">
                        <span itemprop="name" class="text-nowrap custom-cursor-pointer">بست جاستیفای</span>
                    </a>
                    <meta itemprop="position" content="1" />
                </li>

                <li>
                    <svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.7" d="M1.02734 6.15234L6.65234 0.5625C6.96875 0.210938 7.49609 0.210938 7.84766 0.5625C8.16406 0.878906 8.16406 1.40625 7.84766 1.72266L2.78516 6.75L7.8125 11.8125C8.16406 12.1289 8.16406 12.6562 7.8125 12.9727C7.49609 13.3242 6.96875 13.3242 6.65234 12.9727L1.02734 7.34766C0.675781 7.03125 0.675781 6.50391 1.02734 6.15234Z" fill="white"/>
                    </svg>
                </li>

                <!-- محصول -->
                <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
                    <span itemprop="name" class="font-bold text-white text-lg text-nowrap">سبد خرید</span>
                    <meta itemprop="position" content="2" />
                </li>
            </ol>
        </nav>
    </div>
</div>

<div class="max-w-[1200px] mx-auto flex flex-row gap-4 mt-4">
    <div class="w-2/3 flex flex-col">
        <div class="flex flex-col items-center justify-center border-2 border-text2 rounded-2xl">
            <div class="flex flex-row items-center justify-between mx-6 pt-6 pb-5 border-b-2 border-text2 w-11/12">
                <p class="text-base font-bold text-white">سبد خرید</p>
                <div class="flex flex-row items-center justify-end gap-2">
                    <svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.21484 2.0625C5.13281 2.0625 5.07812 2.11719 5.02344 2.17188L4.50391 2.9375H8.46875L7.94922 2.17188C7.92188 2.11719 7.83984 2.0625 7.75781 2.0625H5.21484ZM10.0547 2.9375H10.4102H11.75H11.9688C12.3242 2.9375 12.625 3.23828 12.625 3.59375C12.625 3.97656 12.3242 4.25 11.9688 4.25H11.6406L10.9844 13.1367C10.9023 14.0664 10.1641 14.75 9.23438 14.75H3.73828C2.80859 14.75 2.07031 14.0664 1.98828 13.1367L1.33203 4.25H1.03125C0.648438 4.25 0.375 3.97656 0.375 3.59375C0.375 3.23828 0.648438 2.9375 1.03125 2.9375H1.25H2.5625H2.91797L3.92969 1.43359C4.20312 1.02344 4.69531 0.75 5.21484 0.75H7.75781C8.27734 0.75 8.76953 1.02344 9.04297 1.43359L10.0547 2.9375ZM10.3281 4.25H2.64453L3.30078 13.0547C3.32812 13.2734 3.51953 13.4375 3.73828 13.4375H9.23438C9.45312 13.4375 9.64453 13.2734 9.67188 13.0547L10.3281 4.25Z" fill="#F9B9B9"/>
                    </svg>

                    <a href="{% url 'front:cart_empty_fun' %}" class="text-sm text-red-300 font-bold">خالی کردن سبد</a>
                </div>
            </div>
            
            {% for item in cart_item %}
                <div class="flex flex-row items-center justify-between w-11/12 pt-4 pb-4 {% if not forloop.last %} border-b-2 border-text2 {% endif %}">
                    <div class="flex flex-row items-center justify-start gap-2">
                        <a href="{% url 'front:cart_empty_item_fun' item.id %}" class="bg-red-200 rounded-full group/1 hover:bg-blue1 p-2 transition-all duration-500 ease-in-out">
                            <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="fill-[#AF1010] group-hover/1:!fill-white transition-all duration-500 ease-in-out" d="M5.71484 2.0625C5.63281 2.0625 5.57812 2.11719 5.52344 2.17188L5.00391 2.9375H8.96875L8.44922 2.17188C8.42188 2.11719 8.33984 2.0625 8.25781 2.0625H5.71484ZM10.5547 2.9375H10.9102H12.25H12.4688C12.8242 2.9375 13.125 3.23828 13.125 3.59375C13.125 3.97656 12.8242 4.25 12.4688 4.25H12.1406L11.4844 13.1367C11.4023 14.0664 10.6641 14.75 9.73438 14.75H4.23828C3.30859 14.75 2.57031 14.0664 2.48828 13.1367L1.83203 4.25H1.53125C1.14844 4.25 0.875 3.97656 0.875 3.59375C0.875 3.23828 1.14844 2.9375 1.53125 2.9375H1.75H3.0625H3.41797L4.42969 1.43359C4.70312 1.02344 5.19531 0.75 5.71484 0.75H8.25781C8.77734 0.75 9.26953 1.02344 9.54297 1.43359L10.5547 2.9375ZM10.8281 4.25H3.14453L3.80078 13.0547C3.82812 13.2734 4.01953 13.4375 4.23828 13.4375H9.73438C9.95312 13.4375 10.1445 13.2734 10.1719 13.0547L10.8281 4.25Z"/>
                            </svg>
                        </a>
                        <a href="{{item.product.url}}"><img class="w-16 h-16 rounded" src="{{item.product.sec_image.url}}" alt="{{item.product.name}}"></a>
                        <div class="flex flex-col items-start justify-start">
                            <a href="{{item.product.url}}" class="text-white text-base font-semibold"> {{item.product.name}} <span class="text-text2"> ({{item.quantity}} عدد) </span></a>
                            <p class="text-white text-base font-medium">بست جاستیفای</p>
                        </div>
                    </div>
                    <div class="flex flex-col items-center justify-end gap-2"> 
                        {% if item.product.is_on_sale %}
                            <div class="flex flex-row items-center justify-end gap-2">
                                <span class="bg-red-300 rounded-full text-red-600 text-xs px-2 pb-1 font-bold pt-2">{{item.product.get_sale_percent}} %</span>
                                <span class="text-text3 text-xs line-through font-bold">{{item.product.price|intcomma}}</span>
                            </div>
                            <p class="font-bold text-xl text-white">{{item.product.get_sale_price|intcomma}}<span class="font-medium text-base">تومان</span></p>
                        {% else %}
                            <p class="font-bold text-xl text-white">{{item.product.get_sale_price|intcomma}}<span class="font-medium text-base">تومان</span></p>
                        {% endif %}
                            
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    <div class="w-1/3 flex flex-col">
        <div class="flex flex-col items-center justify-center border-2 border-white rounded-2xl gradient-box overflow-hidden">
            <div class="flex flex-row items-center justify-between w-11/12 pt-4 pb-4 border-b-2 border-text2">
                <p class="text-text1 font-bold text-base">قیمت کل محصولات</p>
                <p class="text-white font-bold text-base">{{cart_real_total|intcomma}} تومان</p>
            </div>

            <div class="flex flex-row items-center justify-between w-11/12 pt-4">
                <p class="text-text1 font-bold text-base">تخفیف خرید شما</p>
                <p class="text-white font-bold text-base">{{cart_off_total|intcomma}} تومان</p>
            </div>

            <div class="w-full bg-gradient-to-l from-yellow4 to-yellow1 flex flex-row items-center justify-between px-6 py-4 mt-4">
                <p class="text-yellow1 font-semibold text-base">مبلغ قابل پرداخت</p>
                <p class="text-white font-bold text-base">{{cart_total|intcomma}} تومان</p>
            </div>

        </div>

        <div class="flex flex-col items-start justify-start mt-6 gap-2">
            <p class="text-base text-white font-bold">کد تخفیف دارید؟</p>
            <p class="text-sm text-text2 font-semibold">کد تخفیف خود را وارد کنید تا بر روی هزینه خرید لحاظ شود.</p>
        </div>

        <form class="flex flex-row items-start justify-start mt-6 gap-2">
            <div class="w-3/4">
                <div class="relative flex items-center border rounded-lg p-2 bg-white border-1 border-text2 h-14">
                    <div class="flex items-center pl-4 pr-2 border-l h-full">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7.05078 0.375C7.64844 0.375 8.21094 0.621094 8.63281 1.04297L14.8203 7.23047C15.6992 8.10938 15.6992 9.55078 14.8203 10.4297L10.1445 15.1055C9.26562 15.9844 7.82422 15.9844 6.94531 15.1055L0.757812 8.91797C0.335938 8.49609 0.125 7.93359 0.125 7.33594V2.0625C0.125 1.14844 0.863281 0.375 1.8125 0.375H7.05078ZM1.8125 7.33594C1.8125 7.47656 1.84766 7.61719 1.95312 7.72266L8.14062 13.9102C8.35156 14.1211 8.73828 14.1211 8.94922 13.9102L13.625 9.23438C13.8711 9.02344 13.8711 8.63672 13.625 8.42578L7.4375 2.23828C7.33203 2.13281 7.19141 2.0625 7.05078 2.0625H1.8125V7.33594ZM4.0625 3.1875C4.66016 3.1875 5.1875 3.71484 5.1875 4.3125C5.1875 4.94531 4.66016 5.4375 4.0625 5.4375C3.42969 5.4375 2.9375 4.94531 2.9375 4.3125C2.9375 3.71484 3.42969 3.1875 4.0625 3.1875Z" fill="#001D3E"/>
                        </svg>
                    </div>
                    <div class="relative w-full">
                        <input type="text" id="otp" name="otp" class="peer h-12 w-full px-3 pt-4 outline-none bg-transparent placeholder-transparent focus:border-blue1 transition-all duration-200" required/>
                        <label for="otp" class="absolute right-3 top-3 text-gray-500 transition-all duration-200 peer-placeholder-shown:top-2 peer-placeholder-shown:text-gray-500  peer-placeholder-shown:text-base peer-focus:top-1 peer-focus:text-sm peer-focus:text-blue1 px-1">
                            کد تخفیف<span class="text-red-500">*</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="w-1/4">
                <button class="border-2 h-14 w-full border-white flex items-center justify-center text-white rounded-lg font-bold" name="add_customer" type="submit">ثبت کد</button>    
            </div>
        </form>

        <a class="h-14 w-full bg-yellow1 text-white flex items-center justify-center rounded-lg mt-6 font-bold">
            ثبت نهایی و خرید
        </a>
    </div>
</div>
{% endblock content %}