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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <style>
        .header {
            position: absolute;
            top: 0px;
            left: 120px;
            /* background-color: aqua;*/
            width: 225px;
            height: 70px;
            margin-top: 18px;

        }

        .header>.cadre-a {
            /*background-color: brown;*/
            width: 175px;
            height: 25px;
            margin-left: 27px;
            font-size: 14px;

        }

        .header>.cadre-b {
            /* background-color: rgb(78, 230, 48);*/
            width: 225px;
            height: 20px;
            font-size: 12px;
        }

        .header>.cadre-a>.text-a {
            padding: 5px;
            font-weight: bold;
        }

        .header>.cadre-c {
            /* background-color: brown;*/
            width: 110px;
            height: 25px;
            margin-left: 60px;
            font-size: 14px;
        }

        .spa {
            color: rgb(247, 99, 30);
        }

        .main {
            width: 428px;
            position: absolute;
            top: 70px;
            left: 0px;
        }


        .main-b {
            /*background-color: rgb(40, 228, 15);*/
            width: 127.29px;
            height: 150px;
            position: absolute;
            top: 0px;
            left: 118px;
        }

        .asside-a {
            /* background-color: rgb(0, 17, 255);*/
            width: 132.29px;
            height: 150px;
            position: absolute;
            top: 0px;
            left: 246px;
        }

        .asside-c {
            width: 80.29px;
            height: 150px;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .text-b {
            font-size: 12px;
            color: rgb(20, 20, 233);
            margin-left: 27px;

        }

        .image-b {
            margin-left: 17px;
            margin-top: 10px;
        }

        .signture {
            margin-left: 25px;
            margin-top: 10px;
        }

        .titre {
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            font-size: 12px;
            font-style: oblique;
        }

        .s-div {
            /*background-color: brown;*/
            width: 132.29px;
            height: 20px;
            left: 0px;
            top: 0;
        }

        .sexe {
            /* background-color: rgb(218, 188, 20);*/
            width: 66.145px;
            height: 20px;
            left: 0px;
            top: 0;
        }

        .s-div>.taille {
            position: absolute;
            /*background-color: rgb(10, 243, 243);*/
            width: 66.145px;
            height: 20px;
            top: 87px;
            left: 53px;
        }

        .text-d {
            font-size: 12px;
            font-weight:bold;
        }

        .mt {
            margin-top: 6px;
        }

        .mt-4 {
            margin-top: 29px;
            margin-left: 20px;
        }

        .tmin-a {
            font-size: 10px;
            margin-left: 15px;
        }

        .tmin {
            font-size: 10px;
            margin-left: 5px;
        }

        .cadre-bas {
            /*background-color: brown;*/
            width: 132.29px;

            margin-top: 25px;
        }

        .min-text {
            position: absolute;
            top: 100px;
            left: 240px;
            font-size: 9px;
        }

        .bas {
            font-size: 8px;
            position: absolute;
            left: 0px;
            top: 160px;
        }

        .centre {
            margin-left: 45px;
        }

        .gras {
            font-weight: bold;
        }

        /*==========================================================*/
        .partie-2 {
            margin-top: 30px;
            position: relative;

        }

        .partie-2-main {
           /* background-color: violet;*/
            width: 429.85px;
            height: 210px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .partie-2-cadre-a {
           /* background-color: rgb(240, 232, 232);*/
          width: 214.925px;
          margin-top: 20px;
          margin-left: 30px;
        }

        .partie-2-cadre-b {
            margin-top: -86px;
            margin-left: 230px;
           /* background-color: rgb(2, 243, 223);*/
            width: 214.925px;


        }
        .bas-partie-2{
            position: absolute;
            top: 210px;
            left: 20px;
            font-size: 10px;

        }
        .der-partie-2{
            position: absolute;
            top: 250px;
            left: 14px;
            font-size: 9px;
        }
        .page-break {
    page-break-after: always;
}
    </style>

    <div><img src="<?php echo e(asset('assets/img/carteB.jpg')); ?>" width="429.85px" alt=""></div>
    <div class="header">
        <div class="cadre-a">
            <div class="text-a">POLICE REPUBLICAINE</div>
        </div>
        <div class="cadre-b">CARTE D'IDENTITE PROFESSIONNELLE</div>
        <div class="cadre-c">N°<span class="spa"><?php echo e($user->id); ?></span>/<span><?php echo e($user->corps); ?></span></div>
    </div>
    <div class="main">
        <div class="asside-a">
            <div class="cadre-bas">
                <div class="titre">Lieu de Naissance :</div>
                <div class="text-d"><?php echo e($user->VilleNaissance); ?></div>
                <div class="titre">Couleur des Yeux :</div>
                <div class="text-d"><?php echo e($user->couleurYeux); ?></div>
                <div class="mt-4">
                <img alt="img" src="https://cartepro.bj/polrep/public/signatures/64479799298a0.png" width="57px" height="20px"></div>
                <div class="tmin-a ">Soumaïla A.YAYA</div>
                <div class="tmin">Contoleur Général de Police</div>
            </div>

        </div>
        <div class="min-text">Par le Directeur Générale de la Police Républicaine</div>

        <div class="main-b">
            <div class="titre">Nom :</div>
            <div class="text-d"><?php echo e($user->nom); ?></div>
            <div class="titre">Prenoms :</div>
            <div class="text-d"><?php echo e($user->prenoms); ?></div>
            <div class="titre">Date de Naissance :</div>
            <div class="text-d"><?php echo e($user->dateNaissance); ?></div>
            <div class="s-div">
                <div class="sexe">
                    <div class="titre">Sexe :</div>
                    <div class="text-d"><?php echo e($user->sexe); ?></div>
                </div>

                <div class="taille">
                    <div class="titre">Taille :</div>
                    <div class="text-d"><?php echo e($user->taille); ?></div>
                </div>

            </div>
            <div class="titre mt">Date de délivrance :</div>
            <div class="text-d">21/02/22</div>
        </div>
        <div class="asside-c">
            <div class="text-b">
              <?php echo e($user->corps); ?>

            </div>
            <div class="image-b">
                <img src="<?php echo e($photo_url); ?>" width="80px" height="80px">
            </div>

            <div class="signture">
                <img src="<?php echo e($signature_url); ?>" width="60px" height="25px">
            </div>
        </div>
        <div class="bas">Les autorités civiles et militaires sont invitées à <span class="gras">LAISSER PASSER ET
                CIRCULER LIBREMENT </span> le titulaire de
             la présente <span class="centre">carte qui est autorisé à requérir pour les besoins du service de la
                force publique.</span>
        </div>
    </div>
    <div class="page-break"></div>
    <div class="partie-2">
        <div><img src="<?php echo e(asset('assets/img/carteA.jpg')); ?>" width="429.85px" alt=""> </div>
        <div class="partie-2-main">
            <div class="partie-2-cadre-a">
                <div class="titre"> Grade: </div>
                <div class="text-d"><?php echo e($user->grade); ?></div>
                <div class="titre">N°Matricule: </div>
                <div class="text-d"><?php echo e($user->matricule); ?></div>
                <div class="titre">Signe particuliers: </div>
                <div class="text-d"><?php echo e($user->signePart); ?></div>
            </div>
            <div class="partie-2-cadre-b">
                <div class="titre"> Groupe Sanguin:</div>
                <div class="text-d"><?php echo e($user->groupeSanguin); ?></div>
                <div class="titre">N°Téléphone:</div>
                <div class="text-d"><?php echo e($user->telephone); ?></div>
            </div>
            <div class="bas-partie-2"><?php echo e($user->corps); ?> <?php echo e($user->nom); ?> <?php echo e($user->prenoms); ?> PR<?php echo e($user->id); ?>BEN19870114M478 DGPR220121</div>
            <div class="der-partie-2">En cas de découverte de la carte, prière la déposer à l'unité de police ou commissariat de police le plus proche.</div>
        </div>
        </div>

    </div>

</body>

</html>
<?php /**PATH /home/p59qce1cziqc/public_html/cartepro.bj/polreps/resources/views/pdf/carte.blade.php ENDPATH**/ ?>