<!DOCTYPE html>
<html lang="es" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
    xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plazo de pago vencido</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            font-family: 'Open Sans', Arial, sans-serif;
            color: #333;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
            width: 100%;
        }

        td {
            padding: 0;
        }

        img {
            border: 0;
            display: block;
            width: 100%;
            height: auto;
        }

        h1,
        h3 {
            margin: 0;
        }

        .container {
            max-width: 600px;
            margin: 20px auto;
            background-color: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .header {
            background-color: #002545;
            padding: 6px;
        }

        .content {
            padding: 30px;
            text-align: center;
        }

        .content h1 {
            color: #002545;
            font-size: 22px;
        }

        .body-text {
            padding: 20px;
            text-align: left;
            font-size: 14px;
            line-height: 22px;
        }

        .table-container {
            width: 100%;
            margin-top: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
        }

        .table-container table {
            width: 100%;
            border-collapse: collapse;
        }

        .table-container th {
            background-color: #002545;
            color: #fff;
            text-align: left;
            padding: 8px;
            font-size: 13px;
        }

        .table-container td {
            padding: 8px;
            border-bottom: 1px solid #ddd;
            font-size: 13px;
        }

        .table-container tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .footer {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
            font-size: 12px;
            color: #797e82;
        }

        @media (max-width: 600px) {

            .content,
            .body-text {
                padding: 20px;
            }

            .header,
            .footer {
                padding: 15px;
            }
        }
    </style>
</head>

<body>
    <table width="100%" bgcolor="#f8f8f8">
        <tr>
            <td align="center">
                <table class="container">

                    <tr>
                        <td class="header"></td>
                    </tr>

                    <tr>
                        <td class="content">
                            <h1>Plazo de pago vencido</h1>
                        </td>
                    </tr>

                    <tr>
                        <td class="body-text">
                            <p>Estimado cliente: {{ $supplier->rut ?? '' }} {{ $supplier->name_rz ?? '' }},</p>
                            <p>
                                Por medio del presente, deseamos informar que de acuerdo a nuestros registros,
                                a la fecha usted mantiene pendiente o se encuentran por vencer compromisos de pago
                                que deben ser regularizados.
                                Invitamos a usted a informar su compromiso de pago o confirmación del mismo. A continuación
                                adjuntamos detalle de documentos pendientes en nuestro sistema.
                            </p>

                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>N°</th>
                                            <th>N° DTE</th>
                                            <th>Tipo</th>
                                            <th>Emisión</th>
                                            <th>Vencimiento</th>
                                            <th>Monto</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($accounts as $index => $account)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $account->ticket->folio ?? '-' }}</td>
                                                <td>Factura</td>
                                                <td>{{ \Carbon\Carbon::parse($account->created_at)->format('d/m/Y H:i') }}
                                                </td>
                                                <td>{{ \Carbon\Carbon::parse($account->deadline)->format('d/m/Y') }}
                                                </td>
                                                <td>${{ number_format($account->debt, 0, ',', '.') }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <p>
                                Para coordinar el pago o resolver cualquier inquietud, por favor contáctenos a la
                                brevedad.
                                Agradecemos su pronta gestión y quedamos atentos a su respuesta.
                            </p>
                        </td>
                    </tr>

                    <tr>
                        <td class="footer">
                            <p>Este correo fue generado automáticamente. Por favor, no responda.</p>
                            <p>&copy; Todos los derechos reservados.</p>
                        </td>
                    </tr>

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

</html>
