@extends('layouts.simple.master')

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

<div class="container">
    <h1>Mantenimiento de Áreas</h1>

    <!-- Sección: Agregar Área -->
    <div class="card mb-4">
        <div class="card-header">Agregar Nueva Área</div>
        <div class="card-body">
            <form action="{{ route('operations.comercial.gpt.areas.store') }}" method="POST">
                @csrf
                <div class="mb-3">
                    <label for="nombre_area" class="form-label">Nombre del Área</label>
                    <input type="text" class="form-control" id="nombre_area" name="nombre_area" required>
                </div>
                <div class="mb-3">
                    <label for="descripcion" class="form-label">Descripción</label>
                    <textarea class="form-control" id="descripcion" name="descripcion" rows="3"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Agregar Área</button>
            </form>
        </div>
    </div>

    <!-- Sección: Listado de Áreas -->
    <div class="card">
        <div class="card-header">Listado de Áreas</div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="areasTable">
                    <thead>
                        <tr>
                            <th>Nombre del Área</th>
                            <th>Descripción</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($areas as $area)
                            <tr>
                                <td contenteditable="true"
                                    class="editable"
                                    data-id="{{ $area->id }}"
                                    data-field="nombre_area">{{ $area->nombre_area }}</td>
                                <td contenteditable="true"
                                    class="editable"
                                    data-id="{{ $area->id }}"
                                    data-field="descripcion">{{ $area->descripcion }}</td>
                                <td>
                                    <!-- Botón para eliminar área -->
                                    <form action="{{ route('operations.comercial.gpt.areas.destroy', $area->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>
</div>

<!-- Script para edición inline -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const editableCells = document.querySelectorAll('.editable');

        editableCells.forEach(cell => {
            cell.addEventListener('blur', function () {
                const id = this.dataset.id;
                const field = this.dataset.field;
                const value = this.innerText.trim();

                fetch(`/operations/comercial/gpt/areas/${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('Área actualizada con éxito.');
                    } else {
                        alert('Error al actualizar el área.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error al actualizar el área.');
                });
            });
        });
    });
</script>
@endsection