@extends('layouts.app')

@section('title', 'SSH Private Key Yükle')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div>
        <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100 mb-6">SSH Private Key Yükle</h1>

        <div class="bg-white dark:bg-gray-800 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700/50 border border-gray-200 dark:border-gray-700 sm:rounded-xl">
            <div class="px-4 py-6 sm:p-8">
                @if(session('success'))
                <div class="mb-6 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-check-circle text-green-400 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-green-800 dark:text-green-200">
                                {{ session('success') }}
                            </p>
                        </div>
                    </div>
                </div>
                @endif

                @if($errors->any())
                <div class="mb-6 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-circle text-red-400 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-red-800 dark:text-red-200 mb-2">
                                Hata oluştu
                            </h3>
                            <ul class="list-disc list-inside text-sm text-red-700 dark:text-red-300">
                                @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                @endif

                <form action="{{ route('ssh.upload') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="space-y-6">
                        <div>
                            <label for="private_key" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                Private Key Dosyası <span class="text-red-500">*</span>
                            </label>
                            <input type="file" 
                                   name="private_key" 
                                   id="private_key" 
                                   accept=".pem,.key" 
                                   required
                                   class="block w-full text-sm text-gray-900 dark:text-gray-100
                                          file:mr-4 file:py-2 file:px-4
                                          file:rounded-lg file:border-0
                                          file:text-sm file:font-semibold
                                          file:bg-blue-50 dark:file:bg-blue-900/20
                                          file:text-blue-700 dark:file:text-blue-300
                                          hover:file:bg-blue-100 dark:hover:file:bg-blue-900/30
                                          file:cursor-pointer
                                          border border-gray-300 dark:border-gray-600
                                          rounded-lg bg-white dark:bg-gray-700
                                          focus:border-blue-500 dark:focus:border-blue-400
                                          focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400
                                          focus:ring-opacity-20 transition-all duration-200">
                            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                                <i class="fas fa-info-circle mr-1"></i>
                                Sadece .pem veya .key uzantılı dosyalar kabul edilir. Private key dosyanızı seçin.
                            </p>
                            @error('private_key')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="flex items-center justify-end gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                            <a href="{{ route('ssh-keys.index') }}" 
                               class="inline-flex items-center gap-2 rounded-md bg-gray-200 dark:bg-gray-700 px-4 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 transition">
                                <i class="fas fa-times"></i>
                                İptal
                            </a>
                            <button type="submit" 
                                    class="inline-flex items-center gap-2 rounded-md bg-blue-600 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-500 px-4 py-2 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 transition-all duration-200">
                                <i class="fas fa-upload"></i>
                                Yükle
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection