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

@section('email-content')

<div style="font-family: Arial, Helvetica, sans-serif; color:#374151;">

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

        <h2 style="
            font-size:17px;
            line-height:24px;
            font-weight:700;
            color:#dc2626;
            margin:0 0 12px 0;
        ">
            Dear {{ $ticket->siteContact->first_name.' '.$ticket->siteContact->last_name }},
        </h2>

        <p style="
            margin:0;
            font-size:13px;
            line-height:22px;
            color:#4b5563;
        ">
            Thank you for submitting your Blood Drive Request.
            Your request has been successfully registered in our system and
            assigned ticket

            <span style="font-weight:700; color:#dc2626;">
                {{ $ticket->ticket_id }}
            </span>.
        </p>

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

                <p style="font-size: 11px; font-weight: bold; color: #dc2626; 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;
                    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>
    <!-- Ticket Details -->
    <div style="
        margin-top:28px;
        border:1px solid #fecaca;
        border-radius:14px;
        overflow:hidden;
    ">

        <!-- Header -->
        <div style="
            background:#fef2f2;
            padding:10px 18px;
            border-bottom:1px solid #fee2e2;
        ">

            <h3 style="
                margin:0;
                font-size:13px;
                font-weight:700;
                color:#dc2626;
            ">
                Ticket Details
            </h3>

        </div>

        <!-- Content -->
        <div style="padding:4px 18px; background:#ffffff;">

            <!-- Ticket ID -->
            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="padding:10px 0; border-bottom:1px solid #f3f4f6;">

                <tr>

                    <td width="130" valign="top">

                        <p style="
                            margin:0;
                            font-size:10px;
                            font-weight:700;
                            text-transform:uppercase;
                            letter-spacing:0.4px;
                            color:#9ca3af;
                        ">
                            Ticket ID
                        </p>

                    </td>

                    <td valign="top">

                        <p style="
                            margin:0;
                            font-size:12px;
                            line-height:20px;
                            font-weight:700;
                            color:#dc2626;
                        ">
                            {{ $ticket->ticket_id }}
                        </p>

                    </td>

                </tr>

            </table>

            <!-- Status -->
            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="padding:10px 0; border-bottom:1px solid #f3f4f6;">

                <tr>

                    <td width="130" valign="top">

                        <p style="
                            margin:0;
                            font-size:10px;
                            font-weight:700;
                            text-transform:uppercase;
                            letter-spacing:0.4px;
                            color:#9ca3af;
                        ">
                            Current Status
                        </p>

                    </td>

                    <td valign="top">

                        <span style="
                            display:inline-block;
                            background:#dc2626;
                            color:#ffffff;
                            padding:3px 10px;
                            border-radius:999px;
                            font-size:11px;
                            font-weight:700;
                        ">
                            Registered
                        </span>

                    </td>

                </tr>

            </table>

            <!-- Portal -->
            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="padding:10px 0; border-bottom:1px solid #f3f4f6;">

                <tr>

                    <td width="130" valign="top">

                        <p style="
                            margin:0;
                            font-size:10px;
                            font-weight:700;
                            text-transform:uppercase;
                            letter-spacing:0.4px;
                            color:#9ca3af;
                        ">
                            Portal Access
                        </p>

                    </td>

                    <td valign="top">

                        <a
                            href="{{ route('customer.ticket', $ticket->id) }}"
                            style="
                                color:#2563eb;
                                text-decoration:none;
                                font-size:12px;
                                line-height:20px;
                                font-weight:600;
                                word-break:break-all;
                            "
                        >
                            {{ route('customer.ticket', $ticket->id) }}
                        </a>

                    </td>

                </tr>

            </table>

            <!-- OTP -->
            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="padding:10px 0;">

                <tr>

                    <td width="130" valign="top">

                        <p style="
                            margin:0;
                            font-size:10px;
                            font-weight:700;
                            text-transform:uppercase;
                            letter-spacing:0.4px;
                            color:#9ca3af;
                        ">
                            One-Time PIN
                        </p>

                    </td>

                    <td valign="top">

                        <div style="
                            display:inline-block;
                            background:#fef2f2;
                            border:1px solid #fecaca;
                            padding:3px 12px;
                            border-radius:10px;
                            margin-bottom:6px;
                        ">

                            <span style="
                                font-size:13px;
                                font-weight:700;
                                letter-spacing:2px;
                                color:#dc2626;
                            ">
                                {{$ticket->otp}}
                            </span>

                        </div>

                        <p style="
                            margin:0;
                            font-size:11px;
                            line-height:18px;
                            color:#6b7280;
                        ">
                            Use this PIN to securely access and monitor your request progress.
                        </p>

                    </td>

                </tr>

            </table>

        </div>

    </div>

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

        <!-- Info Box -->
        <table
            width="100%"
            cellpadding="0"
            cellspacing="0"
            border="0"
            style="
                background:#f9fafb;
                border:1px solid #e5e7eb;
                border-radius:14px;
                padding:12px 18px;
            "
        >

            <tr>

                <td valign="top">

                    <p style="
                        margin:0 0 10px 0;
                        color:#374151;
                        font-size:12px;
                        font-weight:600;
                    ">
                        You can use the customer portal to:
                    </p>

                    <ul style="
                        margin:0;
                        padding-left:18px;
                        color:#4b5563;
                        font-size:12px;
                        line-height:22px;
                    ">
                        <li>Track request progress in real time</li>
                        <li>Upload supporting documents</li>
                        <li>Receive updates and notifications</li>
                        <li>Communicate with the SANBS support team</li>
                    </ul>

                </td>

            </tr>

        </table>

        <!-- Time Notice -->
        <div style="
            margin-top:16px;
            background:#fffbeb;
            border:1px solid #fde68a;
            border-radius:14px;
            padding:10px 18px;
        ">

            <p style="
                margin:0;
                font-size:12px;
                line-height:20px;
                color:#92400e;
            ">
                A Donor Relations Practitioner will contact you within
                <strong>48 working hours</strong>
                regarding the next steps of your request.
            </p>

        </div>

    </div>

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

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

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

            <h3 style="
                margin:0;
                font-size:16px;
                line-height:24px;
                font-weight:700;
                color:#dc2626;
            ">
                South African National Blood Service (SANBS)
            </h3>

            <div style="
                width:180px;
                height:2px;
                background:#fecaca;
                margin-top:12px;
                border-radius:999px;
            "></div>

        </div>

    </div>

</div>

@endsection