@extends('layouts.app')
@section('title', $employee->full_name . ' - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">{{ $employee->full_name }}</h1>
        <p class="page-subtitle">{{ $employee->employee_code }} • {{ $employee->jobTitle->name ?? 'بدون مسمى' }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('employees.edit', $employee) }}" class="btn btn-primary"><i class="fas fa-edit"></i> تعديل</a>
        <a href="{{ route('employees.index') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<div class="profile-layout">
    {{-- Profile Sidebar --}}
    <div class="profile-sidebar">
        <div class="profile-card">
            <div class="profile-avatar-lg">
                @if($employee->photo)
                    <img src="{{ Storage::url($employee->photo) }}" alt="{{ $employee->full_name }}">
                @else
                    {{ mb_substr($employee->first_name, 0, 1) }}{{ mb_substr($employee->last_name, 0, 1) }}
                @endif
            </div>
            <h2>{{ $employee->full_name }}</h2>
            <p>{{ $employee->jobTitle->name ?? '—' }}</p>
            <span class="status-badge status-{{ $employee->status }}">
                @switch($employee->status)
                    @case('active') نشط @break
                    @case('on_leave') في إجازة @break
                    @case('suspended') موقوف @break
                    @case('terminated') منتهي @break
                    @default {{ $employee->status }}
                @endswitch
            </span>
        </div>

        <div class="profile-info-list">
            <div class="info-item"><i class="fas fa-building"></i><span>{{ $employee->department->name ?? '—' }}</span></div>
            <div class="info-item"><i class="fas fa-envelope"></i><span>{{ $employee->email ?? '—' }}</span></div>
            <div class="info-item"><i class="fas fa-phone"></i><span>{{ $employee->phone ?? '—' }}</span></div>
            <div class="info-item"><i class="fas fa-calendar"></i><span>تعيين: {{ $employee->hire_date ? $employee->hire_date->format('Y/m/d') : '—' }}</span></div>
            <div class="info-item"><i class="fas fa-flag"></i><span>{{ $employee->nationality->name ?? '—' }}</span></div>
            @if($employee->manager)
                <div class="info-item"><i class="fas fa-user-tie"></i><span>{{ $employee->manager->full_name }}</span></div>
            @endif
        </div>

        <div class="profile-salary-card">
            <div class="salary-title">إجمالي الراتب</div>
            <div class="salary-amount">{{ number_format($employee->total_salary, 2) }} <small>{{ currency_label() }}</small></div>
            <div class="salary-breakdown">
                <div><span>الأساسي</span><span>{{ number_format($employee->basic_salary ?? 0, 2) }}</span></div>
                <div><span>بدل السكن</span><span>{{ number_format($employee->housing_allowance ?? 0, 2) }}</span></div>
                <div><span>بدل النقل</span><span>{{ number_format($employee->transport_allowance ?? 0, 2) }}</span></div>
                <div><span>بدلات أخرى</span><span>{{ number_format($employee->other_allowances ?? 0, 2) }}</span></div>
            </div>
        </div>
    </div>

    {{-- Profile Content --}}
    <div class="profile-content">
        {{-- Tabs --}}
        <div class="tabs">
            <button class="tab active" onclick="showTab('personal')">البيانات الشخصية</button>
            <button class="tab" onclick="showTab('documents')">الوثائق</button>
            <button class="tab" onclick="showTab('contracts')">العقود</button>
            <button class="tab" onclick="showTab('attendance')">الحضور</button>
            <button class="tab" onclick="showTab('leaves')">الإجازات</button>
            <button class="tab" onclick="showTab('custom-fields')">حقول إضافية</button>
        </div>

        {{-- Personal Info Tab --}}
        <div class="tab-content active" id="tab-personal">
            <div class="card">
                <div class="card-body">
                    <div class="detail-grid">
                        <div class="detail-item"><label>الاسم الكامل</label><span>{{ $employee->full_name }}</span></div>
                        <div class="detail-item"><label>الجنس</label><span>{{ $employee->gender == 'male' ? 'ذكر' : 'أنثى' }}</span></div>
                        <div class="detail-item"><label>تاريخ الميلاد</label><span>{{ $employee->date_of_birth ? $employee->date_of_birth->format('Y/m/d') : '—' }}</span></div>
                        <div class="detail-item"><label>الحالة الاجتماعية</label><span>
                            @switch($employee->marital_status)
                                @case('single') أعزب @break
                                @case('married') متزوج @break
                                @case('divorced') مطلق @break
                                @case('widowed') أرمل @break
                                @default —
                            @endswitch
                        </span></div>
                        <div class="detail-item"><label>الديانة</label><span>{{ $employee->religion ?? '—' }}</span></div>
                        <div class="detail-item"><label>العنوان</label><span>{{ $employee->address ?? '—' }}</span></div>
                        <div class="detail-item"><label>نوع التوظيف</label><span>
                            @switch($employee->employment_type)
                                @case('full_time') دوام كامل @break
                                @case('part_time') دوام جزئي @break
                                @case('contract') عقد مؤقت @break
                                @case('remote') عن بُعد @break
                                @default —
                            @endswitch
                        </span></div>
                        <div class="detail-item"><label>وردية العمل</label><span>{{ $employee->workShift->name ?? '—' }}</span></div>
                    </div>
                </div>
            </div>

            {{-- Financial Details --}}
            <div class="card">
                <div class="card-header"><h3><i class="fas fa-university"></i> البيانات البنكية</h3></div>
                <div class="card-body">
                    <div class="detail-grid">
                        <div class="detail-item"><label>اسم البنك</label><span>{{ $employee->bank_name ?? '—' }}</span></div>
                        <div class="detail-item"><label>رقم الحساب</label><span>{{ $employee->bank_account ?? '—' }}</span></div>
                        <div class="detail-item"><label>رقم الآيبان</label><span>{{ $employee->iban ?? '—' }}</span></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Documents Tab --}}
        <div class="tab-content" id="tab-documents">
            <div class="card">
                <div class="card-body">
                    <div class="detail-grid">
                        <div class="detail-item"><label>رقم الهوية/الإقامة</label><span>{{ $employee->national_id ?? '—' }}</span></div>
                        <div class="detail-item"><label>انتهاء الهوية</label><span>{{ $employee->national_id_expiry ? $employee->national_id_expiry->format('Y/m/d') : '—' }}</span></div>
                        <div class="detail-item"><label>رقم الجواز</label><span>{{ $employee->passport_number ?? '—' }}</span></div>
                        <div class="detail-item"><label>انتهاء الجواز</label><span>{{ $employee->passport_expiry ? $employee->passport_expiry->format('Y/m/d') : '—' }}</span></div>
                        <div class="detail-item"><label>انتهاء الإقامة</label><span>{{ $employee->residency_expiry_date ? $employee->residency_expiry_date->format('Y/m/d') : '—' }}</span></div>
                        <div class="detail-item"><label>رقم التأمينات</label><span>{{ $employee->social_insurance_number ?? '—' }}</span></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Contracts Tab --}}
        <div class="tab-content" id="tab-contracts">
            <div class="card">
                <div class="card-body">
                    @forelse($employee->contracts as $contract)
                    <div class="timeline-item">
                        <div class="timeline-icon"><i class="fas fa-file-contract"></i></div>
                        <div class="timeline-body">
                            <div class="timeline-title">{{ $contract->contract_number }}</div>
                            <div class="timeline-meta">
                                {{ $contract->start_date?->format('Y/m/d') }} — {{ $contract->end_date?->format('Y/m/d') ?? 'مفتوح' }}
                                <span class="status-badge status-{{ $contract->status }}">{{ $contract->status }}</span>
                            </div>
                        </div>
                    </div>
                    @empty
                        <div class="empty-state-sm">لا توجد عقود</div>
                    @endforelse
                </div>
            </div>
        </div>

        {{-- Attendance Tab --}}
        <div class="tab-content" id="tab-attendance">
            <div class="card">
                <div class="table-responsive">
                    <table class="data-table">
                        <thead>
                            <tr><th>التاريخ</th><th>الحضور</th><th>الانصراف</th><th>ساعات العمل</th><th>الحالة</th></tr>
                        </thead>
                        <tbody>
                            @forelse($employee->attendances as $att)
                            <tr>
                                <td>{{ $att->date->format('Y/m/d') }}</td>
                                <td>{{ $att->check_in ? \Carbon\Carbon::parse($att->check_in)->format('H:i') : '—' }}</td>
                                                            <td>{{ $att->check_out ? \Carbon\Carbon::parse($att->check_out)->format('H:i') : '—' }}</td>
                                <td>{{ $att->worked_hours ?? '—' }}</td>
                                <td><span class="status-badge status-{{ $att->status }}">
                                    @switch($att->status)
                                        @case('present') حاضر @break
                                        @case('absent') غائب @break
                                        @case('late') متأخر @break
                                        @case('leave') إجازة @break
                                        @default {{ $att->status }}
                                    @endswitch
                                </span></td>
                            </tr>
                            @empty
                            <tr><td colspan="5"><div class="empty-state-sm">لا توجد سجلات حضور</div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Leaves Tab --}}
        <div class="tab-content" id="tab-leaves">
            <div class="card">
                {{-- Leave Balances --}}
                <div class="card-header"><h3>أرصدة الإجازات</h3></div>
                <div class="card-body">
                    <div class="stats-grid cols-3">
                        <div class="mini-stat"><div class="mini-stat-value">{{ $employee->annual_leave_balance ?? 0 }}</div><div class="mini-stat-label">سنوية متبقية</div></div>
                        <div class="mini-stat"><div class="mini-stat-value">{{ $employee->sick_leave_balance ?? 0 }}</div><div class="mini-stat-label">مرضية متبقية</div></div>
                        <div class="mini-stat"><div class="mini-stat-value">{{ $employee->emergency_leave_balance ?? 0 }}</div><div class="mini-stat-label">اضطرارية متبقية</div></div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="data-table">
                        <thead>
                            <tr><th>النوع</th><th>من</th><th>إلى</th><th>الأيام</th><th>نسبة الخصم</th><th>المبلغ المخصوم</th><th>الحالة</th></tr>
                        </thead>
                        <tbody>
                            @forelse($employee->leaveRequests as $lr)
                            @php
                                $leaveType = $lr->leaveType;
                                $payType = $leaveType->pay_type ?? 'full';
                                $payPercentage = $leaveType->pay_percentage ?? 100;

                                // Calculate deduction percentage
                                if ($payType === 'full') {
                                    $deductionPercent = 0;
                                } elseif ($payType === 'unpaid') {
                                    $deductionPercent = 100;
                                } else {
                                    // partial — pay_percentage is what they GET paid, deduction is the rest
                                    $deductionPercent = 100 - $payPercentage;
                                }

                                // Calculate deducted amount (based on basic salary / 30 days × leave days × deduction%)
                                $dailySalary = ($employee->basic_salary ?? 0) / 30;
                                $deductedAmount = $dailySalary * ($lr->days_count ?? 0) * ($deductionPercent / 100);
                            @endphp
                            <tr>
                                <td>{{ $leaveType->name_ar ?? $leaveType->name ?? '—' }}</td>
                                <td>{{ $lr->start_date ? $lr->start_date->format('Y/m/d') : '—' }}</td>
                                <td>{{ $lr->end_date ? $lr->end_date->format('Y/m/d') : '—' }}</td>
                                <td>{{ $lr->days_count }}</td>
                                <td>
                                    @if($deductionPercent == 0)
                                        <span style="color:#065f46;font-weight:600;">مدفوعة بالكامل</span>
                                    @elseif($deductionPercent == 100)
                                        <span style="color:#991b1b;font-weight:600;">بدون أجر</span>
                                    @else
                                        <span style="color:#92400e;font-weight:600;">{{ $deductionPercent }}%</span>
                                    @endif
                                </td>
                                <td>
                                    @if($deductedAmount > 0)
                                        <span style="color:#991b1b;font-weight:600;">{{ number_format($deductedAmount, 2) }} {{ currency_label() }}</span>
                                    @else
                                        <span style="color:#065f46;">—</span>
                                    @endif
                                </td>
                                <td><span class="status-badge status-{{ $lr->status }}">
                                    @switch($lr->status)
                                        @case('pending') معلق @break
                                        @case('approved') موافق @break
                                        @case('rejected') مرفوض @break
                                        @default {{ $lr->status }}
                                    @endswitch
                                </span></td>
                            </tr>
                            @empty
                            <tr><td colspan="7"><div class="empty-state-sm">لا توجد طلبات إجازات</div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

        {{-- Custom Fields Tab --}}
        <div class="tab-content" id="tab-custom-fields">
            @if(isset($customFields) && $customFields->count())
                @php $cfSections = $customFields->groupBy('section'); @endphp
                @foreach($cfSections as $section => $fields)
                <div class="card" style="margin-bottom: 1rem">
                    <div class="card-header"><h3><i class="fas fa-cube"></i> {{ \App\Models\CustomField::SECTION_LABELS[$section] ?? $section }}</h3></div>
                    <div class="card-body">
                        <div class="detail-grid">
                            @foreach($fields as $cf)
                                <div class="detail-item">
                                    <label>{{ $cf->name }}</label>
                                    <span>
                                        @php $cfVal = $employee->customFieldValues->firstWhere('custom_field_id', $cf->id); @endphp
                                        @if($cfVal && $cfVal->value)
                                            @if($cf->type === 'checkbox')
                                                {{ $cfVal->value ? '✓ نعم' : '✗ لا' }}
                                            @elseif($cf->type === 'url')
                                                <a href="{{ $cfVal->value }}" target="_blank">{{ $cfVal->value }}</a>
                                            @elseif($cf->type === 'email')
                                                <a href="mailto:{{ $cfVal->value }}">{{ $cfVal->value }}</a>
                                            @else
                                                {{ $cfVal->value }}
                                            @endif
                                        @else
                                            —
                                        @endif
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endforeach
            @else
                <div class="card">
                    <div class="card-body">
                        <div class="empty-state-sm">لا توجد حقول مخصصة مفعّلة</div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
function showTab(name) {
    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    document.getElementById('tab-' + name).classList.add('active');
    event.target.classList.add('active');
}
</script>
@endpush
@endsection