@extends('layouts.simple.master')

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

<div class="container">
    <h1>Mantenimiento de Dimensiones</h1>

    <!-- Filtro por Área -->
    <div class="card mb-4">
        <div class="card-header">Filtrar por Área</div>
        <div class="card-body">
            <form id="filterForm" method="GET">
                <div class="row">
                    <div class="col-md-6">
                        <label for="area_id" class="form-label">Seleccionar Área</label>
                        <select class="form-select" id="area_id" name="area_id" onchange="document.getElementById('filterForm').submit();">
                            <option value="">Todas las Áreas</option>
                            @foreach ($areas as $area)
                                <option value="{{ $area->id }}" {{ request('area_id') == $area->id ? 'selected' : '' }}>
                                    {{ $area->nombre_area }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Tabla de Dimensiones -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span>Listado de Dimensiones</span>
            <button class="btn btn-success btn-sm" id="addRowBtn">Añadir Fila</button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dimensionesTable">
                    <thead>
                        <tr>
                            <th>Área</th>
                            <th>Dimensión</th>
                            <th>Explicación</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($dimensiones as $dimension)
                            <tr data-id="{{ $dimension->id }}">
                                <td>{{ $dimension->area->nombre_area }}</td>
                                <td contenteditable="true" class="editable" data-field="dimension">{{ $dimension->dimension }}</td>
                                <td contenteditable="true" class="editable" data-field="explicacion">{{ $dimension->explicacion }}</td>
                                <td>
                                    <form action="{{ route('operations.comercial.gpt.dimensiones.destroy', $dimension->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 la funcionalidad -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    const addRowBtn = document.getElementById('addRowBtn');
    const tableBody = document.querySelector('#dimensionesTable tbody');

    // Evento para añadir una nueva fila al inicio de la tabla
    addRowBtn.addEventListener('click', function () {
        // Crear una nueva fila
        const newRow = document.createElement('tr');
        newRow.innerHTML = `
            <td>
                <select class="form-select">
                    <option value="" disabled selected>Seleccionar Área</option>
                    @foreach ($areas as $area)
                        <option value="{{ $area->id }}">{{ $area->nombre_area }}</option>
                    @endforeach
                </select>
            </td>
            <td contenteditable="true" class="editable" data-field="dimension"></td>
            <td contenteditable="true" class="editable" data-field="explicacion"></td>
            <td>
                <button class="btn btn-primary btn-sm saveBtn">Guardar</button>
                <button class="btn btn-danger btn-sm cancelBtn">Cancelar</button>
            </td>
        `;

        // Insertar la nueva fila al inicio del tbody
        tableBody.prepend(newRow);

        // Guardar la nueva fila
        const saveBtn = newRow.querySelector('.saveBtn');
        saveBtn.addEventListener('click', function () {
            const areaSelect = newRow.querySelector('select');
            const dimension = newRow.querySelector('[data-field="dimension"]').innerText.trim();
            const explicacion = newRow.querySelector('[data-field="explicacion"]').innerText.trim();
            const areaId = areaSelect.value;

            if (!areaId || !dimension || !explicacion) {
                alert('Por favor, completa todos los campos antes de guardar.');
                return;
            }

            // Enviar los datos al servidor
            fetch(`/operations/comercial/gpt/dimensiones`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ area_id: areaId, dimension, explicacion })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('Nueva dimensión añadida con éxito.');
                        location.reload();
                    } else {
                        alert('Error al guardar la nueva dimensión.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error al guardar la nueva dimensión.');
                });
        });

        // Cancelar la nueva fila
        const cancelBtn = newRow.querySelector('.cancelBtn');
        cancelBtn.addEventListener('click', function () {
            newRow.remove();
        });
    });
});
</script>
@endsection