  <!DOCTYPE html>
  <html>
  <head>
    <title></title>
    
    <style type="text/css">
      @page {
        margin: 1cm 2cm;
        margin-top: 250px;
        margin-bottom: 230px;
      }

      .marca:before {
        content: "CANCELADA"; 
        font-size: 10em;  
        color: rgba(220, 52, 69, 0.4);
        z-index: 9999;
       
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: rotate(330deg);
          
        
      }

      body {
        font-family: sans-serif;
        margin: -.3cm 0;
        text-align: justify;
        font-size: 0.9em;
      }

      #header,
      #footer,
      .content {
        position: fixed;
        left: 0;
        right: 0;
        font-size: 0.9em;
      }

      #header { top: -202px; }
      #footer { bottom: 0px; }

      #header table,
      #footer table,
      .content table {
        width: 100%;
        border-collapse: collapse;
        border: none;
      }

      #header td,
      #footer td,
      .content td {
        padding: 0;
      }

      .page-number::before { content: "Página " counter(page); }
      .bb{ border-bottom:1px solid black; }
      .tc{ text-align: center; vertical-align: middle; }
      .tr{ text-align: right; vertical-align: middle; }
      table{
        display: table;
        border-collapse: collapse;
        border-spacing: 0px;
        border-color: black;
      }

      .mt-2{ margin-top: 2px; }
      .mt-5{ margin-top: 5px; }
      .mt-10{ margin-top: 10px; }
      .mb-10{ margin-bottom: 20px; }
      .mb-5{ margin-bottom: 5px; }
      .ml-5{ margin-left: 10px; }
      .ptb-2{ padding: 2px 0px; }
      .p-4{ padding: 4px; }

      .un{
        text-transform: uppercase;
        font-weight: bold;
      }

      .table{
        display: table;
        /*border: 1px solid black;*/
        border-top: 0px;
        border-collapse: collapse;
        width: 100%;
      }

      .ren{ display: table-row; }

      .colum{
        display: table-cell;
        border: 1px solid black;
        /*border-bottom: 0.1pt;*/
      }

      .pie{
        position: fixed;
        top: 490px;
        font-size: 10px;
        width: 100%
      }

    </style>
  </head>
  <body>

    <div id="header">
      <img src="{{ public_path('/img/requisicion/encabezado_2020.png') }}">
      
      <div class="tc mb-5" style="font-size: 16px;"><b>SELECCIÓN DE PROVEEDORES</b></div>
      <div>
        <table>
          <tr>
            <td style="width: 80%;"><div><b>Nombre de la empresa:</b></div></td>
            <td style="width: 270%;"><div class="bb "><label>{{ $proveedor->nombre }}</label></div></td>
            <td style="width: 30%;"><div><b>Fecha:</b></div></td>
            <td style="width: 150%;"><div class="bb ">{{ $proveedor->seleccion->fecha->format('d/m/Y') }}</div></td>
          </tr>
        </table>
        <table>
          <tr>
            <td style="width: 40%;"><div><b>Domicilio:</b></div></td>
            <td style="width: 290%;"><div class="bb "><label>{{ $proveedor->calle }} {{ $proveedor->numero }}</label></div></td>
            <td style="width: 30%;" ><div><b>Ciudad:</b></div></td>
            <td style="width: 140%;"><div class="bb ">{{ $proveedor->ciudad }}</div></td>
          </tr>
        </table>
        <table>
          <tr>
            <td style="width: 40%;"><div><b>Teléfono:</b></div></td>
            <td style="width: 270%;"><div class="bb "><label>{{ $proveedor->telefono_1 }}</label></div></td>
            <td style="width: 60%;" ><div><b>Correo Electrónico:</b></div></td>
            <td style="width: 100%;"><div class="bb ">{{ $proveedor->correo }}</div></td>
          </tr>
        </table>
        <table>
          <tr>
            <td style="width: 120%;"><div><b>Propietario o representante legal:</b></div></td>
            <td style="width: 250%;"><div class="bb "><label>{{ $proveedor->representante_legal }}</label></div></td>
            <td style="width: 30%;" ><div><b>R.F.C.:</b></div></td>
            <td style="width: 160%;"><div class="bb ">{{ $proveedor->rfc }}</div></td>
          </tr>
        </table>
      </div>
      
    </div>

    <div id="footer">
      <table  class="tc" style="border-collapse: separate; border-spacing: 12px; table-layout: fixed;width: 100%;">
        <tr>
          <td style="background: #f3f3f3;"><div >PENDIENTE</div></td>
          <td>@include('requisicion.qr_pdf', ['firma' => $proveedor->seleccion->firma ])</td>
        </tr>
      </table>
      <div class="pie tc" >
        <table style="table-layout: fixed;width: 100%;">
          <tr>
            <td><div><b>{{ $opc->codigo }}</b></div></td>
            <td><div class="page-number" style="text-align: center;"></div></td>
            <td><div class="tr"><b>Rev.{{ $opc->revision }}</b></div></td>
          </tr>
        </table>
      </div>
    </div>

    <div class="table">
      <div class="ren">
        <div class="colum tc p-4" style="width: 40%"><b>PUNTOS</b></div>
        <div class="colum tc p-4" style="width: 300%;"><b>CRITERIOS</b></div>
        <div class="colum tc p-4" style="width: 60%;"><b>CALIFICACIÓN</b></div>
      </div>
    </div>
    @php $i = 0; @endphp
    @foreach ($proveedor->seleccion->puntos as $d)
      
      <div class="table">
        <div class="ren">
          <div class="colum tc" style="width: 40%">{{ $d->criterios->puntos }}</div>
          <div class="colum ptb-2" style="width: 300%;">{{ $d->criterios->criterio }}</div>
          <div class="colum tc" style="width: 60%;">{{ $d->puntos }}</div>
        </div>
      </div>
      @php $i = $i+$d->puntos; @endphp
    @endforeach
            
    <div class="table">
      <div class="ren">
        <div class="colum un tr" style="width: 340%;">TOTAL DE PUNTOS OBTENIDOS  &nbsp;</div>
        <div class="colum un tc" style="width: 60%;">{{ $i }}</div>
      </div>
    </div>
    
    <br>

    <div><b>COMENTARIOS:</b><u>{{ $proveedor->seleccion->comentarios }}</u></div>
    <div style="margin-top:10px;"><b>Nota:</b>El proveedor se considera seleccionado, si totaliza un mínimo de 70 puntos.</div>
      
  </body>
  </html>