@extends('../padre.padre')

@section('contenido') 
@php
  $fechaA = !empty($fechaA) ? $fechaA : date('Y-m-d');
  $ff = !empty($ff) ? $ff : date('Y-m-d', strtotime('+15 days'));
@endphp

<div class="container-fluid px-3 py-2">

  <!-- Toast Notification Flotante (Bootstrap 4 Compatible) -->
  <div style="position: fixed; top: 15px; right: 15px; z-index: 9999; pointer-events: none;">
    <div id="toastWA" class="alert alert-success shadow-lg border-0 align-items-center" role="alert" style="display: none; pointer-events: auto; min-width: 300px; border-radius: 8px;">
      <div class="d-flex align-items-center justify-content-between">
        <div id="toastWAMensaje" class="font-weight-bold mr-2" style="font-size: 0.92rem;">
          <i class="fas fa-check-circle mr-2"></i>Mensaje copiado al portapapeles.
        </div>
        <button type="button" class="close ml-3 text-white" onclick="cerrarToast()" style="font-size: 1.3rem; outline: none; background: transparent; border: none;">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  </div>

  <!-- Barra de Control Horizontal Confortable -->
  <div class="card shadow-sm border-0 mb-3 bg-white" style="border-radius: 10px;">
    <div class="card-body p-3">
      <form action="{{ url('/informacionReagenda') }}" method="GET" id="formReagenda" class="d-flex flex-wrap align-items-center justify-content-between m-0">
        
        <!-- Título y Métricas -->
        <div class="d-flex align-items-center my-1 mr-3">
          <h5 class="mb-0 font-weight-bold text-dark mr-2" style="font-size: 1.25rem; white-space: nowrap;">
            <i class="fas fa-calendar-alt text-primary mr-2"></i>Reagendamiento Clientes
          </h5>
          
          @isset($ventas)
            @php $totalAlarma = collect($ventas)->where('Alarma', 'si')->count(); @endphp
            <span class="badge badge-primary px-3 py-2" style="font-size: 0.88rem; border-radius: 14px;" title="Clientes pendientes por reagendar">
              <i class="fas fa-user-clock mr-1"></i>{{ $totalAlarma }} pendientes
            </span>
          @endisset
        </div>

        <!-- Contenedor Horizontal de Filtros y Botones -->
        <div class="d-flex flex-wrap align-items-center my-1">
          
          <!-- Campo Fecha Inicial -->
          <div class="d-flex align-items-center mr-3 mb-2 mb-md-0">
            <span class="font-weight-bold text-muted mr-2 mb-0" style="font-size: 0.88rem; white-space: nowrap;">Desde:</span>
            <input required type="date" name="fi" id="fecI" value="{{$fechaA}}" class="form-control px-2" style="width: 145px; height: 38px; font-size: 0.9rem;">
          </div>

          <!-- Campo Fecha Final -->
          <div class="d-flex align-items-center mr-3 mb-2 mb-md-0">
            <span class="font-weight-bold text-muted mr-2 mb-0" style="font-size: 0.88rem; white-space: nowrap;">Hasta:</span>
            <input required type="date" name="ff" id="fecff" value="{{$ff}}" class="form-control px-2" style="width: 145px; height: 38px; font-size: 0.9rem;">
          </div>

          <!-- Campo Bodega -->
          <div class="d-flex align-items-center mr-3 mb-2 mb-md-0">
            <span class="font-weight-bold text-muted mr-2 mb-0" style="font-size: 0.88rem; white-space: nowrap;">Bodega:</span>
            <div style="min-width: 160px;">
              @include('../menu.bodegas')
            </div>
          </div>

          <!-- Botón Consultar -->
          <button type="submit" id="botonf" class="btn btn-warning font-weight-bold px-3 mr-2 mb-2 mb-md-0 shadow-sm" style="height: 38px; font-size: 0.9rem;" onclick="document.getElementById('formReagenda').target='_self';">
            <i class="fas fa-search mr-1"></i>Consultar
          </button>

          <!-- Botón Exportar -->
          <button type="submit" name="exportar" class="btn btn-success font-weight-bold px-3 mr-2 mb-2 mb-md-0 shadow-sm" style="height: 38px; font-size: 0.9rem;" value="1" onclick="document.getElementById('formReagenda').target='_blank'; setTimeout(function(){ document.getElementById('formReagenda').target='_self'; }, 1000);">
            <i class="fas fa-file-excel mr-1"></i>Exportar
          </button>

          <!-- Botón Configurar WA -->
          <button type="button" class="btn btn-outline-success font-weight-bold px-3 mr-2 mb-2 mb-md-0 shadow-sm" style="height: 38px; font-size: 0.9rem;" onclick="abrirModalWA()">
            <i class="fab fa-whatsapp mr-1"></i>Configurar WA
          </button>

          <!-- Botón Regresar / Inicio -->
          <a href="{{ url('/inicio') }}" class="btn btn-link p-0 border-0 text-decoration-none ml-1 mb-2 mb-md-0" id="btnInicioNavegacion" title="Volver al menú principal" style="display: inline-flex; align-items: center; height: 38px;">
            <img src="{{ asset('img/iniciobutton.svg') }}" style="width: 40px; height: 40px; display: block;" alt="Inicio">
          </a>

        </div>

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

  @isset($ventas)
  <!-- Buscador en tiempo real confortable -->
  <div class="mb-3">
    <div class="input-group shadow-sm" style="max-width: 500px;">
      <div class="input-group-prepend">
        <span class="input-group-text bg-white border-right-0"><i class="fas fa-search text-muted" style="font-size: 0.9rem;"></i></span>
      </div>
      <input type="text" id="buscadorReagenda" class="form-control border-left-0" style="height: 38px; font-size: 0.9rem;" placeholder="Filtrar por cliente, cédula, producto o teléfono...">
    </div>
  </div>
  @endisset

  <!-- Tabla de Resultados -->
  <div class="card shadow-sm border-0" style="border-radius: 10px;">
    <div class="card-body p-0">
      @include('../menu/exportar.exportarReagenda')
    </div>
  </div>

</div>

<!-- Modal Personalizar Mensaje y Método de Envío WhatsApp -->
<div class="modal fade" id="modalPlantillaWA" tabindex="-1" role="dialog" aria-labelledby="modalPlantillaWALabel" aria-hidden="true" style="z-index: 1055;">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content border-0 shadow-lg" style="border-radius: 14px;">
      <div class="modal-header bg-success text-white py-3 align-items-center">
        <h6 class="modal-title font-weight-bold mb-0" id="modalPlantillaWALabel" style="font-size: 1.05rem;">
          <i class="fab fa-whatsapp mr-2"></i>Configuración de Mensajes WhatsApp
        </h6>
        <button type="button" class="close text-white" onclick="cerrarModalWA()" style="color: #ffffff !important; opacity: 1; border: none; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; outline: none;" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-4">
        
        <!-- Método de Apertura -->
        <div class="mb-3 p-3 bg-light rounded border">
          <label class="form-label font-weight-bold small text-dark mb-1" style="font-size: 0.9rem;">
            <i class="fas fa-link mr-1 text-success"></i>¿Cómo deseas que abra el botón verde de WhatsApp?
          </label>
          <select id="selModoEnvioWA" class="form-control" style="height: 38px; font-size: 0.9rem;">
            <option value="api" selected>🔗 Enlace Universal (api.whatsapp.com) - Recomendado</option>
            <option value="web">🌐 WhatsApp Web Directo (web.whatsapp.com)</option>
            <option value="app">💻 App de Escritorio Windows (whatsapp://)</option>
          </select>
        </div>

        <!-- Plantilla del mensaje -->
        <p class="small text-muted mb-2" style="font-size: 0.88rem;">
          Haz clic en las etiquetas para insertarlas en el mensaje:
        </p>
        <div class="mb-3 d-flex flex-wrap">
          <span class="badge badge-primary font-weight-bold cursor-pointer mr-2 mb-2 px-3 py-2" style="font-size: 0.88rem; color: #ffffff !important; background-color: #007bff !important; border-radius: 12px; cursor: pointer;" onclick="insertarVariable('{cliente}')">
            <i class="fas fa-user mr-1"></i>{cliente}
          </span>
          <span class="badge badge-primary font-weight-bold cursor-pointer mr-2 mb-2 px-3 py-2" style="font-size: 0.88rem; color: #ffffff !important; background-color: #007bff !important; border-radius: 12px; cursor: pointer;" onclick="insertarVariable('{producto}')">
            <i class="fas fa-box mr-1"></i>{producto}
          </span>
          <span class="badge badge-primary font-weight-bold cursor-pointer mr-2 mb-2 px-3 py-2" style="font-size: 0.88rem; color: #ffffff !important; background-color: #007bff !important; border-radius: 12px; cursor: pointer;" onclick="insertarVariable('{fecha_venta}')">
            <i class="fas fa-calendar mr-1"></i>{fecha_venta}
          </span>
          <span class="badge badge-primary font-weight-bold cursor-pointer mr-2 mb-2 px-3 py-2" style="font-size: 0.88rem; color: #ffffff !important; background-color: #007bff !important; border-radius: 12px; cursor: pointer;" onclick="insertarVariable('{fecha_llamar}')">
            <i class="fas fa-clock mr-1"></i>{fecha_llamar}
          </span>
        </div>
        <div class="form-group mb-0">
          <textarea id="txtPlantillaWA" class="form-control" rows="4" style="font-size: 0.9rem;" placeholder="Escribe tu mensaje..."></textarea>
        </div>
      </div>
      <div class="modal-footer bg-light py-2">
        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="restaurarPlantillaDefault()">Restaurar Default</button>
        <button type="button" class="btn btn-success btn-sm font-weight-bold px-3" onclick="guardarConfiguracionWA()">Guardar Configuración</button>
      </div>
    </div>
  </div>
</div>

<script>
  // Plantilla por defecto
  const PLANTILLA_DEFAULT = 'Hola *{cliente}*, te saludamos de nuestra tienda.\n' +
                            'Te recordamos que tu producto *{producto}* adquirido el *{fecha_venta}* cumple su ciclo/dosis el *{fecha_llamar}*.\n' +
                            '¡Quedamos a tu disposición si deseas renovar o agendar tu pedido! 😊';

  // Cargar configuración al iniciar
  document.addEventListener("DOMContentLoaded", function () {
    let guardada = localStorage.getItem('plantilla_reagenda_wa');
    let txtArea = document.getElementById('txtPlantillaWA');
    if (txtArea) {
      txtArea.value = guardada ? guardada : PLANTILLA_DEFAULT;
    }

    let modoGuardado = localStorage.getItem('modo_envio_wa') || 'api';
    let selModo = document.getElementById('selModoEnvioWA');
    if (selModo) {
      selModo.value = modoGuardado;
    }

    // Ajustar estilos del select de bodegas dentro de la barra
    let selectBodega = document.querySelector('#formReagenda select');
    if (selectBodega) {
      selectBodega.classList.remove('form-control-sm');
      selectBodega.classList.add('form-control');
      selectBodega.style.height = '38px';
      selectBodega.style.fontSize = '0.9rem';
    }

    // Buscador en tiempo real
    let buscador = document.getElementById('buscadorReagenda');
    if (buscador) {
      buscador.addEventListener('keyup', function () {
        let filtro = this.value.toLowerCase();
        let filas = document.querySelectorAll('#tablep tbody tr');
        filas.forEach(function (row) {
          let texto = row.innerText.toLowerCase();
          row.style.display = texto.includes(filtro) ? '' : 'none';
        });
      });
    }
  });

  function abrirModalWA() {
    if (window.$ && $.fn.modal) {
      $('#modalPlantillaWA').modal('show');
    } else {
      let el = document.getElementById('modalPlantillaWA');
      if (el) {
        el.style.display = 'block';
        el.classList.add('show');
      }
    }
  }

  function cerrarModalWA() {
    if (window.$ && $.fn.modal) {
      $('#modalPlantillaWA').modal('hide');
    } else {
      let el = document.getElementById('modalPlantillaWA');
      if (el) {
        el.style.display = 'none';
        el.classList.remove('show');
      }
    }
  }

  function insertarVariable(variable) {
    let txt = document.getElementById('txtPlantillaWA');
    txt.value += ' ' + variable;
    txt.focus();
  }

  function restaurarPlantillaDefault() {
    document.getElementById('txtPlantillaWA').value = PLANTILLA_DEFAULT;
    document.getElementById('selModoEnvioWA').value = 'api';
    localStorage.removeItem('plantilla_reagenda_wa');
    localStorage.removeItem('modo_envio_wa');
    alert('Configuración restaurada al valor por defecto.');
  }

  function guardarConfiguracionWA() {
    let val = document.getElementById('txtPlantillaWA').value.trim();
    if (!val) {
      alert('El mensaje no puede estar vacío.');
      return;
    }
    let modo = document.getElementById('selModoEnvioWA').value;

    localStorage.setItem('plantilla_reagenda_wa', val);
    localStorage.setItem('modo_envio_wa', modo);
    alert('¡Configuración de WhatsApp guardada con éxito!');
    
    cerrarModalWA();
  }

  // 1. Botón Verde WhatsApp: Abre el enlace de WhatsApp
  function enviarWhatsApp(telefono, cliente, producto, fechaVenta, fechaLlamar) {
    let num = (telefono || '').replace(/\D/g, '');
    if (num.length === 10 && num.startsWith('3')) {
      num = '57' + num;
    }

    if (!num || num.length < 7) {
      alert('El cliente (' + cliente + ') no tiene un número de teléfono válido (' + telefono + ').');
      return;
    }

    let plantilla = localStorage.getItem('plantilla_reagenda_wa') || PLANTILLA_DEFAULT;
    let modoWA = localStorage.getItem('modo_envio_wa') || 'api';

    let mensaje = plantilla
      .replace(/{cliente}/g, cliente)
      .replace(/{producto}/g, producto)
      .replace(/{fecha_venta}/g, fechaVenta)
      .replace(/{fecha_llamar}/g, fechaLlamar);

    if (modoWA === 'app') {
      let urlProtocolo = 'whatsapp://send?phone=' + num + '&text=' + encodeURIComponent(mensaje);
      window.location.href = urlProtocolo;
      return;
    }

    if (modoWA === 'web') {
      let urlWeb = 'https://web.whatsapp.com/send?phone=' + num + '&text=' + encodeURIComponent(mensaje);
      window.open(urlWeb, '_blank');
      return;
    }

    // Por defecto modo 'api' (Universal)
    let urlApi = 'https://api.whatsapp.com/send?phone=' + num + '&text=' + encodeURIComponent(mensaje);
    window.open(urlApi, '_blank');
  }

  // 2. Botón Gris Copiar: Copia el mensaje formateado al portapapeles y notifica
  function copiarMensajeDirecto(cliente, producto, fechaVenta, fechaLlamar) {
    let plantilla = localStorage.getItem('plantilla_reagenda_wa') || PLANTILLA_DEFAULT;
    let mensaje = plantilla
      .replace(/{cliente}/g, cliente)
      .replace(/{producto}/g, producto)
      .replace(/{fecha_venta}/g, fechaVenta)
      .replace(/{fecha_llamar}/g, fechaLlamar);

    copiarAlPortapapeles(mensaje);
    mostrarToast('📋 ¡Mensaje para <strong>' + cliente + '</strong> copiado! Pégalo en tu WhatsApp con <kbd>Ctrl+V</kbd>.');
  }

  function copiarAlPortapapeles(texto) {
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(texto);
    } else {
      let textarea = document.createElement('textarea');
      textarea.value = texto;
      textarea.style.position = 'fixed';
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
    }
  }

  function mostrarToast(msg) {
    let toastEl = document.getElementById('toastWA');
    document.getElementById('toastWAMensaje').innerHTML = msg;
    toastEl.style.display = 'block';
    setTimeout(function() {
      toastEl.style.display = 'none';
    }, 4500);
  }

  function cerrarToast() {
    document.getElementById('toastWA').style.display = 'none';
  }
</script>

<style>
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-pointer:hover {
    opacity: 0.8;
  }
</style>

@endsection