<?php
/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes 2020-present. All rights reserved.
 * This product is licensed per Magento install
 * See https://hyva.io/license
 */

declare(strict_types=1);

use Magento\Catalog\Block\Product\View;

/** @var View $block */
$product = $block->getProduct();
/** @var \Banyo\CustomProduct\ViewModel\CustomerStatus $customerStatus */
$customerStatus = $block->getViewModel();

?>

<section class="text-gray-700 body-font">

    <div class="flex md:py-6 lg:flex-row flex-col items-center">

        <div class="grid grid-rows-auto grid-cols-1 md:gap-x-5 md:grid-cols-[42%_minmax(0,_1fr)] md:grid-rows-[min-content_minmax(0,_1fr)] lg:gap-x-10 lg:grid-cols-2 w-full">
            <?= $block->getChildHtml('product.title') ?>
            <div class="relative w-full md:pt-0 md:h-auto md:row-start-1 md:row-span-2 md:col-start-1">
                <?= $block->getChildHtml('product.media') ?>

                <?php

                    echo $block->getLayout()
                        ->createBlock(\Mirasvit\Brand\Block\LogoProductAdapter::class)
                        ->setTemplate('Hyva_MirasvitBrand::logo/logo.phtml')
                        ->toHtml();
                 ?>
            </div>
            <?php

?>

            <div
                x-data="{
        productHtml: '',
        async loadProductInfo() {
            const res = await fetch('<?= $block->escapeUrl($block->getUrl('callprice/ajax/productInfo', ['id' => (int)$product->getId()])) ?>', {
                credentials: 'include'
            });
            const text = await res.text();


             // Keep loader for at least 2 seconds
            setTimeout(() => {
                this.productHtml = text.trim(); // 'guest' or 'logged_in'
            }, 100);
        }
    }"
                x-init="loadProductInfo()"
                x-cloak
            >
                <!-- Loader -->
                <div x-show="productHtml === ''" class="flex items-center justify-center p-4 mt-12">
                    <svg class="animate-spin h-8 w-8 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
                    </svg>
                    <span class="ml-2 text-gray-700">Loading product info...</span>
                </div>


                <!-- Guest content -->
                <div x-show="productHtml === 'guest'" x-transition.opacity class="p-4 rounded">
                    <div class="mb-4">
                        SKU: <span class="font-bold"><?= $product->getSku(); ?></span>
                    </div>
                    <p class="mb-4">
                        Please log in to see the stock levels and pricing.
                    </p>

                    <?php
                    $currentUrl = $block->getRequest()->getUriString();
                   // $loginUrl = $block->getUrl('customer/account/login', ['referer' => base64_encode($currentUrl)]);

                    $login_url = $block->getUrl('customer/account/login', array('referer' => base64_encode($currentUrl)));
 ?>
                    <a href="<?= $escaper->escapeUrl($login_url) ?>" class="inline-block mb-4">
                        <button type="button" class="btn btn-primary w-58">
                            LOGIN TO YOUR ACCOUNT
                        </button>
                    </a>

                    <p class="mb-4">
                        If you are an existing customer and need a website login, please request one
                        <a class="underline"  href="javascript:void(0)" onclick="openMyDialog(event)">here</a>.
                    </p>
                    <p>

                        If you are a new customer, please
                        <a href="<?= $block->getUrl('customer/account/create') ?>" class="underline">
                            create an account
                        </a>.
                    </p>

                </div>

                <!-- Logged-in content -->
                <div x-show="productHtml === 'logged_in'" x-transition.opacity>
                    <?= $block->getChildHtml('product.info') ?>
                </div>
            </div>




            <?php if ($customerStatus->isLoggedIn()): ?>

            <?php else: ?>




           <?php endif; ?>
        </div>
    </div>



</section>
<section>
    <?= $block->getChildHtml('product_options_wrapper_bottom') ?>
</section>

<?= $block->getChildHtml('product.info.details'); ?>

<section>
   <!-- <h2 class="font-semibold text-2xl text-[18px] md:text-[22px] container flex flex-col md:flex-row flex-wrap my-6 font-bold lg:mt-8 mt-0 product md:px-0 md:mt-10 md:mb-3">
        Compare with similar products
    </h2>-->

    <?= $block->getChildHtml('related') ?>
    <?= $block->getChildHtml('upsell') ?>
  <!--  <?php /*= $block->getChildHtml('review_list') */?>
    --><?php /*= $block->getChildHtml('review_form') */?>
</section>



<?php
$requestLoginHtml = $block->getLayout()
    ->createBlock(\Magento\Framework\View\Element\Template::class)
    ->setTemplate('Magento_Catalog::product/Request.phtml')
    ->toHtml();

$modal = $viewModels->require(\Hyva\Theme\ViewModel\Modal::class)
    ->createModal()
    ->withDialogRefName('request-dialog')
    ->withDialogClasses('w-1/4 inline-block bg-white shadow-xl rounded-lg p-10 max-h-screen overflow-auto overscroll-y-contain')
    ->withContent($requestLoginHtml);
?>

<div
    x-data="{
        ...hyva.modal(),
        ...handleModal(),
        init() {
            // Existing modal open function
            window.openMyDialog = (event) => this.show('request-dialog', event);

            // Listen for child close button
            this.$root.addEventListener('close-modal', (event) => {
                const dialogId = event.detail; // 'request-dialog'
                this.hide(dialogId);           // Use Hyvä modal API
            });
        }
    }"
>
    <!-- Wrap modal to apply custom classes -->
    <div class="    bg-white  p-6 relative mx-auto mt-10 overflow-auto px-12 py-8
">
        <?= $modal ?>
    </div>
</div>
