{{--
    E-mail « séjour raccourci » adressé au propriétaire.

    Prolongation supprimée ou date de départ ramenée en arrière : le
    propriétaire perd des nuits déjà annoncées. Le texte reste à la voix
    passive comme l'e-mail d'annulation — l'opération vient tantôt du voyageur,
    tantôt de l'équipe, et nommer l'auteur rendrait le message faux une fois
    sur deux.

    Variables : $lang, $ownerName, $propertyName, $guestName, $checkIn,
    $previousCheckOut, $newCheckOut, $ownerSignature.
--}}
@php
    // Logo joint (CID) plutôt que chargé depuis manager.thelandlord.tn : il
    // s'affiche même quand le client bloque les images distantes. Repli sur
    // l'URL publique si la vue est rendue hors d'un Mailable.
    $logoSrc = isset($message)
        ? $message->embed(public_path('logo-email.png'))
        : 'https://manager.thelandlord.tn/logo-email.png';
@endphp
<div style="background-color: #ffffff; margin: 0; padding: 0;">
    <table style="background-color: #f7f6f5; width: 100%; border-collapse: collapse;" role="presentation"
        cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <table style="width: 100%; background-color: #f7f6f5;" role="presentation" cellspacing="0"
                    cellpadding="0" align="center">
                    <tr>
                        <td>
                            {{-- Fond OPAQUE, identique à celui de l'image : le mode sombre de
                                 Gmail assombrit la cellule mais ne recolore jamais les pixels. --}}
                            <table bgcolor="#1f6b57"
                                style="background-color: #1f6b57; width: 100%; max-width: 600px; margin: auto;"
                                role="presentation" cellspacing="0" cellpadding="0" align="center">
                                <tr>
                                    <td bgcolor="#1f6b57" style="text-align: center; padding: 16px 20px; background-color: #1f6b57;">
                                        <a href="https://property.thelandlord.tn/" target="_blank" rel="noopener">
                                            <img src="{{ $logoSrc }}" width="190"
                                                style="width: 190px; max-width: 100%; height: auto; border: 0; display: block; margin: 0 auto;"
                                                title="The Landlord" alt="The Landlord">
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

                <table style="width: 100%; background-color: #f7f6f5;" role="presentation" cellspacing="0"
                    cellpadding="0" align="center">
                    <tr>
                        <td>
                            <table
                                style="background-color: #ffffff; color: #000000; width: 100%; max-width: 600px; margin: auto;"
                                role="presentation" cellspacing="0" cellpadding="20" align="center">
                                <tr>
                                    <td style="font-weight: 400; text-align: left; font-family: Arial, Helvetica, sans-serif;">

                                        <h2 style="color: #10201c; font-size: 22px; line-height: 1.3; margin: 0 0 16px;">
                                            {{ $lang === 'en' ? 'Stay shortened' : 'Séjour raccourci' }}
                                        </h2>

                                        <p style="margin: 0 0 14px; font-size: 15px; color: #2f403b;">
                                            {{ $lang === 'en' ? 'Dear' : 'Cher(e)' }} {{ $ownerName }},
                                        </p>

                                        <p style="margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: #2f403b;">
                                            @if ($lang === 'en')
                                                We are sorry to inform you that the stay below has been shortened. The
                                                nights that were freed are available for booking again.
                                            @else
                                                Nous sommes désolés de vous informer que le séjour ci-dessous a été
                                                raccourci. Les nuits libérées sont de nouveau disponibles à la réservation.
                                            @endif
                                        </p>

                                        <table role="presentation" cellspacing="0" cellpadding="0"
                                            style="width: 100%; border: 1px solid #e0e8e5; border-radius: 5px; border-collapse: separate; margin: 0 0 24px;">
                                            <tr style="background-color: #f7faf9;">
                                                <td style="padding: 10px 14px; font-size: 13px; color: #64756f;">{{ $lang === 'en' ? 'Property' : 'Logement' }}</td>
                                                <td style="padding: 10px 14px; font-size: 14px; color: #10201c; font-weight: bold; text-align: right;">{{ $propertyName }}</td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 10px 14px; font-size: 13px; color: #64756f;">{{ $lang === 'en' ? 'Guest' : 'Voyageur' }}</td>
                                                <td style="padding: 10px 14px; font-size: 14px; color: #10201c; font-weight: bold; text-align: right;">{{ $guestName }}</td>
                                            </tr>
                                            <tr style="background-color: #f7faf9;">
                                                <td style="padding: 10px 14px; font-size: 13px; color: #64756f;">{{ $lang === 'en' ? 'Check-in' : 'Arrivée' }}</td>
                                                <td style="padding: 10px 14px; font-size: 14px; color: #10201c; font-weight: bold; text-align: right;">{{ $checkIn }}</td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 10px 14px; font-size: 13px; color: #64756f;">{{ $lang === 'en' ? 'Previous check-out' : 'Ancien départ' }}</td>
                                                <td style="padding: 10px 14px; font-size: 14px; color: #8a8f8d; font-weight: bold; text-align: right; text-decoration: line-through;">{{ $previousCheckOut }}</td>
                                            </tr>
                                            <tr style="background-color: #eaf6f2;">
                                                <td style="padding: 11px 14px; font-size: 13px; color: #64756f;">{{ $lang === 'en' ? 'New check-out' : 'Nouveau départ' }}</td>
                                                <td style="padding: 11px 14px; font-size: 15px; color: #0f6b57; font-weight: bold; text-align: right;">{{ $newCheckOut }}</td>
                                            </tr>
                                        </table>

                                        {!! $ownerSignature !!}

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

                <table style="width: 100%; background-color: #f7f6f5;" role="presentation" cellspacing="0"
                    cellpadding="0" align="center">
                    <tr>
                        <td>
                            <table
                                style="background-color: #f7f6f5; color: #000000; width: 100%; max-width: 600px; margin: auto;"
                                role="presentation" cellspacing="0" cellpadding="0" align="center">
                                <tr>
                                    <td style="text-align: center; padding: 14px 10px;">
                                        <a href="https://property.thelandlord.tn/" target="_blank" rel="noopener">
                                            <img src="{{ $logoSrc }}" width="130"
                                                style="width: 130px; max-width: 100%; height: auto; border: 0; display: block; margin: 0 auto;"
                                                title="The Landlord" alt="The Landlord">
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: center;">
                                        <a href="https://www.facebook.com/thelandlordtn/" target="_blank" rel="noopener">
                                            <img style="height: 32px; border: 0; width: 32px;"
                                                src="https://manager.thelandlord.tn/facebook-48.png" alt="Facebook">
                                        </a>
                                        <a href="https://www.instagram.com/thelandlordtn/" target="_blank" rel="noopener">
                                            <img style="height: 32px; border: 0; width: 32px;"
                                                src="https://manager.thelandlord.tn/instagram-48.png" alt="Instagram">
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

                <table style="width: 100%; background-color: #2aba96; color: #000000; max-width: 600px; margin: auto;"
                    role="presentation" cellspacing="0" cellpadding="10" align="center">
                    <tr>
                        <td style="text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 13px;">
                            <p style="margin: 0;">&copy; {{ date('Y') }}. Thelandlord All Rights Reserved.</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

<style>
    @media only screen and (max-width: 600px) {
        table[role="presentation"] { width: 100% !important; }
        td { padding: 10px !important; }
        img { width: 100% !important; height: auto !important; }
    }
</style>