@extends('layouts.app')

@section('title', 'تفاصيل العامل')

@push('styles')
<style>
    .profile-header {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
        color: white;
        border-radius: 1rem;
        padding: 2rem;
        margin-bottom: 1.5rem;
        position: relative;
        overflow: hidden;
    }
    .profile-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    }
    .profile-avatar {
        width: 80px;
        height: 80px;
        background: rgba(255,255,255,0.2);
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 1rem;
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255,255,255,0.3);
    }
    .profile-name {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }
    .profile-subtitle {
        opacity: 0.9;
        font-size: 0.9rem;
    }
    .profile-badges {
        display: flex;
        gap: 0.5rem;
        margin-top: 1rem;
        flex-wrap: wrap;
    }
    .profile-badge {
        background: rgba(255,255,255,0.2);
        padding: 0.375rem 0.75rem;
        border-radius: 2rem;
        font-size: 0.8rem;
        backdrop-filter: blur(10px);
    }
    .detail-card {
        border: none;
        border-radius: 1rem;
        box-shadow: 0 4px 24px rgba(0,0,0,0.06);
        height: 100%;
    }
    .detail-card .card-header {
        background: white;
        border-bottom: 1px solid #e9ecef;
        padding: 1rem 1.5rem;
    }
    .detail-card .card-header h6 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        font-weight: 600;
    }
    .detail-card .card-header h6 i {
        color: #11998e;
    }
    .detail-card .card-body {
        padding: 1.5rem;
    }
    .detail-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f1f1f1;
    }
    .detail-item:last-child {
        border-bottom: none;
    }
    .detail-label {
        font-size: 0.85rem;
        color: #697a8d;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .detail-label i {
        color: #11998e;
    }
    .detail-value {
        font-weight: 600;
        color: #333;
        text-align: left;
    }
    .activity-card {
        border: none;
        border-radius: 1rem;
        box-shadow: 0 4px 24px rgba(0,0,0,0.06);
        position: sticky;
        top: 1rem;
    }
    .activity-card .card-header {
        background: white;
        border-bottom: 1px solid #e9ecef;
        padding: 1rem 1.5rem;
    }
    .activity-card .card-header h6 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        font-weight: 600;
    }
    .activity-card .card-header h6 i {
        color: #11998e;
    }
    .activity-list {
        max-height: 400px;
        overflow-y: auto;
    }
    .activity-item {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        gap: 1rem;
    }
    .activity-item:last-child {
        border-bottom: none;
    }
    .activity-icon {
        width: 36px;
        height: 36px;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .activity-icon.create { background: rgba(113, 221, 55, 0.15); color: #71dd37; }
    .activity-icon.update { background: rgba(105, 108, 255, 0.15); color: #696cff; }
    .activity-icon.delete { background: rgba(255, 62, 29, 0.15); color: #ff3e1d; }
    .activity-content {
        flex: 1;
        min-width: 0;
    }
    .activity-title {
        font-size: 0.85rem;
        font-weight: 500;
        color: #333;
        margin-bottom: 0.25rem;
    }
    .activity-time {
        font-size: 0.75rem;
        color: #a1acb8;
    }
    .action-buttons {
        display: flex;
        gap: 0.5rem;
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
    }
    .company-highlight {
        background: rgba(17, 153, 142, 0.1);
        border: 1px solid rgba(17, 153, 142, 0.2);
        border-radius: 0.75rem;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .company-highlight .label {
        font-size: 0.75rem;
        color: #697a8d;
        margin-bottom: 0.25rem;
    }
    .company-highlight .value {
        font-weight: 600;
        color: #11998e;
        font-size: 1.1rem;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Profile Header -->
    <div class="profile-header">
        <div class="action-buttons">
            @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::EDIT_IQAMAS))
            <a href="{{ route('company-workers.edit', $companyWorker) }}" class="btn btn-light btn-sm">
                <i class='bx bx-edit'></i> تعديل
            </a>
            @endif
            <a href="{{ route('company-workers.index') }}" class="btn btn-light btn-sm">
                <i class='bx bx-arrow-back'></i> العودة
            </a>
        </div>
        <div class="profile-avatar">
            {{ mb_substr($companyWorker->name, 0, 1) }}
        </div>
        <div class="profile-name">{{ $companyWorker->name }}</div>
        <div class="profile-subtitle">
            <i class='bx bx-id-card'></i> {{ $companyWorker->iqama_number }}
        </div>
        <div class="profile-badges">
            @if($companyWorker->nationality)
            <span class="profile-badge">
                <i class='bx bx-globe'></i> {{ $companyWorker->nationality }}
            </span>
            @endif
            @if($companyWorker->profession)
            <span class="profile-badge">
                <i class='bx bx-hard-hat'></i> {{ $companyWorker->profession }}
            </span>
            @endif
            @if($companyWorker->expiry_year_hijri)
            <span class="profile-badge">
                <i class='bx bx-calendar'></i> {{ $companyWorker->formatted_hijri_date }}
            </span>
            @endif
        </div>
    </div>

    <div class="row">
        <!-- Details Column -->
        <div class="col-lg-7 col-xl-8 mb-4">
            <div class="row">
                <!-- الشركة -->
                <div class="col-12 mb-4">
                    <div class="company-highlight">
                        <div class="label"><i class='bx bx-building'></i> اسم الشركة / المنشأة</div>
                        <div class="value">{{ $companyWorker->company_name }}</div>
                    </div>
                </div>

                <!-- بطاقة البيانات الأساسية -->
                <div class="col-md-6 mb-4">
                    <div class="card detail-card">
                        <div class="card-header">
                            <h6><i class='bx bx-user'></i> البيانات الأساسية</h6>
                        </div>
                        <div class="card-body">
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-user'></i> الاسم</span>
                                <span class="detail-value">{{ $companyWorker->name }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-id-card'></i> رقم الإقامة</span>
                                <span class="detail-value">{{ $companyWorker->iqama_number }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-globe'></i> الجنسية</span>
                                <span class="detail-value">{{ $companyWorker->nationality ?? '-' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- بطاقة معلومات العمل -->
                <div class="col-md-6 mb-4">
                    <div class="card detail-card">
                        <div class="card-header">
                            <h6><i class='bx bx-briefcase'></i> معلومات العمل</h6>
                        </div>
                        <div class="card-body">
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-user-voice'></i> السمسار</span>
                                <span class="detail-value">{{ $companyWorker->sponsor ?? '-' }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-hard-hat'></i> المهنة</span>
                                <span class="detail-value">{{ $companyWorker->profession ?? '-' }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-file'></i> رقم السجل</span>
                                <span class="detail-value">{{ $companyWorker->registry_number ?? '-' }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-calendar'></i> تاريخ الانتهاء</span>
                                <span class="detail-value">{{ $companyWorker->formatted_hijri_date }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ملاحظات -->
                @if($companyWorker->notes)
                <div class="col-12">
                    <div class="card detail-card">
                        <div class="card-header">
                            <h6><i class='bx bx-note'></i> ملاحظات</h6>
                        </div>
                        <div class="card-body">
                            <p class="mb-0">{{ $companyWorker->notes }}</p>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>

        <!-- Activity Column -->
        <div class="col-lg-5 col-xl-4 mb-4">
            <div class="card activity-card">
                <div class="card-header">
                    <h6><i class='bx bx-history'></i> سجل النشاطات</h6>
                </div>
                <div class="activity-list">
                    @forelse($activities as $activity)
                        <div class="activity-item">
                            <div class="activity-icon {{ $activity->action }}">
                                @switch($activity->action)
                                    @case('create')
                                        <i class='bx bx-plus'></i>
                                        @break
                                    @case('update')
                                        <i class='bx bx-edit'></i>
                                        @break
                                    @case('delete')
                                        <i class='bx bx-trash'></i>
                                        @break
                                    @default
                                        <i class='bx bx-sync'></i>
                                @endswitch
                            </div>
                            <div class="activity-content">
                                <div class="activity-title">{{ $activity->description }}</div>
                                <div class="activity-time">
                                    <i class='bx bx-time-five'></i>
                                    {{ $activity->created_at->diffForHumans() }}
                                    @if($activity->user)
                                        - {{ $activity->user->name }}
                                    @endif
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-4 text-muted">
                            <i class='bx bx-history' style="font-size: 2rem;"></i>
                            <p class="mb-0 mt-2">لا توجد نشاطات</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
@endsection