@extends('layouts.app')
@section('title', 'طلب تصحيح ' . $correction->request_number . ' - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">طلب تصحيح حضور</h1>
        <p class="page-subtitle">{{ $correction->request_number }} • {{ $correction->type_label }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('attendance-corrections.index') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

@if(session('success'))
<div style="background: var(--success-light); border: 1px solid var(--success); padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; color: var(--success)">
    <i class="fas fa-check-circle"></i> {{ session('success') }}
</div>
@endif

@if(session('error'))
<div style="background: var(--danger-light); border: 1px solid var(--danger); padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; color: var(--danger)">
    <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
</div>
@endif

{{-- Request Details --}}
<div class="card" style="margin-bottom: 1.5rem">
    <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">{{ $correction->request_number }}</code></span>
            </div>
            <div class="detail-item">
                <label>الموظف</label>
                <span>
                    @if($correction->employee)
                        <a href="{{ route('employees.show', $correction->employee) }}">{{ $correction->employee->full_name }}</a>
                        <br><small style="color: var(--text-muted)">{{ $correction->employee->employee_code }}</small>
                    @else
                        —
                    @endif
                </span>
            </div>
            <div class="detail-item">
                <label>التاريخ</label>
                <span>{{ $correction->date->format('Y/m/d') }} ({{ $correction->date->translatedFormat('l') }})</span>
            </div>
            <div class="detail-item">
                <label>نوع التصحيح</label>
                <span>{{ $correction->type_label }}</span>
            </div>
            <div class="detail-item">
                <label>الحالة</label>
                <span>
                    @php
                        $statusClass = match($correction->status) {
                            'pending'  => 'status-pending',
                            'approved' => 'status-active',
                            'rejected' => 'status-expired',
                            default    => '',
                        };
                    @endphp
                    <span class="status-badge {{ $statusClass }}">{{ $correction->status_label }}</span>
                </span>
            </div>
            <div class="detail-item">
                <label>تاريخ التقديم</label>
                <span>{{ $correction->created_at->format('Y/m/d H:i') }}</span>
            </div>
            @if($correction->approver)
            <div class="detail-item">
                <label>{{ $correction->status === 'approved' ? 'اعتمد بواسطة' : 'رفض بواسطة' }}</label>
                <span>{{ $correction->approver->name }}</span>
            </div>
            <div class="detail-item">
                <label>تاريخ المعالجة</label>
                <span>{{ $correction->approved_at?->format('Y/m/d H:i') }}</span>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Time Comparison Card --}}
<div class="card" style="margin-bottom: 1.5rem">
    <div class="card-header"><h3><i class="fas fa-exchange-alt"></i> مقارنة الأوقات</h3></div>
    <div class="card-body">
        <div style="display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center">
            {{-- Original Times --}}
            <div style="text-align: center">
                <div style="font-size: 0.85rem; font-weight: 700; color: var(--danger); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px">
                    <i class="fas fa-times-circle"></i> الأصلي
                </div>
                <div style="padding: 1.25rem; background: var(--danger-light); border-radius: var(--radius); border: 2px solid var(--danger)">
                    @if($correction->correction_type === 'missing_record')
                        <div style="color: var(--danger); font-weight: 600; padding: 1rem 0">
                            <i class="fas fa-ban" style="font-size: 1.5rem; display: block; margin-bottom: 0.5rem"></i>
                            لا يوجد سجل
                        </div>
                    @else
                        <div style="margin-bottom: 1rem">
                            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem">وقت الحضور</div>
                            <div style="font-size: 1.5rem; font-weight: 700; color: var(--danger); direction: ltr; {{ in_array($correction->correction_type, ['check_in', 'both']) ? 'text-decoration: line-through;' : '' }}">
                                {{ $correction->original_check_in ?? '—' }}
                            </div>
                        </div>
                        <div>
                            <div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem">وقت الانصراف</div>
                            <div style="font-size: 1.5rem; font-weight: 700; color: var(--danger); direction: ltr; {{ in_array($correction->correction_type, ['check_out', 'both']) ? 'text-decoration: line-through;' : '' }}">
                                {{ $correction->original_check_out ?? '—' }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Arrow --}}
            <div style="text-align: center">
                <div style="width: 50px; height: 50px; background: var(--primary-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.25rem">
                    <i class="fas fa-long-arrow-alt-left"></i>
                </div>
            </div>

            {{-- Corrected Times --}}
            <div style="text-align: center">
                <div style="font-size: 0.85rem; font-weight: 700; color: var(--success); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px">
                    <i class="fas fa-check-circle"></i> المصحح
                </div>
                <div style="padding: 1.25rem; background: var(--success-light); border-radius: var(--radius); border: 2px solid var(--success)">
                    <div style="margin-bottom: 1rem">
                        <div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem">وقت الحضور</div>
                        <div style="font-size: 1.5rem; font-weight: 700; color: var(--success); direction: ltr">
                            {{ $correction->corrected_check_in ?? ($correction->original_check_in ?? '—') }}
                        </div>
                    </div>
                    <div>
                        <div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem">وقت الانصراف</div>
                        <div style="font-size: 1.5rem; font-weight: 700; color: var(--success); direction: ltr">
                            {{ $correction->corrected_check_out ?? ($correction->original_check_out ?? '—') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Reason Card --}}
<div class="card" style="margin-bottom: 1.5rem">
    <div class="card-header"><h3><i class="fas fa-comment-alt"></i> سبب التصحيح</h3></div>
    <div class="card-body">
        <p style="line-height: 1.8; white-space: pre-wrap">{{ $correction->reason }}</p>
    </div>
</div>

{{-- Rejection Reason (if rejected) --}}
@if($correction->status === 'rejected' && $correction->rejection_reason)
<div class="card" style="margin-bottom: 1.5rem; border: 1px solid var(--danger)">
    <div class="card-header" style="background: var(--danger-light)">
        <h3 style="color: var(--danger)"><i class="fas fa-ban"></i> سبب الرفض</h3>
    </div>
    <div class="card-body">
        <p style="line-height: 1.8; white-space: pre-wrap; color: var(--danger)">{{ $correction->rejection_reason }}</p>
    </div>
</div>
@endif

{{-- Action Buttons (if pending) --}}
@if($correction->status === 'pending')
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 900px">
    {{-- Approve --}}
    <div class="card" style="border: 1px solid var(--success)">
        <div class="card-body" style="text-align: center; padding: 1.5rem">
            <i class="fas fa-check-circle" style="font-size: 2rem; color: var(--success); margin-bottom: 0.75rem"></i>
            <h4 style="margin-bottom: 0.5rem">اعتماد الطلب</h4>
            <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem">سيتم تحديث سجل الحضور تلقائياً</p>
            <form method="POST" action="{{ route('attendance-corrections.approve', $correction) }}" onsubmit="return confirm('هل أنت متأكد من اعتماد هذا الطلب؟ سيتم تعديل سجل الحضور.')">
                @csrf
                <button type="submit" class="btn btn-success" style="width: 100%"><i class="fas fa-check"></i> اعتماد</button>
            </form>
        </div>
    </div>

    {{-- Reject --}}
    <div class="card" style="border: 1px solid var(--danger)">
        <div class="card-body" style="padding: 1.5rem">
            <div style="text-align: center; margin-bottom: 1rem">
                <i class="fas fa-times-circle" style="font-size: 2rem; color: var(--danger); margin-bottom: 0.75rem"></i>
                <h4 style="margin-bottom: 0.5rem">رفض الطلب</h4>
            </div>
            <form method="POST" action="{{ route('attendance-corrections.reject', $correction) }}" onsubmit="return confirm('هل أنت متأكد من رفض هذا الطلب؟')">
                @csrf
                <div class="form-group">
                    <label class="form-label required">سبب الرفض</label>
                    <textarea name="rejection_reason" class="form-textarea" rows="2" required placeholder="اكتب سبب رفض الطلب..."></textarea>
                </div>
                <button type="submit" class="btn btn-danger" style="width: 100%"><i class="fas fa-times"></i> رفض</button>
            </form>
        </div>
    </div>
</div>
@endif
@endsection