<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Laser Marking Stopped Report</title>
</head>

<body style="margin:0; padding:0; background-color:#f4f6f8; font-family:Arial, Helvetica, sans-serif;">

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f4f6f8; padding:30px 10px;">
    <tr>
        <td align="center">

            <!-- Main Container -->
            <table width="700" cellpadding="0" cellspacing="0" border="0"
                   style="max-width:700px; width:100%; background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.08);">

                <!-- Header -->
                <tr>
                    <td style="background:#1f2937; padding:25px 30px;">

                        <table width="100%" cellpadding="0" cellspacing="0">
                            <tr>
                                <td>
                                    <div style="font-size:13px; color:#cbd5e1; letter-spacing:1px; text-transform:uppercase;">
                                        CRI Digital Manufacturing
                                    </div>

                                    <div style="font-size:28px; font-weight:bold; color:#ffffff; margin-top:6px;">
                                        Laser Marking Stopped Alert
                                    </div>

                                    <div style="font-size:13px; color:#cbd5e1; margin-top:6px;">
                                        Laser marking machine stoppage notification
                                    </div>
                                </td>

                                <td align="right" valign="middle">
                                    <div style="width:48px; height:48px; background:#ef4444; border-radius:50%; text-align:center; line-height:48px; color:#ffffff; font-size:22px; font-weight:bold;">
                                        !
                                    </div>
                                </td>
                            </tr>
                        </table>

                    </td>
                </tr>


                <!-- Alert -->
                <tr>
                    <td style="padding:25px 30px 10px 30px;">

                        <div style="background:#fff7ed; border-left:5px solid #f97316; padding:15px 18px; border-radius:6px;">

                            <div style="font-size:16px; font-weight:bold; color:#9a3412;">
                                ⚠ Laser Marking Stop Detected
                            </div>

                            <div style="font-size:13px; color:#7c2d12; margin-top:5px;">
                                The following laser marking stopped records require your attention.
                            </div>

                        </div>

                    </td>
                </tr>


                <!-- Report Title -->
                <tr>
                    <td style="padding:20px 30px 10px 30px;">

                        <div style="font-size:18px; font-weight:bold; color:#111827;">
                            Stopped Machine Records
                        </div>

                        <div style="font-size:13px; color:#64748b; margin-top:4px;">
                            Total records: {{ $records->count() }}
                        </div>

                    </td>
                </tr>


                <!-- Table -->
                <tr>
                    <td style="padding:10px 30px 30px 30px;">

                        <table width="100%" cellpadding="0" cellspacing="0" border="0"
                               style="border-collapse:collapse; font-size:13px;">

                            <thead>
                                <tr style="background:#1f2937;">

                                    <th align="left"
                                        style="padding:12px 10px; color:#ffffff; font-weight:bold;">
                                        No
                                    </th>

                                    <th align="left"
                                        style="padding:12px 10px; color:#ffffff; font-weight:bold;">
                                        Plant
                                    </th>

                                    <th align="left"
                                        style="padding:12px 10px; color:#ffffff; font-weight:bold;">
                                        Machine
                                    </th>

                                    <th align="left"
                                        style="padding:12px 10px; color:#ffffff; font-weight:bold;">
                                        Production Order
                                    </th>


                                    <th align="left"
                                        style="padding:12px 10px; color:#ffffff; font-weight:bold;">
                                        Item Code
                                    </th>

                                    <th align="left"
                                        style="padding:12px 10px; color:#ffffff; font-weight:bold;">
                                        Serial Number
                                    </th>

                                    <th align="center"
                                        style="padding:12px 10px; color:#ffffff; font-weight:bold;">
                                        Status
                                    </th>

                                    <th align="center"
                                        style="padding:12px 10px; color:#ffffff; font-weight:bold;">
                                        Stopped At
                                    </th>

                                    <th align="center"
                                        style="padding:12px 10px; color:#ffffff; font-weight:bold;">
                                        Stopped By
                                    </th>

                                </tr>
                            </thead>

                            <tbody>

                                @foreach($records as $index => $record)

                                    <tr style="background:{{ $index % 2 == 0 ? '#ffffff' : '#f8fafc' }};">

                                        <td style="padding:13px 10px; border-bottom:1px solid #e5e7eb; color:#374151;">
                                            {{ $index + 1 }}
                                        </td>

                                        <td style="padding:13px 10px; border-bottom:1px solid #e5e7eb; color:#374151; white-space: nowrap;">
                                            {{ $plantName }}
                                        </td>

                                        <td style="padding:13px 10px; border-bottom:1px solid #e5e7eb; color:#374151; font-weight:bold;">
                                            {{ $machineName }}
                                        </td>

                                        <td style="padding:13px 10px; border-bottom:1px solid #e5e7eb; color:#374151;">
                                            {{ $record->aufnr }}
                                        </td>

                                        <td style="padding:13px 10px; border-bottom:1px solid #e5e7eb; color:#374151;">
                                            {{ $record->item?->code ?? $record->item_id }}
                                        </td>

                                        <td style="padding:13px 10px; border-bottom:1px solid #e5e7eb; color:#374151;">
                                            {{ $record->gernr }}
                                        </td>

                                        <td align="center"
                                            style="padding:13px 10px; border-bottom:1px solid #e5e7eb;">

                                            <span style="display:inline-block; background:#fee2e2; color:#b91c1c; padding:5px 10px; border-radius:20px; font-size:11px; font-weight:bold;">
                                                STOPPED
                                            </span>

                                        </td>

                                        <td style="padding:13px 10px; border-bottom:1px solid #e5e7eb; color:#374151; white-space: nowrap;">
                                            {{ $record->stopped_datetime }}
                                        </td>

                                        <td style="padding:13px 10px; border-bottom:1px solid #e5e7eb; color:#374151; white-space: nowrap;">
                                            {{ $record->stopped_by }}
                                        </td>


                                    </tr>

                                @endforeach

                            </tbody>

                        </table>

                    </td>
                </tr>


                <!-- Footer -->
                <tr>
                    <td style="background:#f8fafc; padding:20px 30px; border-top:1px solid #e5e7eb;">

                        <div style="font-size:12px; color:#64748b; text-align:center;">

                            This is an automated notification from
                            <strong style="color:#374151;">CRI Digital Manufacturing</strong>.

                            <br>

                            Please take the necessary action regarding the stopped machine.

                            <br><br>
                            © {{ date('Y') }} {{ $company }}<br>
                            Automated Laser Marking Stop Alert Mail

                            {{-- <span style="color:#94a3b8;">
                                Laser Stop Report • {{ now()->format('d M Y, h:i A') }}
                            </span> --}}

                        </div>

                    </td>
                </tr>

            </table>

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

</body>
</html>
