@extends('front.layouts.main')
@section('contenido')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<style>
    .date-field {
      display: inline-flex;
      align-items: stretch;
      border: 1px solid #e1e1e1;
      border-radius: 6px;
      overflow: hidden;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    }
    .date-field input {
        border: none;
        padding: 6px 12px;
        outline: none;
        width: 100%;
        font-size: 14px;
    }
    .date-field button {
      border: none;
      background: #f5f5f5;
      padding: 0 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .date-field button:hover { background: #eee; }
    /* Asegura que el input no “salte” al hacer zoom móvil */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none; margin: 0;
    }
  </style>

<div class="col-12 fondo_subpagina">
    <div class="col-12 espacio_header"></div>
</div>

<div class="container py-4 seccion_margen">
    <div class="row justify-content-center">
        <div class="col-12 col-md-10 col-lg-8">
            <h1 class="mb-3">Registro</h1>
            <p>Favor completar los siguientes datos</p>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $e)
                            <li>{{ $e }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route('registro.enviar') }}" class="bg-white border rounded p-3 p-sm-4">
                @csrf

                <div class="row g-3">
                    <div class="col-12 col-md-6">
                        <label class="form-label">Nombres</label>
                        <input type="text" name="nombres" class="form-control" value="{{ old('nombres') }}" required>
                    </div>
                    <div class="col-12 col-md-6">
                        <label class="form-label">Apellidos</label>
                        <input type="text" name="apellidos" class="form-control" value="{{ old('apellidos') }}" required>
                    </div>

                    <div class="col-12 col-md-6 col-lg-4">
                        <label class="form-label">Tipo de documento</label>
                        <select name="tipo_documento" class="form-control" required>
                            <option value="" disabled {{ old('tipo_documento') ? '' : 'selected' }}>Seleccionar</option>
                            <option value="9"  {{ old('tipo_documento')=='9' ? 'selected':'' }}>Cédula de identidad</option>
                            <option value="12" {{ old('tipo_documento')=='12' ? 'selected':'' }}>RUC</option>
                        </select>
                    </div>
                    <div class="col-12 col-md-6 col-lg-4">
                        <label class="form-label">Documento</label>
                        <input type="text" name="valor_documento" class="form-control" value="{{ old('valor_documento') }}" required>
                    </div>
                    <div class="col-12 col-md-6 col-lg-4">
                        <label class="form-label">Teléfono</label>
                        <input type="text" name="numero_telefono" class="form-control" value="{{ old('numero_telefono') }}" required>
                    </div>

                    <div class="col-12 col-md-6 col-lg-4">
                        <label class="form-label">Sexo</label>
                        <select name="sexo" class="form-control" required>
                            <option value="" disabled {{ old('sexo') ? '' : 'selected' }}>Seleccionar</option>
                            <option value="20" {{ old('sexo')=='20'?'selected':'' }}>Femenino</option>
                            <option value="19" {{ old('sexo')=='19'?'selected':'' }}>Masculino</option>
                        </select>
                    </div>

                    <div class="col-12 col-md-6 col-lg-4">
                        <label class="form-label">Ciudad</label>
                        <select name="ciudad_id" class="form-control" required>
                            <option value="" disabled {{ old('ciudad_id') ? '' : 'selected' }}>Seleccionar ciudad</option>
                            @foreach($ciudades as $c)
                                <option value="{{ $c->ciudad_id }}" {{ old('ciudad_id')==$c->ciudad_id?'selected':'' }}>
                                    {{ $c->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12 col-md-6 col-lg-4">
                        <label class="form-label">Fecha de nacimiento</label>
                        {{-- <input type="text" id="fecha" class="form-control" name="fecha_nacimiento" value="{{ old('fecha_nacimiento') }}" placeholder="dd/mm/aaaa"
                            pattern="^(0[1-9]|[12][0-9]|3[01])/(0[1-9]|1[0-2])/[0-9]{4}$"
                            required> --}}
                        {{-- <input type="date" lang="es-ES" name="fecha_nacimiento" id="fecha" class="form-control" value="{{ old('fecha_nacimiento') }}"> --}}
                        <!-- Contenedor con wrap -->
                        <div class="date-field" id="picker-fecha">
                            <!-- data-input: Flatpickr reconocerá este input dentro del wrap -->
                            <input
                            id="fecha"
                            name="fecha_nacimiento"
                            type="text"
                            placeholder="dd/mm/aaaa"
                            data-input
                            inputmode="numeric"
                            autocomplete="off"
                            aria-label="Fecha (dd/mm/aaaa)"
                            maxlength="10"
                            required
                            />
                            <!-- data-toggle: botón que abre/cierra el calendario -->
                            <button type="button" title="Abrir calendario" aria-label="Abrir calendario" data-toggle>
                                <!-- Ícono calendario (SVG) -->
                                <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
                                    <path d="M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v3H2V6a2 2 0 0 1 2-2h1V3a1 1 0 1 1 2 0v1zM2 10h20v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10zm5 3v2h2v-2H7zm4 0v2h2v-2h-2zm4 0v2h2v-2h-2z" />
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div class="col-12 col-md-6">
                        <label class="form-label">Oficina Comercial</label>
                        <select name="oficina_comercial_id" class="form-control" required>
                            <option value="" disabled {{ old('oficina_comercial_id') ? '' : 'selected' }}>Seleccionar oficina</option>
                            @foreach($oficinas as $o)
                                <option value="{{ $o->oficina_comercial_id }}" {{ old('oficina_comercial_id')==$o->oficina_comercial_id?'selected':'' }}>
                                    {{ $o->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12 col-md-6">
                        <label class="form-label">Correo electrónico</label>
                        <input type="email" name="email" class="form-control" value="{{ old('email') }}" required>
                    </div>

                    <div class="col-12">
                        <label class="form-label">Dirección</label>
                        <input type="text" name="direccion" class="form-control" value="{{ old('direccion') }}" required>
                    </div>
                </div>

                <div class="d-flex flex-column flex-sm-row gap-2 justify-content-between align-items-start align-items-sm-center mt-4">
                    <a class="me-0 me-sm-3" href="{{ route('login') }}">¿Ya tenés cuenta? Iniciá sesión</a>
                    
                    <div class="w-100 mb-3" style="max-width: 300px;">
                        <label class="form-label">Código de seguridad</label>
                        <div class="d-flex align-items-center mb-2 gap-2">
                             <div class="captcha-img-wrapper">{!! captcha_img('flat') !!}</div>
                             <button type="button" class="btn btn-secondary btn-sm" onclick="reloadCaptcha(this)"><i class="fa-solid fa-arrows-rotate"></i></button>
                        </div>
                        <input type="text" name="captcha" class="form-control" placeholder="Ingresá los caracteres de la imagen" required>
                    </div>

                    <button class="btn btn-orange">Enviar solicitud</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function reloadCaptcha(btn) {
    var img = btn.previousElementSibling.querySelector('img');
    img.src = '{{ captcha_src('flat') }}' + Math.random();
}
</script>

<script src="{{ asset('js/jquery.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/es.js"></script>
<script>
//     document.getElementById("fecha").addEventListener("input", function(e) {
//   let valor = e.target.value.replace(/\D/g, ""); // solo números
//   if (valor.length > 2 && valor.length <= 4) {
//     valor = valor.slice(0,2) + "/" + valor.slice(2);
//   } else if (valor.length > 4) {
//     valor = valor.slice(0,2) + "/" + valor.slice(2,4) + "/" + valor.slice(4,8);
//   }
//   e.target.value = valor;
// });

// flatpickr("#fecha", {
//   dateFormat: "d/m/Y",   // formato dd/mm/aaaa
//   locale: "es",          // idioma español
//   allowInput: true       // permite escribir manualmente
// });
// Inicializar Flatpickr con "wrap" para que use el botón con data-toggle
    flatpickr("#picker-fecha", {
      wrap: true,          // importante para usar data-input y data-toggle
      dateFormat: "d/m/Y", // dd/mm/aaaa
      locale: "es",
      allowInput: true,    // permite escribir manualmente
      // Validación ligera al cerrar: reintenta formatear si el usuario escribe "10092025"
      onClose: function(selectedDates, dateStr, instance) {
        const input = instance._input; // el <input data-input>
        if (!dateStr && input.value) {
          // Intentar parseo simple de números sin separadores (ddmmyyyy)
          const onlyNums = input.value.replace(/\D/g, "");
          if (onlyNums.length === 8) {
            const dd = onlyNums.slice(0,2);
            const mm = onlyNums.slice(2,4);
            const yyyy = onlyNums.slice(4,8);
            input.value = `${dd}/${mm}/${yyyy}`;
            instance.setDate(input.value, true, "d/m/Y");
          }
        }
      }
    });

    // (Opcional) Máscara suave mientras se escribe: inserta "/" automáticamente.
    const campo = document.getElementById("fecha");
    campo.addEventListener("input", function(e) {
      let v = e.target.value.replace(/\D/g, "").slice(0,8); // ddmmyyyy
      if (v.length > 4) v = v.slice(0,2) + "/" + v.slice(2,4) + "/" + v.slice(4);
      else if (v.length > 2) v = v.slice(0,2) + "/" + v.slice(2);
      e.target.value = v;
    });
</script>
@endsection