@extends('layouts.app')
@section('title', 'طلب اعتماد #' . $approvalRequest->id . ' - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">طلب اعتماد #{{ $approvalRequest->id }}</h1>
        <p class="page-subtitle">{{ $approvalRequest->workflow->name ?? '' }} — {{ $approvalRequest->workflow->type_label ?? '' }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('approvals.requests') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

{{-- Request Info Card --}}
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem">
    <div class="card">
        <div class="card-header"><h3><i class="fas fa-info-circle"></i> بيانات الطلب</h3></div>
        <div class="card-body">
            <div class="detail-grid">
                <div class="detail-item"><label>رقم الطلب</label><span><code class="code-badge">{{ $approvalRequest->id }}</code></span></div>
                <div class="detail-item"><label>النوع</label><span>{{ $approvalRequest->workflow->type_label ?? '—' }}</span></div>
                <div class="detail-item"><label>مقدم الطلب</label><span>{{ $approvalRequest->requester->name ?? '—' }}</span></div>
                <div class="detail-item">
                    <label>الحالة</label>
                    <span>
                        @php
                            $statusClass = match($approvalRequest->status) {
                                'pending' => 'status-pending',
                                'in_progress' => 'status-pending',
                                'approved' => 'status-active',
                                'rejected' => 'status-expired',
                                'cancelled' => 'status-draft',
                                default => '',
                            };
                        @endphp
                        <span class="status-badge {{ $statusClass }}">{{ $approvalRequest->status_label }}</span>
                    </span>
                </div>
                <div class="detail-item"><label>تاريخ الإنشاء</label><span>{{ $approvalRequest->created_at->format('Y/m/d H:i') }}</span></div>
                <div class="detail-item"><label>تاريخ الانتهاء</label><span>{{ $approvalRequest->completed_at?->format('Y/m/d H:i') ?? '—' }}</span></div>
            </div>
            @if($approvalRequest->notes)
            <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border)">
                <label style="font-weight: 600; font-size: 0.85rem; color: var(--text-secondary)">ملاحظات</label>
                <p style="margin-top: 0.25rem">{{ $approvalRequest->notes }}</p>
            </div>
            @endif
        </div>
    </div>

    {{-- Linked Item Details --}}
    <div class="card">
        <div class="card-header"><h3><i class="fas fa-link"></i> العنصر المرتبط</h3></div>
        <div class="card-body">
            @if($approvalRequest->requestable)
                <div class="detail-grid">
                    <div class="detail-item"><label>النوع</label><span>{{ class_basename($approvalRequest->requestable_type) }}</span></div>
                    <div class="detail-item"><label>المعرّف</label><span>#{{ $approvalRequest->requestable_id }}</span></div>
                    @if(method_exists($approvalRequest->requestable, 'employee'))
                        <div class="detail-item"><label>الموظف</label><span>{{ $approvalRequest->requestable->employee->full_name ?? '—' }}</span></div>
                    @endif
                </div>
            @else
                <div class="empty-state-sm" style="padding: 2rem; text-align: center; color: var(--text-muted)">
                    <i class="fas fa-unlink" style="font-size: 1.5rem; margin-bottom: 0.5rem; display: block"></i>
                    لا يوجد عنصر مرتبط
                </div>
            @endif
        </div>
    </div>
</div>

{{-- Approval Timeline / Stepper --}}
<div class="card" style="margin-bottom: 1.5rem">
    <div class="card-header"><h3><i class="fas fa-tasks"></i> مسار الاعتماد</h3></div>
    <div class="card-body">
        <div class="approval-timeline">
            @foreach($approvalRequest->workflow->steps as $step)
                @php
                    $action = $approvalRequest->actions->where('step_order', $step->step_order)->first();
                    $isCurrent = $step->step_order == $approvalRequest->current_step && !$approvalRequest->isComplete();
                    $isPast = $action !== null;
                    $isFuture = !$isPast && !$isCurrent;

                    if ($isPast) {
                        $stepStatus = $action->action;
                        $stepIcon = match($action->action) {
                            'approved' => 'fa-check-circle',
                            'rejected' => 'fa-times-circle',
                            'returned' => 'fa-undo',
                            'skipped'  => 'fa-forward',
                            default    => 'fa-circle',
                        };
                        $stepColor = match($action->action) {
                            'approved' => 'var(--success)',
                            'rejected' => 'var(--danger)',
                            'returned' => 'var(--warning)',
                            default    => 'var(--text-muted)',
                        };
                    } elseif ($isCurrent) {
                        $stepIcon = 'fa-spinner fa-pulse';
                        $stepColor = 'var(--primary)';
                    } else {
                        $stepIcon = 'fa-circle';
                        $stepColor = 'var(--border)';
                    }

                    $approver = $step->getApprover($approvalRequest->requestable);
                @endphp
                <div class="timeline-step {{ $isCurrent ? 'current' : '' }} {{ $isPast ? 'completed' : '' }}">
                    <div class="timeline-connector">
                        <div class="timeline-dot" style="background: {{ $stepColor }}; color: #fff">
                            <i class="fas {{ $stepIcon }}"></i>
                        </div>
                        @if(!$loop->last)
                            <div class="timeline-line" style="background: {{ $isPast ? $stepColor : 'var(--border)' }}"></div>
                        @endif
                    </div>
                    <div class="timeline-content">
                        <div class="timeline-title">
                            <strong>الخطوة {{ $step->step_order }}: {{ $step->approver_type_label }}</strong>
                            @if($isCurrent)
                                <span class="status-badge status-pending" style="font-size: 0.75rem">قيد الانتظار</span>
                            @endif
                        </div>
                        <div class="timeline-meta">
                            <span><i class="fas fa-user"></i> {{ $approver ? $approver->name : ($step->approver_role ?? 'سيتم تحديده') }}</span>
                            @if($step->is_required)
                                <span style="color: var(--danger)"><i class="fas fa-asterisk"></i> إلزامي</span>
                            @endif
                        </div>
                        @if($action)
                            <div class="timeline-action-info">
                                <span>
                                    <i class="fas fa-calendar-check"></i>
                                    {{ $action->acted_at->format('Y/m/d H:i') }}
                                </span>
                                <span style="color: {{ $stepColor }}; font-weight: 600">
                                    {{ $action->action_label }}
                                </span>
                                <span>بواسطة: {{ $action->actor->name ?? '—' }}</span>
                            </div>
                            @if($action->comments)
                                <div class="timeline-comment">
                                    <i class="fas fa-comment"></i> {{ $action->comments }}
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Action Buttons for Current Approver --}}
@if($approvalRequest->canBeActedOnBy(auth()->user()))
<div class="card" style="border: 2px solid var(--primary)">
    <div class="card-header" style="background: var(--primary-light)">
        <h3 style="color: var(--primary)"><i class="fas fa-gavel"></i> اتخذ قرارك</h3>
    </div>
    <div class="card-body">
        <div class="form-group">
            <label class="form-label">التعليقات</label>
            <textarea id="approvalComments" class="form-textarea" rows="3" placeholder="أضف تعليقاتك هنا (إلزامي عند الرفض)..."></textarea>
        </div>
        <div style="display: flex; gap: 1rem; margin-top: 1rem">
            <form method="POST" action="{{ route('approvals.approve', $approvalRequest->id) }}" id="approveForm">
                @csrf
                <input type="hidden" name="comments" id="approveComments">
                <button type="submit" class="btn btn-success btn-lg" onclick="document.getElementById('approveComments').value = document.getElementById('approvalComments').value">
                    <i class="fas fa-check"></i> اعتماد
                </button>
            </form>
            <form method="POST" action="{{ route('approvals.reject', $approvalRequest->id) }}" id="rejectForm" onsubmit="return validateReject()">
                @csrf
                <input type="hidden" name="comments" id="rejectComments">
                <button type="submit" class="btn btn-danger btn-lg" onclick="document.getElementById('rejectComments').value = document.getElementById('approvalComments').value">
                    <i class="fas fa-times"></i> رفض
                </button>
            </form>
        </div>
    </div>
</div>
@endif

<style>
.approval-timeline {
    position: relative;
    padding: 0.5rem 0;
}
.timeline-step {
    display: flex;
    gap: 1rem;
    margin-bottom: 0;
    min-height: 80px;
}
.timeline-step:last-child {
    min-height: auto;
}
.timeline-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
}
.timeline-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    z-index: 1;
}
.timeline-line {
    width: 3px;
    flex-grow: 1;
    margin: 4px 0;
    border-radius: 2px;
    min-height: 30px;
}
.timeline-content {
    flex: 1;
    padding-bottom: 1.5rem;
}
.timeline-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.timeline-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.timeline-action-info {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    padding: 0.5rem;
    background: var(--bg);
    border-radius: var(--radius-sm);
}
.timeline-comment {
    font-size: 0.85rem;
    color: var(--text);
    margin-top: 0.35rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border-right: 3px solid var(--primary);
}
.timeline-step.current .timeline-content {
    background: var(--primary-light);
    padding: 0.75rem;
    border-radius: var(--radius);
    margin-right: -0.75rem;
    margin-top: -0.25rem;
}
</style>

<script>
function validateReject() {
    const comments = document.getElementById('approvalComments').value.trim();
    if (!comments) {
        alert('يجب إدخال سبب الرفض');
        return false;
    }
    document.getElementById('rejectComments').value = comments;
    return true;
}
</script>
@endsection