<?php
$options  = (array)$block['options'];
$items    = $block['items'] ?: [];
$count    = count($items);
$imgStyle = '';
$locale   = Pi::service('i18n')->getLocale();
$target   = $options['target_new'] ? '_self' : '_blank';
$ellipsis = empty($options['max_rows'])
    ? 'pi-ellipsis'
    : 'pi-ellipsis pi-ellipsis-' . intval($options['max_rows']);

if (!empty($options['width'])) {
    $imgStyle .= 'width: ' . $options['width'] . 'px;';
}
if (!empty($options['height'])) {
    $imgStyle .= 'height: ' . $options['height'] . 'px;';
}
if (!empty($imgStyle)) {
    $imgStyle = sprintf('style="%s" ', $imgStyle);
}

$towcols    = empty($options['two_col']) ? false : true;
$carouselId = uniqid('carousel');
unset($options['width'], $options['height'], $options['two_col']);

// Set script
$script = sprintf('$("#%s").carousel(%s);', $carouselId, json_encode($options));
$this->footScript()->appendScript($script);
?>

<?php
if ($towcols) {

    $render = function ($item) use ($imgStyle, $ellipsis, $target) {
        $itemPattern
                 = <<<EOT
            <div class="row">
                <div class="col-lg-7 col-md-7 col-sm-7">
                    <a href="%s" target="%s" title="%s"><img class="img-fluid" src="%s" alt="%s" %s/></a>
                </div>
                <div class="col-lg-5 col-md-5 col-sm-5">
                    <h4 class="pi-ellipsis"><a href="%s" title="%s" target="%s">%s</a></h4>
                    <p class="%s">%s</p>
                </div>
            </div>
EOT;
        $link    = $item['link'] ?: '#';
        $caption = _escape($item['caption']);
        $content = sprintf(
            $itemPattern,
            $link,
            $target,
            $caption,
            $item['image'],
            $caption,
            $imgStyle,
            $link,
            $caption,
            $target,
            $caption,
            $ellipsis,
            $item['summary']
        );

        return $content;
    };

    // Add head style
    $style
        = <<<'EOT'
        .widget-carousel-bootstrap .carousel-indicators {
            text-align: right;
            margin: 0;
            left: auto;
            top: auto;
            right: 15px;
            bottom: 5px;
        }
        .widget-carousel-bootstrap .carousel-indicators .active {
            background: #428bca;
        }
        .widget-carousel-bootstrap .carousel-indicators li {
            background: #ccc;
            border-radius: 0;
            margin: 0 3px 0 0 !important;
            width: 14px !important;
            height: 14px !important;
        }
EOT;

    $this->headStyle()->appendStyle($style);

} else {

    $render = function ($item) use ($imgStyle, $ellipsis, $target) {
        $buttonPattern
            = <<<EOT
                <a class="btn btn-warning text-white" href="%s" target="%s" title="%s">%s</a>
EOT;

        $itemPattern
                 = <<<EOT
            <a href="%s" target="%s" title="%s">
                <img src="%s" alt="%s" class="img-fluid d-block w-100" %s/>
            </a>
            <div class="carousel-caption">
                <h4>%s</h4>
                <p class="%s">%s</p>
                %s
            </div>
EOT;
        $link    = $item['link'] ?: '#';
        $caption = _escape($item['caption']);

        $button = empty($item['button']) ? '' : sprintf(
            $buttonPattern,
            $link,
            $target,
            $caption,
            _escape($item['button'])
        );

        $content = sprintf(
            $itemPattern,
            $link,
            $target,
            $caption,
            $item['image'],
            $caption,
            $imgStyle,
            $caption,
            $ellipsis,
            $item['summary'],
            $button
        );

        return $content;
    };

} ?>
<div class="widget-carousel-bootstrap">
    <div id="<?php echo $carouselId; ?>" class="carousel slide" data-ride="carousel">
        <?php if ($count > 1) { ?>
            <ol class="carousel-indicators">
                <li data-target="#<?php echo $carouselId; ?>" data-slide-to="0" class="active"></li>
                <?php for ($i = 1; $i < $count; $i++) { ?>
                    <li data-target="#<?php echo $carouselId; ?>" data-slide-to="<?php echo $i; ?>"></li>
                <?php } ?>
            </ol>
        <?php } ?>
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <?php echo $render(array_shift($items)); ?>
            </div>
            <?php if (!empty($items)) { ?>
                <?php foreach ($items as $item) { ?>
                    <div class="carousel-item">
                        <?php echo $render($item); ?>
                    </div>
                <?php } ?>
            <?php } ?>
        </div>
        <?php if ($count > 1) { ?>
            <a class="<?php echo in_array($locale, ['fa', 'ar']) ? 'carousel-control-next' : 'carousel-control-prev'; ?>"
               href="#<?php echo $carouselId; ?>" role="button"
               data-slide="<?php echo in_array($locale, ['fa', 'ar']) ? 'next' : 'prev'; ?>">
                <i class="icon-prev fas fa-chevron-left"></i>
            </a>
            <a class="<?php echo in_array($locale, ['fa', 'ar']) ? 'carousel-control-prev' : 'carousel-control-next'; ?>"
               href="#<?php echo $carouselId; ?>" role="button"
               data-slide="<?php echo in_array($locale, ['fa', 'ar']) ? 'prev' : 'next'; ?>">
                <i class="icon-next fas fa-chevron-right"></i>
            </a>
        <?php } ?>
    </div>
</div>