@extends('layouts.app')

@section('title', 'ربط الأنظمة (Webhooks)')

@push('styles')
<style>
:root {
    --wh-navy: #1B2A4A;
    --wh-accent: #E8502F;
    --wh-gray-bg: #f6f7fb;
    --wh-border: #e5e7ee;
    --wh-muted: #6b7280;
}

.wh-wrapper {
    direction: rtl;
    font-family: 'Tajawal', 'Cairo', Tahoma, Arial, sans-serif;
    color: var(--wh-navy);
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.wh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.wh-header h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--wh-navy);
    margin: 0;
}

.wh-header p {
    margin: 4px 0 0;
    color: var(--wh-muted);
    font-size: 14px;
}

.wh-btn-add {
    background: var(--wh-accent);
    color: #fff;
    border: none;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(232, 80, 47, 0.25);
    transition: background 0.15s ease, transform 0.15s ease;
}

.wh-btn-add:hover {
    background: #d1431f;
    transform: translateY(-1px);
    color: #fff;
}

.wh-alert {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 600;
}

.wh-alert-success {
    background: #e9f9ee;
    color: #1a7f3c;
    border: 1px solid #b9ecc9;
}

.wh-alert-error {
    background: #fdeceb;
    color: #b3271b;
    border: 1px solid #f5c6c1;
}

.wh-card {
    background: #fff;
    border: 1px solid var(--wh-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(27, 42, 74, 0.05);
}

table.wh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table.wh-table thead th {
    background: var(--wh-gray-bg);
    color: var(--wh-navy);
    font-weight: 700;
    text-align: right;
    padding: 14px 16px;
    border-bottom: 1px solid var(--wh-border);
    white-space: nowrap;
}

table.wh-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--wh-border);
    vertical-align: middle;
}

table.wh-table tbody tr:last-child td {
    border-bottom: none;
}

table.wh-table tbody tr:hover {
    background: #fafbfd;
}

.wh-url-cell {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--wh-navy);
    direction: ltr;
    text-align: left;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.wh-name-cell {
    font-weight: 700;
    color: var(--wh-navy);
    font-size: 14px;
}

.wh-events-count {
    background: var(--wh-gray-bg);
    color: var(--wh-navy);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
}

.wh-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.wh-badge-on {
    background: #e9f9ee;
    color: #1a7f3c;
}

.wh-badge-off {
    background: #f1f2f6;
    color: #6b7280;
}

.wh-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.wh-status-pill {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.wh-status-success {
    background: #e9f9ee;
    color: #1a7f3c;
}

.wh-status-failed {
    background: #fdeceb;
    color: #b3271b;
}

.wh-status-none {
    background: #f1f2f6;
    color: #6b7280;
}

.wh-actions-cell {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.wh-icon-btn {
    border: 1px solid var(--wh-border);
    background: #fff;
    color: var(--wh-navy);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.wh-icon-btn:hover {
    border-color: var(--wh-accent);
    color: var(--wh-accent);
}

.wh-icon-btn.wh-danger:hover {
    border-color: #d1332a;
    color: #d1332a;
    background: #fdeceb;
}

.wh-empty-state {
    text-align: center;
    padding: 70px 20px;
}

.wh-empty-state .wh-emoji {
    font-size: 48px;
    margin-bottom: 16px;
}

.wh-empty-state h3 {
    color: var(--wh-navy);
    font-size: 18px;
    margin: 0 0 8px;
}

.wh-empty-state p {
    color: var(--wh-muted);
    font-size: 14px;
    margin: 0 0 20px;
}

.wh-inline-form {
    display: inline;
}
</style>
@endpush

@section('content')
<div class="wh-wrapper">
    <div class="wh-header">
        <div>
            <h1><i class="fas fa-link" style="color:#E8502F;margin-left:8px"></i> ربط الأنظمة (Webhooks)</h1>
            <p>إدارة نقاط الربط لإرسال إشعارات الأحداث إلى الأنظمة الخارجية</p>
        </div>
        <a href="/webhooks/create" class="wh-btn-add">
            <i class="fas fa-plus"></i> إضافة Webhook
        </a>
    </div>

    @if(session('success'))
        <div class="wh-alert wh-alert-success"><i class="fas fa-check-circle" style="margin-left:6px"></i> {{ session('success') }}</div>
    @endif

    @if(session('error'))
        <div class="wh-alert wh-alert-error"><i class="fas fa-exclamation-circle" style="margin-left:6px"></i> {{ session('error') }}</div>
    @endif

    <div class="wh-card">
        @if($webhooks->isEmpty())
            <div class="wh-empty-state">
                <div class="wh-emoji">🔗</div>
                <h3>لا توجد Webhooks بعد</h3>
                <p>ابدأ بإضافة أول نقطة ربط لتلقي إشعارات الأحداث تلقائيًا</p>
                <a href="/webhooks/create" class="wh-btn-add"><i class="fas fa-plus"></i> إضافة Webhook</a>
            </div>
        @else
            <div style="overflow-x:auto;">
                <table class="wh-table">
                    <thead>
                        <tr>
                            <th>الاسم</th>
                            <th>الرابط (URL)</th>
                            <th>عدد الأحداث</th>
                            <th>الحالة</th>
                            <th>آخر إرسال</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($webhooks as $webhook)
                            @php
                                $events = json_decode($webhook->events ?? '[]', true);
                                if (!is_array($events)) $events = [];
                            @endphp
                            <tr>
                                <td>
                                    <span class="wh-name-cell">{{ $webhook->name }}</span>
                                </td>
                                <td>
                                    <span class="wh-url-cell" title="{{ $webhook->url }}">{{ $webhook->url }}</span>
                                </td>
                                <td>
                                    <span class="wh-events-count">{{ count($events) }} حدث</span>
                                </td>
                                <td>
                                    @if($webhook->is_active)
                                        <span class="wh-badge wh-badge-on">مفعّل</span>
                                    @else
                                        <span class="wh-badge wh-badge-off">معطّل</span>
                                    @endif
                                </td>
                                <td>
                                    @if(($webhook->last_status ?? '') === 'success')
                                        <span class="wh-status-pill wh-status-success">نجح</span>
                                    @elseif(($webhook->last_status ?? '') === 'failed')
                                        <span class="wh-status-pill wh-status-failed">فشل</span>
                                    @else
                                        <span class="wh-status-pill wh-status-none">لا يوجد</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="wh-actions-cell">
                                        <a href="/webhooks/{{ $webhook->id }}" class="wh-icon-btn" title="عرض التفاصيل">
                                            <i class="fas fa-eye"></i> عرض
                                        </a>

                                        <form action="/webhooks/{{ $webhook->id }}/toggle" method="POST" class="wh-inline-form">
                                            @csrf
                                            <button type="submit" class="wh-icon-btn" title="{{ $webhook->is_active ? 'تعطيل' : 'تفعيل' }}">
                                                <i class="fas {{ $webhook->is_active ? 'fa-toggle-on' : 'fa-toggle-off' }}"></i>
                                                {{ $webhook->is_active ? 'تعطيل' : 'تفعيل' }}
                                            </button>
                                        </form>

                                        <form action="/webhooks/{{ $webhook->id }}/test" method="POST" class="wh-inline-form">
                                            @csrf
                                            <button type="submit" class="wh-icon-btn" title="اختبار">
                                                <i class="fas fa-paper-plane"></i> اختبار
                                            </button>
                                        </form>

                                        <form action="/webhooks/{{ $webhook->id }}" method="POST" class="wh-inline-form"
                                              onsubmit="return confirm('هل أنت متأكد من حذف هذا الـ Webhook؟');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="wh-icon-btn wh-danger" title="حذف">
                                                <i class="fas fa-trash-alt"></i> حذف
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>
@endsection