<script setup>
import { Head, Link, useForm, router } from '@inertiajs/vue3';
import { ref, computed, watch } from 'vue';
import CoachLayout from '@/Layouts/CoachLayout.vue';
import ClientLayout from '@/Layouts/ClientLayout.vue';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import CheckoutProgress from '@/Components/Store/CheckoutProgress.vue';
import TrustBadges from '@/Components/Store/TrustBadges.vue';
import CartTimer from '@/Components/Store/CartTimer.vue';
import { formatCurrency } from '@/Utils/currency';

// Latin American countries
const latamCountries = [
    'República Dominicana', 'Puerto Rico', 'Cuba',
    'México', 'Guatemala', 'El Salvador', 'Honduras',
    'Nicaragua', 'Costa Rica', 'Panamá',
    'Colombia', 'Venezuela', 'Ecuador', 'Perú', 'Bolivia',
    'Chile', 'Argentina', 'Uruguay', 'Paraguay', 'Brasil',
    'Estados Unidos', 'España',
];

const props = defineProps({
    items: Array,
    subtotal: Number,
    discount: Number,
    total: Number,
    appliedCoupon: Object,
    addresses: Array,
    paymentMethods: Array,
    paymentFees: Object,
    shippingZones: Array,
    freeShippingThreshold: Number,
    freeShippingEnabled: Boolean,
    layout: String,
    routePrefix: String,
});

const LayoutComponent = computed(() => {
    // For checkout, we often want a simplified layout without navigation,
    // but we can render the content directly if we want a true standalone checkout page.
    // However, adhering to the requested layout:
    if (props.layout === 'admin') return AdminLayout;
    if (props.layout === 'coach') return CoachLayout;
    return ClientLayout;
});

// Safe access to payment methods
const availablePaymentMethods = computed(() => props.paymentMethods || []);
const safeShippingZones = computed(() => props.shippingZones || []);
const safeAddresses = computed(() => props.addresses || []);

// Get the first available payment method ID as default
const defaultPaymentMethod = computed(() => {
    if (availablePaymentMethods.value.length > 0) {
        return availablePaymentMethods.value[0].id;
    }
    return 'cash';
});

const selectedAddressId = ref(null);
const selectedBankId = ref(null);
const showBankDetails = ref(false);
const selectedShippingZoneId = ref(safeShippingZones.value.length > 0 ? safeShippingZones.value[0].id : null);
const showOrderSummaryMobile = ref(false);

const form = useForm({
    shipping_address: {
        first_name: '',
        last_name: '',
        address_line1: '',
        address_line2: '',
        city: '',
        state: '',
        zip: '',
        country: 'República Dominicana',
        phone: '',
    },
    payment_method: defaultPaymentMethod.value,
    shipping_zone_id: selectedShippingZoneId.value,
    notes: '',
});

// Shipping zone cost calculation
const isFreeShipping = computed(() => {
    if (!props.freeShippingEnabled) return false;
    const threshold = Number(props.freeShippingThreshold) || 0;
    if (threshold <= 0) return false;
    const sub = Number(props.subtotal) || 0;
    return sub >= threshold;
});

const selectedZone = computed(() => {
    return safeShippingZones.value.find(z => z.id === selectedShippingZoneId.value) || null;
});

const shippingCost = computed(() => {
    if (isFreeShipping.value) return 0;
    if (!selectedZone.value) return 0;
    return Number(selectedZone.value.cost) || 0;
});

watch(selectedShippingZoneId, (val) => {
    form.shipping_zone_id = val;
});

// Calculate payment fee based on selected method
const paymentFee = computed(() => {
    if (!props.paymentFees) return 0;
    const method = form.payment_method;
    if (!method) return 0;

    // Map checkout method IDs to gateway names
    const gatewayMap = { 'paypal': 'paypal', 'stripe': 'stripe' };
    const gateway = gatewayMap[method];
    if (!gateway) return 0;

    const feeSetting = props.paymentFees[gateway];
    if (!feeSetting || !feeSetting.pass_to_customer) return 0;

    const sub = Number(props.subtotal) || 0;
    const disc = Number(props.discount) || 0;
    const amount = sub - disc;
    const pct = Number(feeSetting.percentage) || 0;
    const fixed = Number(feeSetting.fixed_amount) || 0;
    return Math.round(((amount * pct / 100) + fixed) * 100) / 100;
});

// Calculate grand total including fee and shipping
const grandTotal = computed(() => {
    const t = Number(props.total) || 0;
    return t + paymentFee.value + shippingCost.value;
    // Note: If 'total' prop already includes discount, then:
    // grandTotal = (Subtotal - Discount) + Shipping + Fee
    // Usually props.total is (Subtotal - Discount).
});

// Get fee description for a gateway
const getFeeDescription = (methodId) => {
    if (!props.paymentFees) return null;
    const gateway = methodId === 'paypal' ? 'paypal' : methodId === 'stripe' ? 'stripe' : null;
    if (!gateway || !props.paymentFees[gateway]) return null;
    const fee = props.paymentFees[gateway];
    return `${fee.percentage}% + RD$${Number(fee.fixed_amount).toFixed(2)}`;
};

const submit = () => {
    form.post(route(props.routePrefix + '.checkout.process'), {
        preserveScroll: true,
    });
};

// Load selected address
const loadAddress = () => {
    const address = safeAddresses.value.find(a => a.id === selectedAddressId.value);
    if (address) {
        form.shipping_address = { ...address };
    }
};

// Get bank accounts for transfer method
const getBanks = (method) => {
    return method.banks || [];
};

// Get payment method label and icon
const getPaymentLabel = (method) => {
    const id = method.id;
    if (id === 'cash') return 'Pago contra entrega';
    if (id === 'paypal') return 'PayPal';
    if (id === 'stripe') return 'Tarjeta de Crédito/Débito';
    if (id === 'transfer') return 'Transferencia Bancaria';
    return method.name || 'Otro';
};
</script>

<template>
    <Head title="Checkout" />

    <!-- We skip LayoutComponent if we want a pure checkout page, but keeping layout ensures header/footer consistency.
         However, Shopify checkout usually removes standard header/footer.
         For now, we keep the layout but hide header/footer in CSS or just override layout content structure.
         Since we can't easily modify the layout component props from here to hide header, we'll render inside it but takeover the view.
    -->
    <component :is="LayoutComponent">
        <div class="lg:flex lg:flex-row-reverse min-h-screen bg-white dark:bg-gray-900 border-t dark:border-gray-800">

            <!-- RIGHT COLUMN (Summary) - Sticky on Desktop -->
            <div class="lg:w-[45%] xl:w-[42%] bg-gray-50 dark:bg-gray-800/50 border-l border-gray-200 dark:border-gray-800">
                <!-- Mobile Summary Toggle -->
                <div class="lg:hidden p-4 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                    <button @click="showOrderSummaryMobile = !showOrderSummaryMobile"
                            class="flex items-center justify-between w-full text-blue-600 font-medium">
                        <span class="flex items-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                            </svg>
                            {{ showOrderSummaryMobile ? 'Ocultar resumen del pedido' : 'Mostrar resumen del pedido' }}
                            <svg :class="{'rotate-180': showOrderSummaryMobile}" class="w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </span>
                        <span class="text-gray-900 dark:text-white font-bold">RD${{ grandTotal.toFixed(2) }}</span>
                    </button>
                </div>

                <!-- Summary Content (Collapsible on mobile) -->
                <div :class="['lg:block lg:h-screen lg:sticky lg:top-0 lg:overflow-y-auto', showOrderSummaryMobile ? 'block' : 'hidden']">
                    <div class="p-6 lg:p-10 lg:pt-16 max-w-lg mx-auto lg:mx-0 w-full">

                        <!-- Cart Timer -->
                        <CartTimer :minutes="10" />

                        <!-- Cart Items -->
                        <div class="space-y-4 mb-6">
                            <div v-for="item in items" :key="item.product.id"
                                    class="flex gap-4 items-center">
                                <div class="relative flex-shrink-0">
                                    <div class="w-16 h-16 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-1">
                                        <img v-if="item.product.image_url"
                                                :src="item.product.image_url"
                                                :alt="item.product.name"
                                                class="w-full h-full object-cover rounded">
                                        <div v-else class="w-full h-full bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center">
                                            <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                            </svg>
                                        </div>
                                    </div>
                                    <span class="absolute -top-2 -right-2 w-5 h-5 bg-gray-500 text-white text-xs rounded-full flex items-center justify-center font-medium shadow-sm">
                                        {{ item.quantity }}
                                    </span>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h3 class="text-sm font-medium text-gray-900 dark:text-white">{{ item.product.name }}</h3>
                                    <p class="text-xs text-gray-500 mt-0.5">{{ item.variant_name || 'Estándar' }}</p>
                                </div>
                                <div class="text-sm font-medium text-gray-900 dark:text-white">
                                    RD${{ Number(item.subtotal).toFixed(2) }}
                                </div>
                            </div>
                        </div>

                        <!-- Divider -->
                        <div class="border-t border-gray-200 dark:border-gray-700 my-6"></div>

                        <!-- Cost Breakdown -->
                        <div class="space-y-3 text-sm">
                            <div class="flex justify-between">
                                <span class="text-gray-600 dark:text-gray-400">Subtotal</span>
                                <span class="font-medium text-gray-900 dark:text-white">RD${{ Number(subtotal).toFixed(2) }}</span>
                            </div>
                            <div v-if="discount > 0" class="flex justify-between">
                                <span class="text-gray-600 dark:text-gray-400">
                                    Descuento <span v-if="appliedCoupon" class="text-green-600">({{ appliedCoupon.code }})</span>
                                </span>
                                <span class="font-medium text-gray-900 dark:text-white">-RD${{ Number(discount).toFixed(2) }}</span>
                            </div>
                            <div v-if="paymentFee > 0" class="flex justify-between">
                                <span class="text-gray-600 dark:text-gray-400">
                                    {{ form.payment_method === 'paypal' ? 'Tarifa PayPal' : 'Tarifa Stripe' }}
                                </span>
                                <span class="font-medium text-gray-900 dark:text-white">RD${{ paymentFee.toFixed(2) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600 dark:text-gray-400">Envío</span>
                                <span v-if="isFreeShipping" class="text-gray-900 dark:text-white font-medium">Gratis</span>
                                <span v-else-if="shippingCost > 0" class="text-gray-900 dark:text-white font-medium">RD${{ shippingCost.toFixed(2) }}</span>
                                <span v-else class="text-gray-500 text-xs italic">Calculado en el siguiente paso</span>
                            </div>
                        </div>

                        <!-- Divider -->
                        <div class="border-t border-gray-200 dark:border-gray-700 my-6"></div>

                        <!-- Total -->
                        <div class="flex justify-between items-end mb-6">
                            <span class="text-base font-medium text-gray-600 dark:text-gray-300">Total</span>
                            <div class="flex items-baseline gap-1">
                                <span class="text-xs text-gray-500 font-medium">DOP</span>
                                <span class="text-3xl font-bold text-gray-900 dark:text-white">RD${{ grandTotal.toFixed(2) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- LEFT COLUMN (Forms) -->
            <div class="lg:w-[55%] xl:w-[58%] flex flex-col">
                <div class="p-6 lg:p-10 lg:pt-16 max-w-xl mx-auto w-full">

                    <!-- Header / Breadcrumbs -->
                    <div class="mb-8">
                         <!-- Logo (If you want to render it specifically for checkout, or rely on layout) -->
                        <Link :href="route(routePrefix + '.cart')" class="inline-flex items-center text-sm text-blue-600 hover:text-blue-700 mb-6 group">
                            <svg class="w-4 h-4 mr-1 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                            </svg>
                            Volver al carrito
                        </Link>

                        <CheckoutProgress :current-step="2" />
                    </div>

                    <form @submit.prevent="submit" class="space-y-8">

                        <!-- Section: Contact & Shipping Address -->
                        <div>
                            <div class="flex justify-between items-center mb-4">
                                <h2 class="text-lg font-bold text-gray-900 dark:text-white">Contacto y Envío</h2>
                                <div v-if="safeAddresses.length > 0" class="text-sm">
                                    <select
                                        v-model="selectedAddressId"
                                        @change="loadAddress"
                                        class="text-sm py-1 pl-2 pr-8 border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300"
                                    >
                                        <option :value="null">Nueva dirección...</option>
                                        <option v-for="address in safeAddresses" :key="address.id" :value="address.id">
                                            {{ address.first_name }} {{ address.last_name }}...
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <div class="space-y-4">
                                <!-- Contact Inputs -->
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Nombre</label>
                                        <input v-model="form.shipping_address.first_name" type="text" required
                                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white text-sm py-2.5">
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Apellido</label>
                                        <input v-model="form.shipping_address.last_name" type="text" required
                                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white text-sm py-2.5">
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Teléfono</label>
                                    <input v-model="form.shipping_address.phone" type="tel" required
                                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white text-sm py-2.5"
                                        placeholder="+1 (809) 000-0000">
                                </div>

                                <!-- Address Inputs -->
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Dirección</label>
                                    <input v-model="form.shipping_address.address_line1" type="text" required
                                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white text-sm py-2.5">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Apartamento, local, etc. (opcional)</label>
                                    <input v-model="form.shipping_address.address_line2" type="text"
                                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white text-sm py-2.5">
                                </div>
                                <div class="grid grid-cols-3 gap-4">
                                     <div class="col-span-1">
                                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Ciudad</label>
                                        <input v-model="form.shipping_address.city" type="text" required
                                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white text-sm py-2.5">
                                    </div>
                                    <div class="col-span-1">
                                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Provincia</label>
                                        <input v-model="form.shipping_address.state" type="text" required
                                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white text-sm py-2.5">
                                    </div>
                                    <div class="col-span-1">
                                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Código Postal</label>
                                        <input v-model="form.shipping_address.zip" type="text"
                                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white text-sm py-2.5">
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">País</label>
                                    <select v-model="form.shipping_address.country" required
                                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white text-sm py-2.5">
                                        <option v-for="c in latamCountries" :key="c" :value="c">{{ c }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Section: Shipping Method -->
                         <div v-if="safeShippingZones.length">
                            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Método de Envío</h2>
                            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden divide-y divide-gray-200 dark:divide-gray-700">
                                <label
                                    v-for="zone in safeShippingZones"
                                    :key="zone.id"
                                    class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
                                >
                                    <div class="flex items-center gap-3">
                                        <input
                                            v-model="selectedShippingZoneId"
                                            type="radio"
                                            :value="zone.id"
                                            class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
                                        >
                                        <div>
                                            <span class="block text-sm font-medium text-gray-900 dark:text-white">{{ zone.name }}</span>
                                            <span v-if="zone.delivery_time" class="block text-xs text-gray-500">{{ zone.delivery_time }}</span>
                                        </div>
                                    </div>
                                    <span v-if="isFreeShipping" class="text-sm font-bold text-green-600">Gratis</span>
                                    <span v-else class="text-sm font-medium text-gray-900 dark:text-white">RD${{ Number(zone.cost).toFixed(2) }}</span>
                                </label>
                            </div>
                            <div v-if="isFreeShipping" class="mt-2 text-xs text-green-600 font-medium">
                                ¡Calificas para envío express gratuito!
                            </div>
                        </div>

                        <!-- Section: Payment Method -->
                        <div>
                            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Pago</h2>
                            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                                <!-- Warning if no methods -->
                                <div v-if="availablePaymentMethods.length === 0" class="p-4 text-center text-gray-500">
                                    No hay métodos de pago disponibles.
                                </div>

                                <div v-for="method in availablePaymentMethods" :key="method.id" class="border-b last:border-0 border-gray-200 dark:border-gray-700">
                                    <label class="flex items-center p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                                        <input
                                            v-model="form.payment_method"
                                            type="radio"
                                            :value="method.id"
                                            class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500 mt-0.5"
                                        >
                                        <div class="ml-3 flex-1 flex items-center justify-between">
                                            <span class="text-sm font-medium text-gray-900 dark:text-white">
                                                {{ getPaymentLabel(method) }}
                                            </span>
                                            <!-- Icons -->
                                            <div class="flex gap-2">
                                                 <span v-if="getFeeDescription(method.id)"
                                                    class="text-xs px-1.5 py-0.5 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded text-[10px] font-medium mr-2">
                                                    + {{ getFeeDescription(method.id) }}
                                                </span>
                                                <template v-if="method.id === 'paypal'">
                                                    <span class="text-xs bg-blue-100 text-blue-800 px-1 rounded font-bold">PayPal</span>
                                                </template>
                                                <template v-else-if="method.id === 'stripe'">
                                                    <span class="text-xs bg-gray-100 text-gray-800 px-1 rounded">💳</span>
                                                </template>
                                            </div>
                                        </div>
                                    </label>

                                    <!-- Collapsible Content for Transfer or Details -->
                                    <div v-if="form.payment_method === method.id && (method.id === 'transfer' || method.id === 'cash')"
                                         class="p-4 bg-gray-50 dark:bg-gray-700/30 border-t border-gray-200 dark:border-gray-700 text-sm">

                                        <div v-if="method.id === 'transfer' && getBanks(method).length > 0" class="space-y-3">
                                            <p class="text-gray-600 dark:text-gray-300 mb-2">Realiza tu pago a una de estas cuentas:</p>
                                            <div v-for="bank in getBanks(method)" :key="bank.id"
                                                 class="p-3 bg-white dark:bg-gray-600 rounded border border-gray-200 dark:border-gray-500">
                                                <div class="font-bold text-gray-800 dark:text-white">{{ bank.bank_name }}</div>
                                                <div class="text-xs text-gray-600 dark:text-gray-200">
                                                    <span class="select-all">{{ bank.account_number }}</span>
                                                </div>
                                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ bank.account_holder }}</div>
                                            </div>
                                        </div>
                                        <div v-else-if="method.id === 'cash'" class="text-center text-gray-500 italic">
                                            Pagarás al momento de recibir tu pedido.
                                        </div>
                                         <div v-else class="text-center text-gray-500 italic">
                                            {{ method.description }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Button Section -->
                        <div class="pt-6">
                            <button
                                type="submit"
                                :disabled="form.processing"
                                class="w-full py-4 bg-blue-600 text-white rounded-lg font-bold text-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition shadow-lg hover:shadow-xl transform active:scale-[0.99]"
                            >
                                {{ form.processing ? 'Procesando...' : 'Completar compra' }}
                            </button>

                            <!-- Trust Badges -->
                            <TrustBadges />
                        </div>
                    </form>

                    <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 text-center text-xs text-gray-500">
                        <p>&copy; {{ new Date().getFullYear() }} CoachPro Store. Todos los derechos reservados.</p>
                        <div class="mt-2 flex justify-center gap-4">
                            <a href="#" class="hover:underline">Privacidad</a>
                            <a href="#" class="hover:underline">Términos</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </component>
</template>
