@extends('layouts.app')

@section('title', 'Yeni Webhook Oluştur')

@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">Yeni Webhook Oluştur</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                Slack, Discord veya custom webhook ekleyin
            </p>
        </div>
    </div>

    <div class="mt-8">
        <form action="{{ route('webhooks.store') }}" method="POST" class="space-y-6">
            @csrf

            <div class="bg-white dark:bg-gray-800 shadow px-4 py-5 sm:rounded-lg sm:p-6">
                <div class="md:grid md:grid-cols-3 md:gap-6">
                    <div class="md:col-span-1">
                        <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Temel Bilgiler</h3>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            Webhook'un temel yapılandırma bilgileri
                        </p>
                    </div>
                    <div class="mt-5 md:col-span-2 md:mt-0">
                        <div class="grid grid-cols-6 gap-6">
                            <div class="col-span-6">
                                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Webhook Adı *</label>
                                <input type="text" name="name" id="name" value="{{ old('name') }}" required
                                    placeholder="Örn: Slack Bildirimleri"
                                    class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                @error('name')
                                <p class="mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1">
                                    <i class="fas fa-exclamation-circle"></i>
                                    {{ $message }}
                                </p>
                                @enderror
                            </div>

                            <div class="col-span-6">
                                <label for="type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Webhook Tipi *</label>
                                <select name="type" id="type" required
                                    class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                    <option value="">Seçiniz...</option>
                                    <option value="slack" {{ old('type') === 'slack' ? 'selected' : '' }}>Slack</option>
                                    <option value="discord" {{ old('type') === 'discord' ? 'selected' : '' }}>Discord</option>
                                    <option value="custom" {{ old('type') === 'custom' ? 'selected' : '' }}>Custom</option>
                                </select>
                                @error('type')
                                <p class="mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1">
                                    <i class="fas fa-exclamation-circle"></i>
                                    {{ $message }}
                                </p>
                                @enderror
                            </div>

                            <div class="col-span-6">
                                <label for="url" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Webhook URL *</label>
                                <input type="url" name="url" id="url" value="{{ old('url') }}" required
                                    placeholder="https://hooks.slack.com/services/..."
                                    class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                @error('url')
                                <p class="mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1">
                                    <i class="fas fa-exclamation-circle"></i>
                                    {{ $message }}
                                </p>
                                @enderror
                                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400 flex items-start gap-1">
                                    <i class="fas fa-info-circle mt-0.5"></i>
                                    <span>
                                        Slack için: <code class="text-xs bg-gray-100 dark:bg-gray-700 px-1 py-0.5 rounded">https://hooks.slack.com/services/...</code><br>
                                        Discord için: <code class="text-xs bg-gray-100 dark:bg-gray-700 px-1 py-0.5 rounded">https://discord.com/api/webhooks/...</code>
                                    </span>
                                </p>
                            </div>

                            <div class="col-span-6">
                                <label for="secret" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Secret (Opsiyonel)</label>
                                <input type="text" name="secret" id="secret" value="{{ old('secret') }}"
                                    placeholder="Güvenlik için secret token"
                                    class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200 font-mono">
                                @error('secret')
                                <p class="mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1">
                                    <i class="fas fa-exclamation-circle"></i>
                                    {{ $message }}
                                </p>
                                @enderror
                                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
                                    <i class="fas fa-info-circle"></i>
                                    Webhook isteklerinde X-Webhook-Secret header'ında gönderilir
                                </p>
                            </div>

                            <div class="col-span-6">
                                <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Açıklama</label>
                                <textarea name="description" id="description" rows="3"
                                    placeholder="Webhook açıklaması..."
                                    class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200 resize-none">{{ old('description') }}</textarea>
                                @error('description')
                                <p class="mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1">
                                    <i class="fas fa-exclamation-circle"></i>
                                    {{ $message }}
                                </p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 shadow px-4 py-5 sm:rounded-lg sm:p-6">
                <div class="md:grid md:grid-cols-3 md:gap-6">
                    <div class="md:col-span-1">
                        <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Event Filtreleme</h3>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            Hangi event'ler için webhook gönderilsin? (Boş = Tüm event'ler)
                        </p>
                    </div>
                    <div class="mt-5 md:col-span-2 md:mt-0">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Event'ler</label>
                                <div class="space-y-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" name="events[]" value="performance.agent.completed" 
                                            {{ in_array('performance.agent.completed', old('events', [])) ? 'checked' : '' }}
                                            class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 dark:text-indigo-500 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-indigo-500 dark:focus:ring-indigo-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Performance Agent Tamamlandı</span>
                                    </label>
                                </div>
                                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                                    Hiçbir event seçilmezse, tüm event'ler için webhook gönderilir.
                                </p>
                                @error('events')
                                <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 shadow px-4 py-5 sm:rounded-lg sm:p-6" id="custom-payload-section" style="display: none;">
                <div class="md:grid md:grid-cols-3 md:gap-6">
                    <div class="md:col-span-1">
                        <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Custom Payload Template</h3>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            Custom webhook için JSON template (opsiyonel)
                        </p>
                    </div>
                    <div class="mt-5 md:col-span-2 md:mt-0">
                        <div>
                            <label for="payload_template" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Template</label>
                            <textarea name="payload_template" id="payload_template" rows="8"
                                placeholder='{"title": "{{title}}", "message": "{{message}}", "status": "{{status}}"}'
                                class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200 font-mono text-xs resize-none">{{ old('payload_template') }}</textarea>
                            <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
                                <i class="fas fa-info-circle"></i>
                                Placeholder'lar: <code class="bg-gray-100 dark:bg-gray-700 px-1 py-0.5 rounded">{{title}}</code>, <code class="bg-gray-100 dark:bg-gray-700 px-1 py-0.5 rounded">{{message}}</code>, <code class="bg-gray-100 dark:bg-gray-700 px-1 py-0.5 rounded">{{status}}</code>, vb.
                            </p>
                            @error('payload_template')
                            <p class="mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 shadow px-4 py-5 sm:rounded-lg sm:p-6">
                <label class="inline-flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                    <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                        class="h-5 w-5 text-indigo-600 dark:text-indigo-400 border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-0 cursor-pointer transition-all duration-200">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center gap-2">
                        <i class="fas fa-toggle-on text-green-600 dark:text-green-400"></i>
                        Webhook'u aktif et
                    </span>
                </label>
            </div>

            <div class="flex justify-end gap-3">
                <a href="{{ route('webhooks.index') }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200">
                    <i class="fas fa-times"></i>
                    İptal
                </a>
                <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 dark:bg-indigo-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition-all duration-200">
                    <i class="fas fa-plus"></i>
                    Webhook Oluştur
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const typeSelect = document.getElementById('type');
    const customPayloadSection = document.getElementById('custom-payload-section');

    function toggleCustomPayload() {
        if (typeSelect.value === 'custom') {
            customPayloadSection.style.display = 'block';
        } else {
            customPayloadSection.style.display = 'none';
        }
    }

    typeSelect.addEventListener('change', toggleCustomPayload);
    toggleCustomPayload(); // İlk yüklemede kontrol et
});
</script>
@endpush
@endsection