{% extends "new/settings_base.html" %}

{% block headMedia %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" />
{% endblock %}


{% block dash-title %}
<b>API Keys</b>
{% endblock %}


{% block dash %}

<!-- /.row -->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                Gestión de API Keys
                <button type="button" class="btn btn-success btn-sm pull-right" id="btnGenerateKey">
                    <i class="fa fa-plus"></i> Generar Nueva API Key
                </button>
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">



                <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-apikeys">
                    <thead>
                        <tr>
                            <th>API Key</th>
                            <th>Usuario</th>
                            <th>Fecha de Expiración</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>API Key</th>
                            <th>Usuario</th>
                            <th>Fecha de Expiración</th>
                            <th>Acciones</th>
                        </tr>
                    </tfoot>

                </table>
                <!-- /.table-responsive -->



            </div>
            <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

{% endblock %}


{% block scripts %}
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>


<script>
    var table;
    $(document).ready(function () {
        table = $('#dataTables-apikeys').DataTable({
            "order": [[2, "desc"]],
            "responsive": true,
            "processing": true,
            "serverSide": true,
            "language": { "url": "/static/languages/Spanish.json" },
            "ajax": { "url": "/catalog/ws/apikeys/" },
            "data": {},
            "columns": [
                { "data": 0 },
                { "data": 1 },
                { "data": 2 },
                {
                    "data": 3,
                    "orderable": false,
                    "render": function (data, type, row) {
                        return '<button class="btn btn-danger btn-xs btn-delete" data-key="' + data + '"><i class="fa fa-trash"></i> Eliminar</button>';
                    }
                }
            ]

        });

        // Generar nueva API Key
        $('#btnGenerateKey').click(function () {
            if (confirm('¿Desea generar una nueva API Key?')) {
                $.post('/catalog/ws/apikeys/create/', function (response) {
                    if (response.success) {
                        alert('API Key generada exitosamente: ' + response.key);
                        table.ajax.reload();
                    } else {
                        alert('Error al generar API Key: ' + response.error);
                    }
                }).fail(function () {
                    alert('Error al comunicarse con el servidor');
                });
            }
        });

        // Eliminar API Key
        $(document).on('click', '.btn-delete', function () {
            var key = $(this).data('key');
            if (confirm('¿Está seguro de eliminar esta API Key?')) {
                $.post('/catalog/ws/apikeys/delete/', { key: key }, function (response) {
                    if (response.success) {
                        alert('API Key eliminada exitosamente');
                        table.ajax.reload();
                    } else {
                        alert('Error al eliminar API Key: ' + response.error);
                    }
                }).fail(function () {
                    alert('Error al comunicarse con el servidor');
                });
            }
        });
    });
</script>

{% endblock %}