{% extends 'menu/menu.html' %}
{% load static %}

{% block title %} Cuenta de APP Nexus {% endblock %}

{% block body %}
<style>
/* ——— Navegación lateral ——— */
.nav-tabs{flex-direction:column;border-bottom:0;}
.nav-tabs .nav-link{border:none;color:#000;font-weight:500;padding:10px 20px;text-align:left;display:flex;align-items:center;border-radius:0;border-left:3px solid transparent;}
.nav-tabs .nav-link.active{background:#eaf2fe;color:#dc3545;border-left:3px solid #dc3545;}
.nav-tabs .nav-link .icon{margin-right:8px;}
.tab-content{padding:20px;background:#fff;border-left:1px solid #ddd;}

/* ——— QR ——— */
.qr-section{text-align:center;margin-top:20px;}
.qr-image{width:200px;height:200px;border:2px solid #ddd;border-radius:8px;margin-bottom:10px;}
.btn-print-qr{display:inline-block;padding:6px 12px;background:#007bff;color:#fff;text-decoration:none;border-radius:4px;font-size:.9rem;}
.btn-print-qr:hover{background:#0056b3;}

/* ——— Avatar XL ——— */
.avatar-xl{width:160px;height:160px;object-fit:cover;border-radius:50%;}
</style>

<div class="row">
  <div class="col-md-2">
    <!-- Tabs laterales -->
    <ul class="nav nav-tabs p-3" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <a href="{% url 'admin_panel' %}" class="nav-link">
          <span class="icon"><i class="fas fa-home"></i></span> Inicio
        </a>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="informacion-tab" data-bs-toggle="tab"
                data-bs-target="#informacion-sec" type="button" role="tab"
                aria-controls="informacion-sec" aria-selected="true">
          <span class="icon"><i class="fas fa-info-circle"></i></span> Información
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="horarios-tab" data-bs-toggle="tab"
                data-bs-target="#horarios-sec" type="button" role="tab"
                aria-controls="horarios-sec" aria-selected="false">
          <span class="icon"><i class="fas fa-clock"></i></span> Horarios de Atención
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="seguridad-tab" data-bs-toggle="tab"
                data-bs-target="#seguridad-sec" type="button" role="tab"
                aria-controls="seguridad-sec" aria-selected="false">
          <span class="icon"><i class="fas fa-shield-alt"></i></span> Seguridad
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="qr-tab" data-bs-toggle="tab"
                data-bs-target="#qr-sec" type="button" role="tab"
                aria-controls="qr-sec" aria-selected="false">
          <span class="icon"><i class="fas fa-qrcode"></i></span> Mi NexID
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="edit-nexid-tab" data-bs-toggle="tab"
                data-bs-target="#edit-nexid-sec" type="button" role="tab"
                aria-controls="edit-nexid-sec" aria-selected="false">
          <span class="icon"><i class="fas fa-edit"></i></span> Editar mi NexID
        </button>
      </li>
    </ul>
  </div>

  <div class="col-md-10">
    <div class="tab-content">

      <!-- ——— Información ——— -->
      <div class="tab-pane fade show active" id="informacion-sec" role="tabpanel">
        <h3>Información</h3>
        <!-- … tu contenido … -->
      </div>

      <!-- ——— Horarios ——— -->
      <div class="tab-pane fade" id="horarios-sec" role="tabpanel">
        <h3>Horarios de Atención</h3>
        <!-- … tu contenido … -->
      </div>

      <!-- ——— Seguridad ——— -->
      <div class="tab-pane fade" id="seguridad-sec" role="tabpanel">
        <h3>Seguridad</h3>
        <!-- … tu contenido … -->
      </div>

      <!-- ——— Mi NexID (QR + Barcode) ——— -->
      <div class="tab-pane fade" id="qr-sec" role="tabpanel">
        <h3 class="mb-4">Identificación Digital del Negocio</h3>

        <div class="qr-section">
          <h5>📌 Tu Código QR (válido 15&nbsp;minutos)</h5>
          <img id="dynamic-qr" src="{% url 'qr_for_business' %}?_=0"
               alt="Código QR del negocio" class="qr-image">
          <p id="qr-expiry">Expira en: <span id="countdown">15:00</span></p>
          <a id="download-qr" href="{% url 'qr_for_business' %}?_=0"
             download="qr_{{ user_id }}.png" class="btn-print-qr">Descargar QR</a>
        </div>

        <hr class="my-5" style="border-top:2px dashed #ccc;">

        <div class="qr-section">
          <h5>📦 Código de Barras (válido 15 minutos)</h5>
          <img src="{% url 'barcode_for_business' %}" alt="Código de Barras"
               class="qr-image">
          <p class="mt-2 text-muted">Usado para escaneo en cajas u otros sistemas</p>
        </div>
      </div>

      <!-- ——— Editar NexID ——— -->
      <div class="tab-pane fade" id="edit-nexid-sec" role="tabpanel">
        <h3 class="mb-4">✏️ Editar tu NexID</h3>

        <form id="nexid-form" action="{% url 'update_nexid' %}"
              method="post" enctype="multipart/form-data"
              class="nexid-form w-75 mx-auto">
          {% csrf_token %}

          <div class="row g-4">
            <!-- Avatar -->
            <div class="col-12 text-center">
              {% if foto_perfil %}
                <img id="preview-avatar" src="{{ foto_perfil }}"
                     class="avatar-xl mb-3" alt="Avatar">
              {% else %}
                <img id="preview-avatar" src="{% static 'img/default_avatar.png' %}"
                     class="avatar-xl mb-3" alt="Avatar">
              {% endif %}
              <input type="file" name="foto_perfil" accept="image/*"
                     class="form-control form-control-sm mb-4"
                     onchange="loadPreview(this)">
            </div>

            <!-- Columna 1 -->
            <div class="col-md-6">
              <input type="hidden" name="id_usuario" value="{{ id_usuario }}">

              <div class="mb-3">
                <label>Nombre</label>
                <input type="text" name="nombre" value="{{ nombre }}"
                       class="form-control" required>
              </div>
              <div class="mb-3">
                <label>Apellidos</label>
                <input type="text" name="apellido" value="{{ apellido }}"
                       class="form-control">
              </div>
              <div class="mb-3">
                <label>ID Cliente</label>
                <input type="text" name="identidad" value="{{ identidad }}"
                       class="form-control">
              </div>
              <div class="mb-3">
                <label>Correo electrónico</label>
                <input type="email" name="correo" value="{{ correo }}"
                       class="form-control">
              </div>
              <div class="mb-3">
                <label>Teléfono</label>
                <input type="text" name="telefono" value="{{ telefono }}"
                       class="form-control">
              </div>
            </div>

            <!-- Columna 2 -->
            <div class="col-md-6">
              <div class="mb-3">
                <label>Dirección</label>
                <input type="text" name="direccion" value="{{ direccion }}"
                       class="form-control">
              </div>
              <div class="mb-3">
                <label>Representante de negocio</label>
                <input type="text" name="representante_negocio"
                       value="{{ representante_negocio }}" class="form-control">
              </div>
              <div class="mb-3">
                <label>RTN de negocio</label>
                <input type="text" name="rtn_negocio" value="{{ rtn_negocio }}"
                       class="form-control">
              </div>
              <div class="mb-3">
                <label>Descripción del negocio</label>
                <textarea name="descripcion_negocio" rows="3"
                          class="form-control">{{ descripcion_negocio }}</textarea>
              </div>
            </div>
          </div>

          <button type="submit" class="btn btn-primary w-100 mt-3">
            Guardar cambios
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}

<script>
    $(document).ready(function () {
        var buttons = "Bfrtlip";

        var csrfToken = "{{ csrf_token }}";
        var user_id = "{{ user_id }}";
        var tipo_usuario = "{{ tipo_usuario }}";
        var userName = "{{ userName }}";

        $('#verificationSwitch').on('change', function () {
            var isChecked = $(this).is(':checked');
            var value = isChecked ? 1 : 0;

            try {
                $.ajax({
                    url: `{% url 'mfa_enable_disable' %}`,
                    type: "POST",
                    dataScr: 'data',
                    data: {
                        value: value,
                        csrfmiddlewaretoken: csrfToken
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.save != 1) {
                            Swal.fire("", "Error D: " + data.error, "error");
                        }
                    }
                });
            } catch (error) {
                Swal.fire("", "Error A: " + error, "error");
            }
        });
    });
</script>
<script>
        $.ajax({
            url: "{% url 'save_horario_atencion' %}",
            type: "POST",
            data: {
                horario: JSON.stringify(horarioData),
                csrfmiddlewaretoken: "{{ csrf_token }}"
            },
            beforeSend: function () {
                $("#loading").show();
            },
            success: function (data) {
                $("#loading").hide();
                if (data.save == 1) {
                    Swal.fire("Éxito", "Horario guardado correctamente.", "success");
                } else {
                    Swal.fire("Error A1", "Hubo un problema: " + data.error, "error");
                }
            },
            error: function (error) {
                $("#loading").hide();
                Swal.fire("Error A2", "No se pudo guardar el horario.", "error");
            }
        });
    }

    $(document).on("click", "#guardarHorario", function () {
        saveHorarios();
    });

    $(document).on("change", ".dia-libre", function () {
        var diaId = $(this).data("dia");
        if ($(this).is(":checked")) {
            $(`input[name="hora_abre_${diaId}"]`).val("00:00");
            $(`input[name="hora_cierra_${diaId}"]`).val("00:00");
        } else {
            $(`input[name="hora_abre_${diaId}"]`).val("08:00");
            $(`input[name="hora_cierra_${diaId}"]`).val("17:00");
        }
    });

    $(document).on('click', '#horarios-tab', function () {
        setValues();
    });

    function setValues() {
        try {
            $.ajax({
                url: `{% url 'control_get_horario_atencion' %}`,
                method: 'POST',
                data: {
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                },
                beforeSend: function () {
                    $('#loading').show();
                },
                success: function (data) {
                    if (data.save == 1) {
                        let horarioVerbose = "";
                        data.data.forEach(function (horario) {
                            var dia = horario.numero_dia;
                            var horaAbre = horario.hora_abre.substring(0, 5);
                            var horaCierra = horario.hora_cierra.substring(0, 5);
                            var libre = horario.libre === 1;
                            $("input[name='hora_abre_" + dia + "']").val(horaAbre);
                            $("input[name='hora_cierra_" + dia + "']").val(horaCierra);
                            $("input[data-dia='" + dia + "']").prop("checked", libre);
                            let libre_ = libre ? "Cerrado" : "Abierto";
                            horarioVerbose += "<span><strong>" + horario.descripcion_dia + "</strong> (" + libre_ +") De " + horaAbre + " a " + horaCierra + "</span><br>";
                        });
                        $("#horarioVerbose").html(horarioVerbose);
                    } else {
                        Swal.fire("", "Error D5: " + data.error, "error");
                    }
                },
                error: function (error) {
                    Swal.fire("", "Error E: " + error, "error");
                },
                complete: function () {
                    $('#loading').hide();
                }
            });
        } catch (error) {
            Swal.fire("", "Error A: " + error, "error");
        }
    }

    $('#setSameTime').click(function () {
        var horaAbre = $('input[name="hora_abre_todos"]').val();
        var horaCierra = $('input[name="hora_cierra_todos"]').val();
        if (horaAbre && horaCierra) {
            $(".dia-libre").each(function () {
                var diaId = $(this).data("dia");
                if (!$(this).is(":checked")) {
                    $(`input[name="hora_abre_${diaId}"]`).val(horaAbre);
                    $(`input[name="hora_cierra_${diaId}"]`).val(horaCierra);
                }
            });
            saveHorarios();
        } else {
            Swal.fire("", "Por favor, ingrese ambos horarios (abre y cierra).", "error");
        }
    });

    $('#setTodosAbierto').click(function () {
        $('.dia-libre').prop('checked', false);
        saveHorarios();
    });
</script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
/* —— SweetAlert cuando ?updated=1 —— */
document.addEventListener('DOMContentLoaded',()=>{
  {% if request.GET.updated %}
    Swal.fire({
      icon: 'success',
      title: '¡Datos actualizados!',
      text: 'Tu NexID se guardó correctamente.',
      confirmButtonColor: '#3085d6',
      timer: 2500,
      timerProgressBar: true
    });
  {% endif %}
});
</script>


{% endblock %}