{% extends 'base.html' %}

{% block content %}
    <h2 class="add-client-title">Add New Client</h2>
    <button onclick="toggleBulkAddition()">Bulk Add Clients</button>

    <div id="singleAddForm" style="display:block;">
    <form action="{{ url_for('add_client') }}" method="POST" class="add-client-form">
        <label for="client_number" class="client-number-label">Client Number:</label>
        <input type="text" id="client_number" name="client_number" class="client-number-input">

        <label for="phone" class="client-phone-label">Client Phone:</label>
        <input type="text" id="phone" name="phone" class="client-phone-input">

        <label for="email" class="client-email-label">Client Email:</label>
        <input type="email" id="email" name="email" class="client-email-input">

        <label for="iptv_username" class="iptv-username-label">IPTV Username:</label>
        <input type="text" id="iptv_username" name="iptv_username" class="iptv-username-input">

        <label for="panel_name" class="panel-name-label">IPTV Panel Name:</label>
        <select id="panel_name" name="panel_name" class="panel-name-select">
            {% for panel in panels %}
            <option value="{{ panel.name }}" class="panel-option">{{ panel.name }}</option>
            {% endfor %}
        </select>

        <label for="expiry_date" class="expiry-date-label">Expiry Date:</label>
        <input type="date" id="expiry_date" name="expiry_date" class="expiry-date-input">

        <button type="submit" class="add-client-submit">Add Client</button>
    </form>
    </div>

    <div id="bulkAddForm" style="display:none;">
        <form action="{{ url_for('add_client') }}" method="POST" class="bulk-add-form">
            <label for="clientCSV" class="client-csv-label">Paste CSV Data:</label>
            <textarea id="clientCSV" name="clientCSV" rows="10" class="client-csv-textarea"></textarea>
            <button type="submit" class="bulk-add-submit">Add Clients</button>
        </form>
    </div>

    <a href="{{ url_for('index') }}" class="back-to-list-link">Back to list</a>

    <script>
        function toggleBulkAddition() {
            let singleForm = document.getElementById('singleAddForm');
            let bulkForm = document.getElementById('bulkAddForm');
            if (singleForm.style.display === "none") {
                singleForm.style.display = "block";
                bulkForm.style.display = "none";
            } else {
                singleForm.style.display = "none";
                bulkForm.style.display = "block";
            }
        }
    </script>
{% endblock %}