@extends('emails.layout')

@section('title', 'SMS Notification Failed')

@section('content')
<div style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
    <h2 style="color: #856404; margin: 0 0 10px 0; font-size: 18px;">⚠️ SMS Notification Failed</h2>
    <p style="color: #856404; margin: 0; font-size: 14px;">An SMS notification failed to send to a customer. Please review the details below and take appropriate action.</p>
</div>

<div style="background: #f8f9fa; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
    <h3 style="color: #495057; margin: 0 0 15px 0; font-size: 16px;">SMS Failure Details</h3>
    
    <table style="width: 100%; border-collapse: collapse;">
        <tr>
            <td style="padding: 8px 0; font-weight: bold; color: #495057; width: 30%;">Recipient Phone:</td>
            <td style="padding: 8px 0; color: #6c757d;">{{ $phone }}</td>
        </tr>
        <tr>
            <td style="padding: 8px 0; font-weight: bold; color: #495057;">Message Type:</td>
            <td style="padding: 8px 0; color: #6c757d;">{{ ucfirst(str_replace('_', ' ', $type)) }}</td>
        </tr>
        <tr>
            <td style="padding: 8px 0; font-weight: bold; color: #495057;">SMS Provider:</td>
            <td style="padding: 8px 0; color: #6c757d;">{{ ucfirst($provider) }}</td>
        </tr>
        <tr>
            <td style="padding: 8px 0; font-weight: bold; color: #495057;">Error Message:</td>
            <td style="padding: 8px 0; color: #dc3545;">{{ $smsError }}</td>
        </tr>
        <tr>
            <td style="padding: 8px 0; font-weight: bold; color: #495057;">Time:</td>
            <td style="padding: 8px 0; color: #6c757d;">{{ $timestamp }}</td>
        </tr>
    </table>
</div>

<div style="background: #e9ecef; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
    <h3 style="color: #495057; margin: 0 0 15px 0; font-size: 16px;">Original Message</h3>
    <div style="background: #ffffff; border: 1px solid #dee2e6; border-radius: 4px; padding: 15px; font-family: monospace; font-size: 14px; color: #495057; line-height: 1.5;">
        {{ $originalMessage }}
    </div>
</div>

@if(!empty($context))
<div style="background: #f8f9fa; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
    <h3 style="color: #495057; margin: 0 0 15px 0; font-size: 16px;">Additional Context</h3>
    
    <table style="width: 100%; border-collapse: collapse;">
        @foreach($context as $key => $value)
        <tr>
            <td style="padding: 8px 0; font-weight: bold; color: #495057; width: 30%;">{{ ucfirst(str_replace('_', ' ', $key)) }}:</td>
            <td style="padding: 8px 0; color: #6c757d;">{{ $value }}</td>
        </tr>
        @endforeach
    </table>
</div>
@endif

<div style="background: #d1ecf1; border: 1px solid #bee5eb; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
    <h3 style="color: #0c5460; margin: 0 0 15px 0; font-size: 16px;">🔧 Action Required</h3>
    <ul style="color: #0c5460; margin: 0; padding-left: 20px; line-height: 1.6;">
        <li>Check your SMS configuration in the admin settings panel</li>
        <li>Verify your SMS provider credentials and account balance</li>
        <li>Contact the customer directly via phone or email if this was a critical notification</li>
        <li>Review the SMS provider logs for additional error details</li>
    </ul>
</div>

<div style="background: #f8f9fa; border-radius: 8px; padding: 20px; text-align: center;">
    <p style="margin: 0 0 15px 0; color: #6c757d;">Need help with SMS configuration?</p>
    <a href="{{ url('/admin/settings') }}" style="display: inline-block; background: #007bff; color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 6px; font-weight: bold;">
        Go to Admin Settings
    </a>
</div>
@endsection