{{--
    App\Mail\HcpWelcomeMail — sent via NotificationService event 'hcp.welcome'.
    Vars: $branding, $name, $email, $password, $iosUrl, $androidUrl
--}}
@use('App\Services\Notification\Email\EmailStyle', 'S')
@extends('emails.layouts.tenant')

@section('title', 'Welcome to ' . $branding->name)

@section('preheader')
    Your {{ $branding->name }} account is ready. Download the iShapps app and sign in to finish setting up.
@endsection

@section('content')
    <x-email.p>Hi {{ strtok($name, ' ') ?: 'there' }},</x-email.p>

    <x-email.p>
        Welcome to {{ $branding->name }}! Your account has been created. Download the iShapps app, sign in
        with the details below, and you'll be guided through the last few steps — confirming your details
        and uploading your documents — before you can start picking up shifts.
    </x-email.p>

    <x-email.details>
        <x-email.detail label="Organisation">{{ $branding->name }}</x-email.detail>
        {{-- zero-width joiner stops clients auto-linking the address --}}
        <x-email.detail label="Email">{{ str_replace('@', "@\u{200D}", $email) }}</x-email.detail>
        <x-email.detail label="Temporary password" mono>{{ $password }}</x-email.detail>
    </x-email.details>

    @if ($iosUrl || $androidUrl)
        <x-email.p><strong>Get the app</strong></x-email.p>

        <table role="presentation" cellpadding="0" cellspacing="0" style="margin:0 0 24px 0;">
            <tr>
                @foreach (array_filter(['App Store' => $iosUrl, 'Google Play' => $androidUrl]) as $store => $url)
                    <td style="padding:0 {{ $loop->last ? '0' : '12px' }} 0 0;">
                        <table role="presentation" cellpadding="0" cellspacing="0">
                            <tr>
                                <td align="center" bgcolor="{{ S::TEXT }}" style="background-color:{{ S::TEXT }}; border-radius:10px;">
                                    <a href="{{ $url }}" target="_blank"
                                       style="display:inline-block; padding:10px 20px; font-family:{!! S::FONT !!}; line-height:1.2; color:#FFFFFF; text-decoration:none; border-radius:10px;">
                                        <span style="display:block; font-size:10px; letter-spacing:0.4px; opacity:0.8;">{{ $store === 'App Store' ? 'Download on the' : 'Get it on' }}</span>
                                        <span style="display:block; font-size:16px; font-weight:600;">{{ $store }}</span>
                                    </a>
                                </td>
                            </tr>
                        </table>
                    </td>
                @endforeach
            </tr>
        </table>
    @endif

    <x-email.p muted small>
        <strong style="color:#1A1A2E;">First sign-in:</strong> open the app, enter your email, then your temporary
        password. If your email belongs to more than one organisation, choose
        <strong style="color:#1A1A2E;">{{ $branding->name }}</strong>. You'll be asked to set your own
        password straight away.
    </x-email.p>

    <x-email.p>
        Kind regards,<br>
        The {{ $branding->name }} team
    </x-email.p>
@endsection