<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-l text-gray-800 leading-tight">
                {{ __('تفاصيل الشركة') }}: {{ $company->name }}
            </h2>
            <div class="flex space-y-2 space-y-reverse gap-2">
                <a href="{{ route('companies.manage-users', $company) }}"
                    class="inline-flex items-center p-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-s text-white uppercase tracking-widest hover:bg-blue-700 focus:bg-blue-700 active:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition ease-in-out duration-150 ml-2"
                    title="إدارة مستخدمي الشركة">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
                        <path
                            d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v1h8v-1zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
                    </svg>
                    {{ __('المستخدمون') }}
                </a>
                @permission('companies.edit')
                    <a href="{{ route('companies.edit', $company) }}"
                        class="inline-flex items-center p-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-s text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 ml-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20"
                            fill="currentColor">
                            <path
                                d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                        </svg>
                        {{ __('تعديل') }}
                    </a>
                @endpermission
                <a href="{{ route('companies.index') }}"
                    class="inline-flex items-center p-4 py-2 bg-gray-600 border border-transparent rounded-md font-semibold text-s text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20"
                        fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
                            clip-rule="evenodd" />
                    </svg>
                    {{ __('العودة') }}
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7l m-auto sm:p-6 lg:p-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <!-- معلومات الشركة الأساسية -->
                        <div class="md:col-span-2">
                            <div class="bg-white shadow overflow-hidden sm:rounded-lg">
                                <div class="p-4 py-5 sm:p-6 bg-gray-50">
                                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                                        {{ __('معلومات الشركة') }}
                                    </h3>
                                    <p class="mt-1 max-w-2l text-sm text-gray-500">
                                        {{ __('البيانات الأساسية للشركة') }}
                                    </p>
                                </div>
                                <div class="border-t border-gray-200">
                                    <dl>
                                        <div class="bg-gray-50 p-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
                                            <dt class="text-sm font-medium text-gray-500">
                                                {{ __('اسم الشركة') }}
                                            </dt>
                                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                                {{ $company->name }}
                                            </dd>
                                        </div>
                                        <div class="bg-white p-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
                                            <dt class="text-sm font-medium text-gray-500">
                                                {{ __('السجل التجاري') }}
                                            </dt>
                                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                                {{ $company->commercial_record }}
                                            </dd>
                                        </div>
                                        <div class="bg-gray-50 p-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
                                            <dt class="text-sm font-medium text-gray-500">
                                                {{ __('الرقم الضريبي') }}
                                            </dt>
                                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                                @if ($company->tax_number)
                                                    <span
                                                        class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                                                        <i class="fas fa-check-circle ml-1"></i>
                                                        {{ $company->tax_number }}
                                                    </span>
                                                @else
                                                    <span class="text-gray-400 italic">{{ __('غير محدد') }}</span>
                                                @endif
                                            </dd>
                                        </div>
                                        <div class="bg-white p-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
                                            <dt class="text-sm font-medium text-gray-500">
                                                {{ __('العنوان') }}
                                            </dt>
                                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                                {{ $company->address }}
                                            </dd>
                                        </div>
                                        <div class="bg-gray-50 p-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
                                            <dt class="text-sm font-medium text-gray-500">
                                                {{ __('رقم الهاتف') }}
                                            </dt>
                                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                                {{ $company->phone }}
                                            </dd>
                                        </div>
                                        <div class="bg-white p-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
                                            <dt class="text-sm font-medium text-gray-500">
                                                {{ __('البريد الإلكتروني') }}
                                            </dt>
                                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                                {{ $company->email }}
                                            </dd>
                                        </div>
                                        <div class="bg-gray-50 p-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
                                            <dt class="text-sm font-medium text-gray-500">
                                                {{ __('الموقع الإلكتروني') }}
                                            </dt>
                                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                                @if ($company->website)
                                                    <a href="{{ $company->website }}" target="_blank"
                                                        class="text-primary-600 hover:text-primary-900">
                                                        {{ $company->website }}
                                                    </a>
                                                @else
                                                    <span class="text-gray-400">{{ __('غير متوفر') }}</span>
                                                @endif
                                            </dd>
                                        </div>
                                        <div class="bg-white p-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
                                            <dt class="text-sm font-medium text-gray-500">
                                                {{ __('الحالة') }}
                                            </dt>
                                            <dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
                                                <span
                                                    class="p-2 inline-flex text-s leading-5 font-semibold rounded-full {{ $company->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                                    {{ $company->is_active ? __('مفعلة') : __('معطلة') }}
                                                </span>
                                            </dd>
                                        </div>
                                    </dl>
                                </div>
                            </div>
                        </div>

                        <!-- شعار الشركة والإحصائيات -->
                        <div>
                            <!-- شعار الشركة -->
                            <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
                                <div class="p-4 py-5 sm:p-6 bg-gray-50">
                                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                                        <i class="fas fa-image ml-2 text-blue-600"></i>
                                        {{ __('شعار الشركة') }}
                                    </h3>
                                </div>
                                <div class="border-t border-gray-200 p-4 flex justify-center min-h-48">
                                    @if ($company->logo)
                                        <img src="{{ asset('storage/' . $company->logo) }}" 
                                             alt="{{ $company->name }}"
                                             class="max-h-48 max-w-full object-contain rounded-lg shadow-sm hover:shadow-md transition-shadow">
                                    @else
                                        <span class="text-gray-400 italic">{{ __('لا يوجد شعار') }}</span>
                                    @endif
                                </div>
                            </div>

                            <!-- باقة الشركة -->
                            <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
                                <div class="p-4 py-5 sm:p-6 bg-gray-50">
                                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                                        <i class="fas fa-box ml-2 text-purple-600"></i>
                                        {{ __('باقة الاشتراك') }}
                                    </h3>
                                </div>
                                <div class="border-t border-gray-200 p-4">
                                    @php
                                        $subscription = $company->activeSubscription()->first();
                                    @endphp
                                    @if ($subscription)
                                        <dl class="space-y-4">
                                            <div class="flex justify-between items-center p-3 bg-purple-50 rounded-lg">
                                                <dt class="text-sm font-medium text-gray-600">{{ __('نوع الباقة') }}:
                                                </dt>
                                                <dd class="text-sm font-semibold text-purple-700">
                                                    {{ $subscription->plan_name ?? __('غير محدد') }}
                                                </dd>
                                            </div>
                                            <div class="flex justify-between items-center p-3 bg-blue-50 rounded-lg">
                                                <dt class="text-sm font-medium text-gray-600">
                                                    {{ __('حالة الاشتراك') }}:</dt>
                                                <dd>
                                                    <span
                                                        class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                                                        <span class="h-2 w-2 bg-green-500 rounded-full ml-2"></span>
                                                        {{ __('نشط') }}
                                                    </span>
                                                </dd>
                                            </div>
                                            <div class="flex justify-between items-center p-3 bg-amber-50 rounded-lg">
                                                <dt class="text-sm font-medium text-gray-600">
                                                    {{ __('تاريخ الانتهاء') }}:</dt>
                                                <dd class="text-sm font-semibold text-amber-700">
                                                    {{ $subscription->ends_at?->format('Y-m-d') ?? __('غير محدد') }}
                                                </dd>
                                            </div>
                                        </dl>
                                    @else
                                        <div class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                                            <p class="text-sm text-yellow-800">
                                                <i class="fas fa-exclamation-triangle ml-2"></i>
                                                {{ __('لا توجد باقة اشتراك نشطة حالياً') }}
                                            </p>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- إحصائيات الشركة -->
                            <div class="bg-white shadow overflow-hidden sm:rounded-lg">
                                <div class="p-4 py-5 sm:p-6 bg-gray-50">
                                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                                        <i class="fas fa-chart-bar ml-2 text-green-600"></i>
                                        {{ __('إحصائيات الشركة') }}
                                    </h3>
                                </div>
                                <div class="border-t border-gray-200">
                                    <dl>
                                        <div class="bg-gray-50 p-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
                                            <dt class="text-sm font-medium text-gray-500">
                                                {{ __('عدد الفروع') }}
                                            </dt>
                                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                                <span
                                                    class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-blue-100 text-blue-800 font-bold">
                                                    {{ $company->branches->count() }}
                                                </span>
                                            </dd>
                                        </div>
                                        <div class="bg-white p-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
                                            <dt class="text-sm font-medium text-gray-500">
                                                {{ __('عدد المستخدمين') }}
                                            </dt>
                                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                                <span
                                                    class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-green-100 text-green-800 font-bold">
                                                    {{ $company->users->count() }}
                                                </span>
                                            </dd>
                                        </div>
                                        <div class="bg-gray-50 p-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
                                            <dt class="text-sm font-medium text-gray-500">
                                                {{ __('تاريخ الإنشاء') }}
                                            </dt>
                                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                                <i class="fas fa-calendar ml-1 text-gray-400"></i>
                                                {{ $company->created_at->format('Y-m-d') }}
                                            </dd>
                                        </div>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
