@section('script')
@append

@once
    @push('script')
        <script>
            $(function(){
                $('#popup_participating_malls').on('show.bs.modal', function(){
                    $('#carousel_participating_malls').carousel(0);
                });
            });
        </script>

        <style>
            #popup_participating_malls table thead th {
                background-color: #025141;
                color: #ffffff;
                border-color: white;
                text-align: center;
            }
            #popup_participating_malls table tbody td {
                background-color: #e8e8e8;
                border-color: white;
            }

            #popup_participating_malls table thead th.time-col,
            #popup_participating_malls table tbody td:nth-child(3) {
                white-space: nowrap;
            }

            #popup_participating_malls table tbody td.van-date-col,
            #popup_participating_malls table tbody td.van-day-col{
                text-align: center;
            }
        </style>
    @endpush
@endonce

@component(getPopupLayout(), ['id' => 'popup_participating_malls', 'class' => 'modal-lg'])
    <div id="carousel_participating_malls" class="carousel slide" data-interval="false">
        <p style="text-align: center;">Partner Kami</p>
        <ol class="carousel-indicators">
            <li data-target="#carousel_participating_malls" data-slide-to="0" class="active"></li>
            <li data-target="#carousel_participating_malls" data-slide-to="1"></li>
            <li data-target="#carousel_participating_malls" data-slide-to="2"></li>
            <li data-target="#carousel_participating_malls" data-slide-to="4"></li>
            <li data-target="#carousel_participating_malls" data-slide-to="5"></li>
            <li data-target="#carousel_participating_malls" data-slide-to="6"></li>
        </ol>

        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/file/images/amazon-pet-indo.webp" alt="Partner 1" class="img-fluid">
                <div class="text-center mt-3 text-white" style="padding: 1rem;">
                    <p class="mb-0 pb-4">CV. Amazon Pet Indo</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/file/images/inumaba-setya.webp" alt="Partner 2" class="img-fluid">
                <div class="text-center mt-3 text-white" style="padding: 1rem;">
                    <p class="mb-0 pb-4">PT. Inumaba Setya</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/file/images/jangki.webp" alt="Partner 3" class="img-fluid">
                <div class="text-center mt-3 text-white" style="padding: 1rem;">
                    <p class="mb-0 pb-4">CV. Jangki</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/file/images/juanda-group.webp" alt="Partner 4" class="img-fluid">
                <div class="text-center mt-3 text-white" style="padding: 1rem;">
                    <p class="mb-0 pb-4">CV. Juanda Group</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/file/images/laras-group.webp" alt="Partner 5" class="img-fluid">
                <div class="text-center mt-3 text-white" style="padding: 1rem;">
                    <p class="mb-0 pb-4">CV. Laras Group</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/file/images/petsindo-makmur-abadi.webp" alt="Partner 6" class="img-fluid">
                <div class="text-center mt-3 text-white" style="padding: 1rem;">
                    <p class="mb-0 pb-4">PT. Petsindo Makmur Abadi</p>
                </div>
            </div>
        </div>

        <a class="carousel-control-prev"
           href="#carousel_participating_malls"
           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_participating_malls"
           role="button"
           data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
@endcomponent