<?php
/**
 *
 * This is the section that displays the section on the homepage.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package GrShop
 */

?>

<!-- Hero Area CSS -->
<section class="oa-hero-area">
    <div class="oa-hero-slider">
        <?php 
        // Default values for repeater_setting theme mod.
        $defaults = [
            [
                'slider_image' => '',
                'slider_title' => esc_html__( 'We Deliver Fresh Groceries & Food to Your', 'grshop-grocery' ),
                'slider_title_curve'   => esc_html__( 'Doorstep', 'grshop-grocery' ),
                'slider_text' => esc_html__( 'Ut tincidunt volutpat velit a condimentum. Vestibulum nec augue lacinia, placerat nibh in, luctus felis', 'grshop-grocery' ),
                'link_text' => esc_html__( 'Order Now', 'grshop-grocery' ),
                'link_url' => '#',
                'link_target' => '_self',
            ],
        ];

        // Retrieve the repeater field settings
        $slider_settings = get_theme_mod( 'slider_settings', $defaults );

        foreach ( $slider_settings as $slider_setting ) :
            // Get the URL of the slider image
            $slider_image_url = isset( $slider_setting['slider_image'] ) ? esc_url( $slider_setting['slider_image'] ) : '';
            // Define link target
            $link_target = isset( $slider_setting['link_target'] ) ? esc_attr( $slider_setting['link_target'] ) : '_self';

            ?>
            <!-- Single Slider -->
            <div class="oa-hero-area__single" style="background-image: url('<?php echo $slider_image_url; ?>')">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-5 col-md-6 col-12">
                            <!-- Hero Content -->
                            <div class="oa-hero-area__content">
                                <h1 class="oa-hero-area__title"><?php echo esc_html( $slider_setting['slider_title'] ); ?> <span class="font-stylish"><?php echo esc_html( $slider_setting['slider_title_curve'] ); ?></span></h1>
                                <p><?php echo esc_html( $slider_setting['slider_text'] ); ?></p>
                                <div class="oa-hero-area__buttons">
                                    <a target="<?php echo esc_attr($link_target);?>" href="<?php echo esc_url( $slider_setting['link_url'] ); ?>" class="grshop-grocery-btn"><?php echo esc_html( $slider_setting['link_text'] ); ?> <i class="fa-solid fa-bag-shopping"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Single Slider -->
        <?php endforeach; ?>
    </div>
</section>
<!-- End Hero Area CSS -->