@extends('layouts.app')

@section('title', 'Empresas / EESS')

@section('content')
<div class="page-header">
    <h1 class="page-title">Directorio de Empresas (Clientes)</h1>
    <a href="{{ route('empresas.create') }}" class="btn btn-primary"><i class="fa-solid fa-plus"></i> Nueva Empresa</a>
</div>

@if(session('success'))
    <div style="background: rgba(35, 134, 54, 0.2); color: #3fb950; padding: 12px; border-radius: 8px; margin-bottom: 20px; border: 1px solid rgba(35, 134, 54, 0.4);">
        <i class="fa-solid fa-check-circle"></i> {{ session('success') }}
    </div>
@endif

<div class="card">
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>RUC</th>
                <th>Razón Social</th>
                <th>Contacto</th>
                <th>Estado</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            @forelse($empresas as $empresa)
            <tr>
                <td>{{ $empresa->id }}</td>
                <td><strong>{{ $empresa->ruc }}</strong></td>
                <td>{{ $empresa->razon_social }}</td>
                <td>
                    <div style="font-size: 0.85rem;">
                        <i class="fa-solid fa-user" style="color: var(--text-muted); width: 15px;"></i> {{ $empresa->responsable ?? 'N/A' }}<br>
                        <i class="fa-solid fa-phone" style="color: var(--text-muted); width: 15px;"></i> {{ $empresa->telefono ?? 'N/A' }}
                    </div>
                </td>
                <td>
                    @if($empresa->estado == 'ACTIVO')
                        <span class="badge badge-success">ACTIVO</span>
                    @else
                        <span class="badge badge-danger">INACTIVO</span>
                    @endif
                </td>
                <td>
                    <a href="{{ route('empresas.edit', $empresa->id) }}" class="btn btn-primary" style="padding: 6px 12px; font-size: 0.8rem; background: var(--bg-body); border: 1px solid var(--border-color);"><i class="fa-solid fa-pen"></i> Editar</a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6" style="text-align: center; color: var(--text-muted); padding: 30px;">
                    <i class="fa-solid fa-building" style="font-size: 2rem; margin-bottom: 10px;"></i>
                    <p>No hay empresas registradas aún.</p>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<style>
    .table { width: 100%; border-collapse: collapse; }
    .table th, .table td { padding: 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
    .table th { font-weight: 600; color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; background: rgba(0,0,0,0.1); }
    .table tr:hover { background: rgba(255,255,255,0.02); }
    .table tr:last-child td { border-bottom: none; }
    .badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
    .badge-success { background: rgba(35, 134, 54, 0.2); color: #3fb950; }
    .badge-danger { background: rgba(248, 81, 73, 0.2); color: var(--danger); }
</style>
@endsection
