@extends('layouts.app')

@section('title', 'Nova Atividade')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Nova Atividade</h4>
                </div>
                <div class="card-body">
                    <form action="{{ route('activities.store') }}" method="POST">
                        @csrf

                        <div class="row g-3">
                            <!-- Informações Básicas -->
                            <div class="col-12">
                                <h5 class="mb-3">Informações Básicas</h5>
                            </div>

                            <div class="col-md-8">
                                <label class="form-label">Título <span class="text-danger">*</span></label>
                                <input type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                                       value="{{ old('title') }}" required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">Tipo <span class="text-danger">*</span></label>
                                <select name="type" class="form-select @error('type') is-invalid @enderror" required>
                                    <option value="task" {{ old('type') == 'task' ? 'selected' : '' }}>Tarefa</option>
                                    <option value="bug" {{ old('type') == 'bug' ? 'selected' : '' }}>Bug</option>
                                    <option value="improvement" {{ old('type') == 'improvement' ? 'selected' : '' }}>Melhoria</option>
                                    <option value="meeting" {{ old('type') == 'meeting' ? 'selected' : '' }}>Reunião</option>
                                    <option value="review" {{ old('type') == 'review' ? 'selected' : '' }}>Revisão</option>
                                    <option value="other" {{ old('type') == 'other' ? 'selected' : '' }}>Outro</option>
                                </select>
                                @error('type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">Prioridade <span class="text-danger">*</span></label>
                                <select name="priority" class="form-select @error('priority') is-invalid @enderror" required>
                                    <option value="P0" {{ old('priority') == 'P0' ? 'selected' : '' }}>P0 - Crítica</option>
                                    <option value="P1" {{ old('priority') == 'P1' ? 'selected' : '' }}>P1 - Alta</option>
                                    <option value="P2" {{ old('priority', 'P2') == 'P2' ? 'selected' : '' }}>P2 - Média</option>
                                    <option value="P3" {{ old('priority') == 'P3' ? 'selected' : '' }}>P3 - Baixa</option>
                                </select>
                                @error('priority')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label">Descrição</label>
                                <textarea name="description" rows="4" class="form-control @error('description') is-invalid @enderror">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Relacionamentos -->
                            <div class="col-12 mt-4">
                                <h5 class="mb-3">Relacionamentos</h5>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Cliente</label>
                                <select name="cliente_id" class="form-select @error('cliente_id') is-invalid @enderror">
                                    <option value="">Selecione um cliente</option>
                                    @foreach($clientes as $cliente)
                                        <option value="{{ $cliente->id }}" {{ old('cliente_id') == $cliente->id ? 'selected' : '' }}>
                                            {{ $cliente->nome }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('cliente_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Post Relacionado</label>
                                <select name="post_id" class="form-select @error('post_id') is-invalid @enderror">
                                    <option value="">Selecione um post</option>
                                    @foreach($posts as $postItem)
                                        <option value="{{ $postItem->id }}"
                                                {{ (old('post_id', $post?->id) == $postItem->id) ? 'selected' : '' }}>
                                            {{ $postItem->title }} - {{ $postItem->cliente->nome ?? 'Sem cliente' }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('post_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Atribuições e Prazos -->
                            <div class="col-12 mt-4">
                                <h5 class="mb-3">Atribuições e Prazos</h5>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Responsáveis</label>
                                <select name="assignees[]" class="form-select @error('assignees') is-invalid @enderror" multiple>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ in_array($user->id, old('assignees', [])) ? 'selected' : '' }}>
                                            {{ $user->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Segure Ctrl/Cmd para selecionar múltiplos</small>
                                @error('assignees')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Status Inicial</label>
                                <select name="status" class="form-select @error('status') is-invalid @enderror" required>
                                    <option value="todo" {{ old('status', 'todo') == 'todo' ? 'selected' : '' }}>A Fazer</option>
                                    <option value="in_progress" {{ old('status') == 'in_progress' ? 'selected' : '' }}>Em Progresso</option>
                                    <option value="review" {{ old('status') == 'review' ? 'selected' : '' }}>Em Revisão</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Data de Início</label>
                                <input type="datetime-local" name="start_date"
                                       class="form-control @error('start_date') is-invalid @enderror"
                                       value="{{ old('start_date') }}">
                                @error('start_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Prazo</label>
                                <input type="datetime-local" name="due_date"
                                       class="form-control @error('due_date') is-invalid @enderror"
                                       value="{{ old('due_date') }}">
                                @error('due_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Estimativa (horas)</label>
                                <input type="number" name="estimated_hours"
                                       class="form-control @error('estimated_hours') is-invalid @enderror"
                                       value="{{ old('estimated_hours') }}" min="0">
                                @error('estimated_hours')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Dependências -->
                            <div class="col-12 mt-4">
                                <h5 class="mb-3">Dependências</h5>
                            </div>

                            <div class="col-12">
                                <label class="form-label">Esta atividade depende de:</label>
                                <select name="dependencies[]" class="form-select @error('dependencies') is-invalid @enderror" multiple>
                                    @foreach($activities as $act)
                                        <option value="{{ $act->id }}" {{ in_array($act->id, old('dependencies', [])) ? 'selected' : '' }}>
                                            {{ $act->title }} ({{ ucfirst($act->status) }})
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Atividades selecionadas devem ser concluídas antes desta</small>
                                @error('dependencies')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Checklist -->
                            <div class="col-12 mt-4">
                                <h5 class="mb-3">Checklist</h5>
                            </div>

                            <div class="col-12">
                                <div id="checklist-container">
                                    <div class="input-group mb-2">
                                        <input type="text" name="checklist[]" class="form-control" placeholder="Item do checklist">
                                        <button type="button" class="btn btn-outline-danger btn-remove-checklist" style="display: none;">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="add-checklist-item">
                                    <i class="fas fa-plus me-1"></i>Adicionar item
                                </button>
                            </div>

                            <!-- Tags -->
                            <div class="col-12 mt-4">
                                <label class="form-label">Tags</label>
                                <input type="text" name="tags_input" class="form-control" placeholder="Digite tags separadas por vírgula">
                                <small class="text-muted">Ex: urgente, revisão, frontend</small>
                            </div>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Criar Atividade
                            </button>
                            <a href="{{ route('activities.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Checklist management
    const checklistContainer = document.getElementById('checklist-container');
    const addChecklistBtn = document.getElementById('add-checklist-item');

    addChecklistBtn.addEventListener('click', function() {
        const newItem = document.createElement('div');
        newItem.className = 'input-group mb-2';
        newItem.innerHTML = `
            <input type="text" name="checklist[]" class="form-control" placeholder="Item do checklist">
            <button type="button" class="btn btn-outline-danger btn-remove-checklist">
                <i class="fas fa-times"></i>
            </button>
        `;
        checklistContainer.appendChild(newItem);

        // Update remove buttons visibility
        updateRemoveButtons();
    });

    checklistContainer.addEventListener('click', function(e) {
        if (e.target.closest('.btn-remove-checklist')) {
            e.target.closest('.input-group').remove();
            updateRemoveButtons();
        }
    });

    function updateRemoveButtons() {
        const items = checklistContainer.querySelectorAll('.input-group');
        items.forEach((item, index) => {
            const removeBtn = item.querySelector('.btn-remove-checklist');
            removeBtn.style.display = items.length > 1 ? 'block' : 'none';
        });
    }

    // Auto-select client when post is selected
    const postSelect = document.querySelector('select[name="post_id"]');
    const clientSelect = document.querySelector('select[name="cliente_id"]');

    postSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        if (selectedOption.value) {
            // Parse client from post title (assuming format "Title - Client")
            const text = selectedOption.text;
            const clientName = text.split(' - ').pop();

            // Find and select matching client
            for (let option of clientSelect.options) {
                if (option.text === clientName) {
                    clientSelect.value = option.value;
                    break;
                }
            }
        }
    });

    // Tags processing
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        const tagsInput = document.querySelector('input[name="tags_input"]');
        if (tagsInput.value) {
            const tags = tagsInput.value.split(',').map(tag => tag.trim()).filter(tag => tag);
            tags.forEach(tag => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'tags[]';
                input.value = tag;
                form.appendChild(input);
            });
        }
    });
});
</script>
@endpush
@endsection