{{--
    E-mail unique d'annulation adressé au propriétaire (TL-274).

    Un seul modèle pour toutes les origines. Le canal n'est pas mentionné.

    Variables : $lang, $ownerName, $propertyName, $guestName, $checkIn,
    $checkOut, $ownerSignature.
--}}
@php
    // Le logo est joint à l'e-mail (CID) plutôt que chargé depuis
    // manager.thelandlord.tn : il s'affiche même quand le client bloque les
    // images distantes, et sans dépendre de la disponibilité du serveur.
    // 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 et identique à celui de l'image : l'ancien
                                #2aba9654 portait un canal alpha sur 8 chiffres, mal
                                supporté en e-mail, et le mode sombre de Gmail
                                l'assombrissait jusqu'à faire disparaître le logo vert.
                            --}}
                            <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' ? 'Reservation cancelled' : 'Réservation annulée' }}
                                        </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 reservation below has been cancelled by
                                                the guest. The dates are available for booking again.
                                            @else
                                                Nous sommes désolés de vous informer que la réservation ci-dessous a été
                                                annulée par le voyageur. Les dates sont de nouveau libres à 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' ? 'Check-out' : 'Départ' }}</td>
                                                <td style="padding: 10px 14px; font-size: 14px; color: #10201c; font-weight: bold; text-align: right;">{{ $checkOut }}</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>