<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
    * {
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif';
    }

    body {
        font-size: 0.8em;
        overflow: hidden;
        background: #e8e8e8;
    }

    .rapport {
        transform: rotate(90deg);
        margin-top: 300;
        margin-right: 400px;
        /* display: inline-block; */
    }

    .footer {
        margin-top: 350px;
        margin-left: -400px;
        transform: rotate(90deg);
        /* display: inline-block; */
    }

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

    .logo {
        transform: rotate(90deg);

    }

    .car {
        display: inline-block;
        margin-left: 280px;
        border-radius: 15px;
        transform: rotate(90deg);
        height: 340px;
        width: 250px;
        border: #1836B2 2px solid;

    }

    #p {
        margin-left: 550px;
        margin-top: 70px;
        color: #000000;
        transform: rotate(90deg);
        display: inline-block;
    }

    .marque {
        border-bottom: #1836B2 2px solid;
        height: 40px;
        padding: 10px;
        text-align: center;
    }

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: inline-block;
    }

    ul li {
        border: 1px solid rgb(72, 70, 70);
        margin-top: -1px;
        display: inline-block;
        padding: 10px;
        width: 300px;
    }

    .row {
        transform: rotate(90deg);
    }

    /* table, */
    tr,
    td {
        border: #DCDCDC 1px solid;
        border-radius: 10px;
    }

    table {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .point-chock {
        height: 300px;
        width: 300px;
        border: #000000 2px solid;
        transform: rotate(90deg);
    }

    #titre {
        z-index: 1;
        border: #1836B2 2px solid;
        border-radius: 50px;
        display: inline-block;
        margin-top: -35px;
        margin-left: 25px;
        padding: 5px;
    }

    #point {
        padding: 5px;
        z-index: 1;
        border: #1836B2 2px solid;
        border-radius: 50px;
        display: inline-block;
        margin: 10px 0 -20px 60px;
    }

    #chock {
        margin-top: 20px;
        /* padding: 5px; */
        border: #1836B2 2px solid;
        z-index: 1;
        border-radius: 10px;
    }

    #dossier {
        border: #1836B2 2px solid;
        border-radius: 50px;
        display: inline-block;
        margin-top: -35px;
        margin-left: 85px;
        padding: 5px;
    }
    .background-image {
        position: fixed;
        top: 0;
        left: 0;
        width: 170px; /* Make the image width 100% of the available space */
        object-fit: cover; /* Ensure the image covers the entire area without distortion */
        z-index: -1; /* Place the image behind other content */
        transform: rotate(90deg);
        margin-top: 45px;
        margin-left: 570px;

    }
</style>

<body>

    <img style="margin-top:160px" class="logo" src="img/amea2.png" alt="">
    <div class="rapport">
        <span>
            RAPPORT TECHNIQUE
            <br> Mohammedia {{ $today->toFormattedDateString() }}
        </span>
    </div>

    <div class="page-break"></div>
    <img class="background-image" src="img/amea2.png" alt="">
<br>
    <p id="p">Fiche du dossier</p>
    <div class="sparator-1"></div>
    <div class="car" style="margin-top:-100px; width: 230px;">
        <div class="marque">
            <p>{{ $dossier->vehiculemodel->brand->brand ?? null }}/{{ $dossier->vehiculemodel->name ?? null }}</p>
        </div>
        <div>
            <img src="{{ Storage::disk('s3')->temporaryUrl($voiture->path, now()->addMinutes(30)) }}" alt=""
                style="object-fit:cover; background-size:cover;
        background-repeat: no-repeat; width:229px ; height:278px; border-bottom-left-radius: 15px;border-bottom-right-radius: 15px">
        </div>
    </div>
    <div class="car" style="margin-top:-30px; width:230px; border: none;">
        <div style="border: 2px solid #1836B2; border-radius: 10px;">
            <div id="titre">
                <img src="img/1.png" style="height: 20px; width: auto; " alt="">
                Identification du véhicule
            </div>
            <table style="width: 100%; border-radius:10px; ">
                <tbody>
                    <tr>
                        <td>Immatricule</td>
                        <td>{{ $dossier->matricule ?? $dossier->new_matricule }}</td>
                    </tr>

                    <tr>
                        <td>VIN</td>
                        <td>{{ $dossier->numero_chassis ?? null }}</td>
                    </tr>
                    <tr>
                        <td>Date Sinistre</td>
                        <td>{{ $dossier->date_sinistre ?? null }}</td>
                    </tr>
                    <tr>
                        <td>Puissance fiscale</td>
                        <td>{{ $dossier->puissance_fiscale ?? null }}cv</td>
                    </tr>
                    <tr>
                        <td>Prix d'achat</td>
                        <td>{{ $dossier->valeurneuf ?? null }}</td>
                    </tr>
                    <tr>
                        <td>Nom du propriétaire</td>
                        <td>{{ $dossier->insured->name ?? null }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div>
            <div id="point" style=" margin-top:40px; ">
                <img src="img/3.png" style="height: 20px; width: auto; " alt="">
                Point chock
            </div>
            <div id="chock">
                <img src="{{ Storage::disk('s3')->temporaryUrl($chock->path, now()->addMinutes(30)) }}" alt=""
                    style="object-fit: cover; background-size: cover;
            background-repeat: no-repeat; width:226px ; height:160px; border-radius: 10px;">
            </div>
        </div>
    </div>

    <div class="car" style="margin-top:-25px !important; width: 230px;">
        <div id="dossier">
            <img src="img/2.png" style=" height: 20px; width: auto; " alt="">
            Dossier
        </div>
        <table style="width: 100%; border-radius: 10px;">
            <tbody>
                <tr>
                    <td>Assureur</td>
                    <td>{{ $dossier->company->company ?? ($dossier->intermidiaire->company ?? null) }}</td>
                </tr>
                <tr>
                    <td>Adversaire</td>
                    <td>{{ $dossier->opponent->company->company ?? null }}</td>
                </tr>
                <tr>
                    <td>Reference</td>
                    <td>{{ $dossier->ref }}</td>
                </tr>
                <tr>
                    <td>Rapport effectué par</td>
                    <td>{{ Auth::user()->name }}</td>
                </tr>
                <tr>
                    <td>Date Sinistre</td>
                    <td>{{ $dossier->date_sinistre ?? null }}</td>
                </tr>
                <tr>
                    <td>Numéro Sinistre</td>
                    <td>{{ $dossier->numero_sinistre ?? null }}</td>
                </tr>
            </tbody>
        </table>

        <p style="font-size:0.8em ; padding: 3px;">
            CONCLUSION: <br>
            {{ $conclusion ?? null }} </p>
        <p style="background: #b4b5b5; font-size:0.9em ;">TOTALE DES DOMMAGES: <span>{{ $dommage ?? null }}
                {{ $dossier->currency->symbole ?? null }} </span></p>
        <p style="background: #b4b5b5; font-size:0.9em ;">Décision: <span>DOUTE</span></p>

    </div>
    {{-- <img style="width:100px;transform: rotate(90deg);
        margin-top:50px;"  src="img/amea2.png" alt=""> --}}


    <div class="page-break"></div>
    <div>
        {{-- <img  class="background-image" src="img/amea2.png" alt=""> --}}

        @foreach ($array as $item)
            <div class="car" style=" margin-top:-30px; width:230px; border:none">
                <div>
                    <img src="{{ $item['img'] }}" alt=""
                        style="object-fit: cover; background-size: cover;background-repeat: no-repeat; width:225px ; height:200px; z-index: 1; padding: 5px;">
                </div>
                <div>
                    <div style="width:220px; height:200px; border:#1836B2 1px solid; padding: 5px;">
                        {{ $item['body'] }}
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <div class="page-break"></div>
    <img src="img/contact.png"
        style="transform: rotate(90deg); height: 700px; width: auto; margin-top:210px !important; background:#e8e8e8;"
        alt="">

    <script type="text/php">
            if (isset($pdf)) {
                $pageText = "{PAGE_NUM} / {PAGE_COUNT}";
                $font = null;
                $size = 12;
                $color = array(0, 0, 0);
                $wordSpace = 0.0;
                $charSpace = 0.0;
                $angle = 0.0;
                $x = 280;
                $y = 800;
                $align = 'center';
                $font = $fontMetrics->get_font("Arial", "bold");
                $pdf->page_text($x, $y, $pageText, $font, $size, $color, $wordSpace, $charSpace, $angle);
            }
    </script>
</body>

</html>
