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

{% block title %} Clientes {% endblock %}

{% block body %}

<style>
    .rightBorderStyle {
        border-right: 4px solid black !important;
    }
</style>

<div class="row row-cols-1 row-cols-md-auto g-2 align-items-end mb-3">

    <!-- Botones principales -->
    <div class="col">
        <div class="d-flex flex-wrap gap-2">

            <button type="button" class="btn btn-success btn-sm" id="btnNuevoCliente" data-bs-toggle="modal"
                data-bs-target="#modalClientes">
                Nuevo Cliente
            </button>

            <button type="button" class="btn btn-warning btn-sm" id="btnNuevaCategoria" data-bs-toggle="modal"
                data-bs-target="#modalCategoriasClientes">
                Categorías Clientes
            </button>

            <button type="button" class="btn btn-info btn-sm" data-bs-toggle="modal"
                data-bs-target="#modalPlantillaClientes">
                Cargar Clientes
            </button>

            <button id="btnMarcarFavoritos" class="btn btn-success btn-sm">Marcar Favoritos</button>
            <button id="btnDesmarcarFavoritos" class="btn btn-danger btn-sm">Desmarcar Favoritos</button>
        </div>
    </div>

    <!-- Checkbox Solo Favoritos -->
    <div class="col">
        <label for="filtroFavoritos" class="form-label mb-0 small">Solo favoritos</label>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="filtroFavoritos">
        </div>
    </div>

    <!-- Filtro por Categoría -->
    <div class="col">
        <label for="filtroCategoria" class="form-label mb-0 small">Categoría:</label>
        <select id="filtroCategoria" class="form-select form-select-sm">
            <option value="">Todas</option>
            <option value="SIN CATEGORIA">Sin categoría</option>
            <!-- Aquí puedes agregar más categorías dinámicamente si lo deseas -->
        </select>
    </div>

    <!-- Filtro por Asociación a Posmaster -->
    <div class="col">
        <label for="filtroAsociado" class="form-label mb-0 small">Asociado Posmaster:</label>
        <select id="filtroAsociado" class="form-select form-select-sm">
            <option value="">Todos</option>
            <option value="1">Asociado</option>
            <option value="0">Sin Asociar</option>
        </select>
    </div>

</div>


<br>

<div class="row">
    <div class="table-responsive">
        <table class="table table-bordered table-sm" id="clientesTable" style="width: 100%;">
            <thead>
                <tr>
                    <th class="text-center bg-primary text-white" colspan="6">Info Mis Clientes</th>
                    <th class="text-center bg-info text-white" colspan="4">Info en Aplicación</th>
                    <th class="text-center bg-warning text-dark" colspan="3">Info en Posmaster</th>
                    <th></th>
                </tr>
                <tr>
                    <th class="text-center">Identidad</th>
                    <th class="text-center">Nombre</th>
                    <th class="text-center">Correo</th>
                    <th class="text-center">Telefono</th>

                    <th class="text-center">Favorito</th>
                    <th class="text-center">Categoria</th>

                    <th class="text-center">Identidad</th>
                    <th class="text-center">Nombre</th>
                    <th class="text-center">Correo</th>
                    <th class="text-center">Telefono</th>

                    <th class="text-center">Codigo</th>
                    <th class="text-center">Nombre</th>
                    <th class="text-center">Asociado</th>

                    <th class="text-center">Acciones</th>

                </tr>
            </thead>
            <tbody>

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


<div class="modal fade" id="modalPlantillaClientes" tabindex="-1" aria-labelledby="modalPlantillaClientesLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content border-0 shadow">

            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="modalPlantillaClientesLabel"><i class="bi bi-people-fill"></i> Gestión de
                    Plantilla de Clientes</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Cerrar"></button>
            </div>

            <div class="modal-body">
                <form method="post" enctype="multipart/form-data"
                    action="{% url 'cargar_plantilla_clientes' 'clientes' %}">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="fileClientes" class="form-label">Selecciona el archivo</label>
                        <input type="file" class="form-control" id="fileClientes" name="file" required>
                    </div>

                    <button type="submit" class="btn btn-success w-100 mb-2">
                        <i class="bi bi-upload"></i> Cargar Plantilla de Clientes
                    </button>

                    <a href="{% url 'descargar_plantilla' 'clientes' %}" class="btn btn-primary w-100">
                        <i class="bi bi-download"></i> Descargar Plantilla de Clientes
                    </a>
                </form>
            </div>

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



<div class="modal fade" id="modalClientes" tabindex="-1" aria-labelledby="modalClientesLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="modalClientesLabel">Agregar / Editar Cliente</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formCliente">
                {% csrf_token %}
                <div class="modal-body">
                    <input type="hidden" name="id_cliente" id="id_cliente">

                    <div class="mb-3">
                        <label for="identidad" class="form-label">Identidad</label>
                        <input type="text" class="form-control form-control-sm" id="identidad" name="identidad"
                            maxlength="13" required>
                    </div>

                    <div class="mb-3">
                        <label for="nombre_cliente" class="form-label">Nombre</label>
                        <input type="text" class="form-control form-control-sm" id="nombre_cliente"
                            name="nombre_cliente" required>
                    </div>

                    <div class="mb-3">
                        <label for="correo_cliente" class="form-label">Correo</label>
                        <input type="email" class="form-control form-control-sm" id="correo_cliente"
                            name="correo_cliente">
                    </div>

                    <div class="mb-3">
                        <label for="telefono_cliente" class="form-label">Teléfono</label>
                        <input type="text" class="form-control form-control-sm" id="telefono_cliente"
                            name="telefono_cliente">
                    </div>

                    <div class="mb-3">
                        <label for="categoria_cliente" class="form-label">Categoría</label>
                        <div class="d-flex align-items-center gap-2">
                            <select class="form-select form-select-sm categoria_cliente" name="cat_categoria_cliente"
                                id="cat_categoria_cliente" required>
                                <option value="">Seleccione</option>
                            </select>
                            <button type="button" class="btn btn-sm btn-info text-dark" id="btnAddCategoria"><i
                                    class="material-icons">add</i></button>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-sm btn-success">Guardar</button>
                    <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </form>
        </div>
    </div>
</div>



<!-- Modal CRUD Categorías Clientes -->
<div class="modal fade" id="modalCategoriasClientes" tabindex="-1" aria-labelledby="modalCategoriasClientesLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title fw-bold" id="modalCategoriasClientesLabel">Gestín de Categorías de Clientes</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">

                <div class="row">
                    <form id="formCategoriaCliente">
                        {% csrf_token %}
                        <input type="hidden" id="id_categoria_cliente" name="id_categoria_cliente">
                        <div class="row g-2">
                            <div class="col-md-9">
                                <label class="form-label">Nombre de la Categoría</label>
                                <input type="text" class="form-control form-control-sm text-uppercase"
                                    id="categoria_cliente" name="categoria_cliente" required>
                            </div>
                            <div class="col-md-3 d-flex align-items-end">
                                <button type="submit" class="btn btn-sm btn-success w-100">Guardar</button>
                            </div>
                        </div>
                    </form>
                </div>

                <br>

                <div class="row">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm" id="tablaCategoriasClientes" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th>Estado</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



{% endblock %}

{% block scripts %}
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    {% if messages %}
    {% for message in messages %}
    Swal.fire({
        title: "{% if message.tags == 'success' %}¡Éxito!{% else %}¡Error!{% endif %}",
        text: "{{ message|escapejs }}",
        icon: "{% if message.tags == 'success' %}success{% else %}error{% endif %}",
        confirmButtonColor: "{% if message.tags == 'success' %}#3085d6{% else %}#d33{% endif %}",
        confirmButtonText: "Ok"
    });
    {% endfor %}
    {% endif %}
</script>


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

        var csrfToken = "{{ csrf_token }}";
        var user_id = "{{ user_id }}";
        var tipo_usuario = "{{ tipo_usuario }}";
        var userName = "{{ userName }}";
        var clientesTable, tablaCategoriasClientes;

        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
        });

        clientesTable = $('#clientesTable').DataTable({
            initComplete: function () {
                clientesTable.columns.adjust().draw();
            },
            scrollX: true,
            scrollCollapse: true,
            scrollY: '350px',
            pageLength: 50,
            fixedColumns: {
                left: 0,
                right: 1
            },
            ajax: {
                beforeSend: function (xhr, type) {
                    // loading layer
                    $('#loading').show();

                    if (!type.crossDomain) {
                        xhr.setRequestHeader(
                            'X-CSRF-Token',
                            $(
                                'meta[name="csrf-token"]'
                            ).attr('content'));
                    }
                },
                url: `{% url 'dataClientesNegocio' %}`,
                type: "POST",
                dataSrc: 'data',
                data: {
                    user_negocio_id: user_id,
                    csrfmiddlewaretoken: csrfToken
                },
                complete: function (data) {
                    // loading layer
                    $('#loading').hide();
                }
            },
            dom: buttons,
            language: {
                url: "{% static 'app/json/es-ES.json' %}",
            },
            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: 'identidad' },
                { data: 'nombre_cliente' },
                { data: 'correo_cliente' },
                { data: 'telefono_cliente' },
                {
                    data: null,
                    render: function (data, type, row) {
                        return `<div class='text-center'><div class='btn-group'><input type="checkbox" ${row.favorito == 1 ? 'checked' : ''} data-cliente="${row.id_cliente}" class="clienteFavorito-checkbox"></div></div>`;
                    }
                },
                { data: 'categoria_cliente', className: 'rightBorderStyle' },

                { data: 'identidad_app' },
                { data: 'nombre_app' },
                { data: 'correo_app' },
                { data: 'telefono_app', className: 'rightBorderStyle' },

                { data: 'codigo_posmaster' },
                { data: 'nombre_cliente_posmaster' },
                {
                    data: null,
                    render: function (data, type, row) {
                        return `<span class="badge ${row.asociado == 1 ? 'bg-success text-white' : 'bg-warning text-dark'}">${row.asociado == 1 ? 'Asociado Posmaster' : 'Sin Asociar'}</span>`;
                    },
                    className: 'rightBorderStyle'
                },
                {
                    data: null,
                    render: function (data, type, row) {
                        return `
                            <div class='text-center'>
                                <button class='btn btn-sm btn-warning text-dark btnEditCliente' title='Editar Cliente'
                                data-id='${row.id_cliente}'
                                data-identidad='${row.identidad}'
                                data-nombre='${row.nombre_cliente}'
                                data-correo='${row.correo_cliente}'
                                data-telefono='${row.telefono_cliente}'
                                data-id_categoria='${row.id_categoria_cliente}'
                                >
                                    <i class='material-icons'>edit</i>
                                </button>
                            </div>
                        `;
                    },
                    orderable: false,
                    searchable: false
                }

            ]
        });


        $('#filtroFavoritos, #filtroCategoria, #filtroAsociado').on('change', function () {
            clientesTable.draw();
        });

        $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex, rowData, counter) {
                let mostrar = true;

                // 1. Filtrar solo favoritos
                if ($('#filtroFavoritos').is(':checked')) {
                    if (parseInt(rowData.favorito) !== 1) {
                        mostrar = false;
                    }
                }

                // 2. Filtrar por categoría
                let filtroCategoria = $('#filtroCategoria').val();
                if (filtroCategoria && rowData.categoria_cliente !== filtroCategoria) {
                    mostrar = false;
                }

                // 3. Filtrar por asociación posmaster
                let filtroAsociado = $('#filtroAsociado').val();
                if (filtroAsociado !== '') {
                    if (parseInt(rowData.asociado) !== parseInt(filtroAsociado)) {
                        mostrar = false;
                    }
                }

                return mostrar;
            }
        );


        $(document).on('change', '.clienteFavorito-checkbox', function () {
            cliente = $(this).data('cliente');

            try {
                $.ajax({
                    url: `{% url 'clientes_set_unset_favorito' %}`,
                    method: 'POST',
                    data: {
                        cliente: cliente,
                        negocio: user_id,
                        csrfmiddlewaretoken: csrfToken
                    },
                    success: function (data) {
                        if (data.save == 1) {
                            toastMixin.fire({
                                icon: 'success',
                                animation: true,
                                title: 'Cliente Favorito Editado!'
                            });

                            clientesTable.ajax.reload();
                        } else {
                            console.log("Error: " + data.error);

                        }
                    }
                });
            } catch (error) {
                console.log(error);
            }
        });


        function aplicarFavoritoAFiltrados(valor_favorito) {
            const dataAplicada = clientesTable.rows({ search: 'applied' }).data().toArray();
            const ids = dataAplicada.map(row => row.id_cliente);

            if (ids.length === 0) {
                Swal.fire("", "No hay Clientes visibles en el filtro actual.", "warning");
                return;
            }

            $.ajax({
                url: "{% url 'clientes_masivo_set_unset_favorito' %}",
                method: "POST",
                data: {
                    clientes: JSON.stringify(ids),
                    negocio: user_id,
                    valor_favorito: valor_favorito,
                    csrfmiddlewaretoken: csrfToken
                },
                success: function (data) {
                    if (data.save == 1) {
                        toastMixin.fire({
                            icon: 'success',
                            title: 'Clientes Favoritos Editados!'
                        });
                        clientesTable.ajax.reload();
                    } else {
                        Swal.fire("Error", data.error, "error");
                    }
                }
            });
        }

        $('#btnMarcarFavoritos').on('click', function () {
            aplicarFavoritoAFiltrados(1);
        });

        $('#btnDesmarcarFavoritos').on('click', function () {
            aplicarFavoritoAFiltrados(0);
        });




        function cargarSelectCategorias() {
            $.ajax({
                url: "{% url 'dataCategoriasClientes' %}",
                type: "POST",
                data: {
                    negocio: user_id,
                    opc: 1,
                    csrfmiddlewaretoken: csrfToken
                },
                success: function (data) {
                    console.log(data);

                    if (data.save == 1) {
                        $('.categoria_cliente').empty();
                        $('.categoria_cliente').html('<option value="0">SIN CATEGORIA</option>');

                        data.data.forEach(item => {
                            $('.categoria_cliente').append(`<option value="${item.id_categoria_cliente}">${item.categoria_cliente}</option>`);
                        });


                        $('#filtroCategoria').empty();
                        $('#filtroCategoria').html('<option value="">TODAS</option><option value="SIN CATEGORIA">SIN CATEGORIA</option>');

                        data.data.forEach(item => {
                            $('#filtroCategoria').append(`<option value="${item.id_categoria_cliente}">${item.categoria_cliente}</option>`);
                        });
                    }
                }
            });
        }


        tablaCategoriasClientes = $('#tablaCategoriasClientes').DataTable({
            ajax: {
                url: "{% url 'dataCategoriasClientes' %}",
                type: "POST",
                data: { negocio: user_id, opc: 0, csrfmiddlewaretoken: csrfToken },
                dataSrc: 'data'
            },
            columns: [
                { data: 'categoria_cliente' },
                {
                    data: 'estado',
                    render: function (data) {
                        return data == 1 ? '<span class="badge bg-success">Activo</span>' : '<span class="badge bg-danger">Deshabilitado</span>';
                    }
                },
                {
                    data: null,
                    className: "text-center",
                    render: function (data, type, row) {
                        return `
                            <button class='btn btn-sm btn-warning btnEditarCategoria' data-id="${row.id_categoria_cliente}" data-nombre="${row.categoria_cliente}"><i class="material-icons">edit</i></button>
                            <button class='btn btn-sm btn-danger btnEliminarCategoria' data-id="${row.id_categoria_cliente}"><i class="material-icons">delete</i></button>
                        `;
                    }
                }
            ],
            language: {
                url: "{% static 'app/json/es-ES.json' %}"
            }
        });

        // Guardar o editar
        $('#formCategoriaCliente').submit(function (e) {
            e.preventDefault();

            $.ajax({
                url: "{% url 'insertUpdateCategoriaCliente' %}",
                method: "POST",
                data: {
                    id_categoria_cliente: $('#id_categoria_cliente').val(),
                    categoria: $('#categoria_cliente').val(),
                    negocio: user_id,
                    csrfmiddlewaretoken: csrfToken
                },
                success: function (data) {
                    if (data.save == 1) {
                        tablaCategoriasClientes.ajax.reload();
                        cargarSelectCategorias();
                        $('#formCategoriaCliente')[0].reset();
                        $('#id_categoria_cliente').val('');
                    } else {
                        alert(data.error);
                    }
                }
            });

        });

        // Editar
        $(document).on('click', '.btnEditarCategoria', function () {
            $('#id_categoria_cliente').val($(this).data('id'));
            $('#categoria_cliente').val($(this).data('nombre'));
        });

        // Eliminar / cambiar estado
        $(document).on('click', '.btnEliminarCategoria', function () {
            const id = $(this).data('id');

            $.ajax({
                url: "{% url 'changeStatusCategoriaCliente' %}",
                method: "POST",
                data: {
                    id_categoria_cliente: id,
                    csrfmiddlewaretoken: csrfToken
                },
                success: function (data) {
                    if (data.save == 1) {
                        tablaCategoriasClientes.ajax.reload();
                        cargarSelectCategorias();
                        toastMixin.fire({
                            icon: 'success',
                            animation: true,
                            title: 'Estado de Categoria de Clientes Actualizado!'
                        });
                    } else {
                        alert(data.error);
                    }
                }
            });

        });

        // Inicializar select al cargar
        cargarSelectCategorias();



        function abrirModalCliente(cliente = null) {
            if (cliente) {
                $('#id_cliente').val(cliente.id_cliente);
                $('#identidad').val(cliente.identidad);
                $('#nombre_cliente').val(cliente.nombre_cliente);
                $('#correo_cliente').val(cliente.correo_cliente);
                $('#telefono_cliente').val(cliente.telefono_cliente);
                $('#cat_categoria_cliente').val(cliente.id_categoria_cliente);
            } else {
                $('#formCliente')[0].reset();
                $('#id_cliente').val('');
            }
            $('#modalClientes').modal('show');
        }


        $(document).on('click', '.btnEditCliente', function () {
            const cliente = {
                id_cliente: $(this).data('id'),
                identidad: $(this).data('identidad') || '',
                telefono_cliente: $(this).data('telefono') || '',
                correo_cliente: $(this).data('correo') || '',
                id_categoria_cliente: $(this).data('id_categoria') || '',
                nombre_cliente: $(this).data('nombre') || '',
            };
            abrirModalCliente(cliente);
        });



        $('#formCliente').on('submit', function (e) {
            e.preventDefault();
            const formData = $(this).serialize();
            $.ajax({
                url: "{% url 'insert_update_cliente_x_negocio' %}",
                method: 'POST',
                data: formData,
                success: function (data) {
                    if (data.save == 1) {
                        $('#modalClientes').modal('hide');
                        clientesTable.ajax.reload();
                    } else if (data.existe > 0) {
                        Swal.fire('', 'Ya existe un cliente activo con esa Identidad en tu Negocio.', 'warning');
                    } else {
                        Swal.fire('', 'Error al guardar el cliente', 'warning');
                    }
                }

            });
        });

        $('#btnNuevaCategoria, #btnAddCategoria').click(function (e) {
            e.preventDefault();

            $('#formCategoriaCliente')[0].reset();
            $('#id_categoria_cliente').val('');
        });

        $('#btnNuevoCliente').click(function (e) {
            e.preventDefault();

            abrirModalCliente(null);
        });

    });
</script>


{% endblock %}