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


{% block title %} Mis Ubicaciones {% endblock %}

{% block body %}

<h4 class=" mb-4 fw-bold text-center">Mis Ubicaciones</h4>


<div class="d-flex justify-content-end">
    <div class="col-sm-2">
        <a type="button" href="{% url 'mapsViewer' 0 0 %}" class="btn btn-sm btn-danger w-100">Nuevo</a>
    </div>
</div>

<br>

<div class="row">
    <div class="table-responsive">
        <table id="tableMaps"
            class="table table-striped table-bordered mb-0 table-sm rounded-4 table-hover align-middle"
            style="width: 100%;">
            <thead class="table-gradient text-dark">
                <tr>
                    <th>#</th>
                    <th>Nombre Direccion</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
    </div>
</div>

{% endblock %}



{% block scripts %}


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

        var maps_id = 0;
        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)
            }
        });

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

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


        tableMaps = $("#tableMaps").DataTable({
            scrollX: true,
            scrollCollapse: true,
            scrollY: '400px',
            pageLength: 50,
            initComplete: function () {

            },
            ajax: {
                beforeSend: function (xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader(
                            'X-CSRF-Token',
                            $(
                                'meta[name="csrf-token"]'
                            ).attr('content'));
                    }
                },
                url: `{% url 'getUbicacionesUser' %}`,
                type: "POST",
                dataScr: 'data',
                data: {
                    opcion: 0,
                    csrfmiddlewaretoken: csrfToken
                },
            },
            dom: buttons,
            language: {
                url: "//cdn.datatables.net/plug-ins/1.11.5/i18n/es-ES.json",
            },
            colReorder: {
                realtime: false,
            },
            buttons: [{
                extend: 'excel',
                text: '<i class="fas fa-file-excel"></i>',
                titleAttr: 'Excel',
                className: 'btn btn-success',
            },
            {
                extend: 'pdf',
                text: '<i class="fas fa-file-pdf"></i>',
                titleAttr: 'PDF',
                className: 'btn btn-danger',
            },
            {
                extend: 'print',
                text: '<i class="fas fa-print"></i>',
                titleAttr: 'Imprimir',
                className: 'btn btn-null',
                orientation: 'landscape'
            }
            ],
            columns: [
                {
                    data: 'id_ubicacion'
                },
                {
                    data: 'nombre_ubicacion',
                    width: '80%'
                },
                {
                    data: "estado",
                    className: 'text-center',
                    render: function (data, type, row) {
                        var badge = "";
                        if (data == 3) {
                            badge +=
                                '<span class="badge badge-pill bg-danger">Deshabilitada</span>';
                        } else {
                            badge +=
                                '<span class="badge badge-pill bg-success">Activo</span>';
                        }

                        return badge;
                    },
                },
                {
                    data: null,
                    className: 'text-center',
                    render: function (data, type, row) {
                        return `
                            <div class='text-center'>
                                <div class='btn-group'>
                                    <button class='btn btn-sm btn-info btnViewActual' id='btnMap' data-id='${row.id_ubicacion}' title='Visualizar en Mapa'><i class='material-icons'>public</i></button>
                                    <button class='btn btn-sm btn-warning btnViewActual' id='btnEdit' data-id='${row.id_ubicacion}' title='Editar'><i class='material-icons'>edit</i></button>
                                    <button class='btn btn-sm btn-danger btnViewActual' id='btnStatus' data-id='${row.id_ubicacion}' title='Cambiar Estado'><i class='material-icons'>change_circle</i></button>
                                </div>
                            </div>
                            `;
                    },
                }
            ],
        });




        $(document).on('click', '.btnViewActual', function () {
            // Obtén el ID del botón y el maps_id
            btnID = this.id;
            maps_id = parseInt($(this).data('id'));

            if (btnID == 'btnMap') {
                window.location = "{% url 'mapsViewer' 0 0 %}".replace("0/0", `${maps_id}/1`);
            } else if (btnID == 'btnEdit') {
                window.location = "{% url 'mapsViewer' 0 0 %}".replace("0/0", `${maps_id}/0`);
            } else if (btnID == "btnStatus") {
                $.ajax({
                    url: `{% url 'maps_update_status_ubicacion' %}`, // Cambiar por tu URL
                    method: 'POST',
                    data: {
                        maps_id: maps_id,
                        csrfmiddlewaretoken: csrfToken
                    },
                    success: function (data) {
                        if (data.save == 1) {
                            toastMixin.fire({
                                animation: true,
                                title: 'Estado de Ubicacion Actualizado!'
                            });
                            tableMaps.ajax.reload(null, false);
                        } else {
                            console.log("Error D: " + data.error);
                        }
                    }
                });
            }
        });



    });
</script>



{% endblock %}