{% extends '@EasyAdmin/crud/detail.html.twig' %}

{% block head_javascript %}
    {{ parent() }}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/2.3.6/css/dataTables.dataTables.css" />
    <script src="https://cdn.datatables.net/2.3.6/js/dataTables.js"></script>
    {{ importmap('app') }}

    <script>
        $(document).ready(function() {
            window.table  = new DataTable('#tabla-rias', {
                pageLength: 10,
                serverSide: true,
                processing: true,
                dom: 'rtip', // Mantener oculto el buscador por defecto
                ajax: {
                    url: '{{ path('versionado_masivo_datatable', {id: entity.instance.id}) }}',
                    type: 'POST',
                    data: function (d) {
                        d.filtro_dni = $('#filtro-dni').val();
                        d.filtro_nombres = $('#filtro-nombre').val();
                    }
                },
                language: { url: 'https://cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json' },
                order: [[0, 'asc']],
                columns: [
                    { data: 'dni', name: 'dni' },
                    { data: 'nombre', name: 'nombre' },
                    { data: 'estado', name: 'estado', render: function(data) {
                        var badge = 'secondary';
                        if (data === 'Finalizado') badge = 'success';
                        if (data === 'Iniciado') badge = 'warning text-dark';
                        if (data === 'Finalizado con Error') badge = 'danger';
                        return '<span class="badge bg-'+badge+'">'+data+'</span>';
                    }},
                    { data: 'fechasCopia', name: 'fechasCopia', orderable: false, searchable: false },
                    { data: 'fechasPdf', name: 'fechasPdf', orderable: false, searchable: false },
                    { data: 'acciones', name: 'acciones', orderable: false, searchable: false, render: function(data) {
                        var html = '<div class="btn-group btn-group-sm">';
                        if (data.urlPdf) {
                            html += '<a href="'+data.urlPdf+'" class="btn btn-outline-secondary btn-sm" title="Descargar PDF"><i class="fa fa-file-pdf-o"></i></a>';
                        } 
                        else if (data.estadoMasivo === 'Finalizado con Error' && data.estadoVersion === 'Finalizado con Error') {
                            html += '<a href="#" data-pdf-url="'+data.urlGenerarPdf+'" id="generar-pdf-btn-'+data.id+'" class="btn btn-outline-secondary btn-sm" onclick="generarPDFyActualizar(event, this)"><i class="fa fa-download"></i></a>';
                        }
                        if (data.estadoMasivo === 'Borrador') {
                            html += '<a href="'+data.urlDelete+'" class="btn btn-outline-danger btn-sm" onclick="borrarVersion(event, this)" title="Eliminar"><i class="fa fa-trash"></i></a>';
                        }
                        html += '</div>';
                        return html;
                    }}
                ]
            });

            $('#btn-buscar').on('click', function() {
                window.table.draw();
            });

            $('#btn-limpiar').on('click', function() {
                $('#filtro-dni, #filtro-nombre').val('');
                 window.table.draw();
            });

            $('#filtro-dni, #filtro-nombre').on('keypress', function(e) {
                if (e.which == 13) $('#btn-buscar').click();
            });
        });

        const badgesEstados = {
            'Borrador': 'bg-secondary',
            'En Espera': 'bg-info text-dark',
            'Iniciado': 'bg-primary',
            'Finalizado': 'bg-success',
            'Erroneo': 'bg-danger',
            'Finalizado con Error': 'bg-danger'
        };

        function borrarVersion(event, element){
            event.preventDefault();
            var $texto = '¿Está seguro que quiere eliminar este versionado del RIA?';
            url = element.getAttribute('href');
            Swal.fire({
                title: '¿Estás seguro?',
                text: $texto,
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sí',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        method: 'POST',
                        context: element,
                        success: function (data) {
                            $('#contenedor-resumen-ajax').html(data.html_resumen);
                            window.table.ajax.reload(null, false); // recargo tabla sin resetear paginacion
                            Swal.fire({
                                title: 'Eliminado',
                                text: data.message,
                                icon: 'success',
                                confirmButtonText: 'Aceptar'
                            });
                        },
                        error: function (xhr, status, error) {
                            Swal.fire({
                                title: 'Error',
                                text: xhr.responseJSON.message,
                                icon: 'error',
                                confirmButtonText: 'Aceptar'
                            });
                        }
                    });
                }
            });
        }

        function generarPDFyActualizar(event, button) {
            event.preventDefault();
            var $boton = $(button);
            var url = $boton.data('pdf-url');
            var $icono = $boton.find('i');
            // cambiar icono a spinner
            $boton.find('i').removeClass('fa-download fa-file-pdf-o').addClass('fa-spinner fa-spin');
            // encuentro todos los botones de generar PDF relacionados y deshabilito
            var botonesGenerarPdf = $('a[id^="generar-pdf-btn-"]');
            botonesGenerarPdf.each(function() {
                var boton = $(this);
                boton.addClass('disabled')
                
            });
            $.ajax({
                url: url,
                method: 'POST',
                context: button,
                success: function (data) {
                    $('#contenedor-resumen-ajax').html(data.html_resumen);
                    Swal.fire('¡Éxito!', data.message, 'success');
                    window.table.ajax.reload(null, false);
                },
                error: function (xhr, status, error) {
                    Swal.fire({
                        title: 'Error',
                        text: xhr.responseJSON.message,
                        icon: 'error',
                        confirmButtonText: 'Aceptar'
                    });
                    window.table.ajax.reload(null, false);
                }
            });
        }
    </script>
{% endblock %}

{% block content_title %}
    <h1 class="content-title">
        <i class="fa fa-cogs me-2"></i>
        Versionado Masivo del {{ entity.instance.fechaCreacion|date('d/m/Y \\a \\l\\a\\s H:i') }}
    </h1>
    <p>
        {% if entity.instance.fechaFinalizacion %}
            📅 Inicio: {{ entity.instance.fechaInicio|date('d/m/Y H:i') }} • ✅ Finalización: {{ entity.instance.fechaFinalizacion|date('d/m/Y H:i') }}
        {% else %}
            📅 Inicio: {{ entity.instance.fechaInicio|date('d/m/Y H:i') }} • ⚙️ Estado: {{ entity.instance.estado }}
        {% endif %}
    </p>
{% endblock %}

{% block detail_fields %}
    {# Configuración de estados #}
    {% set estadoConfig = {
        'Borrador':             { 'color': 'secondary', 'icon': 'fa-pencil-ruler' },
        'En Espera':            { 'color': 'info text-dark', 'icon': 'fa-clock' },
        'Iniciado':             { 'color': 'primary',   'icon': 'fa-play' },
        'Finalizado':           { 'color': 'success',   'icon': 'fa-check-circle' },
        'Erroneo':              { 'color': 'danger',    'icon': 'fa-exclamation-circle' },
        'Finalizado con Error': { 'color': 'danger',    'icon': 'fa-exclamation-triangle' }
    } %}

    <div class="row" id="header-cards-container">
        <div id="contenedor-resumen-ajax">
            {{ include('admin/ria_versiones/cardResumen_showVersionado.html.twig', {
                'masivo': entity.instance,
                'contadores_db': contadores_db,
                'estadoConfig': estadoConfig
            }) }}
        </div> 
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-list me-2"></i>
                        RIAs Versionados 
                    </h5>
                    {% if entity.instance.estado in ['Borrador'] %}
                        <a href="{{ ea_url()
                            .setController('App\\Controller\\Admin\\RIAVersiones\\PresentacionAntecedentesVersionadoCrudController')
                            .setAction('index')
                            .set('riaVersionadoMasivoId', entity.instance.id) }}" 
                            class="btn btn-success btn-sm">
                            <i class="fa fa-plus-circle me-1"></i>
                            Agregar RIAs
                        </a>
                    {% endif %}
                </div>
                <div class="card-body">
                    {% if entity.instance.riaVersiones|length > 0 %}
                        <div class="card mb-3 shadow-sm border-0">
                            <div class="card-body bg-light">
                                <div class="row g-3 align-items-end">
                                        <div class="col-md-3">
                                        <label for="filtro-dni" class="form-label small fw-bold text-muted">DNI</label>
                                        <input type="text" id="filtro-dni" class="form-control form-control-sm bg-dark text-white" placeholder="DNI">
                                    </div>
                                    <div class="col-md-5">
                                        <label for="filtro-nombre" class="form-label small fw-bold text-muted">Apellido/Nombre</label>
                                        <input type="text" id="filtro-nombre" class="form-control form-control-sm bg-dark text-white" placeholder="Apellido y/o Nombre">
                                    </div>
                                    <div class="col-md-4">
                                        <button class="btn btn-primary btn-sm" type="button" id="btn-buscar">
                                            <i class="fa fa-filter me-1"></i> Filtrar
                                        </button>
                                        <button class="btn btn-outline-secondary btn-sm" type="button" id="btn-limpiar">
                                            <i class="fa fa-eraser"></i> Limpiar
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table id="tabla-rias" class="table datagrid table-hover">
                                <thead>
                                    <tr>
                                        <th class="header-for-field-text">DNI</th>
                                        <th class="header-for-field-text">Apellido/Nombre</th>
                                        <th class="header-for-field-text">Estado</th>
                                        <th class="header-for-field-text">Fecha Copia</th>
                                        <th class="header-for-field-text">Fecha PDF</th>
                                        <th class="header-for-field-text text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fa fa-inbox fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No hay RIAs seleccionados para versionar.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}