@section('script')
@append

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

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

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

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

@component(getPopupLayout(), ['id' => 'popup_redemption_details', 'class' => 'modal-lg'])
    <h4>{{ __('heading.redemption_details_title') }}</h4>

    <div id="carousel_redemption_details" class="carousel slide" data-interval="false">
        <ol class="carousel-indicators">
            <li data-target="#carousel_redemption_details" data-slide-to="0" class="active"></li>
            <li data-target="#carousel_redemption_details" data-slide-to="1"></li>
            <li data-target="#carousel_redemption_details" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="text-center mb-3" style="background-color: #025141; padding: 0.2rem;">
                    <h5>{{ __('label.redemption_dates') }}</h5>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="thead-dark">
                        <tr>
                            <th class="date-col">Date</th>
                            <th class="day-col">Day</th>
                            <th class="time-col">Time</th>
                            <th class="outlet-col">adidas outlets</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>19–20 July</td>
                            <td>Fri</td>
                            <td>2–6 pm</td>
                            <td>IMM, Changi City Point</td>
                        </tr>
                        <tr>
                            <td>25 July</td>
                            <td>Fri</td>
                            <td>5–9 pm</td>
                            <td rowspan="6" class="align-content-center">
                                IMM<br>
                                Changi City Point<br>
                                Brand Centre Orchard<br>
                                Vivocity<br>
                                Waterway Point<br>
                                Causeway Point
                            </td>
                        </tr>
                        <tr>
                            <td>26–27 July</td>
                            <td>Sat–Sun</td>
                            <td>2–6 pm</td>
                        </tr>
                        <tr>
                            <td>1 Aug</td>
                            <td>Fri</td>
                            <td>2–6 pm</td>
                        </tr>
                        <tr>
                            <td>2–3 Aug</td>
                            <td>Sat–Sun</td>
                            <td>5–9 pm</td>
                        </tr>
                        <tr>
                            <td>8 Aug</td>
                            <td>Fri</td>
                            <td>2–6 pm</td>
                        </tr>
                        <tr>
                            <td>9–10 Aug</td>
                            <td>Sat–Sun</td>
                            <td>2–6 pm</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="carousel-item">
                <div class="text-center mb-3" style="background-color: #025141; padding: 0.2rem;">
                    <h5>{{ __('label.redemption_outlets') }}</h5>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="thead-dark">
                        <tr>
                            <th>adidas outlet</th>
                            <th>Address</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>IMM</td>
                            <td>2 Jurong East Street 21, #02-14 to 16, Singapore 609601</td>
                        </tr>
                        <tr>
                            <td>Changi City Point</td>
                            <td>5 Changi Business Park Central 1, #01-54/55/56/57/58/59 Changi City Point, Singapore 486038</td>
                        </tr>
                        <tr>
                            <td>Brand Centre Orchard</td>
                            <td>270 Orchard Rd, Singapore 238857</td>
                        </tr>
                        <tr>
                            <td>Vivocity</td>
                            <td>1 HarbourFront Walk, #01-73/87, Singapore 098585</td>
                        </tr>
                        <tr>
                            <td>Waterway Point</td>
                            <td>83 Punggol Central, #01-04, Singapore 828761</td>
                        </tr>
                        <tr>
                            <td>Causeway Point</td>
                            <td>1 Woodlands Square, #02-30, Singapore 738099</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="carousel-item">
                <div class="text-center mb-3" style="background-color: #025141; padding: 0.2rem;">
                    <h5>{{ __('label.catch_the_van') }}</h5>
                </div>
                <img src="/file/images/van_event.webp" alt="MILO Van" class="img-fluid mb-3">
                <div class="mt-2 text-center">
                    <p>{!! __('label.catch_the_van_desc') !!}</p>
                </div>

                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="thead-dark">
                        <tr>
                            <th>Date</th>
                            <th>Day</th>
                            <th>Time</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr><td class="van-date-col">26 July</td>
                            <td class="van-day-col">Sat</td>
                            <td class="van-day-col">2-5pm</td>
                        </tr>
                        <tr><td class="van-date-col">2 August</td>
                            <td class="van-day-col">Sat</td>
                            <td class="van-day-col">2-5pm</td>
                        </tr>
                        <tr><td class="van-date-col">9 August</td>
                            <td class="van-day-col">Sat</td>
                            <td class="van-day-col">2-5pm</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

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