{{partial:dialog-checkout}}
<section class="">
    <div class="container spacer flex flex-col">
        {{currentSubTotal = 0}} {{ hasEmptyStock = false }}
        <div class="order-2">
            {{ collection:users title:is="{{ session:user_name }}" }} {{ if cart
            | count == 0 }}
            <div class="w-full py-20 text-center text-gray-500">
                <h2>Your cart is empty</h2>
            </div>
            {{ else }}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {{ cart }} {{ qty = quantity }} {{ product }}
                <div
                    class="relative flex flex-col border shadow rounded-md p-4 "
                >
                    <div class="">
                        <div class="flex ">
                            <a href="{{url}}" class="flex-shrink-0">
                                {{assets:product_images limit="1"}}
                                <img
                                    srcset="{{ glide:url width='360' }} 360w,
                                {{ glide:url width='640' }} 640w,
                                {{ glide:url width='768' }} 768w,
                                {{ glide:url width='1024' }} 1024w,
                                {{ glide:url width='1280' }} 1280w,
                                {{ glide:url width='1536' }} 1536w"
                                    sizes="(min-width: 1536px) 1536px,
                                (min-width: 1280px) 1280px,
                                (min-width: 1024px) 1024px,
                                (min-width: 768px) 768px,
                                (min-width: 640px) 640px,
                                100vw"
                                    data-src="{{ glide:url width='360' }}"
                                    alt="{{ alt }}"
                                    class="w-32 h-32 object-cover rounded-md"
                                />
                                {{/assets:product_images}}
                            </a>
                            <div class="ml-2 lg:ml-4 ">
                                <div class="pr-8 lg:pr-14">
                                    <a
                                    href="{{url}}"
                                    class="text-base lg:text-lg font-medium mb-1"
                                >
                                    {{ title }}
                                </a>
                                <div
                                    class="text-gray-500 text-sm text-justify mb-2"
                                >
                                    <p class="text-sm mb-1">
                                        Variant: {{selected_variant}}
                                    </p>
                                    <p class="text-sm mb-1">
                                        Attribute: {{selected_attribute}}
                                    </p>
                                    <p class="text-sm mb-1">
                                        <!-- get weight -->
                                        <!-- prettier-ignore --> 
                                        Weight: {{variants}}{{options }}{{if attribute == selected_attribute}}{{product_weight}}{{/if}}{{/options}}{{/variants}}
                                        gram
                                    </p>
                                    <p class="  text-sm mb-1">
                                        Stock:
                                        <span class="current-stock"
                                            >
                                        <!-- get stock, if stock == 0 then set hasEmptyStock to true --> 
                                        <!-- prettier-ignore --> 
                                            {{variants}}{{options }}
                                            {{if attribute == selected_attribute}}
                                                {{stock}}
                                                {{ if stock == 0 }}
                                                    {{ hasEmptyStock = true }}
                                                {{ /if}}
                                            {{/if}}
                                            {{/options}}{{/variants}}
                                            </span
                                        >
                                    </p>
                                </div>
                                </div>
                                <!-- get current date and set hour to 00:00 (with php) -->
                                <!-- prettier-ignore -->
                                {{ $current_date = now(); }}
                                {{ $current_date  = $current_date->startOfDay(); }}
                                {{ $formatted_current_date = $current_date | format("Y-m-d H:i:s") }}

                                <!-- validation to check if the discount is still valid -->
                                <!-- prettier-ignore -->
                                {{currentProductId = id}}
                                {{highest_discount_percentage = 0}}{{selected_valid_until = ''}}
                                {{collection:special_offers }} {{ discount }} {{ if product.id == currentProductId }}
                                {{if valid_until | format('Y-m-d H:i:s') >= $formatted_current_date}}
                                {{ if discount_percentage > highest_discount_percentage }}
                                {{ highest_discount_percentage = discount_percentage}}
                                {{ selected_valid_until = valid_until }}
                                {{ /if }}{{/if}} {{ /if }}{{ /discount }} 
                                {{/collection:special_offers }}
                                <div class="flex flex-col items-end text-sm text-gray-500">
                                    <p class="">
                                        <!-- get price -->
                                        <!-- prettier-ignore -->
                                        Price: Rp. <span class="{{if highest_discount_percentage > 0}}line-through{{/if}}">{{variants}}{{options }}{{if attribute == selected_attribute}}{{price}}{{/if}}{{/options}}{{/variants}}</span>
                                    </p>
                                    {{if highest_discount_percentage > 0}}
                                    <p class="mt-1">
                                        Discount: {{highest_discount_percentage}}%
                                    </p>
                                    <p class="mt-1">
                                        Price after discount: Rp.
                                        <span>
                                            {{discount_amount = 0}}
                                            {{discounted_price = 0}}
                                            {{variants}}{{options }}{{if attribute == selected_attribute}} {{discount_amount = price * (highest_discount_percentage / 100)}}  {{discounted_price = price - discount_amount}} {{/if}}{{/options}}{{/variants}} 
                                            {{discounted_price | format_number(0, ',', '.')}}
                                        </span>
                                    </p>
                                    {{/if}}
                                </div>
                            </div>
                        </div>
                        <form
                            action="/cart/remove"
                            method="POST"
                            class="absolute top-2 right-2 lg:top-4 lg:right-4"
                        >
                            {{ csrf_field }}
                            <input
                                type="hidden"
                                name="product_id"
                                value="{{ id }}"
                            />
                            <input
                                type="hidden"
                                name="selected_variant"
                                value="{{selected_variant}}"
                            />
                            <input
                                type="hidden"
                                name="selected_attribute"
                                value="{{selected_attribute}}"
                            />
                            <button
                                type="submit"
                                class="button-primary bg-red-600 text-white hover:bg-red-400 px-2 py-1 lg:px-4 lg:py-2 rounded-md"
                            >
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        </form>
                    </div>

                    <div class="flex justify-between items-center mt-1">
                        <div class="flex items-center ">
                            <label for="quantity" class="mr-2 text-sm text-gray-500"
                                >Jumlah:
                            </label>
                            <div class="flex items-center">
                                <form
                                    action="/cart/reduce-quantity"
                                    method="POST"
                                    class="inline-block"
                                >
                                    {{ csrf_field }}
                                    <input
                                        type="hidden"
                                        name="product_id"
                                        value="{{ id }}"
                                    />
                                    <input
                                        type="hidden"
                                        name="quantity"
                                        value="1"
                                    />
                                    <input
                                        type="hidden"
                                        name="selected_variant"
                                        value="{{selected_variant}}"
                                    />
                                    <input
                                        type="hidden"
                                        name="selected_attribute"
                                        value="{{selected_attribute}}"
                                    />
                                    <button
                                        type="submit"
                                        class="px-2 py-[2px] text-sm border"
                                    >
                                        -
                                    </button>
                                </form>
                                <div class="quantity-to-add px-2 py-[2px] text-sm border text-gray-500">
                                    {{qty}}
                                </div>
                                <form
                                    action="/cart/add-quantity"
                                    method="POST"
                                    class="inline-block"
                                >
                                    {{ csrf_field }}
                                    <input
                                        type="hidden"
                                        name="product_id"
                                        value="{{ id }}"
                                    />
                                    <input
                                        type="hidden"
                                        name="quantity"
                                        value="1"
                                    />
                                    <input
                                        type="hidden"
                                        name="selected_variant"
                                        value="{{selected_variant}}"
                                    />
                                    <input
                                        type="hidden"
                                        name="selected_attribute"
                                        value="{{selected_attribute}}"
                                    />
                                    <!-- get stock, if quantity to buy = stock then add disabled to button-->
                                    <!-- prettier-ignore -->
                                    {{currentStock = 0}}
                                    {{variants}}{{options }}{{if attribute == selected_attribute}}{{currentStock = stock}}{{/if}}{{/options}}{{/variants}}
                                    <button
                                        type="submit"  
                                        {{if qty == currentStock}}disabled{{/if}}
                                        class="button-add-quantity px-2 py-[2px] text-sm border"
                                    >
                                        + 
                                    </button>
                                </form>
                            </div>
                        </div>
                        {{variantPrice = 0}}
                        <!-- get subtotal -->
                        <!-- prettier-ignore -->
                        {{variants}}{{options }}{{if attribute == selected_attribute}}{{variantPrice = price}}{{/if}}{{/options}}{{/variants}}
                        {{if highest_discount_percentage > 0}}
                        {{subTotal = qty * discounted_price}}
                        {{else}}
                        {{subTotal = qty * variantPrice}}
                        {{/if}}
                        <p class="text-gray-500 text-sm ">
                            <!-- prettier-ignore -->
                            Subtotal: Rp. {{subTotal | format_number(0, ',', '.')}}
                        </p>
                    </div>
                </div>
                <!-- {{currentSubTotal = currentSubTotal + subTotal}}  -->
                {{/product}} {{/cart}}
            </div>
            {{/if}} {{/collection:users}}
        </div>

        <div class="order-1 w-full">
            <h1 class="w-full text-3xl font-bold">Cart</h1>
            <!-- prettier-ignore -->
            <div class="w-full flex flex-col lg:flex-row items-end justify-end lg:items-center gap-3 mb-8">
                {{ collection:users title:is="{{ session:user_name }}" }} {{ if cart | count }}
                <button {{if hasEmptyStock}} disabled {{/if}} class="{{if hasEmptyStock}} bg-gray-400 hover:bg-gray-400 {{/if}} order-1 lg:order-2 w-max button-primary checkout-button relative">Checkout
                <p class=" {{if hasEmptyStock}}block {{else}} hidden{{/if}} absolute -top-8 right-0 text-sm text-red-600 w-max">Terdapat produk yang memiliki stok kosong</p>
                </button>
                {{/if}} {{/collection:users}}
                <h3 class="order-2 lg:order-1 font-bold lg:mr-6">Total Price:&nbsp;&nbsp;&nbsp;&nbsp;<span class="font-normal border-b border-black pb-2">Rp.&nbsp;{{ currentSubTotal | format_number(0, ',', '.') }}</span></h3>
            </div>
        </div>
    </div>
</section>