@extends('layouts.app')

@section('title', 'عرض بيانات المؤسسة')

@push('styles')
<style>
    .page-header {
        background: linear-gradient(135deg, #00BCD4 0%, #4DD0E1 100%);
        border-radius: 1rem;
        padding: 1.5rem 2rem;
        margin-bottom: 1.5rem;
        color: white;
    }
    .info-card {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 4px 24px rgba(0,0,0,0.06);
        border: none;
        margin-bottom: 1.5rem;
    }
    .info-card .card-header {
        background: transparent;
        border-bottom: 1px solid #f1f1f1;
        padding: 1.25rem 1.5rem;
    }
    .info-card .card-header h5 {
        color: #00BCD4;
    }
    .info-row {
        display: flex;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f1f1f1;
    }
    .info-row:last-child { border-bottom: none; }
    .info-label {
        font-weight: 600;
        color: #566a7f;
        width: 200px;
        flex-shrink: 0;
    }
    .info-value { color: #697a8d; }
    .btn-primary {
        background: linear-gradient(135deg, #00BCD4 0%, #4DD0E1 100%);
        border: none;
    }
    .btn-primary:hover {
        background: linear-gradient(135deg, #00ACC1 0%, #00BCD4 100%);
    }
    .activity-item {
        padding: 1rem;
        border-bottom: 1px solid #f1f1f1;
    }
    .activity-item:last-child { border-bottom: none; }
    .activity-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 1rem;
    }
    .activity-icon.create { background: rgba(40, 199, 111, 0.15); color: #28c76f; }
    .activity-icon.update { background: rgba(255, 159, 67, 0.15); color: #ff9f43; }
    .activity-icon.delete { background: rgba(234, 84, 85, 0.15); color: #ea5455; }
    .password-display {
        font-family: monospace;
        background: #f8f9fa;
        padding: 0.25rem 0.75rem;
        border-radius: 4px;
        display: inline-block;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="page-header">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div>
                <h4><i class="bx bx-buildings"></i> {{ $institution->institution_name }}</h4>
                <p class="mb-0">عرض تفاصيل المؤسسة</p>
            </div>
            <div class="d-flex gap-2">
                @if(auth()->user()->hasPermission(\App\Models\Permission::EDIT_IQAMAS))
                <a href="{{ route('institutions.edit', $institution) }}" class="btn btn-light">
                    <i class="bx bx-edit"></i> تعديل
                </a>
                @endif
                <a href="{{ route('institutions.index') }}" class="btn btn-light">
                    <i class="bx bx-arrow-back"></i> العودة
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Basic Info -->
            <div class="card info-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bx bx-info-circle"></i> المعلومات الأساسية</h5>
                </div>
                <div class="card-body">
                    <div class="info-row">
                        <span class="info-label">اسم المؤسسة</span>
                        <span class="info-value">{{ $institution->institution_name ?: '-' }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">رقم المنشأ</span>
                        <span class="info-value">{{ $institution->establishment_number ?: '-' }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">الرقم الموحد</span>
                        <span class="info-value">{{ $institution->unified_number ?: '-' }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">رقم التامينات</span>
                        <span class="info-value">{{ $institution->insurance_number ?: '-' }}</span>
                    </div>
                </div>
            </div>

            <!-- Chamber of Commerce -->
            <div class="card info-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bx bx-building-house"></i> بيانات الغرفة التجارية</h5>
                </div>
                <div class="card-body">
                    <div class="info-row">
                        <span class="info-label">اسم المستخدم</span>
                        <span class="info-value">{{ $institution->chamber_username ?: '-' }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">كلمة المرور</span>
                        <span class="info-value">
                            @if($institution->chamber_password)
                            <span class="password-display">{{ $institution->chamber_password }}</span>
                            @else
                            -
                            @endif
                        </span>
                    </div>
                </div>
            </div>

            <!-- Notes -->
            @if($institution->notes)
            <div class="card info-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bx bx-note"></i> ملاحظات</h5>
                </div>
                <div class="card-body">
                    <p class="mb-0">{{ $institution->notes }}</p>
                </div>
            </div>
            @endif
        </div>

        <div class="col-lg-4">
            <!-- Activity Log -->
            <div class="card info-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bx bx-history"></i> سجل النشاطات</h5>
                </div>
                <div class="card-body p-0">
                    @forelse($activities as $activity)
                    <div class="activity-item d-flex">
                        <div class="activity-icon {{ $activity->action }}">
                            @if($activity->action == 'create')
                                <i class="bx bx-plus"></i>
                            @elseif($activity->action == 'update')
                                <i class="bx bx-edit"></i>
                            @else
                                <i class="bx bx-trash"></i>
                            @endif
                        </div>
                        <div class="flex-grow-1">
                            <div class="fw-semibold">{{ $activity->description }}</div>
                            <small class="text-muted">
                                {{ $activity->performer->name ?? 'النظام' }} -
                                {{ $activity->created_at->diffForHumans() }}
                            </small>
                        </div>
                    </div>
                    @empty
                    <div class="p-4 text-center text-muted">
                        <i class="bx bx-history fs-2"></i>
                        <p class="mb-0 mt-2">لا توجد نشاطات</p>
                    </div>
                    @endforelse
                </div>
            </div>

            <!-- Dates -->
            <div class="card info-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bx bx-calendar"></i> التواريخ</h5>
                </div>
                <div class="card-body">
                    <div class="info-row">
                        <span class="info-label">تاريخ الإضافة</span>
                        <span class="info-value">{{ $institution->created_at->format('Y-m-d H:i') }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">آخر تحديث</span>
                        <span class="info-value">{{ $institution->updated_at->format('Y-m-d H:i') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection