<?php $iteneraries = get_post_meta(get_the_ID(), '_trip_itinerary', true); ?>

<?php if ($iteneraries) : ?>
    <?php $index = 1; ?>

    <h2 class="wp-block-heading"><?php echo __('Itinerary', 'jelajah-text') ?></h2>

    <div class="rt-accordion js-accordion is-style-outline" data-collapse="true">
        <?php foreach ($iteneraries as $key => $itenerary): ?>
            <div class="rt-accordion__item <?php echo $index == 1 ? 'is-active' : 'is-deactive' ?>" aria-expanded="<?php echo $index == 1 ? 'true' : 'false' ?>">
                <h3 class="rt-accordion__header has-small-font-size">
                    <span class="rt-accordion__title"><?php echo wp_sprintf(__('Day %s : %s', 'jelajah-text'), $index, $itenerary['title']) ?></span>
                    <?php if ($itenerary['desc']) : ?>
                        <span class="rt-accordion__trigger">
                            <i class="rt-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708" />
                                </svg>
                            </i>
                        </span>
                    <?php endif ?>
                </h3>
                <?php if ($itenerary['desc']) : ?>
                    <div class="rt-accordion__content">
                        <?php echo $itenerary['desc'] ?>
                    </div>
                <?php endif ?>
            </div>
            <?php $index++; ?>
        <?php endforeach ?>
    </div>
<?php endif ?>