<?php

declare(strict_types=1);

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\HeroiconsOutline;
use Magento\Framework\Escaper;
use Magento\Framework\View\Element\Template;

/** @var Escaper $escaper */
/** @var Template $block */
/** @var ViewModelRegistry $viewModels */

$heroSlider = $viewModels->require(\Banyo\CustomHomePage\ViewModel\HeroSlider::class);

$items = [
    [
        'image_url_desktop' => $heroSlider->getSlideImageUrl('banyo_theme/hero_slider/slide_1_desktop'),
        'image_url_mobile' => $heroSlider->getSlideImageUrl('banyo_theme/hero_slider/slide_1_mobile')
    ],
    [
        'image_url_desktop' => $heroSlider->getSlideImageUrl('banyo_theme/hero_slider/slide_2_desktop'),
        'image_url_mobile' => $heroSlider->getSlideImageUrl('banyo_theme/hero_slider/slide_2_mobile')
    ],
    [
        'image_url_desktop' => $heroSlider->getSlideImageUrl('banyo_theme/hero_slider/slide_3_desktop'),
        'image_url_mobile' => $heroSlider->getSlideImageUrl('banyo_theme/hero_slider/slide_3_mobile')
    ]
];

$heroicons = $viewModels->require(HeroiconsOutline::class);
?>

<section class="relative" aria-label="<?= $escaper->escapeHtml(__('Latest items')) ?>">
    <!-- Swiper Container -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <?php foreach ($items as $index => $item): ?>
                <?php
$altMobile = str_replace(['_', '-'], ' ', pathinfo($item['image_url_mobile'] ?? '', PATHINFO_FILENAME));
$altDesktop = str_replace(['_', '-'], ' ', pathinfo($item['image_url_desktop'] ?? '', PATHINFO_FILENAME));?>
                <div class="swiper-slide">
                    <div class="relative">
                        <!-- Mobile Image (max-width: 1023px) -->
                        <img
                            src="<?= $escaper->escapeUrl($item['image_url_mobile']) ?>"
                            alt="<?= $escaper->escapeHtml($altMobile) ?>"
                            class="block lg:hidden w-full h-auto"
                            loading="<?= $index === 0 ? 'eager' : 'lazy' ?>"
                        />

                        <!-- Desktop Image (min-width: 1024px) -->
                        <img
                            src="<?= $escaper->escapeUrl($item['image_url_desktop']) ?>"
                            alt="<?= $escaper->escapeHtml($altDesktop) ?>"
                            class="hidden lg:block w-full h-auto"
                            loading="<?= $index === 0 ? 'eager' : 'lazy' ?>"
                        />
                    </div>
                </div>
            <?php endforeach; ?>

        </div>

            <!-- Arrows -->
            <button type="button" data-next=""
                    class="swiper-button-next-banyo z-10 absolute top-1/2  right-4 shrink-0 p-2.5 rounded-full transition bg-white text-primary shadow disabled:opacity-30 hover:shadow-primary/30 focus:shadow-primary/30"
                    aria-label="Go to Next Slide">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                     stroke="currentColor" width="24" height="24" role="img">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                    <title>arrow-right</title></svg>
            </button>
            <button type="button" data-prev=""
                    class="swiper-button-prev-banyo z-10 absolute top-1/2 left-4 shrink-0 p-2.5 rounded-full transition bg-white text-primary shadow disabled:opacity-30 hover:shadow-primary/30 focus:shadow-primary/30"
                    aria-label="Go to Previous Slide">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                     stroke="currentColor" width="24" height="24" role="img">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    <title>arrow-left</title></svg>
            </button>

        <!-- Pagination Dots -->
        <div class="swiper-pagination"></div>
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        new Swiper('.mySwiper', {
            loop: true,
            autoplay: {
                delay: 20000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: '.swiper-button-next-banyo',
                prevEl: '.swiper-button-prev-banyo',
            },
        });
    });
</script>
