@extends('layouts.app')
@section('title', 'تفاصيل الطلب المالي')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">طلب رقم {{ $finRequest->request_number }}</h1>
        <p class="page-subtitle">{{ $finRequest->type_label }} — {{ $finRequest->subject }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('financial-requests.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-right"></i> العودة</a>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="alert alert-danger"><i class="fas fa-exclamation-circle"></i> {{ session('error') }}</div>
@endif

<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem;">
    <div>
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-info-circle"></i> تفاصيل الطلب</h3>
                <span class="status-badge {{ $finRequest->status_class }}">{{ $finRequest->status_label }}</span>
            </div>
            <div class="card-body">
                <div class="detail-grid">
                    <div class="detail-item">
                        <span class="detail-label">الموظف</span>
                        <span class="detail-value">{{ $finRequest->employee->first_name ?? '' }} {{ $finRequest->employee->last_name ?? '' }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">نوع الطلب</span>
                        <span class="detail-value">{{ $finRequest->type_label }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">المبلغ</span>
                        <span class="detail-value" style="font-size: 1.2rem; font-weight: 700; color: var(--primary);">{{ number_format($finRequest->amount, 2) }} {{ $finRequest->currency }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">تاريخ الطلب</span>
                        <span class="detail-value">{{ $finRequest->created_at?->format('d/m/Y H:i') }}</span>
                    </div>
                    @if($finRequest->description)
                        <div class="detail-item full">
                            <span class="detail-label">التفاصيل</span>
                            <span class="detail-value">{{ $finRequest->description }}</span>
                        </div>
                    @endif
                    @if($finRequest->type === 'business_trip')
                        <div class="detail-item">
                            <span class="detail-label">الوجهة</span>
                            <span class="detail-value">{{ $finRequest->trip_destination ?? '—' }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">فترة الانتداب</span>
                            <span class="detail-value">{{ $finRequest->trip_start_date?->format('d/m/Y') }} → {{ $finRequest->trip_end_date?->format('d/m/Y') }}</span>
                        </div>
                    @endif
                    @if($finRequest->rejection_reason)
                        <div class="detail-item full">
                            <span class="detail-label">سبب الرفض</span>
                            <span class="detail-value" style="color: var(--danger);">{{ $finRequest->rejection_reason }}</span>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- إجراءات الاعتماد --}}
        @if(in_array($finRequest->status, ['pending', 'manager_approved', 'hr_approved', 'finance_approved']))
            <div class="card" style="margin-top: 1rem;">
                <div class="card-header"><h3 class="card-title"><i class="fas fa-gavel"></i> إجراءات</h3></div>
                <div class="card-body" style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
                    @if(in_array($finRequest->status, ['pending', 'manager_approved', 'hr_approved']))
                        <form action="{{ route('financial-requests.approve', $finRequest->id) }}" method="POST">
                            @csrf
                            <button type="submit" class="btn btn-success" onclick="return confirm('هل تريد اعتماد هذا الطلب؟')">
                                <i class="fas fa-check"></i> اعتماد
                            </button>
                        </form>
                        <form action="{{ route('financial-requests.reject', $finRequest->id) }}" method="POST" style="display: flex; gap: 0.5rem;">
                            @csrf
                            <input type="text" name="reason" class="form-input" placeholder="سبب الرفض" style="width: 200px;">
                            <button type="submit" class="btn btn-danger" onclick="return confirm('هل تريد رفض هذا الطلب؟')">
                                <i class="fas fa-times"></i> رفض
                            </button>
                        </form>
                    @endif
                    @if($finRequest->status === 'finance_approved')
                        <form action="{{ route('financial-requests.mark-paid', $finRequest->id) }}" method="POST" style="display: flex; gap: 0.5rem;">
                            @csrf
                            <input type="text" name="payment_reference" class="form-input" placeholder="مرجع الدفع" style="width: 200px;">
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-money-check"></i> تأكيد الصرف
                            </button>
                        </form>
                    @endif
                </div>
            </div>
        @endif
    </div>

    {{-- مسار الاعتماد --}}
    <div class="card">
        <div class="card-header"><h3 class="card-title"><i class="fas fa-route"></i> مسار الاعتماد</h3></div>
        <div class="card-body">
            @php
                $steps = [
                    ['status' => 'pending', 'label' => 'تقديم الطلب', 'icon' => 'fa-paper-plane', 'done' => true],
                    ['status' => 'manager_approved', 'label' => 'موافقة المدير', 'icon' => 'fa-user-tie', 'done' => in_array($finRequest->status, ['manager_approved','hr_approved','finance_approved','paid'])],
                    ['status' => 'hr_approved', 'label' => 'موافقة HR', 'icon' => 'fa-users-cog', 'done' => in_array($finRequest->status, ['hr_approved','finance_approved','paid'])],
                    ['status' => 'finance_approved', 'label' => 'موافقة المالية', 'icon' => 'fa-calculator', 'done' => in_array($finRequest->status, ['finance_approved','paid'])],
                    ['status' => 'paid', 'label' => 'تم الصرف', 'icon' => 'fa-check-double', 'done' => $finRequest->status === 'paid'],
                ];
            @endphp
            <div style="display: flex; flex-direction: column; gap: 0;">
                @foreach($steps as $i => $step)
                    <div style="display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 0; {{ $i < count($steps)-1 ? 'border-bottom: 1px solid var(--border-light);' : '' }}">
                        <div style="width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; {{ $step['done'] ? 'background: var(--success-light); color: var(--success);' : ($finRequest->status === 'rejected' && !$step['done'] ? 'background: var(--danger-light); color: var(--danger);' : 'background: var(--border-light); color: var(--text-muted);') }}">
                            <i class="fas {{ $step['done'] ? 'fa-check' : ($finRequest->status === 'rejected' ? 'fa-times' : $step['icon']) }}"></i>
                        </div>
                        <div>
                            <div style="font-weight: 600; font-size: 0.9rem;">{{ $step['label'] }}</div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection