{% extends "admin/base_admin.html" %}

{% block title %}Company Settings{% endblock %}

{% block content %}
<div class="admin-container">
    <div class="header-section">
        <h1>Company Settings</h1>
        <p class="subtitle">Configure your chatbot identity and welcome message</p>
    </div>

    {% if messages %}
        <div class="messages">
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }}">{{ message }}</div>
            {% endfor %}
        </div>
    {% endif %}

    <form method="post" class="form-container">
        {% csrf_token %}
        
        <div class="form-group">
            <label for="id_chatbot_name" class="form-label">Chatbot Name</label>
            <input type="text" name="chatbot_name" id="id_chatbot_name" class="form-input" 
                   value="{{ company.chatbot_name }}" placeholder="e.g., Support Assistant" required>
            <small class="form-help">This name appears in the chat widget header</small>
        </div>

        <div class="form-group">
            <label for="id_welcome_message" class="form-label">Welcome Message</label>
            <textarea name="welcome_message" id="id_welcome_message" class="form-input" 
                      placeholder="Enter welcome message..." style="min-height: 120px; resize: vertical;">{{ company.welcome_message }}</textarea>
            <small class="form-help">This message appears when visitors open the chat widget</small>
        </div>

        

        <div class="form-group" style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem;">
            <input type="checkbox" name="show_watermark" id="id_show_watermark" style="width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary-color);"
                   {% if company.show_watermark %}checked{% endif %}>
            <label for="id_show_watermark" class="form-label" style="margin-bottom: 0; cursor: pointer;">Show watermark footer ("Powered By ChatLab")</label>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save Settings</button>
            <a href="{% url 'admin_dashboard' %}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>

<style>
    .admin-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 2rem;
    }

    .header-section {
        margin-bottom: 2rem;
    }

    .header-section h1 {
        margin: 0 0 0.5rem 0;
        font-size: 1.75rem;
    }

    .subtitle {
        color: var(--text-muted);
        margin: 0;
    }

    .form-container {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 2rem;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group:last-of-type {
        margin-bottom: 2rem;
    }

    .form-label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
    }

    .form-input {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-primary);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 1rem;
        transition: border-color 0.2s;
    }

    .form-input:focus {
        outline: none;
        border-color: var(--primary-color);
    }

    .form-help {
        display: block;
        margin-top: 0.5rem;
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .form-actions {
        display: flex;
        gap: 1rem;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        cursor: pointer;
        transition: 0.2s;
        text-decoration: none;
        display: inline-block;
        text-align: center;
    }

    .btn-primary {
        background: var(--primary-color);
        color: white;
    }

    .btn-primary:hover {
        opacity: 0.9;
    }

    .btn-secondary {
        background: var(--bg-secondary);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
    }

    .btn-secondary:hover {
        background: var(--bg-tertiary);
    }

    .messages {
        margin-bottom: 2rem;
    }

    .alert {
        padding: 1rem;
        border-radius: 6px;
        margin-bottom: 1rem;
    }
{% extends "admin/base_admin.html" %}

{% block title %}Company Settings{% endblock %}

{% block content %}
<div class="admin-container">
    <div class="header-section">
        <h1>Company Settings</h1>
        <p class="subtitle">Configure your chatbot identity and welcome message</p>
    </div>

    {% if messages %}
        <div class="messages">
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }}">{{ message }}</div>
            {% endfor %}
        </div>
    {% endif %}

    <form method="post" class="form-container">
        {% csrf_token %}
        
        <div class="form-group">
            <label for="id_chatbot_name" class="form-label">Chatbot Name</label>
            <input type="text" name="chatbot_name" id="id_chatbot_name" class="form-input" 
                   value="{{ company.chatbot_name }}" placeholder="e.g., Support Assistant" required>
            <small class="form-help">This name appears in the chat widget header</small>
        </div>

        <div class="form-group">
            <label for="id_welcome_message" class="form-label">Welcome Message</label>
            <textarea name="welcome_message" id="id_welcome_message" class="form-input" 
                      placeholder="Enter welcome message..." style="min-height: 120px; resize: vertical;">{{ company.welcome_message }}</textarea>
            <small class="form-help">This message appears when visitors open the chat widget</small>
        </div>

        

        

        

        <div class="form-group" style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem;">
            <input type="checkbox" name="show_watermark" id="id_show_watermark" style="width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary-color);"
                   {% if company.show_watermark %}checked{% endif %}>
            <label for="id_show_watermark" class="form-label" style="margin-bottom: 0; cursor: pointer;">Show watermark footer ("Powered By ChatLab")</label>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save Settings</button>
            <a href="{% url 'admin_dashboard' %}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>

<style>
    .admin-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 2rem;
    }

    .header-section {
        margin-bottom: 2rem;
    }

    .header-section h1 {
        margin: 0 0 0.5rem 0;
        font-size: 1.75rem;
    }

    .subtitle {
        color: var(--text-muted);
        margin: 0;
    }

    .form-container {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 2rem;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group:last-of-type {
        margin-bottom: 2rem;
    }

    .form-label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
    }

    .form-input {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-primary);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 1rem;
        transition: border-color 0.2s;
    }

    .form-input:focus {
        outline: none;
        border-color: var(--primary-color);
    }

    .form-help {
        display: block;
        margin-top: 0.5rem;
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .form-actions {
        display: flex;
        gap: 1rem;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        cursor: pointer;
        transition: 0.2s;
        text-decoration: none;
        display: inline-block;
        text-align: center;
    }

    .btn-primary {
        background: var(--primary-color);
        color: white;
    }

    .btn-primary:hover {
        opacity: 0.9;
    }

    .btn-secondary {
        background: var(--bg-secondary);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
    }

    .btn-secondary:hover {
        background: var(--bg-tertiary);
    }

    .messages {
        margin-bottom: 2rem;
    }

    .alert {
        padding: 1rem;
        border-radius: 6px;
        margin-bottom: 1rem;
    }

    .alert-success {
        background: rgba(34, 197, 94, 0.1);
        color: #22c55e;
        border: 1px solid rgba(34, 197, 94, 0.2);
    }
    .alert-error {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.2);
    }
</style>


<style>
@keyframes spin {
    to { transform: rotate(360deg); }
}
</style>
{% endblock %}