@extends('layouts.main')
@section('content')
<div class="container">
    @auth

    <form action="{{ route('tags.store') }}" method="POST">
        @csrf
        <div class="mb-3">
            <label for="name" class="form-label">Nome da Tag</label>
            <input type="text" id="name" name="name" class="form-control" required>
        </div>

        <div class="mb-3">
            <label for="descricao" class="form-label">Informações da Tag</label>
            <p class="span"><span>Obs: Para salvar tags, com campos dinamicos, incluir campos ${nome}, ${telefone}, quebra de linha coloca \n</span></p>
            <textarea id="descricao" name="descricao" class="form-control" rows="3" required></textarea>
        </div>

        <button type="submit" class="btn btn-primary">Adicionar Tag</button>
    </form>

    <hr>

    <!-- Listar as tags do usuário -->
    <h2>Suas Tags</h2>
    <ul class="list-group">
        @forelse($tags as $tag)
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <strong>{{ $tag->name }}</strong>
            <p>{{ $tag->descricao }}</p>

            <button class="btn btn-info btn-sm" onclick="copyText('{{ $tag->descricao }}')">Copiar Descrição</button>

            <form action="{{ route('tags.destroy', $tag) }}" method="POST" class="ms-2">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger btn-sm">Excluir</button>
            </form>
        </li>
    @empty
        <li class="list-group-item">Nenhuma tag criada ainda.</li>
    @endforelse

    </ul>
@else
    <p>Você precisa estar logado para criar e visualizar suas tags.</p>
@endauth

<script>
function copyText(description) {
    const placeholders = description.match(/\$\{(.*?)\}/g);

    if (placeholders) {
        let updatedDescription = description;

        // Solicitar valores para cada placeholder via prompt
        placeholders.forEach((placeholder) => {
            const fieldName = placeholder.replace(/\$\{|\}/g, "");
            const fieldValue = prompt(`Preencha o campo: ${fieldName}`, ""); // Solicitar o valor ao usuário
            if (fieldValue !== null) {
                updatedDescription = updatedDescription.replace(placeholder, fieldValue);
            }
        });

        // Copiar o texto atualizado para a área de transferência
        navigator.clipboard.writeText(updatedDescription).then(() => {
            alert("Texto copiado com sucesso!");
        }).catch(() => {
            alert("Erro ao copiar o texto.");
        });
    } else {
        // Se não houver placeholders, copiar o texto diretamente
        navigator.clipboard.writeText(description).then(() => {
            alert("Texto copiado com sucesso!");
        }).catch(() => {
            alert("Erro ao copiar o texto.");
        });
    }
}

</script>

<!-- Modal para preencher campos dinâmicos -->
<div id="dynamicFieldsModal" class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Preencha os campos</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="dynamicFieldsForm">
                    <div id="fieldsContainer"></div>
                    <button type="submit" class="btn btn-primary">Salvar</button>
                </form>
            </div>
        </div>
    </div>
</div>
</script>

</div>
@endsection