{% extends "base.html" %}

{% block content %}
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                {% if category == 'generated_link' %}
                    <!-- Special display for the generated link -->
                    <div class="alert alert-info" role="alert">
                        <strong>Shareable Link Generated:</strong>
                        <div class="input-group mt-2">
                            <input type="text" class="form-control" id="generatedLink" value="{{ message }}" readonly>
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" onclick="copyLink()">Copy</button>
                            </div>
                        </div>
                        <small class="form-text text-muted">You can now copy this link and send it to your client.</small>
                    </div>
                {% elif category != 'message' %}
                     <div class="alert alert-{{ category }}">{{ message }}</div>
                {% endif %}
            {% endfor %}
        {% endif %}
    {% endwith %}

    <h1>Manage Your Clients</h1>
    <a href="{{ url_for('consultant.add_client') }}" class="btn btn-primary mb-3">Add New Client</a>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Date of Birth</th>
                <th>Phone</th>
                <th>Gender</th>
                <th>Skip Details</th>
                <th>Actions</th>
                <th>Assign Assessment</th>
            </tr>
        </thead>
        <tbody>
            {% for client in clients %}
            <tr>
                <td>{{ client.name }}</td>
                <td>{{ client.email }}</td>
                <td>{{ client.date_of_birth.strftime('%d-%b-%Y') if client.date_of_birth else 'N/A' }}</td>
                <td>{{ client.phone_number if client.phone_number else 'N/A' }}</td>
                <td>{{ client.gender if client.gender else 'N/A' }}</td>
                <td>{{ 'Yes' if client.skip_details_collection else 'No' }}</td>
                <td>
                    <a href="#" class="btn btn-sm btn-warning">Edit</a>
                    <a href="#" class="btn btn-sm btn-danger">Delete</a>
                </td>
                <td>
                    <form method="POST" action="{{ url_for('consultant.assign_multiple_assessments', client_id=client.id) }}" class="assessment-form">
                        <div class="assessment-checkboxes mb-2">
                            {% for assessment in assessments %}
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="assessment_ids" value="{{ assessment.id }}" id="assessment_{{ client.id }}_{{ assessment.id }}">
                                <label class="form-check-label" for="assessment_{{ client.id }}_{{ assessment.id }}">
                                    {{ assessment.name }}
                                </label>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="btn-group" role="group">
                            <button type="submit" name="action" value="send_email" class="btn btn-sm btn-primary">
                                <i class="fas fa-envelope mr-1"></i>Assign & Send Email
                            </button>
                            <button type="submit" name="action" value="generate_link" class="btn btn-sm btn-success">
                                <i class="fas fa-link mr-1"></i>Assign & Generate Link
                            </button>
                        </div>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}

{% block scripts %}
<script>
    function copyLink() {
        const linkInput = document.getElementById('generatedLink');
        linkInput.select();
        document.execCommand('copy');
        // Optionally, provide feedback to the user
        alert('Link copied to clipboard!');
    }
    
    // Add form validation to ensure at least one checkbox is selected
    document.addEventListener('DOMContentLoaded', function() {
        const forms = document.querySelectorAll('.assessment-form');
        
        forms.forEach(function(form) {
            form.addEventListener('submit', function(e) {
                const checkboxes = form.querySelectorAll('input[name="assessment_ids"]:checked');
                
                if (checkboxes.length === 0) {
                    e.preventDefault();
                    alert('Please select at least one assessment to assign.');
                    return false;
                }
            });
        });
    });
</script>
{% endblock %}