@extends('layouts.app')

@section('title', 'Grupos de Hashtags')

@push('styles')
<style>
.group-card {
    transition: all 0.3s ease;
    height: 100%;
}

.group-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.hashtag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.hashtag-item {
    background: var(--phoenix-primary-bg-subtle);
    color: var(--phoenix-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
}

.usage-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--phoenix-success);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}
</style>
@endpush

@section('content')
<div class="row g-3 mb-4">
    <div class="col-auto">
        <h2 class="mb-0">Grupos de Hashtags</h2>
    </div>
    <div class="col-auto ms-auto">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createGroupModal">
            <i class="fas fa-plus me-2"></i>Novo Grupo
        </button>
        <a href="{{ route('hashtags.index') }}" class="btn btn-phoenix-secondary">
            <i class="fas fa-hashtag me-2"></i>Todas as Hashtags
        </a>
    </div>
</div>

<!-- Filters -->
<div class="card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('hashtags.groups') }}" class="row g-3">
            <div class="col-md-6">
                <label class="form-label">Cliente</label>
                <select name="cliente_id" class="form-select">
                    <option value="">Todos os clientes</option>
                    @foreach($clientes as $cliente)
                        <option value="{{ $cliente->id }}" {{ request('cliente_id') == $cliente->id ? 'selected' : '' }}>
                            {{ $cliente->nome }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label">&nbsp;</label>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search me-2"></i>Filtrar
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Groups Grid -->
<div class="row g-3">
    @forelse($groups as $group)
        <div class="col-md-6 col-lg-4">
            <div class="card group-card position-relative">
                <span class="usage-badge">{{ $group->usage_count }}x usado</span>
                <div class="card-body">
                    <h5 class="card-title">{{ $group->name }}</h5>
                    <p class="text-muted fs-9 mb-3">{{ $group->description }}</p>

                    <div class="mb-3">
                        <small class="text-muted">Cliente:</small>
                        <span class="badge badge-phoenix badge-phoenix-primary">
                            {{ $group->cliente->nome }}
                        </span>
                    </div>

                    <div class="hashtag-list">
                        @foreach($group->hashtags as $hashtag)
                            <span class="hashtag-item">{{ $hashtag }}</span>
                        @endforeach
                    </div>

                    <div class="d-flex gap-2 mt-3">
                        <button type="button" class="btn btn-sm btn-phoenix-secondary flex-1"
                                onclick="copyHashtags('{{ $group->hashtags_string }}')">
                            <i class="fas fa-copy me-1"></i>Copiar
                        </button>
                        <button type="button" class="btn btn-sm btn-phoenix-primary flex-1"
                                onclick="editGroup({{ $group->id }})">
                            <i class="fas fa-edit me-1"></i>Editar
                        </button>
                        <form action="{{ route('hashtags.groups.destroy', $group) }}" method="POST"
                              class="d-inline" onsubmit="return confirm('Excluir este grupo?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-phoenix-danger">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="col-12">
            <div class="text-center py-5">
                <i class="fas fa-layer-group fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">Nenhum grupo encontrado</h5>
                <p class="text-muted">Crie seu primeiro grupo de hashtags</p>
            </div>
        </div>
    @endforelse
</div>

@if($groups->hasPages())
    <div class="mt-4">
        {{ $groups->withQueryString()->links() }}
    </div>
@endif

<!-- Create Group Modal -->
<div class="modal fade" id="createGroupModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('hashtags.groups.store') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Novo Grupo de Hashtags</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nome do Grupo *</label>
                        <input type="text" name="name" class="form-control" required maxlength="100">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Descrição</label>
                        <textarea name="description" class="form-control" rows="2" maxlength="500"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Cliente *</label>
                        <select name="cliente_id" class="form-select" required>
                            <option value="">Selecione...</option>
                            @foreach($clientes as $cliente)
                                <option value="{{ $cliente->id }}">{{ $cliente->nome }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Hashtags *</label>
                        <textarea name="hashtags" class="form-control" rows="3" required
                                  placeholder="#exemplo #marketing #socialmedia"></textarea>
                        <small class="text-muted">Separe as hashtags com espaço</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Salvar Grupo
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Group Modal -->
<div class="modal fade" id="editGroupModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editGroupForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title">Editar Grupo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- Content will be loaded dynamically -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Salvar Alterações
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function copyHashtags(hashtags) {
    navigator.clipboard.writeText(hashtags).then(function() {
        // Show success toast
        alert('Hashtags copiadas!');
    });
}

function editGroup(groupId) {
    // Implement edit functionality
    // This would load group data via AJAX and populate the edit modal
    alert('Funcionalidade em desenvolvimento');
}
</script>
@endpush