<div class="w-[418px] max-w-full max-md:w-full">
    {!! view_render_event('bagisto.shop.checkout.cart.summary.title.before') !!}

    <p
        class="text-2xl font-medium max-md:text-base"
        role="heading"
        aria-level="1"
    >
        @lang('shop::app.checkout.cart.summary.cart-summary')
    </p>

    {!! view_render_event('bagisto.shop.checkout.cart.summary.title.after') !!}

    <!-- Cart Totals -->
    <div class="mt-6 grid gap-4 max-md:mt-2 max-md:gap-2.5">
        <!-- Estimate Tax and Shipping -->
        @if (core()->getConfigData('sales.checkout.shopping_cart.estimate_shipping'))
            <template v-if="cart.have_stockable_items">
                @include('shop::checkout.cart.summary.estimate-shipping')
            </template>
        @endif

        <!-- Sub Total -->
        {!! view_render_event('bagisto.shop.checkout.cart.summary.sub_total.before') !!}

        <template v-if="displayTax.subtotal == 'including_tax'">
            <div class="flex justify-between ltr:text-right rtl:text-left">
                <p class="text-base max-sm:text-sm">
                    @lang('shop::app.checkout.cart.summary.sub-total')
                </p>

                <p class="text-base font-medium max-sm:text-sm">
                    @{{ cart.formatted_sub_total_incl_tax }}
                </p>
            </div>
        </template>

        <template v-else-if="displayTax.subtotal == 'both'">
            <div class="flex justify-between ltr:text-right rtl:text-left">
                <p class="text-base max-sm:text-sm">
                    @lang('shop::app.checkout.cart.summary.sub-total')
                </p>

                <div>
                    <p class="text-base font-medium max-sm:text-sm">
                        @{{ cart.formatted_sub_total }}
                    </p>

                    <p class="text-xs italic text-gray-500">
                        @lang('shop::app.checkout.cart.summary.incl-tax') @{{ cart.formatted_sub_total_incl_tax }}
                    </p>
                </div>
            </div>
        </template>

        <template v-else>
            <div class="flex justify-between ltr:text-right rtl:text-left">
                <p class="text-base max-sm:text-sm">
                    @lang('shop::app.checkout.cart.summary.sub-total')
                </p>

                <p class="text-base font-medium max-sm:text-sm">
                    @{{ cart.formatted_sub_total }}
                </p>
            </div>
        </template>

        {!! view_render_event('bagisto.shop.checkout.cart.summary.sub_total.after') !!}

        <!-- Discount -->
        {!! view_render_event('bagisto.shop.checkout.cart.summary.discount_amount.before') !!}

        <template v-if="cart.discount_amount && parseFloat(cart.discount_amount) > 0">
            <!-- Single Source: Simple line. -->
            <div
                class="flex justify-between ltr:text-right rtl:text-left"
                v-if="parseFloat(cart.items_discount_amount || 0) <= 0 || parseFloat(cart.shipping_discount_amount || 0) <= 0"
            >
                <p class="text-base text-red-600 max-sm:text-sm">
                    @lang('shop::app.checkout.cart.summary.discount-amount')
                </p>

                <p class="text-base font-medium text-red-600 max-sm:text-sm">
                    - @{{ cart.formatted_discount_amount }}
                </p>
            </div>

            <!-- Multi Source: Expandable breakdown. -->
            <div
                class="flex flex-col gap-2 border-y py-2"
                v-else
            >
                <div
                    class="flex cursor-pointer justify-between ltr:text-right rtl:text-left"
                    @click="cart.show_discount_breakdown = ! cart.show_discount_breakdown"
                >
                    <p class="text-base text-red-600 max-sm:text-sm">
                        @lang('shop::app.checkout.cart.summary.discount-amount')
                    </p>

                    <p class="flex items-center gap-1 text-base font-medium text-red-600 max-sm:text-sm">
                        - @{{ cart.formatted_discount_amount }}

                        <span
                            class="text-xl"
                            :class="{'icon-arrow-up': cart.show_discount_breakdown, 'icon-arrow-down': ! cart.show_discount_breakdown}"
                        ></span>
                    </p>
                </div>

                <div
                    class="flex flex-col gap-1"
                    v-show="cart.show_discount_breakdown"
                >
                    <div class="flex justify-between gap-1 ltr:text-right rtl:text-left">
                        <p class="text-sm text-gray-500">
                            @lang('shop::app.checkout.cart.summary.items-discount')
                        </p>

                        <p class="text-sm font-medium text-gray-500">
                            - @{{ cart.formatted_items_discount_amount }}
                        </p>
                    </div>

                    <div class="flex justify-between gap-1 ltr:text-right rtl:text-left">
                        <p class="text-sm text-gray-500">
                            @lang('shop::app.checkout.cart.summary.shipping-discount')
                        </p>

                        <p class="text-sm font-medium text-gray-500">
                            - @{{ cart.formatted_shipping_discount_amount }}
                        </p>
                    </div>
                </div>
            </div>
        </template>

        {!! view_render_event('bagisto.shop.checkout.cart.summary.discount_amount.after') !!}

        <!-- Apply Coupon -->
        {!! view_render_event('bagisto.shop.checkout.cart.summary.coupon.before') !!}

        @include('shop::checkout.coupon')

        {!! view_render_event('bagisto.shop.checkout.cart.summary.coupon.after') !!}

        <!-- Shipping Rates -->
        {!! view_render_event('bagisto.shop.checkout.onepage.summary.delivery_charges.before') !!}
        
        <template v-if="displayTax.shipping == 'including_tax'">
            <div class="flex justify-between ltr:text-right rtl:text-left">
                <p class="text-base max-sm:text-sm">
                    @lang('shop::app.checkout.cart.summary.delivery-charges')
                </p>

                <p class="text-base font-medium max-sm:text-sm">
                    + @{{ cart.formatted_shipping_amount_incl_tax }}
                </p>
            </div>
        </template>

        <template v-else-if="displayTax.shipping == 'both'">
            <div class="flex justify-between ltr:text-right rtl:text-left">
                <p class="text-base max-sm:text-sm">
                    @lang('shop::app.checkout.cart.summary.delivery-charges')
                </p>

                <div>
                    <p class="text-base font-medium max-sm:text-sm">
                        + @{{ cart.formatted_shipping_amount }}
                    </p>

                    <p class="text-xs italic text-gray-500">
                        @lang('shop::app.checkout.cart.summary.incl-tax') @{{ cart.formatted_shipping_amount_incl_tax }}
                    </p>
                </div>
            </div>
        </template>

        <template v-else>
            <div class="flex justify-between ltr:text-right rtl:text-left">
                <p class="text-base max-sm:text-sm">
                    @lang('shop::app.checkout.cart.summary.delivery-charges')
                </p>

                <p class="text-base font-medium max-sm:text-sm">
                    + @{{ cart.formatted_shipping_amount }}
                </p>
            </div>
        </template>

        {!! view_render_event('bagisto.shop.checkout.onepage.summary.delivery_charges.after') !!}

        <!-- Taxes -->
        {!! view_render_event('bagisto.shop.checkout.cart.summary.tax.before') !!}

        <div
            class="flex justify-between ltr:text-right rtl:text-left"
            v-if="! cart.tax_total"
        >
            <p class="text-base max-md:font-normal max-sm:text-sm">
                @lang('shop::app.checkout.cart.summary.tax')
            </p>

            <p class="text-lg font-semibold max-md:text-sm">
                + @{{ cart.formatted_tax_total }}
            </p>
        </div>

        <div
            class="flex flex-col gap-2 border-y py-2"
            v-else
        >
            <div
                class="flex cursor-pointer justify-between ltr:text-right rtl:text-left"
                @click="cart.show_taxes = ! cart.show_taxes"
            >
                <p class="text-base max-md:font-normal max-sm:text-sm">
                    @lang('shop::app.checkout.cart.summary.tax')
                </p>

                <p class="flex items-center gap-1.5 text-base font-medium max-md:font-medium max-sm:text-sm">
                    <template v-if="displayTax.subtotal === 'including_tax'">
                        @{{ cart.formatted_tax_total }}

                        <span class="text-xs italic font-normal text-gray-500">
                            (@lang('shop::app.checkout.cart.summary.included'))
                        </span>
                    </template>

                    <template v-else>+ @{{ cart.formatted_tax_total }}</template>

                    <span
                        class="text-xl"
                        :class="{'icon-arrow-up': cart.show_taxes, 'icon-arrow-down': ! cart.show_taxes}"
                    ></span>
                </p>
            </div>

            <div
                class="flex flex-col gap-1"
                v-show="cart.show_taxes"
            >
                <div
                    class="flex justify-between gap-1 ltr:text-right rtl:text-left"
                    v-for="(amount, index) in cart.applied_taxes"
                >
                    <p class="text-sm text-gray-500">
                        @{{ index }}
                    </p>

                    <p class="text-sm font-medium text-gray-500">
                        <template v-if="displayTax.subtotal === 'including_tax'">@{{ amount }}</template>
                        
                        <template v-else>+ @{{ amount }}</template>
                    </p>
                </div>
            </div>
        </div>

        {!! view_render_event('bagisto.shop.checkout.cart.summary.tax.after') !!}

        <!-- Cart Grand Total -->
        {!! view_render_event('bagisto.shop.checkout.cart.summary.grand_total.before') !!}

        <div class="flex justify-between ltr:text-right rtl:text-left">
            <p class="text-lg font-semibold max-md:text-base">
                @lang('shop::app.checkout.cart.summary.grand-total')
            </p>

            <p class="text-lg font-semibold max-md:text-base">
                @{{ cart.formatted_grand_total }}
            </p>
        </div>

        {!! view_render_event('bagisto.shop.checkout.cart.summary.grand_total.after') !!}

        {!! view_render_event('bagisto.shop.checkout.cart.summary.proceed_to_checkout.before') !!}

        <a
            href="{{ route('shop.checkout.onepage.index') }}"
            class="primary-button mt-4 place-self-end rounded-2xl px-11 py-3 max-md:my-4 max-md:max-w-full max-md:rounded-lg max-md:py-3 max-md:text-sm max-sm:w-full max-sm:py-2"
        >
            @lang('shop::app.checkout.cart.summary.proceed-to-checkout')
        </a>

        {!! view_render_event('bagisto.shop.checkout.cart.summary.proceed_to_checkout.after') !!}

        {{--
            B2B Suite: "Request for Quote" button + modal. Shown only to company-affiliated
            customers (company account or company user) when the suite is active.
        --}}
        @php
            $b2bCustomer = auth()->guard('customer')->user();
            $b2bMinimumAmount = (float) core()->getConfigData('b2b.quotes.settings.minimum_amount');
            $b2bMinimumAmountMessage = core()->getConfigData('b2b.quotes.settings.minimum_amount_message');
        @endphp

        @if (
            (bool) core()->getConfigData('b2b.general.settings.active')
            && $b2bCustomer
            && ($b2bCustomer->type === 'company' || $b2bCustomer->company_role_id)
        )
            <template v-if="cart && cart.items && cart.items.length">
                <!-- Request for Quote trigger -->
                <button
                    v-if="parseFloat(cart.grand_total) >= {{ $b2bMinimumAmount }}"
                    type="button"
                    class="secondary-button mt-3 place-self-end rounded-2xl px-11 py-3 max-md:max-w-full max-md:rounded-lg max-md:py-3 max-md:text-sm max-sm:w-full max-sm:py-2"
                    @click="$emitter.emit('open-request-quote-modal')"
                >
                    @lang('b2b::app.shop.checkout.cart.request-quote-button')
                </button>

                <div
                    v-else
                    class="mt-3 rounded-lg border border-red-200 bg-red-50 p-3"
                >
                    <p class="text-sm text-red-600">
                        {{ $b2bMinimumAmountMessage ?: trans('b2b::app.shop.checkout.cart.minimum-amount-required') }}
                    </p>
                </div>

                @include('shop::checkout.cart.request-quote-modal')
            </template>
        @endif
    </div>
</div>