{% extends "base.html" %}

{% block title %}Fragify{% endblock %}

{% block content %}
<div class="text-center">
    <h1 class="title display-4">Fragify</h1>
    <p class="description">
        Erstelle einfach Links für Anfragen bei dem Portal 
        <a href="https://fragdenstaat.de" target="_blank" class="text-decoration-none">FragDenStaat.de</a>, 
        welche du vorausfüllen und an Freund:innen schicken kannst!
    </p>
    
    <form id="fragifyForm" class="text-start">
        <div class="mb-4">
            <label for="publicbody" class="form-label fw-bold">Behörde</label>
            <select class="form-select" id="publicbody" name="publicbody_id" required>
                <option value="">Behörde auswählen...</option>
            </select>
        </div>
        
        <div class="mb-4">
            <label for="subject" class="form-label fw-bold">Betreff</label>
            <input type="text" class="form-control" id="subject" name="subject" 
                   placeholder="Betreff der Anfrage" required>
        </div>
        
        <div class="mb-4">
            <label for="body" class="form-label fw-bold">Dokumente anfragen:</label>
            <textarea class="form-control" id="body" name="body" rows="5" 
                      placeholder="Beschreibe hier, welche Dokumente oder Informationen du anfragen möchtest..." required></textarea>
        </div>
        
        <div class="text-center">
            <button type="submit" class="btn btn-primary btn-lg">
                <span class="btn-text">Anfrage Link generieren</span>
                <span class="loading spinner-border spinner-border-sm ms-2" role="status"></span>
            </button>
        </div>
    </form>
    
    <div id="result" class="mt-4" style="display: none;">
        <h5 class="text-success mb-3">Link erfolgreich generiert!</h5>
        <div class="input-group">
            <input type="text" class="form-control" id="generatedLinkInput" readonly>
            <button class="btn btn-outline-primary" type="button" id="copyBtn">In Zwischenablage</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    $(document).ready(function() {
        // Initialize Select2 for public bodies
        $('#publicbody').select2({
            theme: 'bootstrap-5',
            placeholder: 'Behörde auswählen...',
            allowClear: true,
            width: '100%',
            ajax: {
                url: '/api/publicbodies',
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        search: params.term,
                        page: params.page || 1
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.objects.map(function(item) {
                            return {
                                id: item.id,
                                text: item.name + ' (' + item.jurisdiction.name + ')'
                            };
                        }),
                        pagination: {
                            more: data.meta.next !== null
                        }
                    };
                },
                cache: true
            }
        });
        
        // Handle form submission (client-side)
        $('#fragifyForm').on('submit', function(e) {
            e.preventDefault();

            const publicbodyId = $('#publicbody').val() || '';
            const subject = $('#subject').val() || '';
            const body = $('#body').val() || '';

            let link = 'https://fragdenstaat.de/anfrage-stellen/';
            if (publicbodyId) {
                link += `an/${publicbodyId}/`;
            }

            const params = new URLSearchParams();
            if (subject) params.set('subject', subject);
            if (body) params.set('body', body);

            if ([...params].length > 0) {
                link += `?${params.toString()}`;
            }

            $('#generatedLinkInput').val(link);
            $('#result').show();
        });

        // Copy to clipboard
        $(document).on('click', '#copyBtn', function() {
            const link = $('#generatedLinkInput').val();
            navigator.clipboard.writeText(link).then(function() {
                const btn = $('#copyBtn');
                const originalText = btn.text();
                btn.text('Kopiert!');
                setTimeout(() => btn.text(originalText), 1500);
            });
        });
    });
</script>
{% endblock %}