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

@section('email-content')

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

    <!-- Hero Banner -->
    <div style="
        position: relative;
        overflow: hidden;
        border-radius: 14px;
        background-color: #dc2626;
        margin-bottom: 14px;
        padding: 14px 40px;
    ">

        <div style="
            position: relative;
        ">

            <h1 style="
                font-size: 14px;
                font-weight: bold;
                color: #ffffff;
                line-height: 18px;
                margin: 0 0 4px 0;
            ">
                Thank You for Hosting the South African National Blood Service
            </h1>

            <p style="
                font-size: 12px;
                color: #ffffff;
                margin: 0;
                opacity: 0.9;
            ">
                Your contribution helps save lives
            </p>

        </div>

    </div>

    <!-- Content -->
    <div style="padding: 0 40px;">

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

        <!-- Intro -->
        <div style="
            font-size: 12px;
            line-height: 18px;
            color: #374151;
            margin-bottom: 16px;
        ">

            <p style="margin: 0 0 10px 0;">
                Thank you for partnering with SANBS and hosting a blood drive at
                <strong>
                    {{ $ticket->events()->latest()->first()->event_location }}
                </strong>.
            </p>

            <p style="margin: 0;">
                Your support and coordination have contributed meaningfully to saving lives.
            </p>

        </div>

        <!-- Divider -->
        <div style="border-top: 1px solid #e5e7eb; margin-bottom: 14px;"></div>

        <!-- Survey Section -->
        <div style="margin-bottom: 22px;">

            <p style="
                font-size: 12px;
                line-height: 18px;
                color: #374151;
                margin: 0 0 12px 0;
            ">
                As part of our Post Blood Drive Review stage, we invite you to complete the feedback survey available on the portal:
            </p>

            <!-- Button -->
            <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: 8px 14px;
                    border-radius: 6px;
               ">
                Complete Survey
            </a>

            <!-- OTP Block -->
            <div style="margin-top: 14px;">

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

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

            </div>

        </div>

        <!-- Divider -->
        <div style="border-top: 1px solid #e5e7eb; margin-bottom: 18px;"></div>

        <!-- Signature -->
        <div>

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

            <p style="
                font-size: 13px;
                font-weight: bold;
                color: #dc2626;
                margin: 0;
            ">
                South African National Blood Service (SANBS)
            </p>

        </div>

    </div>

</div>

@endsection