@extends('cr_blank')

@section('content')
<div class="document-container">
  <table width="100%" style="border-bottom: 2px solid #000; margin-bottom: 10px;">
    <tr>
      <!-- Imagen -->
      <td width="20%" valign="top">
        <img src="{{ public_path('images/logo_vinto.jpeg') }}" style="max-height: 80px;">
      </td>

      <!-- Título -->
      <td width="60%" align="center" valign="top">
        <div style="font-size: 14pt; font-weight: bold; text-transform: uppercase;">
          GOBIERNO AUTÓNOMO MUNICIPAL DE VINTO
        </div>
        <div style="font-size: 12pt; font-weight: bold; margin-top: 4px; text-transform: uppercase;">
          {{ $title }}
        </div>
        <div style="font-size: 11pt; font-weight: bold; text-align: center;">N° {{ $data->numero }}</div>
      </td>

      <!-- Fecha y número -->
      <td width="20%" align="right" valign="top">

        <table align="right" style="font-size: 10pt; border-collapse: collapse; margin-bottom: 4px;">
          <tr class="text-center">
            <th style="border: 1px solid #000; padding: 2px;">Día</th>
            <th style="border: 1px solid #000; padding: 2px;">Mes</th>
            <th style="border: 1px solid #000; padding: 2px;">Año</th>
          </tr class="text-center">
          <tr>
            <td style="border: 1px solid #000; padding: 2px;">{{ date('d', strtotime($data->fecha)) }}</td>
            <td style="border: 1px solid #000; padding: 2px;">{{ date('m', strtotime($data->fecha)) }}</td>
            <td style="border: 1px solid #000; padding: 2px;">{{ date('Y', strtotime($data->fecha)) }}</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>


  <div class="body">
    <table>
      <tr>
        <td style="width: 50%;">
          <strong>Señor(a):</strong> {{ $data->dirigido_a }}
        </td>
        <td style="width: 50%;">M{{ $data->medidor->manzano->nombre }} - {{ $data->medidor->lote }}{{ $data->medidor->sufijo }}</td>
      </tr>
    </table>
    
    <p class="mt-3">Mediante la presente, se comunica a usted lo siguiente:</p>

    <div class="notification-box">
      <p>{{ $data->descripcion }}</p>
      <p class="consequence">
        En caso de incumplimiento, se procederá conforme a la normativa vigente.
      </p>
    </div>

    <div class="mt-3">
      <p>Agradecemos su atención y comprensión ante la presente notificación.</p>
    </div>

    <div class="signatures mt-5">
      <table class="text-center" style="width: 100%;">
        <tr>
          <td style="width: 50%;">
            <div class="left-signature">
              ___________________________<br>
              <span class="label">DIRECCIÓN O UNIDAD</span>
            </div>
          </td>
          <td style="width: 50%;">
            <div class="right-signature">
              ___________________________<br>
              <span class="label">FIRMA</span>
            </div>
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <div class="right-signature">
              <br>
              <span class="label">NOMBRE:</span> ____________________<br>
              <span class="label">C.I.:</span> ________________________
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <table width="100%" style="margin-top: 60px; border-top: 1px dashed #aaa; padding-top: 10px; font-size: 10px; color: #555;">
    <tr>

      <!-- Texto centrado -->
      <td width="100%" class="text-center">
        Dirección: Av. Albina Patiño Km 17½, Vinto | www.gamvinto.gob.bo
      </td>
    </tr>
  </table>
</div>
<div style="page-break-after: always;"></div>

<!-- Copia -->
<div class="document-container">
  <table width="100%" style="border-bottom: 2px solid #000; margin-bottom: 10px;">
    <tr>
      <!-- Imagen -->
      <td width="20%" valign="top">
        <img src="{{ public_path('images/logo_vinto.jpeg') }}" style="max-height: 80px;">
      </td>

      <!-- Título -->
      <td width="60%" align="center" valign="top">
        <div style="font-size: 14pt; font-weight: bold; text-transform: uppercase;">
          GOBIERNO AUTÓNOMO MUNICIPAL DE VINTO
        </div>
        <div style="font-size: 12pt; font-weight: bold; margin-top: 4px; text-transform: uppercase;">
          {{ $title }}
        </div>
        <div style="font-size: 11pt; font-weight: bold; text-align: center;">N° {{ $data->numero }}</div>
      </td>

      <!-- Fecha y número -->
      <td width="20%" align="right" valign="top">

        <table align="right" style="font-size: 10pt; border-collapse: collapse; margin-bottom: 4px;">
          <tr class="text-center">
            <th style="border: 1px solid #000; padding: 2px;">Día</th>
            <th style="border: 1px solid #000; padding: 2px;">Mes</th>
            <th style="border: 1px solid #000; padding: 2px;">Año</th>
          </tr class="text-center">
          <tr>
            <td style="border: 1px solid #000; padding: 2px;">{{ date('d', strtotime($data->fecha)) }}</td>
            <td style="border: 1px solid #000; padding: 2px;">{{ date('m', strtotime($data->fecha)) }}</td>
            <td style="border: 1px solid #000; padding: 2px;">{{ date('Y', strtotime($data->fecha)) }}</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

  <div class="text-center negrita" style="font-size: 11pt;">(COPIA)</div>

  <div class="body">
    <table>
      <tr>
        <td style="width: 50%;">
          <strong>Señor(a):</strong> {{ $data->dirigido_a }}
        </td>
        <td style="width: 50%;">M{{ $data->medidor->manzano->nombre }} - {{ $data->medidor->lote }}{{ $data->medidor->sufijo }}</td>
      </tr>
    </table>
    
    <p class="mt-3">Mediante la presente, se comunica a usted lo siguiente:</p>

    <div class="notification-box">
      <p>{{ $data->descripcion }}</p>
      <p class="consequence">
        En caso de incumplimiento, se procederá conforme a la normativa vigente.
      </p>
    </div>

    <div class="mt-3">
      <p>Agradecemos su atención y comprensión ante la presente notificación.</p>
    </div>

    <div class="signatures mt-5">
      <table class="text-center" style="width: 100%;">
        <tr>
          <td style="width: 50%;">
            <div class="left-signature">
              ___________________________<br>
              <span class="label">DIRECCIÓN O UNIDAD</span>
            </div>
          </td>
          <td style="width: 50%;">
            <div class="right-signature">
              ___________________________<br>
              <span class="label">FIRMA</span>
            </div>
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <div class="right-signature">
              <br>
              <span class="label">NOMBRE:</span> ____________________<br>
              <span class="label">C.I.:</span> ________________________
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <table width="100%" style="margin-top: 60px; border-top: 1px dashed #aaa; padding-top: 10px; font-size: 10px; color: #555;">
    <tr>

      <!-- Texto centrado -->
      <td width="100%" class="text-center">
        Dirección: Av. Albina Patiño Km 17½, Vinto | www.gamvinto.gob.bo
      </td>
    </tr>
  </table>
</div>
@endsection

@section('scripts')
  <style>
    body {
      font-family: 'DejaVu Sans', sans-serif;
      font-size: 12pt;
      margin: 40px;
      color: #222;
    }

    .document-container {
      max-width: 720px;
      margin: auto;
    }

    .header {
      border-bottom: 2px solid #000;
      padding-bottom: 10px;
      margin-bottom: 20px;
      text-align: center;
    }

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .header-text {
      flex: 1;
    }

    .header-image img {
      max-height: 80px; /* ajusta la altura máxima aquí */
      height: auto;
      width: auto;
      margin-left: 20px;
    }

    .entity {
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
    }

    .document-title {
      font-size: 13px;
      font-weight: bold;
      margin-top: 5px;
      text-transform: uppercase;
    }

    .reference-line {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-top: 10px;
    }

    .fecha-tabla {
      font-size: 10px;
    }

    .fecha-mini {
      border-collapse: collapse;
    }

    .fecha-mini th,
    .fecha-mini td {
      border: 1px solid #000;
      padding: 2px 4px;
      text-align: center;
    }

    .numero-ref {
      font-weight: bold;
      font-size: 12px;
    }

    .header .reference-number {
      font-size: 12px;
      margin-top: 10px;
      text-align: right;
      font-weight: bold;
    }

    .body p {
      margin: 6px 0;
      text-align: justify;
    }

    .notification-box {
      border: 1px solid #999;
      background-color: #f8f9fa;
      padding: 15px;
      margin-top: 10px;
    }

    .consequence {
      margin-top: 10px;
      font-style: italic;
      font-weight: bold;
      /* color: #b30000; */
    }

    .signatures {
      display: flex;
      justify-content: space-between;
      margin-top: 40px;
    }

    .signatures .label {
      font-size: 11px;
      font-weight: normal;
    }

    .footer {
      margin-top: 60px;
      text-align: center;
      font-size: 10px;
      color: #555;
      border-top: 1px dashed #aaa;
      padding-top: 10px;
    }

    .mt-3 {
      margin-top: 20px;
    }

    .mt-5 {
      margin-top: 40px;
    }
  </style>
@endsection