@extends('layouts.app')
@section('title', 'إدارة العملاء')
@section('page_title', 'إدارة العملاء (المستأجرون)')

@section('content')
<div class="flex items-center justify-between mb-6">
    <h3 class="text-lg font-bold text-slate-800 dark:text-white">قائمة العملاء</h3>
    <a href="{{ route('owner.tenant.create') }}" class="flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white px-5 py-2.5 rounded-xl font-semibold text-sm transition-colors shadow-sm">
        <i class="fa-solid fa-plus"></i>
        عميل جديد
    </a>
</div>

<div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200 dark:border-slate-700">
                    <th class="text-right px-6 py-4 text-xs font-semibold text-slate-500 uppercase">العميل</th>
                    <th class="text-right px-6 py-4 text-xs font-semibold text-slate-500 uppercase">الاشتراك</th>
                    <th class="text-right px-6 py-4 text-xs font-semibold text-slate-500 uppercase">المستخدمون</th>
                    <th class="text-right px-6 py-4 text-xs font-semibold text-slate-500 uppercase">الفواتير</th>
                    <th class="text-right px-6 py-4 text-xs font-semibold text-slate-500 uppercase">الحالة</th>
                    <th class="text-right px-6 py-4 text-xs font-semibold text-slate-500 uppercase">الإجراءات</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                @forelse($tenants as $tenant)
                <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors">
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-3">
                            <div class="h-10 w-10 bg-amber-100 dark:bg-amber-900/30 rounded-xl flex items-center justify-center">
                                <i class="fa-solid fa-building text-amber-600 dark:text-amber-400"></i>
                            </div>
                            <div>
                                <p class="font-bold text-sm text-slate-800 dark:text-white">{{ $tenant->name }}</p>
                                <p class="text-xs text-slate-400">{{ $tenant->currency }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-xs font-semibold px-2 py-0.5 rounded-lg {{ $tenant->subscription_status === 'active' ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">
                            {{ match($tenant->subscription_status) { 'active'=>'نشط', 'trial'=>'تجريبي', 'expired'=>'منتهي', default=>$tenant->subscription_status } }}
                        </span>
                        @if($tenant->subscription_expires_at)
                        <p class="text-xs text-slate-400 mt-1">{{ $tenant->subscription_expires_at->format('d/m/Y') }}</p>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-sm text-slate-600 dark:text-slate-400">{{ $tenant->users_count }}</td>
                    <td class="px-6 py-4 text-sm text-slate-600 dark:text-slate-400">{{ $tenant->sales_invoices_count }}</td>
                    <td class="px-6 py-4">
                        <span class="text-xs font-semibold px-2.5 py-1 rounded-lg {{ $tenant->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700' }}">
                            {{ $tenant->is_active ? 'مفعّل' : 'معطّل' }}
                        </span>
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-2">
                            <a href="{{ route('owner.impersonate', $tenant->id) }}" class="p-2 text-amber-500 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg transition-colors" title="تصفح باسمه">
                                <i class="fa-solid fa-mask text-sm"></i>
                            </a>
                            <form action="{{ route('owner.tenant.toggle', $tenant->id) }}" method="POST" class="inline">
                                @csrf
                                <button type="submit" class="p-2 text-slate-400 hover:text-{{ $tenant->is_active ? 'red' : 'emerald' }}-600 hover:bg-{{ $tenant->is_active ? 'red' : 'emerald' }}-50 dark:hover:bg-{{ $tenant->is_active ? 'red' : 'emerald' }}-900/20 rounded-lg transition-colors">
                                    <i class="fa-solid {{ $tenant->is_active ? 'fa-ban' : 'fa-circle-check' }} text-sm"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="6" class="py-16 text-center text-slate-400">لا يوجد عملاء بعد</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="px-6 py-4 border-t border-slate-100 dark:border-slate-700">{{ $tenants->links() }}</div>
</div>
@endsection