@extends('layouts.app')

@section('title', 'Webhook Düzenle')

@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 Düzenle</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                {{ $webhook->name }}
            </p>
        </div>
    </div>

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

            <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', $webhook->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="slack" {{ old('type', $webhook->type) === 'slack' ? 'selected' : '' }}>Slack</option>
                                    <option value="discord" {{ old('type', $webhook->type) === 'discord' ? 'selected' : '' }}>Discord</option>
                                    <option value="custom" {{ old('type', $webhook->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', $webhook->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
                            </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', $webhook->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
                            </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', $webhook->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?
                        </p>
                    </div>
                    <div class="mt-5 md:col-span-2 md:mt-0">
                        <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', $webhook->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>
                        @error('events')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </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: {{ old('type', $webhook->type) === 'custom' ? 'block' : '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
                        </p>
                    </div>
                    <div class="mt-5 md:col-span-2 md:mt-0">
                        <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', $webhook->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 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', $webhook->is_active) ? '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-save"></i>
                    Güncelle
                </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);
});
</script>
@endpush
@endsection