@extends('layout.emails._message-base')

@section('email-content')

<div style="width: 100%; font-family: Arial, sans-serif;">

    <!-- Greeting -->
    <div style="margin-top: 12px;">

        <h2 style="
            font-size: 13px;
            font-weight: bold;
            color: #dc2626;
            margin: 0;
        ">
            Dear {{ $ticket->siteContact->first_name }} {{ $ticket->siteContact->surname }},
        </h2>

        <div style="
            margin-top: 10px;
            color: #374151;
            font-size: 12px;
            line-height: 18px;
        ">

            <p style="margin: 0;">
                This is a friendly reminder to complete the post-blood drive survey for ticket
                <span style="font-weight: bold; color: #dc2626;">
                    {{ $ticket->ticket_id }}
                </span>.
            </p>

            <!-- Survey Section -->
            <div style="
                border-top: 1px solid #e5e7eb;
                padding-top: 14px;
                margin-top: 14px;
            ">

                <p style="
                    margin: 0 0 10px 0;
                    font-size: 12px;
                    line-height: 18px;
                    color: #374151;
                ">
                    Please complete the survey using the link below.
                    Your feedback helps SANBS improve future blood drives and donor experience.
                </p>

                <!-- Button -->
                <div style="margin-bottom: 14px;">
                    <a href="{{ route('survey.index', $ticket->id ) }}"
                       style="
                            display: inline-block;
                            background-color: #dc2626;
                            color: #ffffff;
                            text-decoration: none;
                            font-size: 12px;
                            font-weight: bold;
                            padding: 9px 14px;
                            border-radius: 6px;
                        ">
                        Complete Survey
                    </a>
                </div>

                <!-- OTP Block -->
                <div style="
                    border: 1px solid #f3f4f6;
                    background-color: #f9fafb;
                    padding: 12px;
                    border-radius: 6px;
                ">

                    <p style="
                        font-size: 10px;
                        font-weight: bold;
                        color: #6b7280;
                        margin: 0 0 4px 0;
                        text-transform: uppercase;
                        letter-spacing: 0.4px;
                    ">
                        One-Time PIN (OTP)
                    </p>

                    <p style="
                        font-size: 16px;
                        font-weight: bold;
                        color: #dc2626;
                        margin: 0;
                        letter-spacing: 2px;
                    ">
                        {{ $ticket->otp }}
                    </p>

                </div>

            </div>

            <p style="
                margin-top: 12px;
                color: #374151;
                font-size: 12px;
                line-height: 18px;
            ">
                Thank you for your continued support and participation.
            </p>

        </div>

    </div>

    <!-- Closing -->
    <div style="margin-top: 20px;">

        <p style="font-size: 12px; color: #374151; margin: 0;">
            Kind regards,
        </p>

        <div style="margin-top: 6px;">

            <h3 style="
                font-size: 13px;
                font-weight: bold;
                color: #dc2626;
                margin: 0;
            ">
                SANBS Donor Relations Team
            </h3>

        </div>

    </div>

</div>

@endsection