@extends('layout._emails')
@section('content')

<style>
    .email-body { background-color: #f9fafb; color: #1f2937; font-family: Arial, sans-serif; }
    .email-full { width: 100%; min-height: 100vh; }
    .email-outer { display: flex; justify-content: center; padding: 2rem 1rem; }
    .email-inner { width: 100%; max-width: 600px; background: #fff; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); overflow: hidden; }
    .email-header { padding: 1.5rem; border-bottom: 1px solid #e5e7eb; }
    .email-header-content { display: flex; align-items: center; gap: 0.5rem; }
    .email-logo { max-height: 40px; border: 1px solid #1b8755; border-radius: 9999px; }
    .email-brand { font-weight: 600; font-size: 0.875rem; }
    .email-subtitle { font-size: 0.75rem; font-weight: normal; }
    .email-content { padding: 1.5rem; }
    .email-text { font-size: 0.875rem; color: #374151; margin-bottom: 1rem; }
    .email-highlight { color: #111827; font-weight: 500; }
    .voucher-box { margin-bottom: 1.25rem; padding: 1rem; margin-top: 1rem; background: #f9fafb; border-radius: 0.5rem; border: 1px solid #e5e7eb; }
    .voucher-reference { font-size: 1.25rem; font-weight: 600; color: #111827; margin-bottom: 1rem; letter-spacing: 0.05em; }
    .btn-redeem { display: inline-block; background: #ef4444; color: #fff; padding: 0.75rem 1.25rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 600; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .btn-redeem:hover { background: #dc2626; }
    .redeem-steps { font-size: 0.875rem; color: #4b5563; margin-bottom: 1rem; }
    .email-link { color: #ef4444; text-decoration: underline; }
    .email-footer { padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; font-size: 0.75rem; color: #6b7280; }
    .email-footer-text { margin-bottom: 0.5rem; }

</style>

<div class="email-body">
    <table role="presentation" class="email-full" cellpadding="0" cellspacing="0">
        <tr>
            <td class="email-outer">
                <table role="presentation" class="email-inner" cellpadding="0" cellspacing="0">
                    
                    <!-- Header -->
                    <tr>
                        <td class="email-header">
                            <div class="email-header-content">
                                <a href="#">
                                    <img class="email-logo" src="{{ asset('img/logo/logo_es.png') }}"
                                         alt="Enterprise Suite" />
                                </a>
                                <div class="email-brand">
                                    <span class="email-subtitle">Enterprise Suite &trade;</span><br>
                                    Digital Vouchers
                                </div>
                            </div>
                        </td>
                    </tr>

                    <!-- Body -->
                    <tr>
                        <td class="email-content">
                            <p class="email-text">
                                Hello <span class="email-highlight">{{$order->recipient_full_name}}</span>,
                            </p>

                            <span class="email-text">
                                Your {{$order->product->name}} voucher is ready for you to redeem:
                            </span>

                            <div class="voucher-box">
                                <p class="email-text"><strong>Voucher PIN:</strong></p>
                                <p class="voucher-reference">{{$order->voucher->pin}}</p>

                                <p class="email-text"><strong>Redeem link:</strong></p>

                                <!-- Button -->
                                <a target="_blank"
                                   class="btn-redeem"
                                   @if ($order->product->name === 'Netflix')                                   
                                       href="https://www.netflix.com/za/redeem"
                                   @else
                                       href="https://www.spotify.com/za-en/redeem/"
                                   @endif
                                   >
                                    Redeem Now
                                </a>
                            </div>

                            <ul class="redeem-steps">
                                <li><strong>Steps:</strong></li>
                                <li>1. Click the <em>Redeem Now</em> button.</li>

                                @if ($order->product->name === 'Netflix')
                                    <li>2. Enter your voucher code if prompted.</li>
                                    <li>3. Follow the on-screen instructions to complete redemption.</li>
                                @else
                                    <li>2. Create an account or log in to your account.</li>
                                    <li>3. Enter your voucher code and follow the on-screen instructions to complete redemption.</li>
                                @endif

                            </ul>

                            <p class="email-text">
                                For the full step-by-step guide, please visit 
                                <a href="{{route('redeem.instructions', strtolower($order->product->name) )}}" target="_blank" class="email-link">
                                    this page
                                </a>.
                            </p>

                            <p class="email-text">
                                <strong>Expires on:</strong> 
                                <span class="email-highlight">
                                    {{\Carbon\Carbon::create($order->voucher->expires_at)->format('d F, Y')}}
                                </span>
                            </p>
                            <p class="email-text">
                                Need help? Contact us at 
                                <a href="mailto:supportdesk@oresol.co.za" class="email-link">supportdesk@oresol.co.za</a> 
                                or call <span class="email-highlight">+2776 648 9390</span>.
                            </p>
                        </td>
                    </tr>

                    <!-- Footer -->
                    <tr>
                        <td class="email-footer">
                            <p class="email-footer-text">
                                Thank you for choosing <span class="email-highlight">Enterprise Suite</span>.
                            </p>
                            <p class="email-footer-text">
                                If you didn't request this voucher, please ignore this message or contact support.
                            </p>
                        </td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>
</div>

@endsection