@extends('layouts.app')

@section('content')
<div class="main_container">
  <div class="container">
    <div class="grid-container">
      <h4>Por favor ingrese las cédulas que ustedes desean registrar.</h4>

      <div class="item">
        <form id="procesar">
          <h4 id="successMessage" class="alert">¡Envío exitoso!</h4>
          <h4 id="errorMessage" class="alert-error">
            Error al enviar la información. Inténtalo de nuevo.
          </h4>
          <textarea
            class="form-control"
            name="mensaje"
            id="mensaje"
            cols="80"
            rows="25"
            placeholder="Por favor ingrese aquí las cedulas"
          ></textarea>
          <div class="button-group">
            <button id="btn" class="btn-sent">Limpiar</button>
            <input type="submit" value="enviar" class="btn-sent" />
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

@section('scripts')
    <script>
      const btn = document.querySelector("button");
      const textarea = document.querySelector("textarea");
      btn.addEventListener("click", () => {
        textarea.value = "";
      });
    </script>

    <script>
      //sidebar
      $(".sidebar ul li a").click(function () {
        $(".sidebar ul li a").removeClass("active");
        $(this).addClass("active");
      });
      $(".hamburger").click(function () {
        $(".sidebar").toggleClass("collapse");
      });
      //dropdown de administración
      const configuracion = document.getElementById("configuracion");
      const opcionesConfiguracion = document.getElementById(
        "opcionesConfiguracion"
      );

      configuracion.addEventListener("click", function () {
        opcionesConfiguracion.style.display =
          opcionesConfiguracion.style.display === "none" ? "block" : "none";
      });
    </script>

    <script>
      // Obtener el formulario y los elementos de mensaje
      const form = document.querySelector("form");
      const submitButton = document.querySelector('input[type="submit"]');
      const successMessage = document.getElementById("successMessage");
      const errorMessage = document.getElementById("errorMessage");

      // Agregar un evento de envío al formulario
      form.addEventListener("submit", function (event) {
        // Prevenir el envío del formulario por defecto
        event.preventDefault();

        // Simulando un envío fallido (puedes modificar esta lógica según tu aplicación)
        const enviadoExitosamente = false;

        if (enviadoExitosamente) {
          // Mostrar el mensaje de éxito y ocultar el mensaje de error
          successMessage.style.display = "block";
          errorMessage.style.display = "none";
        } else {
          // Mostrar el mensaje de error y ocultar el mensaje de éxito
          successMessage.style.display = "none";
          errorMessage.style.display = "block";
        }

        // Limpiar el formulario después de mostrar el mensaje
        form.reset();

        // Ocultar los mensajes después de 3 segundos
        setTimeout(() => {
          successMessage.style.display = "none";
          errorMessage.style.display = "none";
        }, 3000);
      });

      // // Obtener el formulario y los elementos de mensaje
      // const form = document.querySelector("form");
      // const submitButton = document.querySelector('input[type="submit"]');
      // const successMessage = document.getElementById("successMessage");
      // const errorMessage = document.getElementById("errorMessage");

      // // Agregar un evento de envío al formulario
      // form.addEventListener("submit", function (event) {
      //   // Prevenir el envío del formulario por defecto
      //   event.preventDefault();

      //   // Simulando un envío exitoso (puedes modificar esta lógica según tu aplicación)
      //   const enviadoExitosamente = true;

      //   if (enviadoExitosamente) {
      //     // Mostrar el mensaje de éxito y ocultar el mensaje de error
      //     successMessage.style.display = "block";
      //     errorMessage.style.display = "none";
      //   } else {
      //     // Mostrar el mensaje de error y ocultar el mensaje de éxito
      //     successMessage.style.display = "none";
      //     errorMessage.style.display = "block";
      //   }

      //   // Limpiar el formulario después de mostrar el mensaje
      //   form.reset();

      //   // Ocultar los mensajes después de 3 segundos
      //   setTimeout(() => {
      //     successMessage.style.display = "none";
      //     errorMessage.style.display = "none";
      //   }, 3000);
      // });

      document.getElementById('procesar').addEventListener('submit', async function(event) {
        event.preventDefault();
        try {
            const response = await fetch('/api/whatsapp', {
                method: 'POST',
                body: form
            });
            const result = await response.json();
            console.log(result)
            
            if (response.ok) {
                console.log(result)
                // return Toast.fire('Guardado!', result.message, 'success');
            } else {
                return Toast.fire('Error', result.message || 'Error al agregar encargado', 'error');
            }
        } catch (error) {
            console.error('Error:', error);
        }
    });
    </script>
    
@endsection