@foreach ($payrolls as $payroll)
    <!DOCTYPE html>
    <html lang="fr">

    <head>
        <meta charset="UTF-8">
        <title>Bulletin de Paie - {{ $payroll->name }}</title>
        <style>
            body {
                font-family: DejaVu Sans, sans-serif;
                font-size: 12px;
                color: #1f1e1e;
            }

            .logo-title-table,
            .main-table {
                width: 100%;
                border-collapse: collapse;
            }

            .logo-title-table td {
                padding: 4px;
            }

            .header-table,
            .main-table {
                width: 100%;
                border-collapse: collapse;
            }

            .header-table td {
                border: 1px solid #575656;
                padding: 4px;
            }

            .signature-table,
            .main-table {
                width: 100%;
                border-collapse: collapse;
            }

            .signature-table td {
                border: 0px solid #575656;
                padding: 4px;
                height: 120px;
            }



            .societe {
                background-color: #dce6f1;
                font-weight: bold;
                text-align: center;
            }

            .main-table th,
            .main-table td {
                border: 1px solid #575656;
                padding: 4px;
            }

            .main-table th {
                background-color: #f0f0f0;
                text-align: center;
            }

            .right {
                text-align: right;
            }

            .left {
                text-align: left;
            }

            .center {
                text-align: center;
            }

            .bold {
                font-weight: bold;
            }

            .section-title {
                background-color: #f9f9f9;
                font-weight: bold;
            }

            .footer {
                margin-top: 10px;
                text-align: right;
                font-weight: bold;
            }

            .status {
                position: fixed;
                /* stays in place behind content */
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%) rotate(45deg);
                /* center + pivot 45deg */
                transform-origin: center;
                font-size: 60px
                    /* responsive large size */
                    font-weight: 800;
                letter-spacing: 0.5rem;
                color: rgba(0, 0, 0, 0.06);
                /* very subtle — change opacity as needed */
                z-index: 0;
                /* behind normal content which has z-index:auto > 0 */
                pointer-events: none;
                /* doesn't block clicks */
                user-select: none;
                /* not selectable */
                white-space: nowrap;
                text-transform: uppercase;
                mix-blend-mode: multiply;
                /* optional: blends with background */
            }

            .no-border {
                border: 0px !important;
            }
        </style>
    </head>

    <body>
        <h1 class='status'> {{ $payroll->status ?? '-' }} </h1>
        <table class="logo-title-table">
            <tr>
                <td class="left"><img width="120" height="40" src="https://erp.laness.net/icons/logo.png" /></td>
                <td class="right">
                    <h2>ORDER DE VIREMENT</h2>
                    <br>
                    <div>
                        <h4>CREDIT AGRICOLE DU MAROC</h4>
                        <br>
                        <h4>Taroudant</h4>
                        <br>
                        <h4>A MONSIEUR LE DIRECTEUR</h4>
                    </div>
                </td>
            </tr>
        </table>
        <table class="logo-title-table">
            <tr>
                <td class="left">
                    <div><strong>Raison sociale : </strong> STE LANESS GROUP SARL AU </div>
                    <div><strong>Affiliation CNSS : </strong> 121315648 </div>
                    <div><strong>Adresse : </strong> RUE HASSAN 1ER ROUTE OULED SAID A OULED TEIMA OULED TEIMA</div>
                </td>
            </tr>
            <tr>
                <td class="center">
                    <div><strong>Raison sociale : </strong> STE LANESS GROUP SARL AU </div>
                </td>
            </tr>
        </table>
        <br>
        <br>
        <br>



        <table class="signature-table no-border">
            <tr>
                <td>Signature {{ "d'employee" }} :</td>
                <td width="160">Signature {{ "d'employeur" }} :</td>
            </tr>

        </table>


    </body>


    </html>
@endforeach
