{{-- ================================================================
     Email partial: scheduled service reservation block (email-safe tables)
     Variables: $reservation, $reservationId
================================================================ --}}

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"
       style="margin-bottom:24px;">

    {{-- ── CONFIRMATION # + SERVICE BADGE ── --}}
    <tr>
        <td style="padding-bottom:14px;">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="vertical-align:middle;">
                        <span style="display:inline-block;font-size:18px;font-weight:800;
                                     color:#0f766e;background:#f0fdfa;
                                     border:2.5px solid #0f766e;padding:7px 20px;
                                     border-radius:8px;letter-spacing:0.08em;
                                     text-transform:uppercase;">
                            CONFIRMATION&nbsp;#{{ $reservationId }}
                        </span>
                    </td>
                    <td align="right" style="vertical-align:middle;">
                        <span style="display:inline-block;background:#0f766e;border:2px solid #5eead4;
                                     color:#fff;font-size:11px;font-weight:800;letter-spacing:0.08em;
                                     text-transform:uppercase;padding:6px 16px;border-radius:20px;">
                            &#128197; SCHEDULED
                        </span>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    {{-- ── TRIP DETAILS CARD ── --}}
    <tr>
        <td style="border:2px solid #99f6e4;border-radius:10px;overflow:hidden;">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">

                {{-- CARD HEADER --}}
                <tr>
                    <td style="background:#0f766e;padding:11px 20px;">
                        <span style="color:#fff;font-size:11px;font-weight:800;
                                     letter-spacing:0.1em;text-transform:uppercase;">
                            &#128642; TRIP DETAILS
                        </span>
                    </td>
                </tr>

                {{-- PICKUP DATE / TIME --}}
                <tr>
                    <td style="padding:14px 20px;border-bottom:1px solid #e2e8f0;background:#f0fdfa;">
                        <span style="font-size:10px;font-weight:700;text-transform:uppercase;
                                     color:#718096;letter-spacing:0.08em;display:block;margin-bottom:5px;">
                            &#128197; PICKUP DATE &amp; TIME
                        </span>
                        <strong style="font-size:17px;color:#1a202c;letter-spacing:-0.01em;">
                            {{ \Carbon\Carbon::parse($reservation['pickup_date'] . ' ' . $reservation['pickup_time'])->format('d-M-Y') }}
                        </strong>
                        <span style="font-size:16px;color:#4a5568;font-weight:600;margin-left:8px;">
                            &bull; {{ \Carbon\Carbon::parse($reservation['pickup_date'] . ' ' . $reservation['pickup_time'])->format('h:i A') }}
                        </span>
                    </td>
                </tr>

                {{-- ROUTE (Pickup = RED, Dropoff = GREEN) --}}
                <tr>
                    <td style="padding:14px 20px;border-bottom:1px solid #e2e8f0;">
                        <p style="font-size:10px;font-weight:700;text-transform:uppercase;
                                  color:#718096;letter-spacing:0.08em;margin:0 0 12px;">
                            &#128506; ROUTE
                        </p>

                        {{-- Pickup — RED --}}
                        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                                <td style="width:26px;vertical-align:top;padding-top:1px;text-align:center;">
                                    <span style="display:inline-block;width:18px;height:18px;
                                                 background:#dc3545;border-radius:50%;
                                                 color:#fff;font-size:10px;font-weight:900;
                                                 line-height:18px;text-align:center;">A</span>
                                </td>
                                <td style="padding-left:8px;">
                                    <span style="font-size:10px;font-weight:800;text-transform:uppercase;
                                                 color:#dc3545;letter-spacing:0.07em;display:block;margin-bottom:3px;">
                                        PICKUP LOCATION
                                    </span>
                                    <span style="font-size:13px;color:#dc3545;font-weight:700;line-height:1.45;">
                                        {{ $reservation['pickup_location']['address'] }}
                                    </span>
                                </td>
                            </tr>
                        </table>

                        {{-- Connector line --}}
                        <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td style="width:26px;text-align:center;padding:3px 0;">
                                    <table role="presentation" cellpadding="0" cellspacing="0" border="0"
                                           style="margin:0 auto;">
                                        <tr>
                                            <td style="width:2px;height:16px;background:#d1d5db;"></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>

                        @if(isset($reservation['additional_stops']) && count($reservation['additional_stops']) > 0)
                            @foreach($reservation['additional_stops'] as $index => $stop)
                            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                                <tr>
                                    <td style="width:26px;vertical-align:top;padding-top:1px;text-align:center;">
                                        <span style="display:inline-block;width:16px;height:16px;
                                                     background:#f97316;border-radius:50%;
                                                     color:#fff;font-size:9px;font-weight:900;
                                                     line-height:16px;text-align:center;">{{ $index + 1 }}</span>
                                    </td>
                                    <td style="padding-left:8px;">
                                        <span style="font-size:10px;font-weight:800;text-transform:uppercase;
                                                     color:#f97316;letter-spacing:0.07em;display:block;margin-bottom:3px;">
                                            STOP {{ $index + 1 }}
                                        </span>
                                        <span style="font-size:13px;color:#374151;line-height:1.45;">
                                            {{ $stop['address'] ?? ($stop['location']['address'] ?? 'N/A') }}
                                        </span>
                                    </td>
                                </tr>
                            </table>
                            <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td style="width:26px;text-align:center;padding:3px 0;">
                                        <table role="presentation" cellpadding="0" cellspacing="0" border="0"
                                               style="margin:0 auto;">
                                            <tr>
                                                <td style="width:2px;height:16px;background:#d1d5db;"></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            @endforeach
                        @endif

                        {{-- Dropoff — GREEN --}}
                        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                                <td style="width:26px;vertical-align:top;padding-top:1px;text-align:center;">
                                    <span style="display:inline-block;width:18px;height:18px;
                                                 background:#16a34a;border-radius:50%;
                                                 color:#fff;font-size:10px;font-weight:900;
                                                 line-height:18px;text-align:center;">B</span>
                                </td>
                                <td style="padding-left:8px;">
                                    <span style="font-size:10px;font-weight:800;text-transform:uppercase;
                                                 color:#16a34a;letter-spacing:0.07em;display:block;margin-bottom:3px;">
                                        DROP LOCATION
                                    </span>
                                    <span style="font-size:13px;color:#16a34a;font-weight:700;line-height:1.45;">
                                        {{ $reservation['dropoff_location']['address'] }}
                                    </span>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                {{-- PASSENGER / LUGGAGE / VEHICLE — 3-column cards --}}
                <tr>
                    <td style="padding:14px 20px;background:#f0fdfa;border-bottom:1px solid #e2e8f0;">
                        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                                <td width="33%" style="padding:0 4px 0 0;vertical-align:top;">
                                    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border:1.5px solid #99f6e4;border-radius:8px;overflow:hidden;">
                                        <tr><td style="background:#0f766e;padding:6px 10px;text-align:center;">
                                            <span style="color:#fff;font-size:10px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;">&#128101; PASSENGERS</span>
                                        </td></tr>
                                        <tr><td style="padding:10px 8px;text-align:center;background:#fff;height:52px;vertical-align:middle;">
                                            <span style="font-size:22px;font-weight:900;color:#0f766e;">{{ collect($reservation['travellers'])->sum('count') }}</span>
                                            <span style="display:block;font-size:10px;color:#718096;font-weight:600;margin-top:2px;">Pax</span>
                                        </td></tr>
                                    </table>
                                </td>
                                <td width="33%" style="padding:0 2px;vertical-align:top;">
                                    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border:1.5px solid #99f6e4;border-radius:8px;overflow:hidden;">
                                        <tr><td style="background:#0f766e;padding:6px 10px;text-align:center;">
                                            <span style="color:#fff;font-size:10px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;">&#128115; LUGGAGE</span>
                                        </td></tr>
                                        <tr><td style="padding:10px 8px;text-align:center;background:#fff;height:52px;vertical-align:middle;">
                                            <span style="font-size:22px;font-weight:900;color:#0f766e;">{{ $reservation['luggage'] }}</span>
                                            <span style="display:block;font-size:10px;color:#718096;font-weight:600;margin-top:2px;">Bags</span>
                                        </td></tr>
                                    </table>
                                </td>
                                <td width="33%" style="padding:0 0 0 4px;vertical-align:top;">
                                    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border:1.5px solid #99f6e4;border-radius:8px;overflow:hidden;">
                                        <tr><td style="background:#0f766e;padding:6px 10px;text-align:center;">
                                            <span style="color:#fff;font-size:10px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;">&#128663; VEHICLE</span>
                                        </td></tr>
                                        <tr><td style="padding:10px 8px;text-align:center;background:#fff;height:52px;vertical-align:middle;">
                                            <span style="font-size:14px;font-weight:800;color:#0f766e;line-height:1.3;">{{ $reservation['selected_vehicle']['vehicles_type'] ?? $reservation['selected_vehicle']['vehicle_type'] ?? 'Vehicle' }}</span>
                                            <span style="display:block;font-size:9px;color:#718096;font-weight:600;margin-top:2px;text-transform:uppercase;">Scheduled</span>
                                        </td></tr>
                                    </table>
                                </td>
                            </tr>
                        </table>

                        {{-- Extra info badges (distance, hours, stops) --}}
                        @if(!empty($reservation['distance']) || !empty($reservation['drop_off_hours']) || count($reservation['additional_stops'] ?? []) > 0)
                        <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-top:10px;">
                            <tr>
                                @if(!empty($reservation['distance']))
                                <td style="padding-right:6px;">
                                    <span style="display:inline-block;background:#fff;border:1.5px solid #99f6e4;border-radius:20px;padding:4px 14px;font-size:12px;color:#0f766e;font-weight:700;white-space:nowrap;">
                                        &#128739; {{ $reservation['distance'] }} mi
                                    </span>
                                </td>
                                @endif
                                @if(!empty($reservation['drop_off_hours']))
                                <td style="padding-right:6px;">
                                    <span style="display:inline-block;background:#fff;border:1.5px solid #99f6e4;border-radius:20px;padding:4px 14px;font-size:12px;color:#0f766e;font-weight:700;white-space:nowrap;">
                                        &#9201; {{ $reservation['drop_off_hours'] }} hrs
                                    </span>
                                </td>
                                @endif
                                @if(count($reservation['additional_stops'] ?? []) > 0)
                                <td>
                                    <span style="display:inline-block;background:#fff;border:1.5px solid #99f6e4;border-radius:20px;padding:4px 14px;font-size:12px;color:#0f766e;font-weight:700;white-space:nowrap;">
                                        &#128205; {{ count($reservation['additional_stops']) }} stop(s)
                                    </span>
                                </td>
                                @endif
                            </tr>
                        </table>
                        @endif
                    </td>
                </tr>

                {{-- BAGGAGE NOTE --}}
                <tr>
                    <td style="padding:10px 20px;border-bottom:1px solid #e2e8f0;background:#fff8f8;">
                        <span style="font-size:12px;color:#dc3545;font-weight:600;">
                            &#128707; You may carry
                            <strong>{{ $reservation['luggage'] }}</strong> hand bag(s) and
                            <strong>{{ $reservation['check_in_bags'] ?? 0 }}</strong> check-in bag(s).
                        </span>
                    </td>
                </tr>

                {{-- FARE --}}
                <tr>
                    <td style="padding:16px 20px;background:#f0fdfa;">
                        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                                <td style="vertical-align:middle;">
                                    <span style="font-size:10px;font-weight:600;color:#718096;text-transform:uppercase;letter-spacing:0.06em;display:block;margin-bottom:2px;">TOTAL FARE</span>
                                </td>
                                <td align="right" style="vertical-align:middle;">
                                    <span style="font-size:30px;font-weight:900;color:#0f766e;line-height:1;">${{ $reservation['total_fare'] }}</span>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

            </table>
        </td>
    </tr>

</table>