@extends('adminlte::page')

@section('title', 'Manage Sheet Permissions')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1>Manage Google Sheet Permissions</h1>
        <a href="{{ route('admin.certification.verification.organization.index') }}" class="btn btn-secondary">
            Back to Certifications
        </a>
    </div>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Sheet Security Management</h3>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h5>Sheet Permission Management</h5>
                        <p>This page helps you manage the security and permissions for your Google Sheet containing organization certification data.</p>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="card card-primary">
                                <div class="card-header">
                                    <h3 class="card-title">Current Configuration</h3>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label>Sheet ID:</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" value="{{ config('google_sheets.organization_certifications.sheet_id', 'Not configured') }}" readonly>
                                            <div class="input-group-append">
                                                <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('{{ config('google_sheets.organization_certifications.sheet_id', '') }}')">
                                                    Copy
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label>Service Account Email:</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" value="{{ $serviceAccountEmail }}" readonly>
                                            <div class="input-group-append">
                                                <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('{{ $serviceAccountEmail }}')">
                                                    Copy
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card card-warning">
                                <div class="card-header">
                                    <h3 class="card-title">Security Checklist</h3>
                                </div>
                                <div class="card-body">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="check1" {{ config('google_sheets.organization_certifications.sheet_id') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="check1">
                                            Sheet ID configured in environment
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="check2" {{ config('google_sheets.organization_certifications.credentials_json') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="check2">
                                            Service account credentials configured
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="check3">
                                        <label class="form-check-label" for="check3">
                                            Sheet shared only with service account
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="check4">
                                        <label class="form-check-label" for="check4">
                                            Link sharing disabled on sheet
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="check5">
                                        <label class="form-check-label" for="check5">
                                            Sheet not indexed by search engines
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
<script>
function copyToClipboard(text) {
    if (!text || text === 'Not configured') {
        toastr.warning('No value to copy');
        return;
    }
    
    navigator.clipboard.writeText(text).then(function() {
        toastr.success('Copied to clipboard');
    }, function() {
        toastr.error('Failed to copy to clipboard');
    });
}

function testConnection() {
    $.post('{{ route("admin.certification.verification.organization.test-connection") }}', {
        _token: '{{ csrf_token() }}'
    })
    .done(function(response) {
        if (response.success) {
            showAlert('success', 'Connection Successful!', 'Connected to Google Sheets: ' + response.sheet_title);
        } else {
            showAlert('danger', 'Connection Failed!', response.error);
        }
    })
    .fail(function(xhr) {
        const response = xhr.responseJSON;
        showAlert('danger', 'Connection Failed!', response?.message || 'Connection test failed.');
    });
}

function syncNow() {
    $.post('{{ route("admin.certification.verification.organization.sync") }}', {
        _token: '{{ csrf_token() }}'
    })
    .done(function(response) {
        if (response.status === 'success') {
            showAlert('success', 'Success!', response.message);
        } else {
            showAlert('danger', 'Error!', response.message);
        }
    })
    .fail(function(xhr) {
        const response = xhr.responseJSON;
        showAlert('danger', 'Error!', response?.message || 'Sync failed.');
    });
}

// Function to show Bootstrap alerts
function showAlert(type, title, message) {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            <strong>${title}</strong> ${message}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    `;
    
    // Remove existing alerts
    $('.alert').remove();
    
    // Add new alert at the top of the content
    $('.content').prepend(alertHtml);
    
    // Auto-hide after 5 seconds
    setTimeout(function() {
        $('.alert').fadeOut();
    }, 5000);
}
</script>
@stop