@extends('layouts.email')

@section('title', 'Solicitud de colaboración cancelada')

@section('content')

    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 30px;">
        <tr>
            <td style="padding: 0px;">

                <h1 style="color: #243c34; font-size: 24px; line-height: 28px; margin: 0 0 20px 0; font-family: Arial, sans-serif; font-weight: 600;">
                    Hola equipo,
                </h1>

                <p style="color: #243c34; font-size: 16px; line-height: 26px; margin: 0 0 15px 0; font-family: Arial, sans-serif;">
                El influencer <strong>{{ $influencerFullName }} – {{ $instagramUsername }}</strong> ha cancelado una colaboración que estaba pendiente de revisión por parte del cliente <strong>{{ $clientName }}</strong> y que ya había sido aprobada por Nomade.
                </p>

                <!-- Detalles de la colaboración -->
                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px;">
                    <tr>
                        <td style="padding: 15px; background-color: #f8f9fa; border-radius: 8px;">
                            <p style="color: #243c34; font-size: 16px; line-height: 24px; margin: 0 0 10px 0; font-family: Arial, sans-serif; font-weight: 600;">
                                • Influencer: {{ $influencerFullName }} – {{ $instagramUsername }}
                            </p>
                            <p style="color: #243c34; font-size: 16px; line-height: 24px; margin: 0 0 10px 0; font-family: Arial, sans-serif; font-weight: 600;">
                                • Cliente: {{ $clientName }}
                            </p>

                            @if($address)
                                <p style="color: #243c34; font-size: 14px; line-height: 20px; margin: 0 0 8px 0; font-family: Arial, sans-serif;">
                                    • Dirección: {{ $address }}
                                </p>
                            @endif

                            @if($hasCalendar)
                                <p style="color: #243c34; font-size: 14px; line-height: 20px; margin: 0 0 8px 0; font-family: Arial, sans-serif;">
                                    • Fecha de la collab: {{ $dateText }}
                                </p>
                                <p style="color: #243c34; font-size: 14px; line-height: 20px; margin: 0 0 8px 0; font-family: Arial, sans-serif;">
                                    • Nº de personas: {{ $peopleCount }}
                                </p>
                            @endif

                            <p style="color: #243c34; font-size: 14px; line-height: 20px; margin: 0 0 8px 0; font-family: Arial, sans-serif;">
                                • Observaciones: "{{ $observations }}"
                            </p>
                        </td>
                    </tr>
                </table>

                @if($collabLink !== '#')
                <!-- CTA Button -->
                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px;">
                    <tr>
                        <td style="text-align: center;">
                            <a href="{{ $collabLink }}" style="display: inline-block; background-color: #243c34; color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 6px; font-weight: bold; font-size: 16px; font-family: Arial, sans-serif;">
                                Accede al detalle completo desde el CMS
                            </a>
                        </td>
                    </tr>
                </table>
                @endif

                <p style="color: #243c34; font-size: 16px; line-height: 26px; margin: 0 0 15px 0; font-family: Arial, sans-serif;">
                    Gracias,
                </p>
                <p style="color: #243c34; font-size: 16px; line-height: 26px; margin: 0; font-family: Arial, sans-serif;">
                    El equipo de <strong style="color: #243c34;">Nomade Revolution</strong>
                </p>

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

@endsection