@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->user->name }} {{ $ticket->user->surname }},
        </h2>

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

            <p style="margin: 0 0 8px 0;">
                This is to inform you that your Blood Drive Request
                <span style="font-weight: bold; color: #dc2626;">
                    {{ $ticket->ticket_id }}
                </span>
                has successfully passed the Assessment stage and is now
                <span style="font-weight: bold; color: #16a34a;">
                    Approved.
                </span>
            </p>

            <p style="margin: 0;">
                The proposed blood drive date has been scheduled as indicated below.
            </p>

        </div>

    </div>

    <!-- 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;
                    border: 2px solid #b40404c4;
                    background-color: #dc2626;
                    color: #ffffff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                ">
                    3
                </div>

                <p style="font-size: 11px; font-weight: bold; color: #dc2626; 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;
                    background-color: #f3f4f6;
                    border: 2px solid #d1d5db;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                ">
                    4
                </div>

                <p style="font-size: 11px; font-weight: 600; color: #4b5563; 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>

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

        <div style="
            border-radius: 12px;
            border: 1px solid #bbf7d0;
            background-color: #f0fdf4;
            padding: 12px 16px;
        ">

            <p style="
                color: #4b5563;
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: 1px;
                margin: 0;
            ">
                Proposed Blood Drive Date
            </p>

            <h2 style="
                font-size: 14px;
                font-weight: bold;
                color: #16a34a;
                margin: 6px 0 0;
            ">
                {{ \Carbon\Carbon::parse($ticket->events()->latest()->first()?->start_time)->format('d F Y') }}
            </h2>

        </div>

    </div>

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

        <p style="
            font-size: 12px;
            color: #4b5563;
            line-height: 18px;
            margin: 0;
        ">
            For any assistance, please contact your assigned Donor Relations Practitioner.
        </p>

    </div>

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

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

        <p style="
            font-size: 12px;
            color: #4b5563;
            margin-top: 6px;
            margin-bottom: 0;
        ">
            Saving Lives Through Blood Donation
        </p>

    </div>

</div>

@endsection