@extends('layouts.app')

@section('title', 'Project List')

@section('content')
    <h1>Project List</h1>
    
    <ul>
        @foreach($projects as $project)
            <li>
                <a href="{{ route('editor.show', ['project' => $project]) }}">
                    {{ $project }}
                </a>
            </li>
        @endforeach
    </ul>

    <h2>Create New Project</h2>
    <form method="POST" action="{{ route('projects.store') }}">
        <input type="text" name="name" placeholder="Enter project name">
        <button type="submit">Create Project</button>
    </form>

    <button onclick="addApiKey()">Add Claude AI API Key</button>
@endsection

@push('scripts')
<script>
function addApiKey() {
    var apiKey = prompt("Please enter your Claude AI API Key:");
    if (apiKey != null && apiKey != "") {
        $.ajax({
            url: '{{ route("api-key.store") }}',
            type: 'POST',
            data: JSON.stringify({ apiKey: apiKey }),
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            success: function(response) {
                alert('API Key saved successfully!');
            },
            error: function(xhr, status, error) {
                alert('Error saving API Key: ' + error);
            }
        });
    }
}
</script>
@endpush