{{-- resources/views/emails/tickets/notification.blade.php --}}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $subject }}</title>
</head>
<body style="font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background-color: #f3f4f6; margin: 0; padding: 20px;">
    <table width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px; margin: 0 auto;">
        <tr>
            <td style="background-color: #ffffff; border-radius: 8px; padding: 40px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                
                {{-- Header --}}
                <div style="text-align: center; margin-bottom: 30px;">
                    <div style="width: 60px; height: 60px; background-color: #10b981; border-radius: 50%; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                        <span style="color: white; font-size: 24px;">🎫</span>
                    </div>
                    <h1 style="color: #1f2937; margin: 0; font-size: 24px;">{{ $subject }}</h1>
                </div>

                {{-- Content --}}
                <div style="margin-bottom: 30px;">
                    <p style="color: #4b5563; line-height: 1.6;">
                        {{ $message }}
                    </p>

                    {{-- Ticket Info --}}
                    <div style="background-color: #f9fafb; border-radius: 8px; padding: 20px; margin: 20px 0;">
                        <table width="100%" cellpadding="0" cellspacing="0">
                            <tr>
                                <td style="color: #6b7280; padding-bottom: 10px;">Ticket ID:</td>
                                <td style="text-align: right; color: #1f2937; font-weight: 600;">{{ $ticket->unique_identifier }}</td>
                            </tr>
                            <tr>
                                <td style="color: #6b7280; padding-bottom: 10px;">Subject:</td>
                                <td style="text-align: right; color: #1f2937; font-weight: 600;">{{ $ticket->title }}</td>
                            </tr>
                            <tr>
                                <td style="color: #6b7280; padding-bottom: 10px;">Priority:</td>
                                <td style="text-align: right; color: #1f2937; font-weight: 600; text-transform: capitalize;">
                                    {{ $ticket->priority }}
                                </td>
                            </tr>
                            <tr>
                                <td style="color: #6b7280;">Created:</td>
                                <td style="text-align: right; color: #1f2937; font-weight: 600;">
                                    {{ $ticket->created_at->format('M j, Y g:i A') }}
                                </td>
                            </tr>
                        </table>
                    </div>

                    <p style="color: #6b7280; font-size: 14px; line-height: 1.6;">
                        Ticket Description:<br>
                        {{ Str::limit($ticket->description, 200) }}
                    </p>
                </div>

                {{-- CTA Button --}}
                <div style="text-align: center; margin: 30px 0;">
                    <a href="{{ route('tickets.show', $ticket) }}" 
                       style="display: inline-block; background-color: #10b981; color: #ffffff; padding: 14px 28px; text-decoration: none; border-radius: 6px; font-weight: 600;">
                        View Ticket
                    </a>
                </div>

                {{-- Footer --}}
                <div style="border-top: 1px solid #e5e7eb; padding-top: 20px; text-align: center;">
                    <p style="color: #9ca3af; font-size: 12px; margin: 0;">
                        This is an automated notification from the Support Ticket System.
                    </p>
                </div>

            </td>
        </tr>
    </table>
</body>
</html>
