<?php
/*
* Plugin-Name: Product Designer App
* Plugin-URI: https://productdesignerapp.com
* Author: productdesignerapp
* Template
*/

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div :class="responsiveLayout.showCart ? 'pdapp-cart-layout border-start h-100' : 'modal modal-cart fade show d-block'" role="dialog" v-if="modalCart.show || responsiveLayout.showCart">
    <template v-if="isLoaded">
        <div class="pdapp-cart-box" :class="responsiveLayout.showCart ? 'h-100' : 'modal-dialog modal-md modal-right justify-content-start h-auto'" v-if="settings.layout.quote.allow || settings.layout.addcart.allow">
            <div :class="responsiveLayout.showCart ? 'd-flex flex-column' : 'modal-content'">
                <div :class="responsiveLayout.showCart ? 'w-100 modal-header' : 'modal-header py-1 px-2'">
                    <h4 :class="responsiveLayout.showCart ? 'modal-title fs-5 py-1 px-2 border-bottom w-100' : 'header-title fs-5 m-0 py-1'">
                        <template v-if="responsiveLayout.showCart">
                            <template v-if="productCart.step == 0">{{ langs.topbar.select_variants }}</template>
                            <template v-else>{{ langs.topbar.add_to_cart }}</template>
                        </template>
                        <template v-else>
                            <template v-if="productCart.step == 0">{{ langs.topbar.select_variants }}</template>
                            <template v-else>{{ modalCart.title }}</template>
                        </template>
                    </h4>
                    <button type="button" v-if="!responsiveLayout.showCart" class="btn p-0 m-0 pdapp-w30 pdapp-h30 text-danger ps-1" @click="modalCart.show = false">
                        <i class="material-icons material-symbols-outlined fs-3">close</i>
                    </button>
                </div>

                <div class="modal-body p-0">
                    <template v-if="productCart.step == 0">
                        <?php require_once(PDAPP_PLUGIN_DIR .'templates/'. PDAPP_THEME_FOLDER .'/layouts/rightbar/html-cart-variants.php'); ?>
                    </template>
                    <template v-if="productCart.step == 1">
                        <?php require_once(PDAPP_PLUGIN_DIR .'templates/'. PDAPP_THEME_FOLDER .'/layouts/rightbar/html-cart-confirm.php'); ?>
                        <?php require_once(PDAPP_PLUGIN_DIR .'templates/'. PDAPP_THEME_FOLDER .'/layouts/rightbar/html-cart-qty.php'); ?>
                    </template>

                    <?php require_once(PDAPP_PLUGIN_DIR .'templates/'. PDAPP_THEME_FOLDER .'/layouts/rightbar/html-cart-price.php'); ?>
                </div>
                
                <div class="modal-footer py-1 px-1 justify-content-between">
                    <template v-if="productCart.step == 0">
                        <button v-if="!responsiveLayout.showCart && modalCart.show" type="button" class="btn btn-light" @click="modalCart.show = false">{{ langs.cancel }}</button>
                        <span v-else></span>
                        <button type="button" class="btn btn-primary" @click="addListCart()" :disabled="cartQuantity == 0 && cartQty == 0 || (productCart.team.items.length && cartQuantity < product.advanced.minQty)">{{ langs.topbar.continue }}</button>
                    </template>
                    <template v-if="productCart.step == 1">
                        <button type="button" class="btn btn-light" @click="cartBack">{{ langs.back }}</button>
                        <button type="button" class="btn btn-primary" @click="addToCart('cart')" :disabled="cartQty == 0 || cartQty < product.advanced.minQty || productCart.loading || waitDesign" v-if="settings.layout.addcart.allow">
                            <span v-if="productCart.loading">{{ langs.topbar.adding_cart }}</span>
                            <span v-else>{{ langs.topbar.add_to_cart }}</span>
                        </button>
                    </template>
                </div>
            </div>
        </div>
    </template>
    <template v-else>
        <div class="pdapp-cart-box d-flex flex-column gap-2 justify-content-start h-auto p-1 h-100">
            <div class="modal-title d-block w-100 placeholder-glow">
                <div class="bg-secondary placeholder pdapp-w80 pdapp-h20"></div>
            </div>

            <div class="pdapp-cart-variants d-flex flex-column align-items-center overflow-y-auto overflow-x-hidden gap-2">
                <div class="d-flex flex-column gap-2 placeholder-glow w-100 mb-1">
                    <div class="bg-secondary placeholder pdapp-w80 pdapp-h20"></div>
                    <div class="bg-secondary placeholder w-100 pdapp-h70"></div>
                </div>

                <div class="d-flex flex-column gap-2 placeholder-glow w-100 mb-1">
                    <div class="bg-secondary placeholder pdapp-w80 pdapp-h20"></div>
                    <div class="bg-secondary placeholder w-100 pdapp-h30"></div>
                    <div class="bg-secondary placeholder w-100 pdapp-h30"></div>
                </div>

                <div class="d-flex flex-column gap-2 placeholder-glow w-100">
                    <div class="bg-secondary placeholder pdapp-w80 pdapp-h20"></div>
                    <div class="btn-group gap-2 w-100">
                        <div class="bg-secondary placeholder pdapp-h30 w-100 rounded-2"></div>
                        <div class="bg-secondary placeholder pdapp-h30 w-100 rounded-2"></div>
                        <div class="bg-secondary placeholder pdapp-h30 w-100 rounded-2"></div>
                        <div class="bg-secondary placeholder pdapp-h30 w-100 rounded-2"></div>
                    </div>
                </div>
            </div>

            <div class="modal-footer d-flex gap-2 justify-content-between placeholder-glow mt-1">
                <div class="bg-secondary placeholder pdapp-w60 pdapp-h30 rounded-2"></div>
                <div class="bg-secondary placeholder pdapp-w80 pdapp-h30 rounded-2"></div>
            </div>
        </div>
    </template>
    <div class="modal-backdrop fade show" v-if="!responsiveLayout.showCart" @click="modalCart.show = false"></div>
</div>