@section('script')
@append

@once
    @push('script')
        <script>
            $(document).ready(function() {
                $('#size-guide-btn').on('click', function() {
                    loadPopup('popup_size_guide');
                });

                $('#popup_size_guide').on('show.bs.modal', function(){
                    $('#carousel_size_guide').carousel(0);
                });
            });
        </script>
    @endpush
@endonce

@component(getPopupLayout(), ['id' => 'popup_size_guide', 'class' => 'modal-md'])
    <div id="carousel_size_guide" class="carousel slide" data-interval="false">
        <ol class="carousel-indicators">
            <li data-target="#carousel_size_guide" data-slide-to="0" class="active"></li>
            <li data-target="#carousel_size_guide" data-slide-to="1"></li>
            <li data-target="#carousel_size_guide" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="carousel-item active">
                <h4>{{ __('heading.size_guide_design_title') }}</h4>
                <div class="text-center mb-3" style="background-color: #025141; padding: 0.2rem;">
                    <h5>{{ __('label.size_guide') }}</h5>
                </div>
                <div class="mt-2 text-center">
                    <p>{!! __('label.size_guide_design_caption_one') !!}</p>
                </div>
                <img src="/file/images/side_guide.webp" class="size_guide d-block w-100" alt="size guide">
                <img src="/file/images/side_chart.webp" class="size_chart d-block w-100" alt="size chart">
                <div class="mt-3 text-center" style="padding-bottom: 20px;">
                    <p>{!! __('label.size_guide_design_caption_two') !!}</p>
                </div>
            </div>

            <div class="carousel-item">
                <div class="text-center mb-3" style="background-color: #025141; padding: 0.2rem;">
                    <h5>{{ __('label.shirt_black') }}</h5>
                </div>
                <img src="/file/images/shirt_black.webp" class="d-block w-100" alt="black shirt">

                <div class="text-center mb-3" style="background-color: #025141; padding: 0.2rem; margin-top: 15px;">
                    <h5>{{ __('label.shirt_white') }}</h5>
                </div>
                <img src="/file/images/shirt_white.webp" class="d-block w-100" alt="white shirt">
            </div>

            <div class="carousel-item">
                <div class="text-center mb-3" style="background-color: #025141; padding: 0.2rem;">
                    <h5>{{ __('label.design') }}</h5>
                </div>
                <img src="/file/images/shirt_design.webp" class="d-block w-100" alt="Size Guide Slide 3">
                <div class="mt-3 text-center" style="padding-bottom: 20px;">
                    <p>{!! __('label.size_guide_design_caption_three') !!}</p>
                </div>
            </div>
        </div>

        <a class="carousel-control-prev" href="#carousel_size_guide" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel_size_guide" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
@endcomponent