@extends('layouts.master')

@section('header')
    @include('common.header')
@stop

@section('content')
    <div class="row" ng-controller="Office365SettingsCtrl" ng-cloak>
        <div class="col-sm-8">
            <div class="widget widget-classic">
                <div class="widget-content">

                    <!-- Page title -->
                    <p class="lead">
                        Office 365 Calendar Settings
                        
                        <!-- Status indicators -->
                        @if(isset($settings['authenticated']) && $settings['authenticated'])
                            <span class="btn btn-success pull-right">
                                <i class="icon-ok"></i> Connected
                            </span>
                        @else
                            <span class="btn btn-warning pull-right">
                                <i class="icon-warning-sign"></i> Not Connected
                            </span>
                        @endif
                    </p>

                    <!-- Success/Error Messages -->
                    @if(isset($success) && $success)
                        <div class="alert alert-success">
                            <i class="icon-ok-sign"></i> {{ $success }}
                        </div>
                    @endif

                    @if(isset($error) && $error)
                        <div class="alert alert-danger">
                            <i class="icon-remove-sign"></i> {{ $error }}
                        </div>
                    @endif

                    <!-- Connection Status -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4>Connection Status</h4>
                        </div>
                        <div class="panel-body">
                            @if(isset($settings['authenticated']) && $settings['authenticated'])
                                <div class="alert alert-success">
                                    <i class="icon-ok"></i> Your Office 365 calendar is connected and ready to use.
                                    <br><br>
                                    <form method="POST" action="{{ route('admin.settings.office365.revoke') }}" style="display: inline;">
                                        @csrf
                                        <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to disconnect your Office 365 calendar?')">
                                            <i class="icon-unlink"></i> Disconnect Calendar
                                        </button>
                                    </form>
                                </div>
                            @else
                                <div class="alert alert-info">
                                    <i class="icon-info-sign"></i> Connect your Office 365 calendar to sync events with the dashboard.
                                    <br><br>
                                    @if(isset($settings['auth_url']))
                                        <a href="{{ $settings['auth_url'] }}" class="btn btn-primary">
                                            <i class="icon-external-link"></i> Connect Office 365 Calendar
                                        </a>
                                    @else
                                        <p class="text-danger">Office 365 integration is not properly configured. Please contact your administrator.</p>
                                    @endif
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Configuration Info -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4>Configuration</h4>
                        </div>
                        <div class="panel-body">
                            <dl class="dl-horizontal">
                                <dt>Client ID:</dt>
                                <dd>{{ $settings['client_id'] ?? 'Not Configured' }}</dd>
                                
                                <dt>Redirect URI:</dt>
                                <dd><code>{{ $settings['redirect_uri'] }}</code></dd>
                                
                                <dt>Permissions:</dt>
                                <dd>Calendars.Read (Read-only calendar access)</dd>
                            </dl>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        
        <div class="col-sm-4">
            <div class="widget widget-classic">
                <div class="widget-content">
                    <p class="lead"><i class="icon-info-sign"></i> About</p>
                    <p style="text-align: justify;">
                        This module replaces the legacy Exchange Web Services (EWS) integration with modern OAuth2 authentication for Office 365 calendars.
                    </p>
                    
                    <h5>Features:</h5>
                    <ul>
                        <li>Secure OAuth2 authentication</li>
                        <li>Read-only calendar access</li>
                        <li>Automatic token refresh</li>
                        <li>Integration with dashboard calendar</li>
                    </ul>
                    
                    <h5>Setup Required:</h5>
                    <p>
                        An Office 365 application must be registered in Azure AD with the following redirect URI: 
                        <code>{{ $settings['redirect_uri'] }}</code>
                    </p>
                </div>
            </div>
            
            <div class="widget widget-classic">
                <div class="widget-content">
                    <p class="lead"><i class="icon-cog"></i> Migration from EWS</p>
                    <p style="text-align: justify;">
                        If you were previously using Exchange Web Services (EWS), this new integration provides:
                    </p>
                    <ul>
                        <li>Better security and reliability</li>
                        <li>Support for modern Office 365 tenants</li>
                        <li>No need for basic authentication</li>
                        <li>Improved error handling</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@stop

@section('script')
<script>
    // Simple controller for any future JavaScript enhancements
    app.controller('Office365SettingsCtrl', function($scope, $http) {
        $scope.checkStatus = function() {
            $http.get('/api/v1/office365/settings')
                .then(function(response) {
                    console.log('Office365 Status:', response.data);
                });
        };
        
        // Check status on load
        $scope.checkStatus();
    });
</script>
@stop