@extends('intranet/personero/layoutpersonero')
@section('title3', 'Personero')

@section('content3')

<div class="distritos-container">

  <!-- Distrito Nauta -->
  <div class="distrito" style="margin-top: 40px;">
    <h2 style="text-align:center; margin-bottom: 25px;font-size: 25px;">Registro de votos del distrito de Nauta</h2>

    <div class="candidato-block">
      <img src="https://th.bing.com/th/id/OIP.BBkKzE3OUCNwEQhopXNu5QHaGV?cb=iwc2&rs=1&pid=ImgDetMain" alt="Partido Amanecer de Nuevo" class="candidato-img-partido" />
      <div class="candidato-info">PARTIDO POLÍTICO AMANECER DE NUEVO</div>
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Candidato 1" class="candidato-img-persona" />
      <input type="number" id="votos1" name="votos1" min="0" placeholder="0" class="candidato-input" inputmode="numeric" />
    </div>

    <div class="candidato-block">
      <img src="https://th.bing.com/th/id/OIP.uUykCrm24irTozDqVP8JQgHaHQ?cb=iwc2&pid=ImgDet&w=474&h=464&rs=1" alt="Partido Paz y Amor" class="candidato-img-partido" />
      <div class="candidato-info">PARTIDO POLÍTICO PAZ Y AMOR</div>
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Candidato 2" class="candidato-img-persona" />
      <input type="number" id="votos2" name="votos2" min="0" placeholder="0" class="candidato-input" inputmode="numeric" />
    </div>

    <div class="candidato-block">
      <img src="https://th.bing.com/th/id/OIP.qfTdhu8HjL71V0iGq543dAHaHa?cb=iwc2&pid=ImgDet&w=474&h=474&rs=1" alt="Partido Gotas de Lluvia" class="candidato-img-partido" />
      <div class="candidato-info">PARTIDO POLÍTICO GOTAS DE LLUVIA</div>
      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Candidato 3" class="candidato-img-persona" />
      <input type="number" id="votos3" name="votos3" min="0" placeholder="0" class="candidato-input" inputmode="numeric" />
    </div>

    <div class="candidato-block">
      <img src="https://th.bing.com/th/id/OIP.NCZK47scKO2XxKvGJ2XPBQAAAA?cb=iwc2&rs=1&pid=ImgDetMain" alt="Partido Me Falta el Aliento" class="candidato-img-partido" />
      <div class="candidato-info">PARTIDO POLÍTICO ME FALTA EL ALIENTO</div>
      <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Candidato 4" class="candidato-img-persona" />
      <input type="number" id="votos4" name="votos4" min="0" placeholder="0" class="candidato-input" inputmode="numeric" />
    </div>

    <div class="candidato-block">
      <img src="https://th.bing.com/th/id/OIP.akr5f9KgtHc1IFYGTrrB0wHaHa?cb=iwc2&pid=ImgDetMain" alt="Partido En la Distancia" class="candidato-img-partido" />
      <div class="candidato-info">PARTIDO POLÍTICO EN LA DISTANCIA</div>
      <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Candidato 5" class="candidato-img-persona" />
      <input type="number" id="votos5" name="votos5" min="0" placeholder="0" class="candidato-input" inputmode="numeric" />
    </div>

    <div class="candidato-block">
      <img src="https://th.bing.com/th/id/OIP.l0tjBz5232JhTNyrumeGrQHaFj?cb=iwc2&rs=1&pid=ImgDetMain" alt="Partido Al Otro Lado" class="candidato-img-partido" />
      <div class="candidato-info">PARTIDO POLÍTICO AL OTRO LADO</div>
      <img src="https://randomuser.me/api/portraits/men/6.jpg" alt="Candidato 6" class="candidato-img-persona" />
      <input type="number" id="votos6" name="votos6" min="0" placeholder="0" class="candidato-input" inputmode="numeric" />
    </div>

    <div class="votos-blanco">
      Votos en blanco o viciados
      <input type="number" id="votos_blanco_loreto" name="votos_blanco_loreto" min="0" placeholder="0" />
    </div>
    <div class="votos-blanco">
      Votos inpugnados
      <input type="number" id="votos_blanco_loreto" name="votos_blanco_loreto" min="0" placeholder="0" />
    </div>
  </div>

</div>

<!-- Botón para enviar -->
<div style="max-width: 1200px; margin: 20px auto; text-align: center;">
  <button
    type="button"
    style="
      background-color: #007bff;
      margin-bottom: 50px;
      color: white;
      border: none;
      padding: 12px 30px;
      font-size: 18px;
        font-weight: bold;
      border-radius: 8px;
      cursor: pointer;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: background-color 0.3s ease;
    "
    onmouseover="this.style.backgroundColor='#0056b3'"
    onmouseout="this.style.backgroundColor='#007bff'"
  >
    Enviar conteo de votos
  </button>
</div>

@endsection