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

@section('email-content')

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

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

        <h2 style="
            font-size:16px;
            line-height:24px;
            font-weight:700;
            color:#dc2626;
            margin:0 0 12px 0;
        ">

            New blood drive ticket assigned to

            @if ($type === 'drp')
                you!
            @else
                {{ $ticket->user->name }} {{ $ticket->user->surname }}
            @endif

        </h2>

        <p style="
            margin:0;
            color:#4b5563;
            font-size:13px;
            line-height:22px;
        ">

            A potential site contact has submitted a Blood Drive Request,
            generating ticket

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

            now in

            <span style="font-weight:700; color:#dc2626;">
                Registration
            </span>

            status within the tracking process.

        </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 Summary -->
    <div style="
        margin-top:30px;
        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:14px;
                font-weight:700;
                color:#dc2626;
                letter-spacing:0.2px;
            ">
                Ticket Summary
            </h3>

        </div>

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

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

                <tr>

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

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

                    </td>

                    <td valign="top">

                        <p style="
                            margin:0;
                            font-size:12px;
                            line-height:20px;
                            font-weight:600;
                            color:#374151;
                        ">
                            {{ $ticket->siteContact->first_name.' '.$ticket->siteContact->last_name }}
                        </p>

                    </td>

                </tr>

            </table>

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

                <tr>

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

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

                    </td>

                    <td valign="top">

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

                    </td>

                </tr>

            </table>

        </div>

    </div>

    @if ($type === 'drp')

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

            <table
                width="100%"
                cellpadding="0"
                cellspacing="0"
                border="0"
                style="
                    border:1px solid #fde68a;
                    background:#fffbeb;
                    border-radius:14px;
                "
            >

                <tr>

                    <td style="padding:14px 18px;">

                        <h4 style="
                            margin:0 0 6px 0;
                            font-size:13px;
                            font-weight:700;
                            color:#b45309;
                            letter-spacing:0.2px;
                        ">
                            ACTION REQUIRED
                        </h4>

                        <p style="
                            margin:0;
                            font-size:12px;
                            line-height:20px;
                            color:#92400e;
                        ">
                            Please review the assigned ticket and activate the acknowledgement task to continue the workflow process.
                        </p>

                    </td>

                </tr>

            </table>

        </div>

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

            <p style="
                margin:0;
                font-size:12px;
                line-height:20px;
                color:#4b5563;
            ">
                Please acknowledge the ticket within
                <span style="font-weight:700; color:#1f2937;">
                    48 working hours
                </span>.
            </p>

            <p style="
                margin:6px 0 0 0;
                font-size:12px;
                line-height:20px;
                font-weight:600;
                color:#1f2937;
            ">
                Thank you for helping us save lives.
            </p>

        </div>

    @endif

</div>

@endsection