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

@section('email-content')

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

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

    <!-- Intro -->
    <p style="
        color: #374151;
        font-size: 12px;
        line-height: 18px;
        margin: 0 0 18px 0;
    ">
        Thank you for your Blood Drive Request
        <span style="font-weight: 600; color: #dc2626;">
            (Ticket {{ $ticket->ticket_id }})
        </span>.
        Your request has progressed to the
        <span style="font-weight: 600; color: #16a34a;">
            Planning
        </span>
        stage.
    </p>

    <!-- Timeline -->
    <div style="margin-top: 18px;">

        <div style="display: flex; align-items: flex-start; justify-content: space-between; width: 100%;">

            <!-- Registration -->
            <div style="flex: 1; text-align: center; position: relative;">

                <!-- Line -->
                <div style="
                    z-index: 1;
                    height: 2px;
                    background-color: hsl(214, 10%, 69%);
                    width: 50%;
                    position: absolute;
                    top: 1.55rem;
                    right: 0;
                "></div>

                <!-- Circle -->
                <div style="
                    position: relative;
                    z-index: 20;
                    width: 48px;
                    height: 48px;
                    margin: 0 auto;
                    border-radius: 9999px;
                    background-color: #f3f4f6;
                    border: 2px solid #d1d5db;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                ">
                    1
                </div>

                <p style="font-size: 11px; font-weight: 600; color: #4b5563; margin: 8px 0 0;">
                    Registration
                </p>

            </div>

            <!-- Assessment -->
            <div style="flex: 1; text-align: center; position: relative;">

                <!-- Line -->
                <div style="
                    z-index: 1;
                    height: 2px;
                    background-color: hsl(214, 10%, 69%);
                    width: 100%;
                    position: absolute;
                    top: 1.55rem;
                    right: 0;
                "></div>

                <!-- Circle -->
                <div style="
                    position: relative;
                    z-index: 20;
                    width: 48px;
                    height: 48px;
                    margin: 0 auto;
                    border-radius: 9999px;
                    background-color: #f3f4f6;
                    border: 2px solid #d1d5db;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                ">
                    2
                </div>

                <p style="font-size: 11px; font-weight: 600; color: #4b5563; margin: 8px 0 0;">
                    Assessment
                </p>
            </div>

            <!-- Approval -->
            <div style="flex: 1; text-align: center; position: relative;">

                <!-- Line -->
                <div style="
                    z-index: 1;
                    height: 2px;
                    background-color: hsl(214, 10%, 69%);
                    width: 100%;
                    position: absolute;
                    top: 1.55rem;
                    right: 0;
                "></div>

                <!-- Circle -->
                <div style="
                    position: relative;
                    z-index: 20;
                    width: 48px;
                    height: 48px;
                    margin: 0 auto;
                    border-radius: 9999px;
                    background-color: #f3f4f6;
                    border: 2px solid #d1d5db;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                ">
                    3
                </div>

                <p style="font-size: 11px; font-weight: 600; color: #4b5563; margin: 8px 0 0;">
                    Approval
                </p>
            </div>

            <!-- Planning -->
            <div style="flex: 1; text-align: center; position: relative;">

                <!-- Line -->
                <div style="
                    z-index: 1;
                    height: 2px;
                    background-color: hsl(214, 10%, 69%);
                    width: 100%;
                    position: absolute;
                    top: 1.55rem;
                    right: 0;
                "></div>

                <!-- Circle -->
                <div style="
                    position: relative;
                    z-index: 20;
                    width: 48px;
                    height: 48px;
                    margin: 0 auto;
                    border-radius: 9999px;
                    border: 2px solid #b40404c4;
                    background-color: #dc2626;
                    color: #ffffff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                ">
                    4
                </div>

                <p style="font-size: 11px; font-weight: bold; color: #dc2626; margin: 8px 0 0;">
                    Planning
                </p>
            </div>

            <!-- Blood Drive Day -->
            <div style="flex: 1; text-align: center; position: relative;">

                <!-- Line -->
                <div style="
                    z-index: 1;
                    height: 2px;
                    background-color: hsl(214, 10%, 69%);
                    width: 100%;
                    position: absolute;
                    top: 1.55rem;
                    right: 0;
                "></div>

                <!-- Circle -->
                <div style="
                    position: relative;
                    z-index: 20;
                    width: 48px;
                    height: 48px;
                    margin: 0 auto;
                    border-radius: 9999px;
                    background-color: #f3f4f6;
                    border: 2px solid #d1d5db;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                ">
                    5
                </div>

                <p style="font-size: 11px; font-weight: 600; color: #4b5563; margin: 8px 0 0;">
                    Blood Drive Day
                </p>
            </div>

            <!-- Review -->
            <div style="flex: 1; text-align: center; position: relative;">

                <!-- Line -->
                <div style="
                    z-index: 1;
                    height: 2px;
                    background-color: hsl(214, 10%, 69%);
                    width: 50%;
                    position: absolute;
                    top: 1.55rem;
                    left: 0;
                "></div>

                <!-- Circle -->
                <div style="
                    position: relative;
                    z-index: 20;
                    width: 48px;
                    height: 48px;
                    margin: 0 auto;
                    border-radius: 9999px;
                    background-color: #f3f4f6;
                    border: 2px solid #d1d5db;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                ">
                    6
                </div>

                <p style="font-size: 11px; font-weight: 600; color: #4b5563; margin: 8px 0 0;">
                    Post Blood<br>Drive Review
                </p>
            </div>

        </div>

    </div>

    <!-- Planning Card -->
    <div style="
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        margin-top: 16px;
        overflow: hidden;
    ">

        <div style="
            background-color: #f0fdf4;
            padding: 12px 14px;
        ">

            <h3 style="
                font-size: 13px;
                font-weight: bold;
                color: #15803d;
                margin: 0 0 6px 0;
            ">
                Planning Stage Information
            </h3>

            <p style="
                font-size: 12px;
                line-height: 18px;
                color: #374151;
                margin: 0;
            ">
                The SANBS team will coordinate with you regarding logistics, donor engagement,
                branding, and compliance requirements ahead of the scheduled blood drive.
            </p>

        </div>

        <div style="padding: 12px 14px;">

            <p style="
                font-size: 12px;
                line-height: 18px;
                color: #374151;
                margin: 0;
            ">
                Our team will also engage for donor recruitment planning and operational readiness.
            </p>

        </div>

    </div>

    <!-- Closing -->
    <p style="
        margin-top: 18px;
        font-size: 12px;
        line-height: 18px;
        color: #374151;
    ">
        For assistance, contact your Donor Relations Practitioner or use the Resource Tab on the portal.
    </p>

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

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

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

    </div>

</div>

@endsection