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

{% block meta %}

<meta name="csrf-token" content="{{ csrf_token }}">

<meta name="url-insert_update_negocio" content="{% url 'insert_update_negocio' %}">

{% endblock %}


{% block title %} MI NEGOCIO {% endblock %}

{% block body %}

<style>
    .account-type-container {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .account-type-option {
        border: 1px solid #ccc;
        padding: 20px;
        border-radius: 5px;
        width: 48%;
        cursor: pointer;
        text-align: center;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .account-type-option.active {
        border-color: #007bff;
        background-color: #f0f8ff;
    }

    .account-type-option:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .account-type-option i {
        font-size: 2em;
        margin-bottom: 10px;
    }

    .iti {
        width: 100%;
    }

    .iti__flag-container {
        padding-right: 10px;
    }
</style>

<h4 class=" mb-4 fw-bold text-center">Mi Negocio</h4>

<div class="container mt-4">

    <div class="row">

        <form id="negocioForm" method="POST">
            {% csrf_token %}

            <input type="time" hidden class="form-control form-control-sm" id="horario_atencion_abre"
                name="horario_atencion_abre" value="10:00">
            <input type="time" hidden class="form-control form-control-sm" id="horario_atencion_cierre"
                name="horario_atencion_cierre" value="20:00">
            <input type="hidden" class="form-control form-control-sm" id="dias_atencion" name="dias_atencion"
                placeholder="Ejemplo: Lunes a Viernes" value="Lunes a Viernes">

            <div class="row p-2">
                <div class="col-lg-4">
                    <div class="form-group">
                        <label for="nombre">Nombre</label>
                        <input type="text" class="form-control form-control-sm" id="nombre" name="nombre"
                            placeholder="Nombre" required value="{{ negocioData.0.nombre }}">
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group">
                        <label for="telefono">Teléfono</label>
                        <input type="tel" class="form-control form-control-sm" id="telefono" name="telefono" required
                            placeholder="XXXX-XXXX" value="{{negocioData.0.telefono}}">
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group">
                        <label for="telefono">Correo</label>
                        <input type="email" class="form-control form-control-sm" id="email" name="email" required
                            placeholder="Ej: nexus@nexushn.com" value="{{ negocioData.0.correo }}">
                    </div>
                </div>
            </div>

            <div class="row p-2">
                <div class="col-lg-12">
                    <div class="form-group">
                        <label for="direccion">Dirección</label>
                        <textarea class="form-control form-control-sm" id="direccion" name="direccion"
                            placeholder="Dirección" required>{{ negocioData.0.direccion }}</textarea>
                    </div>
                </div>
            </div>

            <div id="seccion_negocio">
                <div class="row p-2">
                    <h3>Háblanos de tu Negocio</h3>

                    <div class="col-lg-4">
                        <div class="form-group">
                            <label for="representante_negocio">Representante de tu Negocio</label>
                            <input type="text" class="form-control form-control-sm" id="representante_negocio"
                                name="representante_negocio" placeholder="Representante" value="{{ negocioData.0.representante}}">
                        </div>
                    </div>

                    <input type="hidden" id="hidden_tipo_servicio" value="{{ negocioData.0.id_tipo_servicio }}">

                    <div class="col-lg-4">
                        <div class="form-group">
                            <label for="tipo_servicio">Tipo de Servicio de tu Negocio</label>
                            <select class="form-select form-select-sm" id="tipo_servicio" name="tipo_servicio">
                                <option value="0">Selecciona una opción</option>
                                <option value="1">Productos</option>
                                <option value="2">Servicios</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="form-group">
                            <label for="rtn_negocio">RTN de tu Negocio</label>
                            <input type="text" class="form-control form-control-sm" id="rtn_negocio" name="rtn_negocio"
                                placeholder="RTN" value="{{ negocioData.0.rtn }}">
                            <small class="form-text text-danger">Este campo no es obligatorio.</small>
                        </div>
                    </div>

                </div>

                <div class="row p-2">
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label for="descripcion_negocio">Descripción de tu Negocio</label>
                            <textarea class="form-control form-control-sm" id="descripcion_negocio"
                                name="descripcion_negocio" placeholder="Describe tu negocio" rows="3">{{ negocioData.0.descripcion }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="row p-2">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="categorias_negocio">Categorías de tu Negocio</label>
                            <select class="form-select form-select-sm" name="categorias_negocio[]"
                                id="categorias_negocio" multiple>
                                <option value="0">Seleccione una o varias Categorías</option>
                                {% for tu in tiposUsuariosData %}
                                    <option value="{{ tu.id_tipo_negocio }}"
                                        {% if tu.id_tipo_negocio in categoriasAssignedIds %}selected{% endif %}>
                                        {{ tu.tipo_negocio }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-6" id="categoria-principal-container" style="display: none;">
                        <div class="form-group">
                            <label for="categoria_principal">Elige la Categoría Principal</label>
                            <div id="categoria-principal-opciones"></div>
                        </div>
                    </div>
                </div>

                <div class="row p-2">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="formas_entrega_negocio">Formas de Entrega</label>
                            <select class="form-select form-select-sm" name="formas_entrega_negocio[]"
                                id="formas_entrega_negocio" multiple>
                                <option value="0">Seleccione uno o varios Tipos</option>
                                {% for forma in formasEntregasData %}
                                    <option value="{{ forma.id_forma_entrega }}"
                                        {% if forma.id_forma_entrega in formasEntregasAssignedIds %}selected{% endif %}>
                                        {{ forma.forma_entrega }}
                                    </option>
                                {% endfor %}

                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row p-2">
                <div class="col-lg-12">
                    <button type="submit"
                        {% if id_negocio == 0 or id_negocio == '0' %}
                            class="btn btn-success btn-block text-white w-100">Crear Negocio
                        {% else %}
                            class="btn btn-danger btn-block text-white w-100">Guardar
                        {% endif %}
                    </button>
                </div>
            </div>

        </form>

    </div>

</div>

{% endblock %}



{% block scripts %}


<script>
    function actualizarOpcionesCategoriaPrincipal() {
        var selectedCategories = $("#categorias_negocio").val();
        var principalContainer = $("#categoria-principal-container");
        var principalOptions = $("#categoria-principal-opciones");

        if (selectedCategories.length > 0) {
            principalContainer.show();
            principalOptions.empty();

            selectedCategories.forEach(function (category) {
                var categoryLabel = $('#categorias_negocio option[value="' + category + '"]').text();

                // Verificamos si esta categoría es la principal asignada desde backend
                var isPrincipal = false;
                {% for cat in categoriasAssigned %}
                    if (category == "{{ cat.id_categoria }}") {
                        isPrincipal = {{ cat.categoria_principal_value|yesno:"true,false" }};
                    }
                {% endfor %}

                principalOptions.append(`
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="categoria_principal"
                            id="categoria_principal_${category}" value="${category}" ${isPrincipal ? "checked" : ""}>
                        <label class="form-check-label" for="categoria_principal_${category}">
                            ${categoryLabel}
                        </label>
                    </div>
                `);
            });
        } else {
            principalContainer.hide();
        }
    }

    function getMeta(name) {
        return document.querySelector(`meta[name="${name}"]`).content;
    }

    var csrfToken = getMeta("csrf-token");
    var insert_update_negocio = getMeta("url-insert_update_negocio");


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

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

        var toastMixin = Swal.mixin({
            toast: true,
            icon: 'success',
            title: 'General Title',
            animation: false,
            position: 'top-right',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });

        hidden_tipo_servicio = $('#hidden_tipo_servicio').val() || 0;

        $('#tipo_servicio').val(hidden_tipo_servicio).change();

        let dollarUSLocale = Intl.NumberFormat("en-US", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });

        let intergerLocale = Intl.NumberFormat("en-US", {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        });

        $("#categorias_negocio").select2({
            placeholder: "Selecciona una o más Categorías",
            allowClear: true,
            width: "100%",
        });
        $("#formas_entrega_negocio").select2({
            placeholder: "Seleccione una o varias Formas de Entrega",
            allowClear: true,
            width: "100%",
        });

        actualizarOpcionesCategoriaPrincipal();

        // También cuando el usuario cambie el select
        $("#categorias_negocio").on("change", actualizarOpcionesCategoriaPrincipal);


        $("#negocioForm").submit(function (e) {
            e.preventDefault();

            var nombre = $("#nombre").val();    
            var telefono = $("#telefono").val(); 
            var email = $("#email").val();
            
            var direccion = $("#direccion").val();

            var representante_negocio = $("#representante_negocio").val();
            var tipo_servicio = $("#tipo_servicio").val();
            var rtn_negocio = $("#rtn_negocio").val();

            var descripcion_negocio = $("#descripcion_negocio").val();
            
            var horario_atencion_abre = $("#horario_atencion_abre").val();
            var horario_atencion_cierre = $("#horario_atencion_cierre").val();
            var dias_atencion = $("#dias_atencion").val();
            
            var categorias_negocio = $("#categorias_negocio").val();
            var formas_entrega_negocio = $("#formas_entrega_negocio").val();
            var categoria_principal = $(
                'input[name="categoria_principal"]:checked'
            ).val();

            Swal.fire({
                title: "",
                html: "<b></b>",
                didOpen: () => {
                    Swal.showLoading();
                },
                allowOutsideClick: false,
                showConfirmButton: false,
            });

            try {
                $.ajax({
                    url: insert_update_negocio,
                    type: "POST",
                    data: {
                        nombre: nombre,
                        telefono: telefono,
                        email: email,
                        
                        direccion: direccion,

                        representante_negocio: representante_negocio,
                        tipo_servicio: tipo_servicio,
                        rtn_negocio: rtn_negocio,

                        descripcion_negocio: descripcion_negocio,
                        
                        horario_atencion_abre: horario_atencion_abre,
                        horario_atencion_cierre: horario_atencion_cierre,
                        dias_atencion: dias_atencion,
                        
                        formas_entrega_negocio: formas_entrega_negocio,
                        categorias_negocio: categorias_negocio,
                        categoria_principal: categoria_principal,
                        
                        csrfmiddlewaretoken: csrfToken,
                    },
                    dataType: "json",
                    success: function (data) {
                        Swal.close();

                        if (data.save == 1) {
                            Swal.fire("", "Datos Guardados!", "success");
                        } else {
                            Swal.fire("", "Error: " + data.error, "error");
                        }
                    },
                });
            } catch (error) {
                Swal.fire("", "Error: " + error, "error");
            }
        });


    });
</script>



{% endblock %}