@extends('layouts.app')

@section('title', 'Webhook Yönetimi')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Webhook Yönetimi</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                Slack, Discord ve custom webhook'ları yönetin
            </p>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
            <a href="{{ route('webhooks.create') }}" class="block rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-600">
                <i class="fas fa-plus mr-2"></i>
                Yeni Webhook Ekle
            </a>
        </div>
    </div>

    @if(session('success'))
    <div class="mt-4 rounded-md bg-green-50 dark:bg-green-900/30 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-check-circle text-green-400 dark:text-green-500"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm font-medium text-green-800">{{ session('success') }}</p>
            </div>
        </div>
    </div>
    @endif

    @if(session('error'))
    <div class="mt-4 rounded-md bg-red-50 dark:bg-red-900/30 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-circle text-red-400"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm font-medium text-red-800 dark:text-red-300">{{ session('error') }}</p>
            </div>
        </div>
    </div>
    @endif

    <div class="mt-8 flow-root">
        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                <div class="overflow-hidden shadow ring-1 ring-black dark:ring-gray-700 ring-opacity-5 md:rounded-lg">
                    <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-800">
                            <tr>
                                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 sm:pl-6">Ad</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Tip</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">URL</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Event'ler</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Durum</th>
                                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                                    <span class="sr-only">İşlemler</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800">
                            @forelse($webhooks as $webhook)
                            <tr>
                                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                                    {{ $webhook->name }}
                                    @if($webhook->description)
                                    <p class="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500 mt-1">{{ Str::limit($webhook->description, 50) }}</p>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500">
                                    <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
                                        {{ $webhook->type === 'slack' ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300' : ($webhook->type === 'discord' ? 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300') }}">
                                        @if($webhook->type === 'slack')
                                        <i class="fab fa-slack mr-1"></i>
                                        @elseif($webhook->type === 'discord')
                                        <i class="fab fa-discord mr-1"></i>
                                        @else
                                        <i class="fas fa-code mr-1"></i>
                                        @endif
                                        {{ strtoupper($webhook->type) }}
                                    </span>
                                </td>
                                <td class="px-3 py-4 text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500">
                                    <code class="text-xs">{{ Str::limit($webhook->url, 40) }}</code>
                                </td>
                                <td class="px-3 py-4 text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500">
                                    @if(empty($webhook->events))
                                    <span class="text-xs text-gray-400 dark:text-gray-500">Tüm Event'ler</span>
                                    @else
                                    <div class="flex flex-wrap gap-1">
                                        @foreach($webhook->events as $event)
                                        <span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">
                                            {{ $event }}
                                        </span>
                                        @endforeach
                                    </div>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500">
                                    @if($webhook->is_active)
                                    <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
                                        <i class="fas fa-check-circle mr-1"></i>
                                        Aktif
                                    </span>
                                    @else
                                    <span class="inline-flex items-center rounded-full bg-gray-100 dark:bg-gray-700 px-2.5 py-0.5 text-xs font-medium text-gray-800 dark:text-gray-300">
                                        <i class="fas fa-times-circle mr-1"></i>
                                        Pasif
                                    </span>
                                    @endif
                                </td>
                                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                                    <div class="flex items-center justify-end gap-2">
                                        <a href="{{ route('webhooks.show', $webhook) }}" class="text-indigo-600 hover:text-indigo-900">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('webhooks.edit', $webhook) }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form action="{{ route('webhooks.test', $webhook) }}" method="POST" class="inline">
                                            @csrf
                                            <button type="submit" class="text-emerald-600 dark:text-emerald-400 hover:text-emerald-900 dark:hover:text-emerald-300" title="Test Et">
                                                <i class="fas fa-paper-plane"></i>
                                            </button>
                                        </form>
                                        <form action="{{ route('webhooks.destroy', $webhook) }}" method="POST" class="inline" onsubmit="return confirm('Bu webhook\'u silmek istediğinizden emin misiniz?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="px-3 py-4 text-center text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500">
                                    Henüz webhook bulunmamaktadır.
                                    <a href="{{ route('webhooks.create') }}" class="text-indigo-600 hover:text-indigo-900 ml-1">İlk webhook'u oluşturun</a>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @if($webhooks->hasPages())
    <div class="mt-4">
        {{ $webhooks->links() }}
    </div>
    @endif
</div>
@endsection