{% extends "settings.html" %}
{% block settings %}
{% load i18n %}
{% if form.errors %}
<!-- form errors  -->
<div class="oh-wrapper">
    <div class="oh-alert-container">
        {% for error in form.non_field_errors %}
        <div class="oh-alert oh-alert--animated oh-alert--danger">
            {{ error }}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}
<form method="post" action="{% url 'gdrive' %}" enctype="multipart/form-data">
    {% csrf_token %}
    {{form.as_p}}
</form>

<!-- OAuth Authorization Section -->
{% if show and form.instance.auth_method == 'oauth' and form.instance.oauth_client_id and form.instance.oauth_client_secret and not form.instance.oauth_refresh_token %}
<div class="oh-wrapper mt-3">
    <div class="oh-alert oh-alert--info">
        <h5><ion-icon name="information-circle-outline"></ion-icon> OAuth Authorization Required</h5>
        <p>Your OAuth credentials are configured, but you need to authorize access to your Google Drive.</p>
        <a class="oh-btn oh-btn--warning" href="{% url 'oauth_authorize' %}">
            <ion-icon name="logo-google"></ion-icon>
            Authorize with Google
        </a>
    </div>
</div>
{% elif show and form.instance.auth_method == 'oauth' and form.instance.oauth_refresh_token %}
<div class="oh-wrapper mt-3">
    <div class="oh-alert oh-alert--success">
        <h5><ion-icon name="checkmark-circle-outline"></ion-icon> OAuth Authorized</h5>
        <p>Google Drive access is authorized and ready for backup.</p>
    </div>
</div>
{% endif %}

 <script>
    $(document).ready(function() {

        $('.oh-payslip__header').append(`<div class="d-flex">
            {% if show %}
            {% if active %}
            <a class="oh-btn oh-btn--danger mr-2" href="{% url 'gdrive_start_stop' %}" title="Stop">Stop</a>
            {% else %}
            <a class="oh-btn oh-btn--success mr-2" href="{% url 'gdrive_start_stop' %}" title="Start">Start</a>
            {% endif %}
            <a class="oh-btn oh-btn--danger-outline" href="{% url 'gdrive_delete' %}" title="Remove">
                <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
            </a>
            {% endif %}
            
            <!-- OAuth Authorization Button -->
            {% if show and form.instance.auth_method == 'oauth' and form.instance.oauth_client_id and form.instance.oauth_client_secret and not form.instance.oauth_refresh_token %}
            <a class="oh-btn oh-btn--warning mr-2" href="{% url 'oauth_authorize' %}" title="Authorize with Google">
                <ion-icon name="logo-google" role="img" class="md hydrated" aria-label="google logo"></ion-icon>
                Authorize with Google
            </a>
            {% endif %}
        </div>`)
        
        // Show/hide fields based on authentication method
        function toggleAuthFields() {
            var authMethod = $('#id_auth_method').val();
            if (authMethod === 'service_account') {
                // Show service account fields
                $('#id_service_account_file').parent().show();
                // Hide OAuth fields
                $('#id_oauth_client_id').parent().hide();
                $('#id_oauth_client_secret').parent().hide();
            } else if (authMethod === 'oauth') {
                // Hide service account fields
                $('#id_service_account_file').parent().hide();
                // Show OAuth fields
                $('#id_oauth_client_id').parent().show();
                $('#id_oauth_client_secret').parent().show();
            }
        }
        
        // Initialize field visibility
        toggleAuthFields();
        
        // Handle auth method change
        $('#id_auth_method').change(function() {
            toggleAuthFields();
            // Also add a note about OAuth authorization if needed
            if ($(this).val() === 'oauth') {
                if (!$('#oauth-info').length) {
                    $('#id_oauth_client_secret').parent().after(`
                        <div id="oauth-info" class="oh-alert oh-alert--info mt-2">
                            <p><strong>Note:</strong> After saving your OAuth credentials, you'll need to authorize access to Google Drive.</p>
                        </div>
                    `);
                }
            } else {
                $('#oauth-info').remove();
            }
        });
        
        if (!$('#id_interval').is(':checked')) {
            $('#id_seconds').parent().hide();
        }
        if (!$('#id_fixed').is(':checked')) {
            $('#id_hour').parent().hide();
            $('#id_minute').parent().hide();
        }
        $('#id_interval').change(function() {
            if ($(this).is(':checked')) {
                $('#id_fixed').prop('checked', false);
                $('#id_hour').parent().hide();
                $('#id_minute').parent().hide();
                $('#id_seconds').parent().show();
            } else {
                $('#id_seconds').parent().hide();
            }
        });
        $('#id_fixed').change(function() {
            if ($(this).is(':checked')) {
                $('#id_interval').prop('checked', false);
                $('#id_seconds').parent().hide();
                $('#id_hour').parent().show();
                $('#id_minute').parent().show();
            } else {
                $('#id_hour').parent().hide();
                $('#id_minute').parent().hide();
            }
        });
    });
</script>

{% endblock settings %}