@extends('layouts.landinglayaout')

@section('title', '| Contacto')

@section('content')
<style>
            .texto-estado {
        font-family: 'Orbitron', sans-serif;
        font-size: 1.4em;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .texto-abierto {
        background-color: #e6ffe6;
        color: #2e7d32;
        padding: 10px;
        border-radius: 8px;
        display: inline-block;
        margin: 0 auto;
        text-align: center;
    }
    .texto-cerrado {
        background-color: #ffe6e6;
        color: #c62828;
        padding: 10px;
        border-radius: 8px;
        display: inline-block;
        margin: 0 auto;
        text-align: center;
    }
    .texto-estado {
        animation: fadeIn 1s ease-in-out;
    }


    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .texto-estado {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin-bottom: 15px;
    }
            @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
            @font-face {
                font-family: 'Digital';
                src: url('./assets/DigitalNumbers-Regular.ttf') format('truetype');
            }
            
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            .body-clock {
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background: #000;
                font-family: 'Orbitron', monospace;
                overflow: hidden;
            }
            
            /* Patrón de fondo sutil inspirado en diseños incas */
            .body-clock::before {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: 
                    radial-gradient(circle at 25% 25%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 75% 75%, rgba(160, 82, 45, 0.1) 0%, transparent 50%),
                    linear-gradient(45deg, transparent 49%, rgba(218, 165, 32, 0.02) 50%, transparent 51%),
                    linear-gradient(-45deg, transparent 49%, rgba(218, 165, 32, 0.02) 50%, transparent 51%);
                background-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
                z-index: -1;
            }
            
            .reloj-digital {
                text-align: center;
                position: relative;
                overflow: hidden;
            }
            
            .tiempo {
                font-size: 8rem;
                font-weight: 600;
                letter-spacing: 0.1em;
                margin: 0;
                line-height: 1;
                font-family: 'Digital', sans-serif;
                position: relative;
            }
            
            /* Estilo Verde */
            .reloj-verde .tiempo {
                color: #00ff41;
                text-shadow: 
                    0 0 0px #00ff41,
                    0 0 0px #00ff41,
                    0 0 0px #00ff41,
                    0 0 0px #00ff41;
            }
            
            .reloj-verde .fecha {
                color: #00ff41;
                text-shadow: 
                    0 0 5px #00ff41,
                    0 0 10px #00ff41;
            }
            
            /* Estilo Rojo */
            .reloj-rojo .tiempo {
                color: #ff0040;
                text-shadow: 
                    0 0 0px #ff0040,
                    0 0 0px #ff0040,
                    0 0 0px #ff0040,
                    0 0 0px #ff0040;
            }
            
            .reloj-rojo .fecha {
                color: #ff0040;
                text-shadow: 
                    0 0 5px #ff0040,
                    0 0 10px #ff0040;
            }
            
            .fecha {
                font-size: 1.5rem;
                font-weight: 400;
                margin-top: 30px;
                letter-spacing: 0.2em;
                opacity: 0.8;
                font-family: 'Orbitron', monospace;
            }
            
            /* Separadores con animación */
            .separador {
                display: inline-block;
                animation: parpadeo 1s infinite;
            }
            
            @keyframes parpadeo {
                0%, 50% { opacity: 1; }
                51%, 100% { opacity: 0.3; }
            }
            
            /* Botones de control */
            .controles {
                position: fixed;
                top: 30px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 20px;
                z-index: 1000;
            }
            
            .btn-estilo {
                padding: 12px 24px;
                border: 2px solid;
                border-radius: 8px;
                background: transparent;
                font-family: 'Orbitron', monospace;
                font-weight: 700;
                font-size: 0.9rem;
                cursor: pointer;
                transition: all 0.3s ease;
                text-transform: uppercase;
                letter-spacing: 1px;
                position: relative;
                overflow: hidden;
            }
            
            .btn-verde {
                border-color: #00ff41;
                color: #00ff41;
            }
            
            .btn-verde:hover {
                background: #00ff41;
                color: #000;
                box-shadow: 0 0 20px #00ff41;
            }
            
            .btn-rojo {
                border-color: #ff0040;
                color: #ff0040;
            }
            
            .btn-rojo:hover {
                background: #ff0040;
                color: #000;
                box-shadow: 0 0 20px #ff0040;
            }
            
            /* Efecto de escaneo digital */
            .tiempo::after {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.1),
                    transparent
                );
                animation: escaneo 3s infinite;
            }
            
            @keyframes escaneo {
                0% { left: -100%; }
                100% { left: 100%; }
            }
            
            /* Líneas de escaneo sutiles */
            .reloj-digital::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 2px,
                    rgba(255, 255, 255, 0.03) 2px,
                    rgba(255, 255, 255, 0.03) 4px
                );
                pointer-events: none;
                z-index: 1;
            }
            
            /* Elementos decorativos incas minimalistas */
            .decoracion-inca {
                position: fixed;
                width: 60px;
                height: 2px;
                background: linear-gradient(90deg, transparent, #DAA520, transparent);
                opacity: 0.3;
            }
            
            .decoracion-inca:nth-child(1) {
                top: 20%;
                left: 10%;
                transform: rotate(45deg);
            }
            
            .decoracion-inca:nth-child(2) {
                top: 20%;
                right: 10%;
                transform: rotate(-45deg);
            }
            
            .decoracion-inca:nth-child(3) {
                bottom: 20%;
                left: 10%;
                transform: rotate(-45deg);
            }
            
            .decoracion-inca:nth-child(4) {
                bottom: 20%;
                right: 10%;
                transform: rotate(45deg);
            }
            
            /* Responsivo */
            @media (max-width: 768px) {
                .tiempo {
                    font-size: 4rem;
                    letter-spacing: 0.05em;
                }
                
                .fecha {
                    font-size: 1rem;
                    margin-top: 20px;
                }
                
                .controles {
                    top: 20px;
                    gap: 15px;
                }
                
                .btn-estilo {
                    padding: 10px 18px;
                    font-size: 0.8rem;
                }
            }
            
            @media (max-width: 480px) {
                .tiempo {
                    font-size: 3rem;
                }
                
                .fecha {
                    font-size: 0.9rem;
                }
                
                .decoracion-inca {
                    display: none;
                }
            }
            
            /* Efecto de brillo en los números */
            .numero {
                display: inline-block;
                position: relative;
            }
            
            .reloj-verde .numero:hover {
                text-shadow: 
                    0 0 15px #00ff41,
                    0 0 25px #00ff41,
                    0 0 35px #00ff41,
                    0 0 45px #00ff41;
            }
            
            .reloj-rojo .numero:hover {
                text-shadow: 
                    0 0 15px #ff0040,
                    0 0 25px #ff0040,
                    0 0 35px #ff0040,
                    0 0 45px #ff0040;
            }
</style>
  <div class="container-fluid">
    <br><br>
     <div class="row text-center">
        <div class="col-12 d-flex justify-content-center">
            <a href=""
            class="btn"
            style="background-color: #FFA400; color: white; padding: 10px 15px; border-radius: 8px; text-decoration: none; font-family: sans-serif; font-size: 0.85rem; width: 70%; max-width: 450px;">
           Puedes visitarnos en: 326 Broad St Newark,NJ 07104 USA <i class="bi bi-globe-americas"></i>
            </a>
        </div>
    </div>
    <br>
    <div class="row">
      <div class="col-md-6 col-lg-6 col-xl-6 mb-4">
          <img src="{{ asset('ContactoMedia/Horario.png') }}" alt="Descripción de la imagen"
            class="ms-auto d-block" style="width: 40%; height: auto;">
      </div>
      <div class="col-md-6 col-lg-6 col-xl-6 mb-4">
        <!-- <div id="hora-actual" style="font-weight: bold;">
                {{ ucfirst($dia) }} - {{ $horaActual }}
        </div> -->
        <p class="text-center texto-estado">Actualmente nos encontramos:</p>
@if ($estado === 'abierto')
    <p class="text-center"><span class="d-inline-block texto-abierto texto-estado">🟢 ¡Estamos abiertos!</span></p>

    <p class="text-center texto-estado">¡Puedes visitarnos y darnos el gusto de atenderte!</p>
@else
    <p class="text-center"><span class="d-inline-block texto-cerrado texto-estado">🔴 Cerrado en este momento</span></p>
    <p class="text-center texto-estado">Reabrimos en:</p>
    <!-- contador y reloj aquí -->


            @if ($proximaApertura)                
                <div id="contador" style="font-size: 1.2em; font-weight: bold;"></div>
                <div class="reloj-digital reloj-verde" id="reloj" style="width: 100%">
            <div class="tiempo" id="tiempo" style="font-family: 'Orbitron', monospace;">
                <span class="numero" id="horas">00</span><span class="separador">:</span><span class="numero" id="minutos">00</span><span class="separador">:</span><span class="numero" id="segundos">00</span>
            </div>
            <p class="text-center texto-estado">¡Para atenderte, con el mayor de los gustos!</p>
            <div class="fecha" id="fecha"></div>
        </div>
        <script>
            function actualizarReloj() {
                const apertura = new Date("{{ $proximaApertura->format('Y-m-d H:i:s') }}");
                const ahora = new Date();
                const diferencia = apertura - ahora;
                // const horas = diferencia.getHours().toString().padStart(2, '0');
                // const minutos = diferencia.getMinutes().toString().padStart(2, '0');
                // const segundos = diferencia.getSeconds().toString().padStart(2, '0');
                const horas = Math.floor(diferencia / (1000 * 60 * 60));
                const minutos = Math.floor((diferencia % (1000 * 60 * 60)) / (1000 * 60));
                const segundos = Math.floor((diferencia % (1000 * 60)) / 1000);
                
                document.getElementById('horas').textContent = horas;
                document.getElementById('minutos').textContent = minutos;
                document.getElementById('segundos').textContent = segundos;
            }
            
            function cambiarEstilo(estilo) {
                const reloj = document.getElementById('reloj');
                reloj.className = 'reloj-digital';
                
                if (estilo === 'verde') {
                    reloj.classList.add('reloj-verde');
                } else if (estilo === 'rojo') {
                    reloj.classList.add('reloj-rojo');
                }
            }
            
            // Inicializar reloj
            actualizarReloj();
            setInterval(actualizarReloj, 1000);
            
            // Establecer estilo verde por defecto
            cambiarEstilo('rojo');
            
            // Efecto de hover en los números
            document.querySelectorAll('.numero').forEach(numero => {
                numero.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.1)';
                    this.style.transition = 'transform 0.2s ease';
                });
                
                numero.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1)';
                });
            });
        </script>
        
            @endif
        @endif
      </div>
    </div>
    

<script>
  function actualizarHora() {
    const ahora = new Date();
    const hora = ahora.toLocaleTimeString('es-CO', { hour12: true });
    //document.getElementById('hora-actual').textContent = hora;
  }

  setInterval(actualizarHora, 1000);
  actualizarHora();
</script>

    <br>
    <div class="row align-items-stretch">
      <div class="col-md-6 col-lg-6 col-xl-6 mb-4">
        <div class="h-100">
        <!-- <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d48360.296265317935!2d-74.169479!3d40.750619!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2547d3f8c44d9%3A0x9914200f4d27967c!2s326%20Broad%20St%2C%20Newark%2C%20NJ%2007104!5e0!3m2!1ses-419!2sus!4v1753469705532!5m2!1ses-419!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> -->
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.5172785820523!2d-74.17202632348075!3d40.75064623524803!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2547d406cfd05%3A0x365ed7788cb5e097!2sRestaurante%20Salvadore%C3%B1o%20Las%20Canastillas!5e0!3m2!1ses-419!2sco!4v1753629420111!5m2!1ses-419!2sco" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>    
      </div>
        </div>
      <div class="col-md-6 col-lg-6 col-xl-6 mb-4" style="background-color: #e9ecef"> 
        <div class="h-100" style="padding: 30px">
        <form method="POST" action="{{ route('formulario-enviar') }}" >
          @csrf
          <div class="row">
            <div class="form-group col-md-5">
              <label for="name">Name</label>
              <input type="text" class="form-control" id="name" placeholder="Name" name="name" required>
            </div>
            <div class="form-group col-md-5">
              <label for="email">Email</label>
              <input type="text" class="form-control" id="Email" placeholder="Email" name="email" required>
            </div>            
          </div> 
          <br>
          <div class="row">
            <div class="form-group">
              <label for="message">Message</label>
              <textarea class="form-control" id="message" rows="3" name="message" required></textarea>
            </div>
          </div> 
          <br> 
          <div class="row">
            <div class="form-group">
              <label for="suggestions">Suggestions</label>
              <textarea class="form-control" id="suggestions" rows="3" name="suggestions" required></textarea>
            </div>
          </div> 
          <br>         
          <div class="form-group">
            Check Box
            <div class="form-check">              
              <input class="form-check-input" type="checkbox" id="gridCheck">
              <label class="form-check-label" for="gridCheck">
                I accept Privacy Policy
              </label>
            </div>
          </div>
          <br>
          <div class="form-group col-md-12">
            <button type="submit" class="btn btn-primary" style="width: 100%">Send</button>
          </div>
          <br>
            @if(session('success'))
  <div class="alert alert-success">
    {{ session('success') }}
  </div>
@endif  
        </form>
        </div>
        
        <script>
  const checkbox = document.getElementById('gridCheck');
  const submitButton = document.querySelector('button[type="submit"]');

  // Inicialmente deshabilitado
  submitButton.disabled = true;

  checkbox.addEventListener('change', function () {
    submitButton.disabled = !this.checked;
  });
</script>               
    </div>
      
  </div>
@endsection