@extends('layouts.app')

@section('title','Bulk Email Preview')
@section('page_title','Bulk Email Preview')

@section('content')

<div style="background:#fff;padding:24px;border-radius:8px;">

    <h3 style="font-size:18px;font-weight:bold;margin-bottom:15px;">
        Recipients: {{ count($emails) }}
    </h3>
    <p>
        <b>Valid Emails:</b> {{ count($emails) }}
    </p>

    <p>
        <b>Invalid Emails:</b> {{ count($invalidEmails ?? []) }}
    </p>

    @if(!empty($invalidEmails))
        <div style="background:#fee2e2;border:1px solid #fecaca;color:#991b1b;padding:15px;border-radius:6px;margin-bottom:20px;">
            <b>Invalid Emails Skipped:</b><br>

            @foreach($invalidEmails as $invalid)
                <span style="display:inline-block;margin:3px;">
                    {{ $invalid }}
                </span>
            @endforeach
        </div>
    @endif
    
    <div style="background:#f9fafb;border:1px solid #ddd;padding:15px;border-radius:6px;margin-bottom:20px;">
        @foreach($emails as $email)
            <span style="display:inline-block;background:#eff6ff;color:#1d4ed8;padding:5px 8px;border-radius:20px;margin:3px;">
                {{ $email }}
            </span>
        @endforeach
    </div>

    <p><b>Subject:</b> {{ $subject }}</p>

    <hr style="margin:20px 0;">

    <h3 style="font-size:18px;font-weight:bold;margin-bottom:10px;">
        Email Preview
    </h3>

    <div style="background:#f9fafb;border:1px solid #ddd;padding:20px;border-radius:8px;">
        {!! $message !!}
    </div>

    <form method="POST" action="{{ route('emails.bulkSend') }}" style="margin-top:20px;display:inline;">
        @csrf

        <button type="submit"
                style="background:#16a34a;color:white;padding:10px 18px;border:0;border-radius:6px;">
            Confirm & Send Bulk Email
        </button>
    </form>

    <a href="{{ route('emails.bulkCompose') }}" style="margin-left:10px;color:#2563eb;">
        Back
    </a>

</div>

@endsection