{% extends 'intranet.html.twig' %}

{% block title %}Cambios de Estado Pendientes{% endblock %}

{% block page_title %}Cambios de Estado de Tracking{% endblock %}

{% block page_subtitle %}Gestión de cambios en descripciones{% endblock %}

{% block page_content %}
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Cambios Pendientes de Aprobación ({{ pendingCount }})</h3>
                </div>
                
                <div class="box-body">
                    {% if proposals is empty %}
                        <div class="alert alert-info">
                            <i class="fa fa-info-circle"></i> No hay cambios pendientes de aprobación.
                        </div>
                    {% else %}
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Transportista</th>
                                    <th>Código</th>
                                    <th>Descripción Actual</th>
                                    <th>Descripción Nueva</th>
                                    <th>Fecha Detección</th>
                                    <th width="150px">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for proposal in proposals %}
                                    <tr data-proposal-id="{{ proposal.id }}">
                                        <td>{{ proposal.carrierTrackingStatus.carrier.name }}</td>
                                        <td><code>{{ proposal.carrierTrackingStatus.code }}</code></td>
                                        <td>{{ proposal.oldDescription }}</td>
                                        <td><strong>{{ proposal.newDescription }}</strong></td>
                                        <td>{{ proposal.detectedAt|date('d/m/Y H:i') }}</td>
                                        <td>
                                            <button type="button" 
                                                    class="btn btn-sm btn-success approve-btn" 
                                                    data-proposal-id="{{ proposal.id }}"
                                                    title="Aprobar cambio">
                                                <i class="fa fa-check"></i> Aprobar
                                            </button>
                                            <button type="button" 
                                                    class="btn btn-sm btn-danger discard-btn" 
                                                    data-proposal-id="{{ proposal.id }}"
                                                    title="Descartar cambio">
                                                <i class="fa fa-times"></i> Descartar
                                            </button>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    <script>
        $(document).ready(function() {
            // Approve button click handler
            $('.approve-btn').on('click', function() {
                var proposalId = $(this).data('proposal-id');
                var $btn = $(this);
                
                if (confirm('¿Está seguro de que desea aprobar este cambio?')) {
                    // Disable button while processing
                    $btn.prop('disabled', true);
                    approveProposal(proposalId, $btn);
                }
            });

            // Discard button click handler
            $('.discard-btn').on('click', function() {
                var proposalId = $(this).data('proposal-id');
                var $btn = $(this);
                
                if (confirm('¿Está seguro de que desea descartar este cambio?')) {
                    // Disable button while processing
                    $btn.prop('disabled', true);
                    discardProposal(proposalId, $btn);
                }
            });

            // Approve proposal
            function approveProposal(proposalId, $btn) {
                $.ajax({
                    url: '{{ path('app_carrier_tracking_status_change_approve', {'id': '__ID__'}) }}'.replace('__ID__', proposalId),
                    type: 'POST',
                    success: function(response) {
                        showMessage(response.message, 'success');
                        removeProposalRow(proposalId);
                    },
                    error: function(xhr) {
                        var message = xhr.responseJSON ? xhr.responseJSON.message : 'Error al aprobar el cambio';
                        showMessage(message, 'error');
                        $btn.prop('disabled', false);
                    }
                });
            }

            // Discard proposal
            function discardProposal(proposalId, $btn) {
                $.ajax({
                    url: '{{ path('app_carrier_tracking_status_change_discard', {'id': '__ID__'}) }}'.replace('__ID__', proposalId),
                    type: 'POST',
                    success: function(response) {
                        showMessage(response.message, 'success');
                        removeProposalRow(proposalId);
                    },
                    error: function(xhr) {
                        var message = xhr.responseJSON ? xhr.responseJSON.message : 'Error al descartar el cambio';
                        showMessage(message, 'error');
                        $btn.prop('disabled', false);
                    }
                });
            }

            // Remove proposal row from table
            function removeProposalRow(proposalId) {
                var $row = $('tr[data-proposal-id="' + proposalId + '"]');
                
                $row.fadeOut(400, function() {
                    $(this).remove();
                    
                    // Update counter in page title
                    var remainingRows = $('tbody tr:visible').length;
                    $('.box-title').text('Cambios Pendientes de Aprobación (' + remainingRows + ')');
                    
                    // Check if table is empty
                    if (remainingRows === 0) {
                        location.reload();
                    }
                });
            }

            // Update pending counter in box title
            function updatePendingCounter() {
                var count = $('tbody tr:visible').length;
                $('.box-title').text('Cambios Pendientes de Aprobación (' + count + ')');
            }

            // Show message
            function showMessage(message, type) {
                var alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
                var icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
                
                var alert = $('<div class="alert ' + alertClass + ' alert-dismissible" style="position: fixed; top: 60px; right: 20px; z-index: 9999; min-width: 300px;">' +
                    '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
                    '<i class="fa ' + icon + '"></i> ' + message +
                    '</div>');
                
                $('body').append(alert);
                
                setTimeout(function() {
                    alert.fadeOut(function() {
                        $(this).remove();
                    });
                }, 5000);
            }
        });
    </script>
{% endblock %}