@php
    function getFormattedDateRange($checkinDate, $checkoutDate)
    {
        if ($checkinDate && $checkoutDate) {
            $checkIn = \Carbon\Carbon::parse($checkinDate);
            $checkOut = \Carbon\Carbon::parse($checkoutDate);

            if ($checkIn->format('j M Y') === $checkOut->format('j M Y')) {
                return $checkIn->format('j M');
            } elseif ($checkIn->format('M') === $checkOut->format('M')) {
                return $checkIn->format('j') . ' to ' . $checkOut->format('j M');
            } else {
                return $checkIn->format('j M') . ' to ' . $checkOut->format('j M');
            }
        } elseif ($checkinDate) {
            return \Carbon\Carbon::parse($checkinDate)->format('j M');
        } elseif ($checkoutDate) {
            return \Carbon\Carbon::parse($checkoutDate)->format('j M');
        }
        return null;
    }
@endphp

<style>
    {!! $css !!}
</style>
<header {!! lockElementAttributes() !!}>
    <div class="container" {!! lockElementAttributes() !!}>
        <div class="header-table">
            <table>
                <tbody>
                    <tr>
                        <td class="header-left-wrap">
                            <div class="header-title">
                                {{ $offerData['location'] }}
                            </div>
                        </td>
                        <td>
                            <div class="header-right">
                                <img src="{{ asset(config('adminlte.logo_img_black')) }}" class="header-logo" alt="We Stay logo" loading="lazy">
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        {{-- <div class="header-wrap">
            <div class="header-left">
                <div class="hotel-main-name">
                    {{ $offerData['location'] }}
                </div>
            </div>
            <div class="header-right"><img src="{{ asset(config('adminlte.logo_img_black')) }}" alt="We Stay logo"
                    class="logo" loading="lazy" /></div>
            <div class="clearfix"></div>
        </div> --}}
    </div>
</header>

<div class="banner-wrap" data-gjs-selectable="false"><img src="" id="template-feature-image" alt=""
        style="min-height: 287px;" {!! editableElementAttributes() !!} loading="lazy" data-crop-width="612"
        data-crop-height="287" /></div>

<div class="container" {!! lockElementAttributes() !!}>
    <div class="booking-details">
        <ul>
            @if (!empty($offerData['offer_date']))
                <li><span class="labelName">Offer Date</span><span>{{ $offerData['offer_date'] }}</span></li>
            @endif
            <li><span class="labelName">Location</span><span>{{ $offerData['location'] }}</span></li>
            <li><span class="labelName">Check-in Date</span><span>{{ $offerData['check_in_date'] }} </span></li>
            <li><span class="labelName">Check-out Date</span><span>{{ $offerData['check_out_date'] }}</span></li>
            <li><span class="labelName">Total Stay</span><span>{{ $offerData['total_stay'] }} Nights</span></li>
            <li><span class="labelName">No. of Adults </span><span>{{ $offerData['number_of_guests'] ?? 'TBA' }} </span>
            </li>
        </ul>
    </div>
    <div class="billing-details">
        <table>
            <thead>
                <tr>
                    <th class="tbl-multi-room-no">S.No. </th>
                    <th class="tbl-multi-hotel">Hotel</th>
                    <th class="room-category-column">Room Categories</th>
                    <th class="check-in-out-date-column">Check In/ Out <br> Date </th>
                    <th class="total-rate-column">Total Rates<div class="thead-subtext">per room</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach ($offerData['rooms'] as $index => $room)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $room['hotel'] }}</td>
                        <td>
                            <ul>
                                @foreach ($room['categories'] as $category)
                                    <li>{{ $category }}</li>
                                @endforeach
                            </ul>
                        </td>
                        <td>
                            <ul>

                                @foreach ($room['checkin_dates'] as $key => $checkin)
                                    @php
                                        $checkout = $room['checkout_dates'][$key] ?? null;
                                        $dateRange = getFormattedDateRange($checkin, $checkout);
                                    @endphp
                                    @if ($dateRange)
                                        <li>{{ $dateRange }}</li>
                                    @else
                                        <li>&nbsp;</li>
                                    @endif
                                @endforeach
                            </ul>
                        </td>
                        <td>
                            <ul>
                                @foreach ($room['total_rates'] as $rate)
                                    <li>
                                        <div class="rate">
                                            @if ($rate > 0)
                                                <span class="rate-currency">{{ $offerData['currency'] }}</span>
                                                <span>{!! formatPrice($rate) !!}</span>
                                            @else
                                                <span>&nbsp;</span>
                                            @endif
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </td>
                    </tr>
                @endforeach
            </tbody>
            @if ($offerData['show_grand_total'])
                <tfoot>
                    <tr>
                        {{-- <td colspan="4">
                            <div class="total-txt GraphikMedium">Grand Total:</div>
                        </td>
                        <td>
                            <div class="total-rate">
                                <span class="total-rate-currency">
                                    {{ $offerData['currency'] }}
                                </span>
                                <span>{!! formatPrice($offerData['grand_total']) !!}</span>
                            </div>
                            <div class="non-cancellable">{{ $offerData['grand_total_sub_text'] ?? '' }}</div>
                        </td> --}}

                        <td colspan="5">
                            <div class="total-txt">

                                <span class="total-txt GraphikMedium">Grand Total: &nbsp;&nbsp;</span>

                                <span class="total-rate">
                                    <span class="total-rate-currency">
                                        {{ $offerData['currency'] }}
                                    </span>
                                    <span>
                                        {!! formatPrice($offerData['grand_total']) !!}
                                    </span>
                                    <div class="non-cancellable">{{ $offerData['grand_total_sub_text'] ?? '' }}</div>
                                </span>


                            </div>

                        </td>

                    </tr>
                    <tr>
                        <td colspan="5" class="tfoot-second-last-line"></td>
                    </tr>
                    <tr>
                        <td colspan="5" class="tfoot-last-line"></td>
                        </td>
                    </tr>
                </tfoot>
            @endif
        </table>
    </div>
    @if (!empty($offerData['sections']))
        @foreach ($offerData['sections'] as $section)
            @php
                $title = htmlspecialchars($section['title']);
                $description = $section['description']; // already HTML, don't encode it
            @endphp
            <div class="romm-detail content-section" data-section-name="section-details" {!! lockElementAttributes() !!}>

                <div class="romm-detail-title wd-25">
                    <h3>{{ $title }}</h3>
                </div>

                <div class="romm-detail-list wd-75">
                    {!! $description !!}
                </div>
                <div class="clearfix"></div>

            </div>
            <div class="clearfix"></div>
        @endforeach
    @endif

    @if (!empty($offerData['general_conditions']))
        <div class="terms-conditions">
            <h3>General Sales Conditions</h3>
            {!! $offerData['general_conditions'] !!}
        </div>
    @endif
    <footer {!! lockElementAttributes() !!} class="sticky-footer">
        <div class="footer">
            <p>Thank you for choosing WESTAY LTD</p>
            <p class="footer-info">Tel: 971 4546 4488
                <span class="dot"></span>
                E-mail: Reservations@westay.com
            </p>
            <p>
                Dubai international Financial Centre, Dubai, United Arab Emirates
            </p>
        </div>
    </footer>
</div>
<script>
    function syncLiHeightsInTable() {
        const rows = document.querySelectorAll('table tr');

        rows.forEach(row => {
            const columns = row.querySelectorAll('td');
            const maxLis = Math.max(...Array.from(columns).map(td => td.querySelectorAll('li').length));

            for (let i = 0; i < maxLis; i++) {
                const liSet = [];

                columns.forEach(td => {
                    const li = td.querySelectorAll('li')[i];
                    if (li) {
                        li.style.height = 'auto'; // Reset height first
                        liSet.push(li);
                    }
                });

                const maxHeight = Math.max(...liSet.map(li => li.offsetHeight));
                console.log("maxHeight", maxHeight);
                liSet.forEach(li => (li.style.height = maxHeight + 'px'));
            }
        });
    }

    window.addEventListener('load', syncLiHeightsInTable);
    window.addEventListener('resize', syncLiHeightsInTable);
</script>