@extends('layouts.app', ['title' => 'Memoria de Traducción', 'menu' => 'Administración'])

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                
                <form action="{{ route('admin.translations.index') }}" method="GET" class="row g-3 mb-4">
                    <div class="col-md-4">
                        <input type="text" name="search" class="form-control" placeholder="Buscar texto original o traducido..." value="{{ request('search') }}">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary w-100">Buscar</button>
                    </div>
                </form>

                <div class="table-responsive">
                    <table class="table table-centered table-nowrap mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Idioma</th>
                                <th>Texto Original</th>
                                <th>Traducción Guardada</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($translations as $item)
                                <tr>
                                    <td><span class="badge bg-info">{{ $item->target_lang }}</span></td>
                                    <td title="{{ $item->source_text }}">
                                        {{ Str::limit($item->source_text, 50) }}
                                    </td>
                                    <td class="text-success fw-bold" title="{{ $item->translated_text }}">
                                        {{ Str::limit($item->translated_text, 50) }}
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-outline-primary btn-edit" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#editModal"
                                                data-id="{{ $item->id }}"
                                                data-original="{{ $item->source_text }}"
                                                data-translated="{{ $item->translated_text }}">
                                            <i class="ri-pencil-line"></i>
                                        </button>

                                        <form action="{{ route('admin.translations.destroy', $item->id) }}" method="POST" class="d-inline-block" onsubmit="return confirm('¿Estás seguro? La API tendrá que volver a traducir esto la próxima vez.')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger">
                                                <i class="ri-delete-bin-line"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-4">No hay traducciones en memoria aún.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                <div class="mt-4">
                    {{ $translations->links() }}
                </div>

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

<div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="#" method="POST" id="editForm">
            @csrf
            @method('PUT')
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Corregir Traducción</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-muted">Original</label>
                        <textarea class="form-control" id="modalOriginal" rows="3" disabled></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Traducción</label>
                        <textarea name="translated_text" class="form-control" id="modalTranslated" rows="3" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var editModal = document.getElementById('editModal');
        editModal.addEventListener('show.bs.modal', function (event) {
            // Botón que activó el modal
            var button = event.relatedTarget;
            
            // Extraer info de los atributos data-*
            var id = button.getAttribute('data-id');
            var original = button.getAttribute('data-original');
            var translated = button.getAttribute('data-translated');

            // Actualizar el contenido del modal
            var modalOriginal = editModal.querySelector('#modalOriginal');
            var modalTranslated = editModal.querySelector('#modalTranslated');
            var editForm = editModal.querySelector('#editForm');

            modalOriginal.value = original;
            modalTranslated.value = translated;
            
            // Actualizar la acción del formulario con el ID correcto
            editForm.action = '/admin/translations/' + id;
        });
    });
</script>
@endsection