@extends('layouts.simple.master')

@section('main_content')
@include('operations.basic.gpt.navigation_gpt')

<div class="container">
    <h1>Mantenimiento de Metodologías GPT</h1>

    <!-- Formulario para agregar nueva metodología -->
    <div class="card mb-4">
        <div class="card-header">Agregar Nueva Metodología</div>
        <div class="card-body">
            <form action="{{ route('operations.basic.gpt.methodology.store') }}" method="POST">
                @csrf
                <div class="mb-3">
                    <label for="name" class="form-label">Nombre</label>
                    <input type="text" class="form-control" id="name" name="name" required>
                </div>
                <div class="mb-3">
                    <label for="context" class="form-label">Contexto</label>
                    <textarea class="form-control" id="context" name="context" rows="3" required></textarea>
                </div>
                <div class="mb-3">
                    <label for="answer" class="form-label">Respuesta</label>
                    <textarea class="form-control" id="answer" name="answer" rows="3" required></textarea>
                </div>
                <div class="mb-3">
                    <label for="api_key" class="form-label">API Key</label>
                    <input type="text" class="form-control" id="api_key" name="api_key" required>
                </div>
                <button type="submit" class="btn btn-primary">Agregar Metodología</button>
            </form>
        </div>
    </div>

    <!-- Tabla de metodologías -->
    <div class="card">
        <div class="card-header">Listado de Metodologías</div>
        <div class="card-body">
            <table class="table table-bordered" id="methodologyTable">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Contexto</th>
                        <th>Respuesta</th>
                        <th>API Key</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($methodologies as $methodology)
                        <tr data-id="{{ $methodology->id }}">
                            <td contenteditable="true" class="editable" data-field="name">{{ $methodology->name }}</td>
                            <td contenteditable="true" class="editable" data-field="context">{{ $methodology->context }}</td>
                            <td contenteditable="true" class="editable" data-field="answer">{{ $methodology->answer }}</td>
                            <td contenteditable="true" class="editable" data-field="api_key">{{ $methodology->api_key }}</td>
                            <td>
                                <form action="{{ route('operations.basic.gpt.methodology.destroy', $methodology->id) }}" method="POST" style="display:inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm">Eliminar</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Script para edición inline -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.editable').forEach(cell => {
            cell.addEventListener('blur', function () {
                const row = this.closest('tr');
                const id = row.dataset.id;
                const field = this.dataset.field;
                const value = this.innerText.trim();

                fetch(`operations/basic/gpt/methodology/${id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({ [field]: value })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('Metodología actualizada con éxito.');
                    } else {
                        alert('Error al actualizar la metodología.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error al actualizar la metodología.');
                });
            });
        });
    });
</script>
@endsection