{% extends "layouts/base.html" %}

{% block title %}Meeting Settings{% endblock %}
{% block extra_css %}
<style>
    .settings-container {
        /* max-width: 600px; */
        margin: 0 auto;
        background-color: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .settings-container h2 {
        text-align: center;
        margin-bottom: 20px;
    }

    .form-group label {
        font-weight: bold;
        width: 100px;
    }

    .form-group input[type="checkbox"] {
        margin-right: 10px;
    }

    .btn-primary {
        width: 100%;
        margin-top: 20px;
        background: #042954;
        color: white;
        font-size: 19px;
        border-radius: 10px;
        padding: 14px 0px;
        border: none;
        cursor: pointer;
    }

    .days-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px
    }

    .form-row {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 40px;
    }

    .form-col {
        width: 50%;
    }

    .color-preview {
        width: 30px;
        height: 30px;
        border-radius: 5px;
        margin-left: 10px;
        border: 1px solid #ddd;
    }

    .settings-section {
        margin-bottom: 30px;
        padding: 20px;
        border: 1px solid #eee;
        border-radius: 8px;
    }

    .settings-section h4 {
        margin-bottom: 20px;
        color: #333;
    }

    .range-with-value {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .range-value {
        min-width: 40px;
    }
</style>
{% endblock %}
{% block content %}
<div class="settings-container mt-5">
    <h2>Widget Settings</h2>
    <form method="POST" action="{{ url_for('company.update_settings') }}" id="company-setting-form">
        <!-- Widget Appearance Section -->
        <div style="display: flex; gap: 20px;">
            <div class="settings-section" style="width: 50%;">
                <h4>Widget Appearance</h4>
                <div class="form-group">
                    <label for="widget_color">Widget Color:</label>
                    <div class="d-flex align-items-center" style="display: flex; align-items: center;">
                        <input type="color" id="widget_color" name="widget_color" class="form-control"
                            value="{{ settings.widget_color if settings and settings.widget_color else '#F42941' }}">
                        <div class="color-preview" id="color-preview"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="idle_reminder_seconds" style="width: auto;">Idle Reminder (seconds):</label>
                    <input type="number" id="idle_reminder_seconds" name="idle_reminder_seconds" class="form-control"
                        min="2" max="60"
                        value="{{ settings.idle_reminder_seconds if settings and settings.idle_reminder_seconds else 4 }}">
                </div>
            </div>

            <!-- Voice Settings Section -->
            <div class="settings-section" style="width: 50%;">
                <h4>Voice Settings</h4>
                <div class="form-group">
                    <label for="voice_speed" style="width: auto;">AI Speaking Speed:</label>
                    <div class="range-with-value">
                        <input type="range" id="voice_speed" name="voice_speed" class="form-control" min="0.5" max="2"
                            step="0.1"
                            value="{{ settings.voice_speed if settings and settings.voice_speed else '1.0' }}">
                        <span class="range-value" id="speed-value">{{ settings.voice_speed }}x</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="ai_voice" style="width: auto;">AI Voice:</label>
                    <select id="ai_voice" name="ai_voice" class="form-control">
                        <option value="en-GB-female" {% if settings and settings.ai_voice == 'en-GB-female' %}selected{% endif %}>British Female</option>
                        <option value="en-GB-male" {% if settings and settings.ai_voice == 'en-GB-male' %}selected{% endif %}>British Male</option>
                        <option value="en-US-female" {% if settings and settings.ai_voice == 'en-US-female' %}selected{% endif %}>American Female</option>
                        <option value="en-US-male" {% if settings and settings.ai_voice == 'en-US-male' %}selected{% endif %}>American Male</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Meeting Settings Section -->
        <div class="settings-section">
            <h4>Meeting Availability</h4>
            <div class="form-group">
                <h5>Available Days:</h5>
                {% set available_days = settings.available_days.split(',') if settings and settings.available_days else
                []
                %}
                <div class="days-label">
                    <label for="">Monday</label>
                    <input type="checkbox" name="available_days" value="Monday" {% if 'Monday' in available_days
                        %}checked{% endif %}>
                </div>
                <div class="days-label">
                    <label for="">Tuesday</label>
                    <input type="checkbox" name="available_days" value="Tuesday" {% if 'Tuesday' in available_days
                        %}checked{% endif %}>
                </div>
                <div class="days-label">
                    <label for="">Wednesday</label>
                    <input type="checkbox" name="available_days" value="Wednesday" {% if 'Wednesday' in available_days
                        %}checked{% endif %}>
                </div>
                <div class="days-label">
                    <label for="">Thursday</label>
                    <input type="checkbox" name="available_days" value="Thursday" {% if 'Thursday' in available_days
                        %}checked{% endif %}>
                </div>
                <div class="days-label">
                    <label for="">Friday</label>
                    <input type="checkbox" name="available_days" value="Friday" {% if 'Friday' in available_days
                        %}checked{% endif %}>
                </div>
                <div class="days-label">
                    <label for="">Saturday</label>
                    <input type="checkbox" name="available_days" value="Saturday" {% if 'Saturday' in available_days
                        %}checked{% endif %}>
                </div>
                <div class="days-label">
                    <label for="">Sunday</label>
                    <input type="checkbox" name="available_days" value="Sunday" {% if 'Sunday' in available_days
                        %}checked{% endif %}>
                </div>
            </div>
            <div class="form-row">
                <div class="form-col">
                    <div class="form-group">
                        <label for="start_time">Start Time:</label>
                        <input type="time" id="start_time" name="start_time" class="form-control"
                            value="{{ settings.start_time if settings else '' }}">
                    </div>
                </div>
                <div class="form-col">
                    <div class="form-group">
                        <label for="end_time">End Time:</label>
                        <input type="time" id="end_time" name="end_time" class="form-control"
                            value="{{ settings.end_time if settings else '' }}">
                    </div>
                </div>
            </div>
        </div>

        <!-- SMTP Email Settings Section -->
        <div class="settings-section">
            <h4>SMTP Email Settings</h4>
            <div class="form-group">
                <label for="mail_mailer">Mailer:</label>
                <input type="text" id="mail_mailer" name="mail_mailer" class="form-control"
                       value="{{ settings.mail_mailer if settings and settings.mail_mailer else '' }}">
            </div>
            <div class="form-group">
                <label for="mail_host">Host:</label>
                <input type="text" id="mail_host" name="mail_host" class="form-control"
                       value="{{ settings.mail_host if settings and settings.mail_host else '' }}">
            </div>
            <div class="form-group">
                <label for="mail_port">Port:</label>
                <input type="number" id="mail_port" name="mail_port" class="form-control" value="465"
                       value="{{ settings.mail_port if settings and settings.mail_port else '' }}">
            </div>
            <div class="form-group">
                <label for="mail_username">Username:</label>
                <input type="text" id="mail_username" name="mail_username" class="form-control"
                       value="{{ settings.mail_username if settings and settings.mail_username else '' }}">
            </div>
            <div class="form-group">
                <label for="mail_password">Password:</label>
                <input type="password" id="mail_password" name="mail_password" class="form-control"
                       value="{{ settings.mail_password if settings and settings.mail_password else '' }}">
            </div>
            <div class="form-group">
                <label for="mail_encryption">Encryption:</label>
                <input type="text" id="mail_encryption" name="mail_encryption" class="form-control"
                       value="{{ settings.mail_encryption if settings and settings.mail_encryption else '' }}">
            </div>
            <div class="form-group">
                <label for="mail_from_address">From Address:</label>
                <input type="email" id="mail_from_address" name="mail_from_address" class="form-control"
                       value="{{ settings.mail_from_address if settings and settings.mail_from_address else '' }}">
            </div>
            <div class="form-group">
                <label for="mail_from_name">From Name:</label>
                <input type="text" id="mail_from_name" name="mail_from_name" class="form-control"
                       value="{{ settings.mail_from_name if settings and settings.mail_from_name else '' }}">
            </div>
        </div>

        <!-- IMAP Settings Section -->
        <div class="settings-section">
            <h4>IMAP Email Settings</h4>
            <div class="form-group">
                <label>IMAP Host</label>
                <input type="text" name="imap_host" class="form-control" 
                       placeholder="e.g., imap.gmail.com" value="{{ settings.imap_host if settings and settings.imap_host else '' }}">
            </div>

            <div class="form-group">
                <label>IMAP Port</label>
                <input type="number" name="imap_port" class="form-control" 
                       value="993" placeholder="e.g., 993" value="{{ settings.imap_port if settings and settings.imap_port else '' }}">
            </div>
        </div>

        <!-- Twilio Settings Section -->
        <div class="settings-section">
            <h4>Twilio Settings</h4>
            <div class="form-group">
                <label for="twilio_account_sid">Account SID:</label>
                <input type="text" id="twilio_account_sid" name="twilio_account_sid" class="form-control"
                       value="{{ settings.twilio_account_sid if settings and settings.twilio_account_sid else '' }}">
            </div>
            <div class="form-group">
                <label for="twilio_auth_token">Auth Token:</label>
                <input type="password" id="twilio_auth_token" name="twilio_auth_token" class="form-control"
                       value="{{ settings.twilio_auth_token if settings and settings.twilio_auth_token else '' }}">
            </div>
            <div class="form-group">
                <label for="twilio_phone_number">Twilio Phone Number:</label>
                <input type="text" id="twilio_phone_number" name="twilio_phone_number" class="form-control"
                       value="{{ settings.twilio_phone_number if settings and settings.twilio_phone_number else '' }}"
                       placeholder="+1234567890">
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Save Settings</button>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const settingsForm = document.querySelector('#company-setting-form');
        const colorInput = document.querySelector('#widget_color');
        const colorPreview = document.querySelector('#color-preview');
        const speedInput = document.querySelector('#voice_speed');
        const speedValue = document.querySelector('#speed-value');

        // Update color preview
        function updateColorPreview() {
            colorPreview.style.backgroundColor = colorInput.value;
        }
        colorInput.addEventListener('input', updateColorPreview);
        updateColorPreview(); // Initial update

        // Update speed value display
        speedInput.addEventListener('input', function () {
            speedValue.textContent = this.value + 'x';
        });

        settingsForm.addEventListener('submit', async function (e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            console.log(formData.get('idle_reminder_seconds'));

            try {
                const response = await fetch(this.action, {
                    method: 'POST',
                    body: formData
                });

                if (response.ok) {
                    showNotification('Settings updated successfully!', 'success');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    const data = await response.json();
                    showNotification('Error updating settings: ' + data.error, 'error');
                }
            } catch (error) {
                console.error('Error:', error);
                showNotification('Error updating settings. Please try again.', 'error');
            }
        });
    });
</script>
{% endblock %}