@section('content')
<div class="widget">
    <div class="widget-header">
        <i class="fa fa-cloud"></i>
        <h3>Xero Integration</h3>
    </div>
    <div class="widget-content">
        <div class="alert alert-info">
            <i class="fa fa-info-circle"></i>
            Direct connection to Xero for invoice and accounting sync
        </div>

        <form class="form-horizontal" id="xeroSettingsForm">
            <div class="control-group">
                <label class="control-label">Enable Xero Integration</label>
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox" name="enabled" ng-model="settings.enabled">
                        Direct API integration replacing microservice
                    </label>
                </div>
            </div>

            <div ng-show="settings.enabled">
                <div class="control-group">
                    <label class="control-label">Client ID</label>
                    <div class="controls">
                        <input type="text" class="input-xxlarge" ng-model="settings.client_id" placeholder="From your Xero app configuration">
                        <p class="help-block">From your Xero app configuration</p>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">Client Secret</label>
                    <div class="controls">
                        <input type="password" class="input-xxlarge" ng-model="settings.client_secret" placeholder="Keep this secure and private">
                        <p class="help-block">Keep this secure and private</p>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">Redirect URI</label>
                    <div class="controls">
                        <input type="text" class="input-xxlarge" ng-model="settings.redirect_uri" placeholder="https://your-domain/api/v1/xero/callback">
                        <p class="help-block">Use this in your Xero app configuration</p>
                    </div>
                </div>

                <div class="control-group">
                    <div class="controls">
                        <button type="button" class="btn btn-primary" ng-click="testConnection()" ng-disabled="testing">
                            <i ng-class="{'fa fa-refresh': !testing, 'fa fa-spinner fa-spin': testing}"></i>
                            Test Connection
                        </button>
                        <button type="button" class="btn btn-success" ng-click="saveSettings()" ng-disabled="saving">
                            <i ng-class="{'fa fa-save': !saving, 'fa fa-spinner fa-spin': saving}"></i>
                            Save Settings
                        </button>
                    </div>
                </div>
            </div>
        </form>

        <hr>

        <div class="alert alert-warning" ng-show="settings.enabled && !settings.connected">
            <i class="fa fa-warning"></i>
            <strong>Not Connected:</strong> Please configure your Xero credentials and test the connection.
        </div>

        <div class="alert alert-success" ng-show="settings.enabled && settings.connected">
            <i class="fa fa-check"></i>
            <strong>Connected to Xero!</strong>
            <span ng-if="settings.organization">Organization: {[{ settings.organization }]}</span>
        </div>

        <div class="well" ng-show="settings.enabled">
            <h4><i class="fa fa-info-circle"></i> Xero Setup Instructions:</h4>
            <ol>
                <li>Create a Xero app at <a href="https://developer.xero.com" target="_blank">developer.xero.com</a></li>
                <li>Copy the Client ID and Secret from your Xero app</li>
                <li>Set the redirect URI in your Xero app to match the one above</li>
                <li>Save settings and test the connection</li>
                <li>Complete the OAuth authorization when prompted</li>
            </ol>
        </div>

        <div class="well" ng-show="settings.enabled">
            <h4><i class="fa fa-cog"></i> Features:</h4>
            <ul>
                <li><i class="fa fa-check text-success"></i> Chart of accounts sync</li>
                <li><i class="fa fa-check text-success"></i> Invoice creation</li>
                <li><i class="fa fa-check text-success"></i> Purchase order sync</li>
                <li><i class="fa fa-check text-success"></i> Contact management</li>
            </ul>
        </div>
    </div>
</div>

<script>
angular.module('Admin').controller('XeroIntegrationCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.settings = {
        enabled: false,
        client_id: '',
        client_secret: '',
        redirect_uri: '',
        connected: false,
        organization: ''
    };

    // Load current settings
    $http.get('/api/v1/settings/integrations.xero').then(function(response) {
        $scope.settings = response.data || $scope.settings;
    });

    $scope.saveSettings = function() {
        $scope.saving = true;
        $http.post('/api/v1/settings/integrations.xero', $scope.settings).then(function(response) {
            $scope.saving = false;
            if (response.data.success) {
                Messenger().post({
                    message: 'Xero settings saved successfully',
                    type: 'success'
                });
            }
        }).catch(function(error) {
            $scope.saving = false;
            Messenger().post({
                message: 'Failed to save Xero settings: ' + (error.data.message || error.message),
                type: 'error'
            });
        });
    };

    $scope.testConnection = function() {
        $scope.testing = true;
        $http.post('/api/v1/xero/test-connection').then(function(response) {
            $scope.testing = false;
            if (response.data.success) {
                $scope.settings.connected = true;
                $scope.settings.organization = response.data.organization;
                Messenger().post({
                    message: response.data.message,
                    type: 'success'
                });
            } else if (response.data.needs_oauth) {
                // Redirect to Xero OAuth
                window.location.href = response.data.auth_url;
            }
        }).catch(function(error) {
            $scope.testing = false;
            $scope.settings.connected = false;
            Messenger().post({
                message: 'Connection test failed: ' + (error.data.message || error.message),
                type: 'error'
            });
        });
    };
}]);
</script>
@endsection 