<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="ti ti-poll me-2"></i>Nová anketa
                    </h5>
                </div>
                <div class="card-body">
                    <?php if (!empty($error)): ?>
                        <div class="alert alert-danger" role="alert">
                            <i class="ti ti-alert-circle me-2"></i>
                            <?= htmlspecialchars($error) ?>
                        </div>
                    <?php endif; ?>

                    <form method="post">
                        <!-- Otázka -->
                        <div class="mb-4">
                            <label for="title" class="form-label fw-bold">Otázka <span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-lg" id="title" name="title" 
                                   placeholder="Co ses chceš zeptat?" required
                                   value="<?= htmlspecialchars($_POST['title'] ?? '') ?>">
                            <small class="text-muted d-block mt-1">Sem napiš svou otázku</small>
                        </div>

                        <!-- Odpovědi -->
                        <div class="mb-4">
                            <label class="form-label fw-bold">Možnosti odpovědí <span class="text-danger">*</span></label>
                            <small class="text-muted d-block mb-3">Vyplň alespoň 2 odpovědi (maximum 10)</small>
                            
                            <div id="options-container">
                                <?php for ($i = 1; $i <= 10; $i++): ?>
                                    <div class="input-group mb-2">
                                        <span class="input-group-text bg-light" style="min-width: 40px;">
                                            <span class="badge bg-primary"><?= $i ?></span>
                                        </span>
                                        <input type="text" 
                                               class="form-control option-input" 
                                               name="option[<?= $i ?>]" 
                                               placeholder="Odpověď <?= $i ?>"
                                               value="<?= htmlspecialchars($_POST['option'][$i] ?? '') ?>">
                                        <button type="button" class="btn btn-outline-secondary btn-sm clear-btn" 
                                                style="display: none;" title="Vymazat">
                                            <i class="ti ti-x"></i>
                                        </button>
                                    </div>
                                <?php endfor; ?>
                            </div>
                            
                            <small class="text-muted d-block mt-2">
                                <i class="ti ti-info-circle me-1"></i>
                                Počet vyplněných: <strong id="option-count">0</strong> / 10
                            </small>
                        </div>

                        <!-- Tlačítka -->
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="ti ti-send me-2"></i>Vytvořit anketu
                            </button>
                            <a href="<?= BASE_URL ?>/team/show?id=<?= $teamId ?>#polls-tab" class="btn btn-outline-secondary" title="Zpět">
                                <i class="ti ti-arrow-back-up fs-4"></i>
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const optionInputs = document.querySelectorAll('.option-input');
    const optionCount = document.getElementById('option-count');
    
    function updateOptionCount() {
        let count = 0;
        optionInputs.forEach(input => {
            if (input.value.trim() !== '') {
                count++;
            }
        });
        optionCount.textContent = count;
    }
    
    optionInputs.forEach(input => {
        input.addEventListener('input', updateOptionCount);
    });
    
    // Počáteční počet
    updateOptionCount();
});
</script>

<style>
.option-input {
    border-left: 3px solid #0d6efd;
}

.option-input:focus {
    border-left-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.input-group-text .badge {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
}
</style>
