@extends('companies.layout')

@section('company-content')
<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="px-6 py-4 border-b flex justify-between items-center">
        <h3 class="text-lg font-medium text-gray-900">Listado de Empresas</h3>
        <a href="{{ route('companies.create') }}" class="btn btn-primary">
            <flux:icon.plus class="w-4 h-4 mr-1"/> Nueva Empresa
        </a>
    </div>
    
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre Comercial</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CIF</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($companies as $company)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            @if($company->logo)
                                <img src="{{ Storage::disk('public')->url($company->logo) }}" 
                                     alt="{{ $company->name }}" 
                                     class="w-10 h-10 rounded-full object-cover mr-3">
                            @else
                                <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10 mr-3"></div>
                            @endif
                            <div>
                                <div class="font-medium text-gray-900">{{ $company->name }}</div>
                                <div class="text-sm text-gray-500">{{ $company->email }}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-gray-500">
                        {{ $company->commercial_name }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $company->status_color }}">
                            {{ $company->status_text }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-gray-500">
                        {{ $company->cif }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div class="flex space-x-2">
                            <a href="{{ route('companies.show', $company) }}" 
                               class="text-blue-600 hover:text-blue-900"
                               title="Ver detalles">
                                <flux:icon.eye class="w-5 h-5"/>
                            </a>
                            <a href="{{ route('companies.edit', $company) }}" 
                               class="text-yellow-600 hover:text-yellow-900"
                               title="Editar">
                                <flux:icon.pencil class="w-5 h-5"/>
                            </a>
                            <form action="{{ route('companies.destroy', $company) }}" method="POST"
                                  onsubmit="return confirm('¿Estás seguro de eliminar esta empresa?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600 hover:text-red-900"
                                        title="Eliminar">
                                    <flux:icon.trash class="w-5 h-5"/>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="px-6 py-4 text-center text-gray-500">
                        No se han encontrado empresas
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    <div class="px-6 py-4 border-t">
        {{ $companies->links() }}
    </div>
</div>
@endsection