@extends('layouts.app')

@section('content')

<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <!-- Header with Search and Add Button -->
        <div class="flex justify-between items-center mb-6 gap-4">
            <div class="flex-1">
                <input 
                    type="text" 
                    id="searchInput" 
                    placeholder="{{ app()->getLocale() == 'ar' ? 'ابحث بالاسم أو الهاتف أو البريد...' : 'Search by name, phone or email...' }}"
                    class="w-full bg-[#111] border border-gray-700 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:border-[#d4af37] outline-none transition"
                >
            </div>
            <button 
                onclick="openAddModal()"
                class="px-6 py-2.5 bg-[#d4af37] text-black font-bold rounded-lg hover:bg-[#e8c547] transition whitespace-nowrap">
                + {{ app()->getLocale() == 'ar' ? 'إضافة شركة' : 'Add Company' }}
            </button>
        </div>

        <!-- Companies Table -->
        <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-hidden shadow-xl">
            <div class="overflow-x-auto">
                <table class="w-full text-right">
                    <thead class="bg-black/50 text-gray-400 text-xs uppercase sticky top-0">
                        <tr>
                            <th class="px-6 py-4 text-right">{{ app()->getLocale() == 'ar' ? '#' : '#' }}</th>
                            <th class="px-6 py-4 text-right">{{ app()->getLocale() == 'ar' ? 'اسم الشركة' : 'Company Name' }}</th>
                            <th class="px-6 py-4 text-right">{{ app()->getLocale() == 'ar' ? 'المسؤول' : 'Contact' }}</th>
                            <th class="px-6 py-4 text-right">{{ app()->getLocale() == 'ar' ? 'الجوال' : 'Phone' }}</th>
                            <th class="px-6 py-4 text-right">{{ app()->getLocale() == 'ar' ? 'البريد' : 'Email' }}</th>
                            <th class="px-6 py-4 text-right">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</th>
                            <th class="px-6 py-4 text-center">{{ app()->getLocale() == 'ar' ? 'العمليات' : 'Actions' }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800" id="companiesTable">
                        @php $index = ($companies->currentPage() - 1) * 15 + 1; @endphp
                        @foreach($companies as $company)
                        <tr class="hover:bg-white/5 transition-colors company-row" data-company="{{ strtolower($company->name) }} {{ strtolower($company->phone) }} {{ strtolower($company->email) }}">
                            <td class="px-6 py-4 text-sm text-gray-500">{{ $index++ }}</td>
                            <td class="px-6 py-4">
                                <div class="text-sm font-bold text-white">{{ $company->name }}</div>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-300">{{ $company->contact_person }}</td>
                            <td class="px-6 py-4 text-sm text-gray-400">{{ $company->phone }}</td>
                            <td class="px-6 py-4 text-sm text-gray-500">{{ $company->email }}</td>
                            <td class="px-6 py-4">
                                <span class="text-[10px] px-3 py-1 rounded-full font-bold
                                    {{ $company->is_active ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400' }}">
                                    {{ $company->is_active ? (app()->getLocale() == 'ar' ? '✓ نشط' : '✓ Active') : (app()->getLocale() == 'ar' ? '✕ معطل' : '✕ Inactive') }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-center text-xs space-x-2">
                                <a href="{{ route('admin.insurance-companies.edit', $company->id) }}" class="text-[#d4af37] hover:text-[#e8c547] font-bold transition">
                                    {{ app()->getLocale() == 'ar' ? '✏️ تعديل' : '✏️ Edit' }}
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="px-6 py-4 border-t border-gray-800 flex justify-between items-center bg-black/30">
                <div class="text-xs text-gray-500">
                    {{ app()->getLocale() == 'ar' ? 'إجمالي' : 'Total' }}: <span class="text-[#d4af37] font-bold">{{ $companies->total() }}</span> {{ app()->getLocale() == 'ar' ? 'شركة' : 'companies' }}
                </div>
                <div>
                    {{ $companies->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Company Modal -->
<div id="addModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
    <div class="bg-[#111] border border-gray-700 rounded-2xl p-6 max-h-screen overflow-y-auto" style="width: 850px;">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-bold text-[#d4af37]">{{ app()->getLocale() == 'ar' ? 'إضافة شركة تأمين جديدة' : 'Add New Insurance Company' }}</h3>
            <button onclick="closeAddModal()" class="text-gray-400 hover:text-white text-2xl">×</button>
        </div>

        <form action="{{ route('admin.insurance-companies.store') }}" method="POST" class="space-y-4">
            @csrf
            
            <div>
                <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'اسم الشركة' : 'Company Name' }} *</label>
                <input type="text" name="name" required class="w-full bg-black border border-gray-700 rounded-lg px-3 py-2 text-white focus:border-[#d4af37] outline-none">
            </div>

            <div>
                <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'مسؤول التواصل' : 'Contact Person' }} *</label>
                <input type="text" name="contact_person" required class="w-full bg-black border border-gray-700 rounded-lg px-3 py-2 text-white focus:border-[#d4af37] outline-none">
            </div>

            <div>
                <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'الجوال' : 'Phone' }} *</label>
                <input type="text" name="phone" required class="w-full bg-black border border-gray-700 rounded-lg px-3 py-2 text-white focus:border-[#d4af37] outline-none">
            </div>

            <div>
                <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'البريد الإلكتروني' : 'Email' }} *</label>
                <input type="email" name="email" required class="w-full bg-black border border-gray-700 rounded-lg px-3 py-2 text-white focus:border-[#d4af37] outline-none">
            </div>

            <div>
                <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</label>
                <select name="is_active" class="w-full bg-black border border-gray-700 rounded-lg px-3 py-2 text-white focus:border-[#d4af37] outline-none">
                    <option value="1">{{ app()->getLocale() == 'ar' ? '✓ نشط' : '✓ Active' }}</option>
                    <option value="0">{{ app()->getLocale() == 'ar' ? '✕ معطل' : '✕ Inactive' }}</option>
                </select>
            </div>

            <div class="flex gap-2 pt-4">
                <button type="submit" class="flex-1 px-4 py-2 bg-[#d4af37] text-black font-bold rounded-lg hover:bg-[#e8c547] transition">
                    {{ app()->getLocale() == 'ar' ? 'إضافة' : 'Add' }}
                </button>
                <button type="button" onclick="closeAddModal()" class="flex-1 px-4 py-2 bg-gray-700 text-white font-bold rounded-lg hover:bg-gray-600 transition">
                    {{ app()->getLocale() == 'ar' ? 'إلغاء' : 'Cancel' }}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openAddModal() {
    document.getElementById('addModal').classList.remove('hidden');
}

function closeAddModal() {
    document.getElementById('addModal').classList.add('hidden');
}

// Search functionality
document.getElementById('searchInput').addEventListener('keyup', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    const rows = document.querySelectorAll('.company-row');
    
    rows.forEach(row => {
        const text = row.getAttribute('data-company');
        row.style.display = text.includes(searchTerm) ? '' : 'none';
    });
});

// Close modal when clicking outside
document.getElementById('addModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeAddModal();
    }
});
</script>

@endsection