@extends('admin.panel')

@section('head')
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="{{ asset('css/encuesta.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css">
@endsection

@section('contenido')
<div class="contenedor-flex">

    <!-- TABLA (70%) -->
    <div class="contenedor-tabla">
        <h3>Encuestas Creadas</h3>
        <div class="tabla-wrapper">
        <table id="tabla-encuestas" class="tabla">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Título</th>
                    <th>Descripción</th>
                    <th>Tipo</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                </tr>
            </thead>

            <tbody>
                @foreach ($encuestas as $encuesta)
                    <tr>
                        <td>{{ $encuesta->id }}</td>
                        <td data-id="{{ $encuesta->id }}" data-campo="titulo">{!! e($encuesta->titulo) !!}</td>
                        <td data-id="{{ $encuesta->id }}" data-campo="descripcion">{!! e($encuesta->descripcion) !!}</td>
                        <td>{{ $encuesta->tipo }}</td>
                        <td style="text-align: center;">
                            @if ($encuesta->publicada)
                                <span class="badge publicado">Publicada</span>
                            @else
                                <span class="badge borrador">Borrador</span>
                            @endif

                            @if ($encuesta->es_privado)
                                <div>
                                    <span class="badge privado" style="font-size: 1.6em;">🔒</span>
                                </div>
                            @endif
                        </td>

                        <td class="acciones-flex">
                            @if (!$encuesta->publicada)
                                <a href="{{ route('preguntas.crear', $encuesta->id) }}" class="btn btn-accent">Diseñar</a>
                                <form method="POST" action="{{ route('encuestas.publicar', $encuesta->id) }}" style="display:inline;">
                                    @csrf
                                    <button type="submit" class="btn btn-primary">Publicar</button>
                                </form>
                            @else
                                <a href="{{ url('encuestas/' . $encuesta->slug . '/responder') }}" target="_blank" class="btn btn-link">Link</a>
                                <form method="POST" action="{{ route('encuestas.despublicar', $encuesta->id) }}" style="display:inline;">
                                    @csrf
                                    <button type="submit" class="btn btn-warning">Despublicar</button>
                                </form>
                                <form method="POST" action="{{ route('encuestas.eliminarTabla', $encuesta->id) }}" style="display:inline;">
                                    @csrf
                                    <button type="submit" class="btn btn-secondary">Borrar Respuestas</button>
                                </form>
                            @endif

                            <form method="POST" action="{{ route('encuestas.destroy', $encuesta->id) }}" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger">Eliminar Encuesta</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
               
            </tbody>
        </table>
        </div>
    </div>

    <!-- FORMULARIO (30%) -->
    <div class="contenedor-formulario">
        <div class="card-formulario">
            <h2>Crear Nueva Encuesta</h2>
            @if (session('success'))
                <div class="alerta-exito">{{ session('success') }}</div>
            @endif

            <form method="POST" action="{{ route('encuestas.store') }}">
                @csrf

                <div class="input-group">
                    <input type="text" name="titulo" id="titulo" required placeholder=" " value="{{ old('titulo') }}">
                    <label for="titulo">Título de la Encuesta</label>
                </div>

                <div class="input-group">
                    <input type="text" name="descripcion" id="descripcion" placeholder=" " value="{{ old('descripcion') }}">
                    <label for="descripcion">Descripción</label>
                </div>

                <div class="input-group">
                    <select name="tipo" id="tipo" required placeholder=" " class="form-select">
                        <option value="" disabled selected hidden>Seleciona tu opción</option>
                        <option value="Publica">Pública</option>
                        <option value="Privada">Privada</option>
                    </select>
                    <label for="tipo">Tipo de Encuesta</label>
                </div>

                <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px;">
                    <input type="checkbox" id="es_privado" name="es_privado" value="1" style="width: 18px; height: 18px;">
                    <label for="es_privado" style="margin: 0; font-size: 14px; cursor: pointer;">Marcar si los resultados son confidenciales</label>
                </div>

                <div class="modal-acciones">
                    <button type="submit" class="btn btn-primary">Crear Encuesta</button>
                </div>
            </form>
        </div>
        <!-- DUPLICAR ENCUESTA ABAJO -->
        <div class="card-formulario mt-4">
            <h2>Duplicar Encuesta Existente</h2>

            @if (session('duplicada'))
                <div class="alerta-exito">{{ session('duplicada') }}</div>
            @endif

            <form method="POST" action="{{ route('encuestas.duplicarConDatosDirecto') }}">
                @csrf
                <div class="input-group">
                    <input type="number" name="id_original" required placeholder=" " min="1">
                    <label for="id_original">ID de la Encuesta a Duplicar</label>
                </div>

                <div class="input-group">
                    <input type="text" name="titulo" required placeholder=" ">
                    <label for="titulo">Nuevo Título</label>
                </div>

                <div class="input-group">
                    <textarea name="descripcion" rows="3" placeholder=" "></textarea>
                    <label for="descripcion">Nueva Descripción</label>
                </div>

                <div class="modal-acciones">
                    <button type="submit" class="btn btn-success">Duplicar</button>
                </div>
            </form>
        </div>

    </div>

</div>

@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>

<script>
$(document).ready(function() {
    $('#tabla-encuestas').DataTable({
        responsive: true,
        pageLength: 5,
        searching: true,
        ordering: true,
        paging: true,
        language: {
            url: "//cdn.datatables.net/plug-ins/1.13.5/i18n/es-ES.json"
        }
    });
});
</script>
<script>
    const toggleBtn = document.getElementById('toggle-sidebar');
    const sidebar = document.querySelector('.sidebar');
    const layout = document.querySelector('.layout');
    const overlay = document.getElementById('overlay');

    toggleBtn.addEventListener('click', () => {
        sidebar.classList.toggle('hidden');
        layout.classList.toggle('sidebar-hidden');

        if (sidebar.classList.contains('hidden')) {
            overlay.style.display = 'none';
        } else {
            overlay.style.display = 'block';
        }
    });

    // También cierra el menú al hacer clic en el overlay
    overlay.addEventListener('click', () => {
        sidebar.classList.add('hidden');
        layout.classList.add('sidebar-hidden');
        overlay.style.display = 'none';
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
$(document).on('click', '.btn-abrir-modal-duplicar', function () {
    const id = $(this).data('id');
    const titulo = $(this).data('titulo') + ' (Copia)';
    const descripcion = $(this).data('descripcion') || '';

    $('#duplicar-id').val(id);
    $('#duplicar-titulo').val(titulo);
    $('#duplicar-descripcion').val(descripcion);
    $('#formDuplicar').attr('action', `/encuestas/${id}/duplicar-con-datos`);

    new bootstrap.Modal(document.getElementById('modalDuplicar')).show();
});
</script>


@endsection