@extends('layouts.app')

@section('title', 'تفاصيل Webhook')

@push('styles')
<style>
.whs-wrapper {
    direction: rtl;
    font-family: 'Tajawal', 'Cairo', Tahoma, Arial, sans-serif;
    color: #1B2A4A;
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

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

.whs-header h1 {
    font-size: 24px;
    font-weight: 800;
    color: #1B2A4A;
    margin: 0;
}

.whs-back-btn {
    background: #fff;
    color: #1B2A4A;
    border: 1px solid #e5e7ee;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
}

.whs-back-btn:hover {
    border-color: #E8502F;
    color: #E8502F;
}

.whs-card {
    background: #fff;
    border: 1px solid #e5e7ee;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(27, 42, 74, 0.05);
    margin-bottom: 20px;
}

.whs-card h2 {
    font-size: 16px;
    font-weight: 700;
    color: #1B2A4A;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7ee;
}

.whs-info-row {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
    gap: 16px;
}

.whs-info-row:last-child {
    border-bottom: none;
}

.whs-info-label {
    flex-shrink: 0;
    width: 140px;
    font-weight: 700;
    font-size: 13px;
    color: #6b7280;
    padding-top: 2px;
}

.whs-info-value {
    flex: 1;
    font-size: 14px;
    color: #1B2A4A;
    word-break: break-all;
}

.whs-url-value {
    font-family: 'Courier New', monospace;
    direction: ltr;
    text-align: left;
    background: #f6f7fb;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.whs-secret-value {
    font-family: 'Courier New', monospace;
    direction: ltr;
    text-align: left;
    background: #f6f7fb;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    position: relative;
}

.whs-secret-hidden {
    filter: blur(4px);
    user-select: none;
    transition: filter 0.2s;
}

.whs-secret-toggle {
    background: none;
    border: none;
    color: #E8502F;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 8px;
    padding: 0;
}

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

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

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

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

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

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

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

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

.whs-event-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f0f1f5;
    color: #1B2A4A;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 6px 6px;
}

.whs-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.whs-action-btn {
    border: 1px solid #e5e7ee;
    background: #fff;
    color: #1B2A4A;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.whs-action-btn:hover {
    border-color: #E8502F;
    color: #E8502F;
}

.whs-action-btn.whs-danger:hover {
    border-color: #d1332a;
    color: #d1332a;
    background: #fdeceb;
}

.whs-action-btn.whs-primary {
    background: #E8502F;
    color: #fff;
    border-color: #E8502F;
}

.whs-action-btn.whs-primary:hover {
    background: #d1431f;
}

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

@section('content')
<div class="whs-wrapper">
    <div class="whs-header">
        <h1><i class="fas fa-link" style="color:#E8502F;margin-left:8px"></i> تفاصيل Webhook</h1>
        <a href="/webhooks" class="whs-back-btn">
            <i class="fas fa-arrow-right"></i> العودة للقائمة
        </a>
    </div>

    @if(session('success'))
        <div style="background:#e9f9ee;color:#1a7f3c;border:1px solid #b9ecc9;padding:14px 18px;border-radius:10px;margin-bottom:18px;font-size:14px;font-weight:600">
            <i class="fas fa-check-circle" style="margin-left:6px"></i> {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div style="background:#fdeceb;color:#b3271b;border:1px solid #f5c6c1;padding:14px 18px;border-radius:10px;margin-bottom:18px;font-size:14px;font-weight:600">
            <i class="fas fa-exclamation-circle" style="margin-left:6px"></i> {{ session('error') }}
        </div>
    @endif

    <div class="whs-card">
        <h2><i class="fas fa-info-circle" style="margin-left:6px;color:#E8502F"></i> المعلومات الأساسية</h2>

        <div class="whs-info-row">
            <div class="whs-info-label">الاسم</div>
            <div class="whs-info-value" style="font-weight:700">{{ $webhook->name }}</div>
        </div>

        <div class="whs-info-row">
            <div class="whs-info-label">الرابط (URL)</div>
            <div class="whs-info-value">
                <div class="whs-url-value">{{ $webhook->url }}</div>
            </div>
        </div>

        <div class="whs-info-row">
            <div class="whs-info-label">الحالة</div>
            <div class="whs-info-value">
                @if($webhook->is_active)
                    <span class="whs-badge whs-badge-on">مفعّل</span>
                @else
                    <span class="whs-badge whs-badge-off">معطّل</span>
                @endif
            </div>
        </div>

        <div class="whs-info-row">
            <div class="whs-info-label">آخر حالة إرسال</div>
            <div class="whs-info-value">
                @if(($webhook->last_status ?? '') === 'success')
                    <span class="whs-status-pill whs-status-success"><i class="fas fa-check" style="margin-left:4px"></i> نجح</span>
                @elseif(($webhook->last_status ?? '') === 'failed')
                    <span class="whs-status-pill whs-status-failed"><i class="fas fa-times" style="margin-left:4px"></i> فشل</span>
                @else
                    <span class="whs-status-pill whs-status-none">لم يتم الإرسال بعد</span>
                @endif
            </div>
        </div>

        <div class="whs-info-row">
            <div class="whs-info-label">آخر إرسال</div>
            <div class="whs-info-value">
                @if($webhook->last_triggered_at)
                    {{ \Carbon\Carbon::parse($webhook->last_triggered_at)->format('Y-m-d H:i') }}
                @else
                    <span style="color:#6b7280">-</span>
                @endif
            </div>
        </div>

        <div class="whs-info-row">
            <div class="whs-info-label">تاريخ الإنشاء</div>
            <div class="whs-info-value">
                @if($webhook->created_at)
                    {{ \Carbon\Carbon::parse($webhook->created_at)->format('Y-m-d H:i') }}
                @else
                    <span style="color:#6b7280">-</span>
                @endif
            </div>
        </div>
    </div>

    <div class="whs-card">
        <h2><i class="fas fa-key" style="margin-left:6px;color:#E8502F"></i> مفتاح التوقيع (Secret Key)</h2>
        <p style="font-size:13px;color:#6b7280;margin:0 0 12px">يُستخدم للتحقق من صحة الطلبات المُرسلة. أضفه في الطرف المستقبل للتحقق من التوقيع.</p>
        <div class="whs-secret-value">
            <span id="whsSecretText" class="whs-secret-hidden">{{ $webhook->secret_key ?? 'غير متوفر' }}</span>
            <button type="button" class="whs-secret-toggle" onclick="whsToggleSecret()">
                <i class="fas fa-eye" id="whsSecretIcon"></i> إظهار
            </button>
        </div>
    </div>

    <div class="whs-card">
        <h2><i class="fas fa-bell" style="margin-left:6px;color:#E8502F"></i> الأحداث المُشترك بها</h2>
        @php
            $events = json_decode($webhook->events ?? '[]', true);
            if (!is_array($events)) $events = [];

            $eventLabels = [
                'employee.created' => 'إضافة موظف',
                'employee.updated' => 'تعديل موظف',
                'employee.deleted' => 'حذف موظف',
                'attendance.checkin' => 'تسجيل حضور',
                'attendance.checkout' => 'تسجيل انصراف',
                'leave.requested' => 'طلب إجازة',
                'leave.approved' => 'قبول إجازة',
                'leave.rejected' => 'رفض إجازة',
                'payroll.generated' => 'إنشاء رواتب',
                'document.uploaded' => 'رفع مستند',
                'contract.expiring' => 'انتهاء عقد',
                'evaluation.completed' => 'تقييم أداء',
            ];
        @endphp

        @if(count($events) > 0)
            <div style="display:flex;flex-wrap:wrap;gap:6px">
                @foreach($events as $event)
                    <span class="whs-event-tag">
                        <i class="fas fa-bell" style="font-size:10px;color:#E8502F"></i>
                        {{ $eventLabels[$event] ?? $event }}
                    </span>
                @endforeach
            </div>
        @else
            <p style="color:#6b7280;font-size:14px;margin:0">لا توجد أحداث مُحددة</p>
        @endif
    </div>

    <div class="whs-card">
        <h2><i class="fas fa-cogs" style="margin-left:6px;color:#E8502F"></i> الإجراءات</h2>
        <div class="whs-actions">
            <form action="/webhooks/{{ $webhook->id }}/test" method="POST" class="whs-inline-form">
                @csrf
                <button type="submit" class="whs-action-btn whs-primary">
                    <i class="fas fa-paper-plane"></i> إرسال اختبار
                </button>
            </form>

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

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

@push('scripts')
<script>
function whsToggleSecret() {
    var el = document.getElementById('whsSecretText');
    var icon = document.getElementById('whsSecretIcon');
    var btn = icon.parentElement;
    if (el.classList.contains('whs-secret-hidden')) {
        el.classList.remove('whs-secret-hidden');
        icon.className = 'fas fa-eye-slash';
        btn.innerHTML = '<i class="fas fa-eye-slash" id="whsSecretIcon"></i> إخفاء';
    } else {
        el.classList.add('whs-secret-hidden');
        icon.className = 'fas fa-eye';
        btn.innerHTML = '<i class="fas fa-eye" id="whsSecretIcon"></i> إظهار';
    }
}
</script>
@endpush