@extends('layouts.app')

@section('title', 'نتيجة التحقق - DOTS HR Pro')

@push('styles')
<style>
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 24px;
    }
    .page-header h1 {
        font-size: 24px;
        font-weight: 700;
        color: #1B2A4A;
        margin: 0;
    }
    .btn-back {
        background: #fff;
        color: #1B2A4A;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        transition: all .2s;
    }
    .btn-back:hover { background: #f8fafc; color: #1B2A4A; border-color: #cbd5e1; }
    .card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 24px;
    }
    .verify-result {
        text-align: center;
        padding: 40px 20px;
    }
    .verify-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        margin: 0 auto 20px;
    }
    .verify-icon.signed {
        background: rgba(16, 185, 129, .12);
        color: #059669;
    }
    .verify-icon.pending {
        background: rgba(245, 158, 11, .12);
        color: #d97706;
    }
    .verify-icon.declined {
        background: rgba(239, 68, 68, .12);
        color: #dc2626;
    }
    .verify-icon.expired {
        background: rgba(100, 116, 139, .12);
        color: #475569;
    }
    .verify-title {
        font-size: 20px;
        font-weight: 700;
        color: #1B2A4A;
        margin-bottom: 8px;
    }
    .verify-subtitle {
        font-size: 14px;
        color: #64748b;
        margin-bottom: 24px;
    }
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 14px;
        text-align: right;
        max-width: 600px;
        margin: 0 auto;
    }
    .info-item {
        padding: 12px;
        background: #f8fafc;
        border-radius: 8px;
    }
    .info-item label {
        font-size: 12px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        display: block;
        margin-bottom: 4px;
    }
    .info-item span {
        font-size: 15px;
        font-weight: 600;
        color: #1B2A4A;
    }
    .badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
    }
    .badge-success { background: rgba(16, 185, 129, .12); color: #059669; }
    .badge-warning { background: rgba(245, 158, 11, .12); color: #d97706; }
    .badge-danger { background: rgba(239, 68, 68, .12); color: #dc2626; }
    .badge-secondary { background: rgba(100, 116, 139, .12); color: #475569; }
</style>
@endpush

@section('content')
@php $sig = $sig ?? null; @endphp

<div class="page-header">
    <h1><i class="fa-solid fa-shield-check" style="color:#E8502F;margin-left:8px;"></i> نتيجة التحقق من التوقيع</h1>
    <a href="{{ route('e-signatures.index') }}" class="btn-back"><i class="fa-solid fa-arrow-right"></i> رجوع</a>
</div>

@if($sig)
@php
    $statusLabels = ['signed'=>'تم التوقيع','pending'=>'في الانتظار','declined'=>'مرفوض','expired'=>'منتهي الصلاحية'];
    $statusIcons = ['signed'=>'fa-circle-check','pending'=>'fa-hourglass-half','declined'=>'fa-circle-xmark','expired'=>'fa-clock'];
    $statusMessages = [
        'signed'=>'تم التحقق من صحة التوقيع الإلكتروني بنجاح',
        'pending'=>'هذا الطلب في انتظار التوقيع',
        'declined'=>'تم رفض طلب التوقيع',
        'expired'=>'انتهت صلاحية طلب التوقيع',
    ];
@endphp

<div class="card">
    <div class="verify-result">
        <div class="verify-icon {{ $sig->status }}">
            <i class="fa-solid {{ $statusIcons[$sig->status] ?? 'fa-question' }}"></i>
        </div>
        <div class="verify-title">{{ $statusLabels[$sig->status] ?? $sig->status }}</div>
        <div class="verify-subtitle">{{ $statusMessages[$sig->status] ?? '' }}</div>

        <div class="info-grid">
            <div class="info-item">
                <label>نوع المستند</label>
                <span>{{ $sig->document_type ?? '-' }}</span>
            </div>
            <div class="info-item">
                <label>رقم المستند</label>
                <span>{{ $sig->document_id ?? '-' }}</span>
            </div>
            <div class="info-item">
                <label>كود التحقق</label>
                <span style="font-family:monospace;letter-spacing:1px;">{{ $sig->verification_code ?? '-' }}</span>
            </div>
            <div class="info-item">
                <label>الحالة</label>
                @php
                    $badgeMap = ['signed'=>'badge-success','pending'=>'badge-warning','declined'=>'badge-danger','expired'=>'badge-secondary'];
                @endphp
                <span class="badge {{ $badgeMap[$sig->status] ?? 'badge-secondary' }}">{{ $statusLabels[$sig->status] ?? $sig->status }}</span>
            </div>
            @if($sig->signed_at ?? null)
            <div class="info-item">
                <label>تاريخ التوقيع</label>
                <span>{{ $sig->signed_at }}</span>
            </div>
            @endif
            @if($sig->ip_address ?? null)
            <div class="info-item">
                <label>عنوان IP</label>
                <span style="font-family:monospace;">{{ $sig->ip_address }}</span>
            </div>
            @endif
            @if($sig->expires_at ?? null)
            <div class="info-item">
                <label>تاريخ الانتهاء</label>
                <span>{{ $sig->expires_at }}</span>
            </div>
            @endif
        </div>
    </div>
</div>
@else
<div class="card">
    <div style="text-align:center;padding:40px;color:#94a3b8;">
        <i class="fa-solid fa-shield-xmark" style="font-size:36px;margin-bottom:12px;color:#cbd5e1;"></i>
        <p>لم يتم العثور على توقيع بهذا الكود</p>
    </div>
</div>
@endif
@endsection