@extends('layouts.boxes')

@section('content')
<div class="card my-4">
    <div class="card-header bg-dark text-light">
        <ul class="nav nav-tabs card-header-tabs" id="templateTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="form-tab" data-bs-toggle="tab" data-bs-target="#formulario" type="button" role="tab">
                    Crear Template
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="list-tab" data-bs-toggle="tab" data-bs-target="#lista" type="button" role="tab">
                    Ver Templates
                </button>
            </li>
        </ul>
    </div>

    <div class="card-body">
        {{-- Mensajes de éxito --}}
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        {{-- Errores de validación --}}
        @if($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                       <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="tab-content" id="templateTabsContent">
            {{-- TAB FORMULARIO --}}
            <div class="tab-pane fade show active" id="formulario" role="tabpanel" aria-labelledby="form-tab">
                <form method="POST" action="{{ route('templates.update', $template->id) }}">
                @csrf
                @method('PUT')>
                    <div class="form-group">
                        <label for="nombre_template" class="form-label">Nombre:</label>
                        <input type="text" name="nombre_template" class="form-control" value="{{ old('nombre_template') }}" required>
                    </div>

                    <div class="form-group">
                        <label for="version" class="form-label">Versión:</label>
                        <input type="text" name="version" class="form-control" value="{{ old('version') }}" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="modelo_mkt" class="form-label">Modelo de Mikrotik:</label>
                        <select name="modelo_mkt" class="form-control" required>
                            <option value="">-- Selecciona un modelo --</option>
                            @foreach($mikrotiks as $mkt)
                                <option value="{{ $mkt->id }}" {{ old('modelo_mkt') == $mkt->id ? 'selected' : '' }}>
                                    {{ $mkt->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="template" class="form-label">Template:</label>
                        <textarea name="template" rows="6" class="form-control" required>{{ old('template') }}</textarea>
                    </div>

                    {{-- Tabla dinámica --}}
                    <div class="form-group mt-4">
                        <label class="form-label">Relaciones Etiqueta - Columna</label>
                        <table class="table table-bordered" id="relaciones-table">
                            <thead>
                                <tr>
                                    <th>Etiqueta</th>
                                    <th>Columna</th>
                                    <th>Acción</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($template->relaciones as $i => $rel)
                            <tr>
                                <td>
                                    <input type="text" name="relaciones[{{ $i }}][etiqueta]" value="{{ old('relaciones.'.$i.'.etiqueta', $rel->label) }}" required>
                                </td>
                                <td>
                                    <select name="relaciones[{{ $i }}][columna]" required>
                                        <option value="NetWork" {{ $rel->column == 'NetWork' ? 'selected' : '' }}>Network</option>
                                        <option value="Ip_mkt" {{ $rel->column == 'Ip_mkt' ? 'selected' : '' }}>IP Mikrotik</option>
                                        <option value="Ip_start" {{ $rel->column == 'Ip_start' ? 'selected' : '' }}>IP Inicio</option>
                                        <option value="Ip_end" {{ $rel->column == 'Ip_end' ? 'selected' : '' }}>IP Final</option>
                                        <option value="Broadcast" {{ $rel->column == 'Broadcast' ? 'selected' : '' }}>Broadcast</option>
                                        <option value="L2TP_Rou" {{ $rel->column == 'L2TP_Rou' ? 'selected' : '' }}>l2TP Rou</option>
                                    </select>
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-danger btn-sm remove-row">Eliminar</button>
                                </td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                        <button type="button" class="btn btn-success btn-sm" id="add-row">Agregar fila</button>
                    </div>

                    <button type="submit" class="btn btn-dark mt-3">Guardar</button>
                </form>
            </div>

            {{-- TAB LISTA --}}
            <div class="tab-pane fade" id="lista" role="tabpanel" aria-labelledby="list-tab">
                <h5 class="mb-3">Templates existentes</h5>
                <table class="table table-striped table-bordered">
                    <thead class="table-dark">
                        <tr>
                            <th>ID</th>
                            <th>Nombre</th>
                            <th>Versión</th>
                            <th>Modelo Mikrotik</th>
                            <th>Fecha de creación</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($templates as $template)
                            <tr>
                                <td>{{ $template->id }}</td>
                                <td>{{ $template->nombre }}</td>
                                <td>{{ $template->version }}</td>
                                <td>{{ $template->mikrotik->nombre ?? 'N/A' }}</td>
                                <td>{{ $template->created_at->format('d-m-Y H:i') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center">No hay templates creados aún</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Script para manejar la tabla dinámica --}}
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let rowIndex = 1;

        document.getElementById("add-row").addEventListener("click", function () {
            const tableBody = document.querySelector("#relaciones-table tbody");
            const newRow = document.createElement("tr");

            newRow.innerHTML = `
                <td>
                    <input type="text" name="relaciones[${rowIndex}][etiqueta]" class="form-control" required>
                </td>
                <td>
                    <select name="relaciones[${rowIndex}][columna]" class="form-control" required>
                        <option value="" disabled>-- Selecciona --</option>
                        <option value="NetWork">Network</option>
                        <option value="Ip_mkt">IP Mikrotik</option>
                        <option value="Ip_start">IP Inicio</option>
                        <option value="Ip_end">IP Final</option>
                        <option value="Broadcast">Broadcast</option>
                        <option value="L2TP_Rou">l2TP Rou</option>
                    </select>
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-danger btn-sm remove-row">Eliminar</button>
                </td>
            `;

            tableBody.appendChild(newRow);
            rowIndex++;
        });

        document.querySelector("#relaciones-table").addEventListener("click", function (e) {
            if (e.target.classList.contains("remove-row")) {
                e.target.closest("tr").remove();
            }
        });
    });
</script>
@endsection