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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=190mm, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pdf</title>
</head>
<style>
    @page {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    section {
        width: 95mm;
        height: 145mm;
        position: relative;
        left: 30px;
        top: 30px;
        /* left: 26.5%; */
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
</style>

<body>
    <section>
        <div>
            <img style="width: 95mm; height: 125mm; position:absolute; z-index: 1;"
                src="{{ public_path('images/carnet/carnet-1.jpg') }}" alt="imagen body 1">
            <img style="width: 43mm; height: 17mm; position:absolute; z-index: 2; top:5mm; left: 5mm;"
                src="{{ public_path('images/carnet/chilca-logo.png') }}" alt="imagen chilca">

            @if (
                $pivote_horario_carrera_estudiante->pivote_horario &&
                    $pivote_horario_carrera_estudiante->pivote_horario->ciclo &&
                    $pivote_horario_carrera_estudiante->pivote_horario->ciclo->estado === 'CADUCADO')
                <img style="width: 80mm; height: 40mm; position:absolute; top:150px; left: 40px; z-index: 5;"
                    src="{{ public_path('images/carnet/imagen-vencido.svg') }}" alt="imagen vencido">
            @endif

            <h1 style="position:absolute; top:20mm; z-index: 2; color: white; font-size: 30px; text-align: center;">
                CARNET ÚNICO DEL ESTUDIANTE
            </h1>

            <article style="position:absolute; top:60mm; z-index: 2; height: 494px; width: 100%;">


                <section style="height: 145px; left: 0; top: 4px;">

                    <img style="position:absolute; left: 50mm; top:10px; width: 32mm; height: 32mm;"
                        src="data:image/png;base64, {{ $pivote_horario_carrera_estudiante->codigoQR }}" alt="Código QR">

                    <img style="position:absolute; left: 20mm; top:-14px; width: 32mm; height: 40mm;"
                        src="{{ $pivote_horario_carrera_estudiante->estudiante->fotografia }}" alt="Imagen de persona">

                </section>

                <div style="text-align: center; margin: 5px 20px; ">

                    @if ($pivote_horario_carrera_estudiante->estudiante && $pivote_horario_carrera_estudiante->estudiante->persona)
                        <h3 style="font-size: 19px; line-height: 0.8; height: 42px; margin: 0;">
                            {{ $pivote_horario_carrera_estudiante->estudiante->persona->apellido_paterno }}
                            {{ $pivote_horario_carrera_estudiante->estudiante->persona->apellido_materno }}
                            {{ $pivote_horario_carrera_estudiante->estudiante->persona->nombres }}

                        </h3>
                        <h3 style="font-size: 19px; line-height: 0.9; margin: 0;">
                            {{ $pivote_horario_carrera_estudiante->estudiante->persona->dni }}
                        </h3>
                    @endif

                </div>
                <footer style="text-align: center; height: 20px; margin-top: 12px;">
                    <div style="color: white; font-size: 23px; line-height: 0.9;">
                        <strong>
                            {{ \Carbon\Carbon::parse($pivote_horario_carrera_estudiante->pivote_horario->ciclo->fecha_inicio)->year }}
                        </strong>
                    </div>
                </footer>
            </article>
        </div>
        <div style="position: absolute; top:0px; left: 370px;">
            <img style="width: 95mm; height: 125mm; position:absolute; z-index: 1;"
                src="{{ public_path('images/carnet/carnet-2.jpg') }}" alt="imagen body 1">

            @if (
                $pivote_horario_carrera_estudiante->pivote_horario &&
                    $pivote_horario_carrera_estudiante->pivote_horario->ciclo &&
                    $pivote_horario_carrera_estudiante->pivote_horario->ciclo->estado === 'CADUCADO')
                <img style="width: 80mm; height: 40mm; position:absolute; top:150px; left: 40px; z-index: 5;"
                    src="{{ public_path('images/carnet/imagen-vencido.svg') }}" alt="imagen vencido">
            @endif

            <article style="position:absolute; z-index: 2; height: 494px; width: 100%;">
                <h1 style="color:white; position:absolute; z-index:3; left:3mm; font-size: 15px; ">
                    <b> SUB GERENCIA DEL INSTITUTO DE CULTURA </b>
                </h1>
                <div style="color:white; position:absolute; z-index:3; top:39px; left:35mm; font-size: 14px;">
                    <b>ESTUDIANTE</b>
                </div>
                <div style="position: absolute; top:63px; font-size: 13px; z-index: 3; left: 11mm; color:white;">
                    <b>DNI</b>
                </div>
                <div style="position: absolute; top:85px; font-size: 13px; z-index: 3; left: 15mm; ">
                    @if ($pivote_horario_carrera_estudiante->estudiante && $pivote_horario_carrera_estudiante->estudiante->persona)
                        <p style="font-size: 15px; line-height: 0.8; height: 42px; margin: 0;">
                            {{ $pivote_horario_carrera_estudiante->estudiante->persona->dni }}
                        </p>
                    @endif
                </div>
                <div style="position: absolute; top:63px; font-size: 13px; z-index: 3; left: 54mm; color:white;">
                    <b>CELULAR</b>
                </div>
                <div style="position: absolute; top:85px; font-size: 13px; z-index: 3; left: 55mm; ">
                    @if ($pivote_horario_carrera_estudiante->estudiante && $pivote_horario_carrera_estudiante->estudiante->persona)
                        <p style="font-size: 15px; line-height: 0.8; height: 42px; margin: 0;">
                            {{ $pivote_horario_carrera_estudiante->estudiante->persona->celular }}
                        </p>
                    @endif
                </div>
                <div style="position: absolute; top:106px; font-size: 13px; z-index: 3; left: 11mm; color:white;">
                    <b>DATOS</b>
                </div>
                <div style="position: absolute; top:129px; z-index: 3; left: 13mm; ">
                    @if ($pivote_horario_carrera_estudiante->estudiante && $pivote_horario_carrera_estudiante->estudiante->persona)
                        <p style="font-size: 12px; line-height: 0.8; height: 42px; margin: 0;">
                            {{ $pivote_horario_carrera_estudiante->estudiante->persona->nombres }}
                            {{ $pivote_horario_carrera_estudiante->estudiante->persona->apellido_paterno }}
                            {{ $pivote_horario_carrera_estudiante->estudiante->persona->apellido_materno }}
                        </p>
                    @endif
                </div>

                <div style="position: absolute; top:149px; font-size: 13px; z-index: 3; left: 11mm; color:white;">
                    <b>CICLO</b>
                </div>
                <div style="position: absolute; top:172px; z-index: 3; left: 13mm; ">
                    @if ($pivote_horario_carrera_estudiante->pivote_horario && $pivote_horario_carrera_estudiante->pivote_horario->ciclo)
                        <p style="font-size: 12px; line-height: 0.8; height: 42px; margin: 0;">
                            {{ $pivote_horario_carrera_estudiante->pivote_horario->ciclo->nombre }}
                        </p>
                    @endif
                </div>
                <div style="position: absolute; top:191px; font-size: 13px; z-index: 3; left: 11mm; color:white;">
                    <b>CARRERA</b>
                </div>
                <div style="position: absolute; top:214px; z-index: 3; left: 13mm; ">
                    @if ($pivote_horario_carrera_estudiante->carrera)
                        <p style="font-size: 12px; line-height: 0.8; height: 42px; margin: 0;">
                            {{ $pivote_horario_carrera_estudiante->carrera->nombre }}
                        </p>
                    @endif
                </div>

                <div style="color:white; position:absolute; z-index:3; top:233px; left:35mm; font-size: 14px;">
                    <b>APODERADO</b>
                </div>
                <div style="position: absolute; top:257px; font-size: 13px; z-index: 3; left: 11mm; color:white;">
                    <b>DNI</b>
                </div>
                <div style="position: absolute; top:279px; font-size: 13px; z-index: 3; left: 15mm; ">
                    @if (
                        $pivote_horario_carrera_estudiante->estudiante &&
                            $pivote_horario_carrera_estudiante->estudiante->apoderado &&
                            $pivote_horario_carrera_estudiante->estudiante->apoderado->persona)
                        <p style="font-size: 15px; line-height: 0.8; height: 42px; margin: 0;">
                            {{ $pivote_horario_carrera_estudiante->estudiante->apoderado->persona->dni }}
                        </p>
                    @endif
                </div>
                <div style="position: absolute; top:257px; font-size: 13px; z-index: 3; left: 54mm; color:white;">
                    <b>CELULAR</b>
                </div>
                <div style="position: absolute; top:279px; font-size: 13px; z-index: 3; left: 55mm; ">
                    @if ($pivote_horario_carrera_estudiante->estudiante && $pivote_horario_carrera_estudiante->estudiante->persona)
                        <p style="font-size: 15px; line-height: 0.8; height: 42px; margin: 0;">
                            {{ $pivote_horario_carrera_estudiante->estudiante->persona->celular }}
                        </p>
                    @endif
                </div>
                <div style="position: absolute; top:300px; font-size: 13px; z-index: 3; left: 11mm; color:white;">
                    <b>DATOS</b>
                </div>
                <div style="position: absolute; top:324px; z-index: 3; left: 13mm; ">
                    @if ($pivote_horario_carrera_estudiante->estudiante && $pivote_horario_carrera_estudiante->estudiante->persona)
                        <p style="font-size: 12px; line-height: 0.8; height: 42px; margin: 0;">
                            {{ $pivote_horario_carrera_estudiante->estudiante->persona->nombres }}
                            {{ $pivote_horario_carrera_estudiante->estudiante->persona->apellido_paterno }}
                            {{ $pivote_horario_carrera_estudiante->estudiante->persona->apellido_materno }}
                        </p>
                    @endif
                </div>
                <img style="position: absolute; top:98mm; left: 35mm; width: 28mm; height: 15mm; position:absolute; z-index: 3;"
                    src="{{ public_path('images/carnet/damas.png') }}" alt="imagen damas ">
                <img style="position: absolute; top:115mm; left: 18mm; width: 60mm; height: 7mm; position:absolute; z-index: 3;"
                    src="{{ public_path('images/carnet/calidad.png') }}" alt="imagen texto">
        </div>
        </article>
        </div>
    </section>
</body>
</html>
