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

@section('email-content')

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

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

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

        <div style="
            font-size:13px;
            line-height:24px;
            color:#4b5563;
        ">

            <p style="margin:0 0 14px 0;">

                I'm pleased to inform you that your blood drive request
                ticket

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

                has now been assigned to me.

            </p>

            <p style="margin:0;">

                I will be assisting you throughout the assessment
                process and contact you shortly regarding the next steps.

                In the meantime, you may monitor your request progress
                through the SANBS customer portal.

            </p>

        </div>

    </div>

    <!-- Portal Card -->
    <div style="
        margin-top:32px;
        border:1px solid #fecaca;
        border-radius:16px;
        overflow:hidden;
    ">

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

            <h3 style="
                margin:0;
                font-size:14px;
                line-height:22px;
                font-weight:700;
                color:#dc2626;
                letter-spacing:0.3px;
            ">
                Portal Access Details
            </h3>

        </div>

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

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

                <tr>

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

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

                    </td>

                    <td valign="top">

                        <a
                            href="{{ route('customer.ticket', $ticket->id) }}"
                            style="
                                color:#2563eb;
                                text-decoration:none;
                                font-size:13px;
                                line-height:22px;
                                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:12px 0;"
            >

                <tr>

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

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

                    </td>

                    <td valign="top">

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

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

                        </div>

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

                    </td>

                </tr>

            </table>

        </div>

    </div>

    <!-- Support Message -->
    <div style="
        margin-top:24px;
        background:#f9fafb;
        border:1px solid #e5e7eb;
        border-radius:14px;
        padding:12px 20px;
    ">

        <p style="
            margin:0;
            font-size:13px;
            line-height:22px;
            color:#4b5563;
        ">
            We look forward to partnering with you to make this blood drive a success.
        </p>

    </div>

    <!-- Signature -->
    <div style="margin-top:32px;">

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

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

            <h3 style="
                margin:0;
                font-size:18px;
                line-height:26px;
                font-weight:700;
                color:#dc2626;
            ">
                {{ $ticket->user->name.' '.$ticket->user->surname }}
            </h3>

            <p style="
                margin:4px 0 0 0;
                font-size:13px;
                line-height:22px;
                color:#6b7280;
            ">
                Donor Relations Practitioner
            </p>

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

        </div>

    </div>

    <!-- Contact Information -->
    <div style="
        margin-top:24px;
        border-top:1px solid #f3f4f6;
        padding-top:18px;
    ">

        <table
            width="100%"
            cellpadding="0"
            cellspacing="0"
            border="0"
        >

            <tr>

                <!-- Phone -->
                <td
                    valign="top"
                    width="33%"
                    style="padding-right:10px;"
                >

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

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

                </td>

                <!-- Email -->
                <td
                    valign="top"
                    width="33%"
                    style="padding-right:10px;"
                >

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

                    <p style="
                        margin:0;
                        font-size:12px;
                        line-height:20px;
                        color:#374151;
                        font-weight:600;
                        word-break:break-word;
                    ">
                        {{ $ticket->user->email }}
                    </p>

                </td>

                <!-- Branch -->
                <td
                    valign="top"
                    width="34%"
                >

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

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

                </td>

            </tr>

        </table>

    </div>

    <!-- Footer Message -->
    <div style="margin-top:28px;">

        <p style="
            margin:0;
            text-align:center;
            font-size:12px;
            line-height:22px;
            color:#6b7280;
            font-weight:500;
        ">
            Thank you for partnering with SANBS to help save lives through blood donation.
        </p>

    </div>

</div>

@endsection