<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DATA PENGANTARAN</title>
    <link href="{{ base_path() . '/public/assets/vendor/bootstrap-5.0.2-dist/css/bootstrap.css' }}" rel="stylesheet">
    <style>
        @page {
            margin: 0;
        }

        * {
            /* margin: 0; */
            line-height: 1.2;
            color: #000;
        }

        /* html { margin: 0} */

        body {
            font-weight: 400;
            margin: 1.5cm 1cm 1cm 1cm;
        }

        .word-break {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .page-break {
            page-break-after: always;
        }

        strong {
            font-weight: 1000;
        }

        .general-photo {
            max-width: 600px;
            max-height: 400px;
        }

        .dynamic-photo {
            max-width: 80%;
            max-height: 40%;
        }

    </style>
</head>

<body>

    <table class="table mb-2">
        <tbody>
            <tr>
                <td>
                    <p style="margin:0 0 1rem 0.25rem;font-size:24px;"><strong>DATA PENGANTARAN</strong></p>
                </td>
                <td class="text-end"><img src="{{ base_path() . '/public/images/bonceng-red.png' }}"
                        alt="PT. BONCENG INDONESIA" style="margin:0 1.5rem 0 0;"></td>
            </tr>
        </tbody>
    </table>
    <table class="table mb-3">
        <tbody>
            <tr>
                <td>
                    <p style="margin:0 0 1rem 0.25rem;font-size:16px;"><strong>Foto mobil tiba di tujuan</strong></p>
                </td>
            </tr>
            <tr>
                <td><img src="{{ base_path() . '/public/storage/' . $order->ord_drop_arrived_img }}"
                        alt="Foto mobil tiba di tujuan" class="dynamic-photo"></td>
            </tr>
        </tbody>
    </table>

    <table class="table mb-3">
        <tbody>
            <tr>
                <td>
                    <p style="margin:0 0 1rem 0.25rem;font-size:16px;"><strong>Foto serah terima</strong></p>
                </td>
            </tr>
            <tr>
                <td><img src="{{ base_path() . '/public/storage/' . $order->ord_drop_handover_img }}"
                        alt="Foto serah terima" class="dynamic-photo"></td>
            </tr>
        </tbody>
    </table>

    <div class="page-break"></div>
    <table class="table mb-2">
        <tbody>
            <tr>
                <td>
                    <p style="margin:0 0 1rem 0.25rem;font-size:24px;"><strong>DATA PENGANTARAN</strong></p>
                </td>
                <td class="text-end"><img src="{{ base_path() . '/public/images/bonceng-red.png' }}"
                        alt="PT. BONCENG INDONESIA" style="margin:0 1.5rem 0 0;"></td>
            </tr>
        </tbody>
    </table>
    <table class="table mb-3">
        <tbody>
            <tr>
                <td>
                    <p style="margin:0 0 1rem 0.25rem;font-size:16px;"><strong>Foto DO yg sudah di TTD</strong></p>
                </td>
            </tr>
            <tr>
                <td><img src="{{ base_path() . '/public/storage/' . $order->ord_drop_do_ttd_img }}"
                        alt="Foto DO yg sudah di TTD" class="dynamic-photo"></td>
            </tr>
        </tbody>
    </table>

    <table class="table mb-3">
        <tbody>
            <tr>
                <td>
                    <p style="margin:0 0 1rem 0.25rem;font-size:16px;"><strong>Foto surat jalan di TTD</strong></p>
                </td>
            </tr>
            <tr>
                <td><img src="{{ base_path() . '/public/storage/' . $order->ord_drop_spk_img }}"
                        alt="Foto surat jalan di TTD" class="dynamic-photo"></td>
            </tr>
        </tbody>
    </table>

</body>

</html>
