@extends('layouts.consentimientos')

@section('styles')

<link href="https://fonts.googleapis.com/css2?family=Shippori+Antique&display=swap" rel="stylesheet">

<style>
   body {

      font-family: 'Shippori Antique', sans-serif;
      font-weight: lighter;
   }


   .borders {
      border: 1px solid black;
      margin-bottom: 1%;
   }

   .wenas {
      margin-bottom: 2%;
   }

   .txt-lineal {
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 1px solid;
   }

   input {
      font-size: 16px;
      text-transform: uppercase;
      text-align: center;
   }

   @media print {
      .contenedor {
         font-size: 20px;
      }

      .texto1 {
         font-size: 24px;
      }

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

      .borders {
         padding-bottom: 42%;
      }

      input {
         font-size: 20px;
         text-transform: uppercase;
         text-align: center;
      }
   }
</style>
@endsection

@section('content')
<div class="contenedor">
   <div class="row">
      <div class="col">
         <h1 class="text-center" style="color: #00C2CB"> RECETA {{config('app.name')}} </h1>

         <div class="mt-3 mb-3">
            PACIENTE: <input type="text" class="linea" style="width: 60%; text-transform: uppercase;text-align: center;" value="{{$paciente}}" name="dpi">
            FECHA: <input type="text" name="direccion" class="linea" style="width: 20%; text-transform: uppercase;text-align: center;" value="{{$fecha}}" required>
            <br>
         </div>

         <div class="borders">

            <ul class="mt-3">
               @foreach ($recetas as $rece)
               <li>
                  @php
                  echo $rece->recetaNombre;
                  @endphp
               </li>
               @endforeach
            </ul>

         </div>

         <div class="wenas">
            Su Proxima cita es: <input type="text" class="linea" style="width: 73%; text-transform: uppercase; text-align: center;" name="nombre" required>
         </div>

      </div>
   </div>
</div>


@endsection