@extends('emails.layouts.base', [
    'subject' => 'Missed Call — ' . ($callerName ?? $callerNumber),
    'title' => 'Missed Call',
    'subtitle' => 'You have a missed call that was not answered.',
    'icon' => '📵',
    'iconColor' => '#ef4444',
])

@section('content')
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom:20px;">
    <tr>
        <td style="padding:16px 20px;background:#fef2f2;border-radius:8px;border:1px solid #fecaca;">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="padding:8px 0;font-size:13px;color:#64748b;width:130px;vertical-align:top;">Caller</td>
                    <td style="padding:8px 0;font-size:14px;color:#0f172a;font-weight:600;">{{ $callerName ?? 'Unknown' }}</td>
                </tr>
                <tr>
                    <td style="padding:8px 0;font-size:13px;color:#64748b;vertical-align:top;">Number</td>
                    <td style="padding:8px 0;font-size:14px;color:#0f172a;font-family:'Courier New',monospace;">{{ $callerNumber }}</td>
                </tr>
                <tr>
                    <td style="padding:8px 0;font-size:13px;color:#64748b;vertical-align:top;">Called</td>
                    <td style="padding:8px 0;font-size:14px;color:#0f172a;">Extension {{ $extensionCalled }}</td>
                </tr>
                <tr>
                    <td style="padding:8px 0;font-size:13px;color:#64748b;vertical-align:top;">Time</td>
                    <td style="padding:8px 0;font-size:14px;color:#0f172a;">{{ $callTime }}</td>
                </tr>
                <tr>
                    <td style="padding:8px 0;font-size:13px;color:#64748b;vertical-align:top;">Ring Duration</td>
                    <td style="padding:8px 0;font-size:14px;color:#0f172a;">{{ $ringDuration }} seconds</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<p style="margin:0 0 20px;font-size:13px;color:#64748b;line-height:1.5;">
    The caller may try again or you can return the call at your convenience.
</p>

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ config('app.url') }}/cdr" style="height:38px;v-text-anchor:middle;width:160px;" arcsize="16%" strokecolor="#1d4ed8" fillcolor="#2563eb">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">View Call History</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td style="border-radius:6px;background:#2563eb;">
            <a href="{{ config('app.url') }}/cdr" target="_blank" style="display:inline-block;padding:10px 24px;color:#ffffff;font-size:13px;font-weight:600;text-decoration:none;border-radius:6px;">View Call History</a>
        </td>
    </tr>
</table>
<!--<![endif]-->
@endsection