<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
      @media print {
        margin: 1cm 1cm;
        size: A4 portrait;
      }
      @page {
        margin: 1cm 1cm;
        size: A4 portrait;
      }
      header{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100px;
        font-size: 0.9em;
      }
      footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 80px;
        font-size: 0.7em;
      }
      body {
        font-family: sans-serif;
        margin: 2cm 0cm 1.9cm 0cm;
        text-align: justify;
        marginwidth: 0; 
        marginheight: 0;
        font-size: 13px;
      }
      .header,
      .footer {
        position: fixed;
        left: 0px;
        right: 0px;
        color: #222;
        height: 100px;
        font-size: 0.9em;
      }
      .header {
        top: 0;
        /*border-bottom: 0.1pt solid #222;*/
      }
      .footer {
        bottom: -5px;
        height: 50px;
        /*border-top: 0.1pt solid #222;*/
      }
      .header table,
      .footer table {
        width: 100%;
        border-collapse: collapse;
        border: none;
      }
      .header td,
      .footer td {
        padding: 0;
        width: 50%;
      }
      .page-number {
        text-align: center;
        align-content: center;
        align-items: center;
      }
      .page-number:before {
        content: 'Hoja: ' counter(page);
      }
      #contenido{
        width: 100%;
        top: 20px;
        /*bottom: -20px;*/
        /*padding-top: 10px;*/
        /*padding-bottom: 10px;*/
        position: relative;
        /*background-color: green;*/
      }
      main{
        bottom: 20px;
      }
      .tab{
        font-size: 11px;
        border-radius: 10px;
      }
      #encabezado{
        /*background: #fe632d;*/
        background: #0fcec9;
        color: #fff;
        border-radius: 100%;
        font-size: 11px;
      }
      .tabla tr:nth-child(even){
        background: #e6e6e6;
      }          
      .tabla tr:nth-child(odd){
        background: #F7F5F3;
      }
      hr {
        page-break-after: always;
        border: 0;
      }
  </style>
</head>
<body>
   <header id="header" style="page-break-inside: auto;">
      <table style=' width:100%;'>
        <tr style='height:40px;'>
          <td style='width:100%;'>
            <img src="{{ 'http://vinculacion.itzitacuaro.edu.mx/Departamento/public/ServicioSocial/Logos/'.$encabezado[0]->logo_mem }}" align="center" style="max-height: 83px; max-width: 701px;">
          </td>
        </tr>
      </table>
    </header>

    <footer id="footer" style="page-break-inside: auto;">  
      <table width="100%" border="0">
          <tbody>
            <tr>
              <td width="50%" align="left">@if ($leyenda){{$leyenda->izquierda_leyfor}}@endif</td>
              <td width="50%" align="right">@if ($leyenda){{$leyenda->derecha_leyfor}}@endif</td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center;width: 100%; vertical-align: center;">
                <img src="{{ 'http://vinculacion.itzitacuaro.edu.mx/Departamento/public/ServicioSocial/Logos/'.$pie[0]->logo_mem }}" align="center" style="max-height: 83px; max-width: 701px;">
              </td>
            </tr>
          </tbody>
      </table>    
    </footer>

    <main style="page-break-inside: auto;">
      <div id="contenido" style="page-break-inside: auto;">
        <div align="center" ><small style="font-size: 15px;">DEPARTAMENTO DE GESTIÓN TECNOLÓGICA Y VINCULACIÓN<br>PROGRAMA DE ACTIVIDADES DEL PRESTANTE DE SERVICIO SOCIAL</small><br><br>
          Período de realización oficial 
          @foreach ($fi as $fi)
            {{ date('d-m-Y', strtotime($fi->finicio_evecal)) }}
          @endforeach al 
          @foreach ($ft as $ft)
            {{ date('d-m-Y', strtotime($ft->finicio_evecal)) }}  
          @endforeach

          <table class="tabla" align="center" border="1">
            <tr align="center" style="font-size: 15px; font-weight: bold;">
              <td width="10%">No.</td>
              <td width="60%">Actividad a realizar</td>
              <td width="30%">Fecha</td>
            </tr>
            @foreach ($periodos as $p)
              <tr>
                <td align="center" width="10%">{{ $p->id_act }}</td>
                <td width="60%">{{ $p->nombre_act }}</td>
                <td align="center" width="30%">
                  @if ($p->finicio_evecal == $p->ftermino_evecal)
                    {{ date('d-m-Y', strtotime($p->finicio_evecal)) }}
                  @else
                    {{ date('d-m-Y', strtotime($p->finicio_evecal)) }} al {{ date('d-m-Y', strtotime($p->ftermino_evecal)) }}
                  @endif
                </td>
              </tr>
            @endforeach
          </table>
          <br>
          <br>

          <table width="100%" align="center">
            <tr>
              <td align="center">ELABORA</td>
              <td align="center">AUTORIZA</td>
            </tr>
            <tr>
              <td width="50%" align="center">
                @if ($elabora)
                  @foreach ($elabora as $elabora)
                    @if ($elabora->firmaDpto_cal!='')
                      <img src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->generate($elabora->firmaDpto_cal)) !!}" width="150" height="150" style="min-width: 150px; min-height: 150px;">
                      @php
                      ($nombreeee = explode('_', $elabora->firmaDpto_cal))
                      @endphp
                      <br>
                      {{ $nombreeee[0] }}
                    @endif
                  @endforeach
                @endif
                <br>Departamento de Gestión Tecnológica y Vinculación
              </td>
              <td width="50%" align="center">
                @if ($autoriza)
                  @foreach ($autoriza as $autoriza)
                    @if ($autoriza->firmaSub_cal!='')
                      <img src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->generate($autoriza->firmaSub_cal)) !!}" width="150" height="150" style="min-width: 150px; min-height: 150px;">
                      @php
                      ($nombre_2 = explode('_', $autoriza->firmaSub_cal))
                      @endphp
                      <br>
                      {{ $nombre_2[0] }}
                    @endif
                  @endforeach
                @endif
                <br>Subdirección de Planeación y Vinculación
              </td>
            </tr>
          </table>
        </div>
      </div>
    </main>
</body>
</html>