@extends('layouts.app')

@section('title', 'تفاصيل التأشيرة')

@push('styles')
<style>
    .profile-header {
        background: linear-gradient(135deg, #FF9800 0%, #FFB74D 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;
        direction: ltr;
        display: inline-block;
    }
    .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: #FF9800;
    }
    .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: #FF9800;
    }
    .detail-value {
        font-weight: 600;
        color: #333;
        text-align: left;
    }
    .company-highlight {
        background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 183, 77, 0.1) 100%);
        border-radius: 1rem;
        padding: 1.5rem;
        text-align: center;
    }
    .company-highlight .label {
        font-size: 0.85rem;
        color: #697a8d;
        margin-bottom: 0.5rem;
    }
    .company-highlight .value {
        font-size: 1.25rem;
        font-weight: 700;
        color: #FF9800;
    }
    .activity-card {
        border: none;
        border-radius: 1rem;
        box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    }
    .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: #FF9800;
    }
    .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(76, 175, 80, 0.15); color: #4CAF50; }
    .activity-icon.update { background: rgba(33, 150, 243, 0.15); color: #2196F3; }
    .activity-icon.delete { background: rgba(244, 67, 54, 0.15); color: #f44336; }
    .activity-content {
        flex-grow: 1;
    }
    .activity-title {
        font-weight: 500;
        margin-bottom: 0.25rem;
    }
    .activity-time {
        font-size: 0.8rem;
        color: #697a8d;
    }
    .quantity-badge {
        background: rgba(255, 152, 0, 0.15);
        color: #FF9800;
        padding: 0.5rem 1rem;
        border-radius: 0.75rem;
        font-weight: 700;
        font-size: 1.25rem;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="profile-header">
        <div class="d-flex justify-content-between align-items-start">
            <a href="{{ route('visas.index') }}" class="btn btn-light btn-sm">
                <i class='bx bx-arrow-back'></i> العودة
            </a>
            <a href="{{ route('visas.edit', $visa) }}" class="btn btn-light btn-sm">
                <i class='bx bx-edit'></i> تعديل
            </a>
        </div>
        <div class="profile-avatar">
            <i class='bx bx-file'></i>
        </div>
        <div class="profile-name">{{ $visa->issue_number }}</div>
        <div class="profile-subtitle">
            <i class='bx bx-building'></i> {{ $visa->company_name ?? 'لم تحدد الشركة' }}
        </div>
        <div class="profile-badges">
            @if($visa->visa_type)
            <span class="profile-badge">
                <i class='bx bx-id-card'></i> {{ $visa->visa_type }}
            </span>
            @endif
            @if($visa->arrival_destination)
            <span class="profile-badge">
                <i class='bx bx-globe'></i> {{ $visa->arrival_destination }}
            </span>
            @endif
            <span class="profile-badge">
                <i class='bx bx-group'></i> {{ $visa->quantity }} تأشيرة
            </span>
        </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="row">
                        <div class="col-md-6">
                            <div class="company-highlight">
                                <div class="label"><i class='bx bx-building'></i> الشركة</div>
                                <div class="value">{{ $visa->company_name ?? '-' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="company-highlight">
                                <div class="label"><i class='bx bx-group'></i> الكمية</div>
                                <div class="value">{{ $visa->quantity }}</div>
                            </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-file'></i> بيانات التأشيرة</h6>
                        </div>
                        <div class="card-body">
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-hash'></i> رقم الصادر</span>
                                <span class="detail-value" dir="ltr">{{ $visa->issue_number }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-id-card'></i> الرقم الموحد</span>
                                <span class="detail-value" dir="ltr">{{ $visa->unified_number ?? '-' }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-book'></i> رقم السجل</span>
                                <span class="detail-value" dir="ltr">{{ $visa->registration_number ?? '-' }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-category'></i> نوع التأشيرة</span>
                                <span class="detail-value">{{ $visa->visa_type ?? '-' }}</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-globe'></i> جهة القدوم</span>
                                <span class="detail-value">{{ $visa->arrival_destination ?? '-' }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-hard-hat'></i> المهنة</span>
                                <span class="detail-value">{{ $visa->profession ?? '-' }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-user-voice'></i> السمسار</span>
                                <span class="detail-value">{{ $visa->sponsor ?? '-' }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-calendar'></i> تاريخ الإصدار</span>
                                <span class="detail-value">{{ $visa->formatted_hijri_date }}</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-credit-card'></i> معلومات الدفع</h6>
                        </div>
                        <div class="card-body">
                            <div class="detail-item">
                                <span class="detail-label"><i class='bx bx-wallet'></i> الحساب البنكي</span>
                                <span class="detail-value">{{ $visa->bank_account ?? '-' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

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