@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.store') }}">
                    @csrf
                    <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>
                                <tr>
                                    <td>
                                        <input type="text" name="relaciones[0][etiqueta]" class="form-control" required>
                                    </td>
                                    <td>
                                        <select name="relaciones[0][columna]" class="form-control" required>
                                            <option value="" disabled selected>-- 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="Use">PPP account</option>
                                            <option value="Unit">Unit</option>
                                        </select>
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-danger btn-sm remove-row">Eliminar</button>
                                    </td>
                                </tr>
                            </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>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <script>
                            let template;
                        </script>
                        @forelse($templates as $template)
                        <script>
                            // templates = @json($template);
                            // console.log(templates);
                        </script>
                            <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>
                                <td>
                                    <button 
                                        class="btn btn-sm btn-primary edit-btn" 
                                        data-id="{{ $template->id }}"
                                        data-nombre="{{ $template->nombre }}"
                                        data-version="{{ $template->version }}"
                                        data-mikrotik="{{ $template->modelo_mkt }}"
                                        data-template="{{ $template->Template }}"
                                        data-relaciones='@json($template->relaciones)'>
                                        Editar
                                    </button>
                                    {{-- Botón Eliminar --}}
                                    <form action="{{ route('templates.destroy', $template->id) }}" method="POST" style="display:inline-block;" 
                                        onsubmit="return confirm('¿Seguro que deseas eliminar este template?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger">Eliminar</button>
                                    </form>
                                </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="Use">PPP account</option>
                        <option value="Unit">Identity</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>

<!-- Modal de edición -->
<div class="modal fade" id="editTemplateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="POST" id="editTemplateForm">
        @csrf
        @method('PUT')

        <div class="modal-header">
          <h5 class="modal-title">Editar Template</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
            <input type="hidden" name="id" id="edit_id">

            <div class="form-group mb-2">
                <label>Nombre</label>
                <input type="text" name="nombre_template" id="edit_nombre" class="form-control" required>
            </div>

            <div class="form-group mb-2">
                <label>Versión</label>
                <input type="text" name="version" id="edit_version" class="form-control" required>
            </div>

            <div class="form-group mb-2">
                <label>Modelo Mikrotik</label>
                <select name="modelo_mkt" id="edit_mikrotik" class="form-control" required>
                    @foreach($mikrotiks as $mkt)
                        <script>
                            templates = @json($mkt->id);
                            // console.log(templates);
                        </script>
                        <option value="{{ $mkt->id }}">{{ $mkt->nombre }}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group mb-2">
                <label>Template</label>
                <textarea name="template" id="edit_template" rows="6" class="form-control" required></textarea>
            </div>

            <div class="form-group mt-3">
                <label>Relaciones</label>
                <table class="table table-bordered" id="edit-relaciones-table">
                    <thead>
                        <tr>
                            <th>Etiqueta</th>
                            <th>Columna</th>
                            <th>Acción</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <button type="button" class="btn btn-success btn-sm" id="add-edit-row">Agregar fila</button>
            </div>
        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-dark">Actualizar</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const editButtons = document.querySelectorAll(".edit-btn");
        const editForm = document.getElementById("editTemplateForm");
        const relacionesTable = document.querySelector("#edit-relaciones-table tbody");

        editButtons.forEach(btn => {
            btn.addEventListener("click", function() {
                // console.log(this.dataset)
                // Cargar datos en el modal
                document.getElementById("edit_id").value = this.dataset.id;
                document.getElementById("edit_nombre").value = this.dataset.nombre;
                document.getElementById("edit_version").value = this.dataset.version;
                document.getElementById("edit_mikrotik").value = this.dataset.mikrotik;
                document.getElementById("edit_template").value = this.dataset.template;

                // Limpiar tabla de relaciones
                relacionesTable.innerHTML = "";

                let relaciones = JSON.parse(this.dataset.relaciones);
                // console.log(relaciones)
                relaciones.forEach((rel, i) => {
                    const row = `
                    <tr>
                        <td><input type="text" name="relaciones[${i}][etiqueta]" class="form-control" value="${rel.label}" required></td>
                        <td>
                            <select name="relaciones[${i}][columna]" class="form-control" 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="Use" ${rel.column=="Use" ? "selected":""}>PPP account</option>
                                <option value="Unit" ${rel.column=="Unit" ? "selected":""}>Identity</option>
                            </select>
                        </td>
                        <td class="text-center">
                            <button type="button" class="btn btn-danger btn-sm remove-row">Eliminar</button>
                        </td>
                    </tr>`;
                    relacionesTable.insertAdjacentHTML("beforeend", row);
                });

                // Ruta del form (PUT)
                editForm.action = "/templates/" + this.dataset.id;

                // Mostrar modal
                new bootstrap.Modal(document.getElementById("editTemplateModal")).show();
            });
        });

        // Botón agregar fila dentro del modal
        document.getElementById("add-edit-row").addEventListener("click", function() {
            const index = relacionesTable.children.length;
            const row = `
            <tr>
                <td><input type="text" name="relaciones[${index}][etiqueta]" class="form-control" required></td>
                <td>
                    <select name="relaciones[${index}][columna]" class="form-control" required>
                        <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="Use">PPP account</option>
                        <option value="Unit">Identity</option>
                    </select>
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-danger btn-sm remove-row">Eliminar</button>
                </td>
            </tr>`;
            relacionesTable.insertAdjacentHTML("beforeend", row);
        });

        // Eliminar fila en modal
        relacionesTable.addEventListener("click", function(e) {
            if(e.target.classList.contains("remove-row")){
                e.target.closest("tr").remove();
            }
        });
    });
</script>


@endsection