@extends('layouts.app')

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

@push('styles')
<style>
    .profile-header {
        background: linear-gradient(135deg, #9C27B0 0%, #E040FB 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: #9C27B0;
    }
    .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: #9C27B0;
    }
    .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: #9C27B0;
    }
    .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;
    }
    .employer-highlight {
        background: rgba(156, 39, 176, 0.1);
        border: 1px solid rgba(156, 39, 176, 0.2);
        border-radius: 0.75rem;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .employer-highlight .label {
        font-size: 0.75rem;
        color: #697a8d;
        margin-bottom: 0.25rem;
    }
    .employer-highlight .value {
        font-weight: 600;
        color: #9C27B0;
        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('domestic-workers.edit', $domesticWorker) }}" class="btn btn-light btn-sm">
                <i class='bx bx-edit'></i> تعديل
            </a>
            @endif
            <a href="{{ route('domestic-workers.index') }}" class="btn btn-light btn-sm">
                <i class='bx bx-arrow-back'></i> العودة
            </a>
        </div>
        <div class="profile-avatar">
            {{ mb_substr($domesticWorker->name, 0, 1) }}
        </div>
        <div class="profile-name">{{ $domesticWorker->name }}</div>
        <div class="profile-subtitle">
            <i class='bx bx-id-card'></i> {{ $domesticWorker->iqama_number }}
        </div>
        <div class="profile-badges">
            @if($domesticWorker->expiry_year_hijri)
            <span class="profile-badge">
                <i class='bx bx-calendar'></i> {{ $domesticWorker->formatted_hijri_date }}
            </span>
            @endif
            @if($domesticWorker->sponsor)
            <span class="profile-badge">
                <i class='bx bx-user-voice'></i> {{ $domesticWorker->sponsor }}
            </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="employer-highlight">
                        <div class="label"><i class='bx bx-home'></i> صاحب العمل</div>
                        <div class="value">{{ $domesticWorker->employer_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">{{ $domesticWorker->name }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-id-card'></i> رقم الإقامة</span>
                                <span class="detail-value">{{ $domesticWorker->iqama_number }}</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">{{ $domesticWorker->sponsor ?? '-' }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-calendar'></i> تاريخ الانتهاء</span>
                                <span class="detail-value">{{ $domesticWorker->formatted_hijri_date }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ملاحظات -->
                @if($domesticWorker->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">{{ $domesticWorker->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->performer)
                                        - {{ $activity->performer->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