@extends('layouts.app')

@section('title', 'Detalhes do Estabelecimento - ' . $estabelecimento->code)

@section('content')
<div class="sinagem-main">
    <div class="s-card">
        <div class="s-card-header">
            <h4 class="s-card-title">
                <i class="fas fa-store"></i>
                Detalhes do Estabelecimento: {{ $estabelecimento->code }}
            </h4>
            <div class="d-flex gap-2">
                <a href="{{ route('mercado.estabelecimentos.edit', $estabelecimento) }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-edit"></i>
                    Editar
                </a>
                <a href="{{ route('mercado.estabelecimentos.index') }}" class="btn btn-outline-primary btn-sm">
                    <i class="fas fa-arrow-left"></i>
                    Voltar
                </a>
            </div>
        </div>

        <div class="s-card-body">
            <div class="row">
                <div class="col-md-6">
                    <!-- Informações Básicas -->
                    <div class="info-section">
                        <h5 class="info-section-title">
                            <i class="fas fa-info-circle"></i>
                            Informações Básicas
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Código</th>
                                <td><strong>{{ $estabelecimento->code }}</strong></td>
                            </tr>
                            <tr>
                                <th>Comerciante</th>
                                <td>
                                    <a href="{{ route('mercado.comerciantes.show', $estabelecimento->merchant) }}" class="text-decoration-none">
                                        {{ $estabelecimento->merchant->full_name ?? '-' }}
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <th>Mercado</th>
                                <td>{{ $estabelecimento->market->name ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Localização</th>
                                <td>{{ $estabelecimento->market->location ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Seção / Setor</th>
                                <td>{{ $estabelecimento->section ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Tamanho</th>
                                <td>{{ $estabelecimento->size ? number_format($estabelecimento->size, 2, ',', '.') . ' m²' : '-' }}</td>
                            </tr>
                            <tr>
                                <th>Bancada</th>
                                <td>{{ $estabelecimento->stall->code ?? '-' }}</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Status -->
                    <div class="info-section">
                        <h5 class="info-section-title">
                            <i class="fas fa-chart-line"></i>
                            Status
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Status Atual</th>
                                <td>
                                    @php
                                        $statusClasses = [
                                            'active' => 'badge-success',
                                            'inactive' => 'badge-danger',
                                            'suspended' => 'badge-warning',
                                            'pending' => 'badge-info',
                                        ];
                                        $statusTexts = [
                                            'active' => 'Ativo',
                                            'inactive' => 'Inativo',
                                            'suspended' => 'Suspenso',
                                            'pending' => 'Pendente',
                                        ];
                                        $statusIcons = [
                                            'active' => 'fa-check-circle',
                                            'inactive' => 'fa-times-circle',
                                            'suspended' => 'fa-ban',
                                            'pending' => 'fa-clock',
                                        ];
                                    @endphp
                                    <span class="badge {{ $statusClasses[$estabelecimento->status] ?? 'badge-neutral' }}">
                                        <i class="fas {{ $statusIcons[$estabelecimento->status] ?? 'fa-question-circle' }}"></i>
                                        {{ $statusTexts[$estabelecimento->status] ?? ucfirst($estabelecimento->status) }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <th>Cadastrado em</th>
                                <td>{{ $estabelecimento->created_at ? $estabelecimento->created_at->format('d/m/Y H:i') : '-' }}</td>
                            </tr>
                            <tr>
                                <th>Última atualização</th>
                                <td>{{ $estabelecimento->updated_at ? $estabelecimento->updated_at->format('d/m/Y H:i') : '-' }}</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Contato -->
                    <div class="info-section">
                        <h5 class="info-section-title">
                            <i class="fas fa-address-card"></i>
                            Contato
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Telefone</th>
                                <td>{{ $estabelecimento->phone ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Email</th>
                                <td>{{ $estabelecimento->email ?? '-' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="col-md-6">
                    <!-- Funcionamento -->
                    <div class="info-section">
                        <h5 class="info-section-title">
                            <i class="fas fa-clock"></i>
                            Funcionamento
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Horário</th>
                                <td>
                                    @if($estabelecimento->opening_time && $estabelecimento->closing_time)
                                        {{ date('H:i', strtotime($estabelecimento->opening_time)) }} - {{ date('H:i', strtotime($estabelecimento->closing_time)) }}
                                    @else
                                        Horário não definido
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>Dias de Funcionamento</th>
                                <td>
                                    @if($estabelecimento->days_operation)
                                        @php
                                            $daysLabels = [
                                                'segunda' => 'Segunda',
                                                'terca' => 'Terça',
                                                'quarta' => 'Quarta',
                                                'quinta' => 'Quinta',
                                                'sexta' => 'Sexta',
                                                'sabado' => 'Sábado',
                                                'domingo' => 'Domingo'
                                            ];
                                        @endphp
                                        <div class="d-flex flex-wrap gap-1">
                                            @foreach($estabelecimento->days_operation as $day)
                                                <span class="badge badge-info">{{ $daysLabels[$day] ?? $day }}</span>
                                            @endforeach
                                        </div>
                                    @else
                                        Não definido
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>Status de Funcionamento</th>
                                <td>
                                    @if($estabelecimento->isOpenNow())
                                        <span class="badge badge-success">
                                            <i class="fas fa-check-circle"></i> Aberto agora
                                        </span>
                                    @else
                                        <span class="badge badge-danger">
                                            <i class="fas fa-times-circle"></i> Fechado
                                        </span>
                                    @endif
                                </td>
                            </tr>
                        </table>
                    </div>

                    <!-- Descrição -->
                    @if($estabelecimento->description)
                    <div class="info-section">
                        <h5 class="info-section-title">
                            <i class="fas fa-align-left"></i>
                            Descrição
                        </h5>
                        <p class="description-text">{{ $estabelecimento->description }}</p>
                    </div>
                    @endif

                    <!-- Metadados -->
                    @if($estabelecimento->metadata)
                    <div class="info-section">
                        <h5 class="info-section-title">
                            <i class="fas fa-database"></i>
                            Metadados
                        </h5>
                        <pre class="metadata-pre">{{ json_encode($estabelecimento->metadata, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Funcionários -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="info-section">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <h5 class="info-section-title" style="margin-bottom: 0;">
                                    <i class="fas fa-users"></i>
                                    Funcionários
                                </h5>
                            </div>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addEmployeeModal">
                                    <i class="fas fa-user-plus"></i>
                                    Adicionar Funcionário
                                </button>
                            </div>
                        </div>

                        <!-- Estatísticas de Funcionários -->
                        @php
                            $totalEmployees = $estabelecimento->employees->count();
                            $activeEmployees = $estabelecimento->employees->where('status', 'active')->count();
                            $inactiveEmployees = $estabelecimento->employees->where('status', 'inactive')->count();
                            $suspendedEmployees = $estabelecimento->employees->where('status', 'suspended')->count();
                            $terminatedEmployees = $estabelecimento->employees->where('status', 'terminated')->count();
                        @endphp

                        <div class="employee-stats mb-3">
                            <div class="row g-2">
                                <div class="col-md-2 col-6">
                                    <div class="stat-mini-card">
                                        <span class="stat-mini-number">{{ $totalEmployees }}</span>
                                        <span class="stat-mini-label">Total</span>
                                    </div>
                                </div>
                                <div class="col-md-2 col-6">
                                    <div class="stat-mini-card stat-mini-active">
                                        <span class="stat-mini-number">{{ $activeEmployees }}</span>
                                        <span class="stat-mini-label">Ativos</span>
                                    </div>
                                </div>
                                <div class="col-md-2 col-6">
                                    <div class="stat-mini-card stat-mini-inactive">
                                        <span class="stat-mini-number">{{ $inactiveEmployees }}</span>
                                        <span class="stat-mini-label">Inativos</span>
                                    </div>
                                </div>
                                <div class="col-md-2 col-6">
                                    <div class="stat-mini-card stat-mini-suspended">
                                        <span class="stat-mini-number">{{ $suspendedEmployees }}</span>
                                        <span class="stat-mini-label">Suspensos</span>
                                    </div>
                                </div>
                                <div class="col-md-2 col-6">
                                    <div class="stat-mini-card stat-mini-terminated">
                                        <span class="stat-mini-number">{{ $terminatedEmployees }}</span>
                                        <span class="stat-mini-label">Desligados</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if($estabelecimento->employees && $estabelecimento->employees->count() > 0)
                        <div class="table-responsive">
                            <table class="s-table">
                                <thead>
                                    <tr>
                                        <th>Nome</th>
                                        <th>Cargo</th>
                                        <th>Tipo</th>
                                        <th>Telefone</th>
                                        <th>Status</th>
                                        <th class="text-center">Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($estabelecimento->employees as $employee)
                                    <tr>
                                        <td>
                                            <a href="#" class="text-decoration-none" onclick="event.preventDefault(); loadEmployeeDetails({{ $employee->id }})">
                                                <strong>{{ $employee->full_name }}</strong>
                                            </a>
                                        </td>
                                        <td>{{ $employee->position }}</td>
                                        <td>
                                            @php
                                                $employeeTypeTexts = [
                                                    'manager' => 'Gerente',
                                                    'supervisor' => 'Supervisor',
                                                    'seller' => 'Vendedor',
                                                    'cashier' => 'Caixa',
                                                    'assistant' => 'Auxiliar',
                                                    'other' => 'Outro',
                                                ];
                                            @endphp
                                            {{ $employeeTypeTexts[$employee->employee_type] ?? $employee->employee_type }}
                                        </td>
                                        <td>{{ $employee->phone ?? '-' }}</td>
                                        <td>
                                            @php
                                                $empStatusClasses = [
                                                    'active' => 'badge-success',
                                                    'inactive' => 'badge-danger',
                                                    'suspended' => 'badge-warning',
                                                    'terminated' => 'badge-danger',
                                                ];
                                                $empStatusTexts = [
                                                    'active' => 'Ativo',
                                                    'inactive' => 'Inativo',
                                                    'suspended' => 'Suspenso',
                                                    'terminated' => 'Desligado',
                                                ];
                                            @endphp
                                            <span class="badge {{ $empStatusClasses[$employee->status] ?? 'badge-neutral' }}">
                                                {{ $empStatusTexts[$employee->status] ?? ucfirst($employee->status) }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <div class="d-flex gap-1 justify-content-center">
                                                <button type="button" class="btn-action btn-view" title="Ver Detalhes" onclick="loadEmployeeDetails({{ $employee->id }})">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                @if($employee->status !== 'terminated')
                                                <button type="button" class="btn-action btn-edit" title="Editar" onclick="editEmployee({{ $employee->id }})">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                @endif
                                                @if($employee->status === 'active')
                                                <form action="{{ route('mercado.funcionarios.terminate', $employee) }}" method="POST" class="d-inline" onsubmit="return confirm('Tem certeza que deseja desligar este funcionário?')">
                                                    @csrf
                                                    <button type="submit" class="btn-action btn-danger" title="Desligar">
                                                        <i class="fas fa-user-times"></i>
                                                    </button>
                                                </form>
                                                @endif
                                                @if($employee->status === 'terminated')
                                                <form action="{{ route('mercado.funcionarios.reactivate', $employee) }}" method="POST" class="d-inline" onsubmit="return confirm('Tem certeza que deseja reativar este funcionário?')">
                                                    @csrf
                                                    <button type="submit" class="btn-action btn-success" title="Reativar">
                                                        <i class="fas fa-user-check"></i>
                                                    </button>
                                                </form>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @else
                        <div class="empty-state">
                            <i class="fas fa-user-slash fa-3x text-muted mb-3"></i>
                            <h6 class="text-muted">Nenhum funcionário cadastrado</h6>
                            <p class="text-muted small">Adicione o primeiro funcionário ao estabelecimento.</p>
                            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addEmployeeModal">
                                <i class="fas fa-user-plus"></i>
                                Adicionar Funcionário
                            </button>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('modals')
<!-- Modal para Adicionar Funcionário -->
<div class="modal fade" id="addEmployeeModal" tabindex="-1" aria-labelledby="addEmployeeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addEmployeeModalLabel">
                    <i class="fas fa-user-plus"></i>
                    Adicionar Funcionário
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('mercado.funcionarios.store') }}" method="POST">
                @csrf
                <input type="hidden" name="establishment_id" value="{{ $estabelecimento->id }}">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="full_name" class="form-label">Nome Completo <span class="required">*</span></label>
                                <input type="text" class="form-control" id="full_name" name="full_name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="position" class="form-label">Cargo <span class="required">*</span></label>
                                <input type="text" class="form-control" id="position" name="position" placeholder="Ex: Vendedor" required>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="identity_type" class="form-label">Tipo de Identidade <span class="required">*</span></label>
                                <select class="form-control" id="identity_type" name="identity_type" required>
                                    <option value="BI">Bilhete de Identidade</option>
                                    <option value="Passaporte">Passaporte</option>
                                    <option value="Outro">Outro</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="identity_number" class="form-label">Número de Identidade <span class="required">*</span></label>
                                <input type="text" class="form-control" id="identity_number" name="identity_number" required>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="phone" class="form-label">Telefone <span class="required">*</span></label>
                                <input type="text" class="form-control" id="phone" name="phone" placeholder="+244 923 456 789" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="email" name="email" placeholder="funcionario@email.com">
                            </div>
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employee_type" class="form-label">Tipo de Funcionário <span class="required">*</span></label>
                                <select class="form-control" id="employee_type" name="employee_type" required>
                                    <option value="seller">Vendedor</option>
                                    <option value="manager">Gerente</option>
                                    <option value="supervisor">Supervisor</option>
                                    <option value="cashier">Caixa</option>
                                    <option value="assistant">Auxiliar</option>
                                    <option value="other">Outro</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="hire_date" class="form-label">Data de Contratação <span class="required">*</span></label>
                                <input type="date" class="form-control" id="hire_date" name="hire_date" required>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="card_number" class="form-label">Número do Cartão</label>
                                <input type="text" class="form-control" id="card_number" name="card_number" value="{{ old('card_number') }}" placeholder="Número do cartão RFID">
                                <small class="text-muted">Número do cartão RFID do funcionário (opcional)</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="birth_date" class="form-label">Data de Nascimento</label>
                                <input type="date" class="form-control" id="birth_date" name="birth_date" value="{{ old('birth_date') }}">
                            </div>
                        </div>
                    </div>
                    <!-- Impostos e Benefícios -->
<div class="row g-3 mt-3">
    <div class="col-12">
        <h6 class="section-subtitle">
            <i class="fas fa-file-invoice"></i> Impostos e Benefícios
        </h6>
        <hr>
    </div>
    
    <!-- Impostos -->
    <div class="col-md-6">
        <div class="form-group">
            <label class="form-label fw-bold">Impostos</label>
            <div class="d-flex flex-wrap gap-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="benefits_inss" name="benefits[inss]" value="1">
                    <label class="form-check-label" for="benefits_inss">
                        <i class="fas fa-percent text-primary"></i> INSS
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="benefits_irt" name="benefits[irt]" value="1">
                    <label class="form-check-label" for="benefits_irt">
                        <i class="fas fa-percent text-warning"></i> IRT
                    </label>
                </div>
            </div>
            <small class="text-muted">Marque os impostos aplicáveis ao funcionário</small>
        </div>
    </div>
    
    <!-- Benefícios -->
    <div class="col-md-6">
        <div class="form-group">
            <label class="form-label fw-bold">Benefícios</label>
            <div class="d-flex flex-wrap gap-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="benefits_health_insurance" name="benefits[health_insurance]" value="1">
                    <label class="form-check-label" for="benefits_health_insurance">
                        <i class="fas fa-heartbeat text-success"></i> Seguro Saúde
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="benefits_meal_voucher" name="benefits[meal_voucher]" value="1">
                    <label class="form-check-label" for="benefits_meal_voucher">
                        <i class="fas fa-utensils text-info"></i> Vale Refeição
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="benefits_transport_voucher" name="benefits[transport_voucher]" value="1">
                    <label class="form-check-label" for="benefits_transport_voucher">
                        <i class="fas fa-bus text-warning"></i> Vale Transporte
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="benefits_bonus" name="benefits[bonus]" value="1">
                    <label class="form-check-label" for="benefits_bonus">
                        <i class="fas fa-gift text-danger"></i> Bônus
                    </label>
                </div>
            </div>
            <small class="text-muted">Marque os benefícios oferecidos ao funcionário</small>
        </div>
    </div>
</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times"></i> Cancelar
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Salvar Funcionário
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal para Visualizar Funcionário -->
<div class="modal fade" id="employeeDetailsModal" tabindex="-1" aria-labelledby="employeeDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="employeeDetailsModalLabel">
                    <i class="fas fa-user"></i>
                    Detalhes do Funcionário
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="employeeDetailsContent">
                <div class="text-center py-4">
                    <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
                    <p class="mt-2">Carregando...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Fechar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Editar Funcionário -->
<div class="modal fade" id="editEmployeeModal" tabindex="-1" aria-labelledby="editEmployeeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editEmployeeModalLabel">
                    <i class="fas fa-edit"></i>
                    Editar Funcionário
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="editEmployeeContent">
                <div class="text-center py-4">
                    <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
                    <p class="mt-2">Carregando...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Cancelar
                </button>
                <button type="button" class="btn btn-primary" id="updateEmployeeBtn">
                    <i class="fas fa-save"></i> Atualizar Funcionário
                </button>
            </div>
        </div>
    </div>
</div>
@endpush

@push('styles')
<style>
    .info-section {
        margin-bottom: 1.5rem;
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1rem;
    }

    .info-section-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: #1a1a2e;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e03030;
        display: inline-block;
    }

    .info-section-title i {
        color: #e03030;
        margin-right: 0.5rem;
    }

    .info-table {
        width: 100%;
        border-collapse: collapse;
    }

    .info-table tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .info-table tr:last-child {
        border-bottom: none;
    }

    .info-table th {
        width: 35%;
        padding: 0.5rem 0.5rem 0.5rem 0;
        font-size: 0.8rem;
        font-weight: 600;
        color: #6b7280;
        text-align: left;
    }

    .info-table td {
        padding: 0.5rem 0;
        font-size: 0.85rem;
        color: #1a1a2e;
    }

    .description-text {
        font-size: 0.9rem;
        line-height: 1.6;
        color: #4a5568;
        margin: 0;
        white-space: pre-wrap;
    }

    .metadata-pre {
        background: #e9ecef;
        padding: 1rem;
        border-radius: 6px;
        font-size: 0.7rem;
        overflow-x: auto;
        color: #6b7280;
        margin: 0;
        max-height: 200px;
    }

    .empty-state {
        text-align: center;
        padding: 2rem;
        background: #f8f9fa;
        border-radius: 10px;
    }

    .empty-state i {
        display: block;
        margin-bottom: 0.5rem;
    }

    /* Employee Stats */
    .employee-stats {
        margin-top: 0.5rem;
    }

    .stat-mini-card {
        background: #fff;
        border-radius: 8px;
        padding: 0.75rem 0.5rem;
        text-align: center;
        border: 1px solid #e5e7eb;
        transition: all 0.2s ease;
    }

    .stat-mini-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .stat-mini-number {
        display: block;
        font-size: 1.2rem;
        font-weight: 700;
        color: #1a1a2e;
    }

    .stat-mini-label {
        display: block;
        font-size: 0.65rem;
        color: #6b7280;
        margin-top: 0.1rem;
    }

    .stat-mini-active .stat-mini-number {
        color: #28a745;
    }

    .stat-mini-inactive .stat-mini-number {
        color: #6c757d;
    }

    .stat-mini-suspended .stat-mini-number {
        color: #ffc107;
    }

    .stat-mini-terminated .stat-mini-number {
        color: #dc3545;
    }

    .badge {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
        font-weight: 500;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }

    .badge-success {
        background-color: #d4edda;
        color: #155724;
    }

    .badge-danger {
        background-color: #f8d7da;
        color: #721c24;
    }

    .badge-warning {
        background-color: #fff3cd;
        color: #856404;
    }

    .badge-info {
        background-color: #cce5ff;
        color: #004085;
    }

    .badge-neutral {
        background-color: #e2e3e5;
        color: #383d41;
    }

    .s-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
    }

    .s-table thead th {
        background: #f8fafc;
        padding: 0.75rem 1rem;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #9ca3af;
        border-bottom: 2px solid #e5e7eb;
    }

    .s-table tbody td {
        padding: 0.75rem 1rem;
        color: #6b7280;
        border-bottom: 1px solid #f1f5f9;
    }

    .s-table tbody tr:last-child td {
        border-bottom: none;
    }

    .s-table tbody tr:hover {
        background-color: #f8f9fa;
    }

    .btn-action {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        transition: all 0.15s ease;
        cursor: pointer;
        text-decoration: none;
        background: transparent;
        color: #6c757d;
    }

    .btn-action:hover {
        transform: scale(1.1);
    }

    .btn-view {
        color: #0d6efd;
    }

    .btn-view:hover {
        background: #e3f2fd;
        color: #0d6efd;
    }

    .btn-edit {
        color: #ffc107;
    }

    .btn-edit:hover {
        background: #fff3cd;
        color: #ffc107;
    }

    .btn-delete {
        color: #dc3545;
    }

    .btn-delete:hover {
        background: #f8d7da;
        color: #dc3545;
    }

    .btn-danger {
        color: #dc3545;
    }

    .btn-danger:hover {
        background: #f8d7da;
        color: #dc3545;
    }

    .btn-success {
        color: #28a745;
    }

    .btn-success:hover {
        background: #d4edda;
        color: #28a745;
    }

    .form-group {
        margin-bottom: 0.5rem;
    }

    .form-group label {
        font-weight: 500;
        font-size: 0.85rem;
        color: #495057;
        margin-bottom: 0.2rem;
    }

    .required {
        color: #dc3545;
        margin-left: 0.125rem;
    }

    .modal-lg {
        max-width: 800px;
    }

    .form-control:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    }

    @media (max-width: 768px) {
        .s-card-header {
            flex-direction: column;
            align-items: stretch;
            gap: 0.5rem;
        }

        .s-card-header .d-flex {
            flex-wrap: wrap;
        }

        .s-card-header .d-flex .btn {
            flex: 1;
            min-width: 80px;
        }

        .info-table th,
        .info-table td {
            display: block;
            width: 100%;
            padding: 0.25rem 0;
        }

        .info-table th {
            padding-top: 0.5rem;
        }

        .info-table td {
            padding-bottom: 0.5rem;
        }

        .modal-lg {
            max-width: 100%;
            margin: 0.5rem;
        }

        .stat-mini-card {
            padding: 0.5rem;
        }

        .stat-mini-number {
            font-size: 1rem;
        }
    }
</style>
@endpush

@push('scripts')
<script>
function loadEmployeeDetails(employeeId) {
    const modal = new bootstrap.Modal(document.getElementById('employeeDetailsModal'));
    const content = document.getElementById('employeeDetailsContent');
    
    content.innerHTML = `
        <div class="text-center py-4">
            <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
            <p class="mt-2">Carregando...</p>
        </div>
    `;
    
    modal.show();
    
    // Buscar dados do funcionário via AJAX
    fetch(`/sinagem/public/mercado/funcionarios/${employeeId}/details`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                content.innerHTML = data.html;
            } else {
                content.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle"></i>
                        Erro ao carregar dados do funcionário.
                    </div>
                `;
            }
        })
        .catch(error => {
            content.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-circle"></i>
                    Erro ao carregar dados do funcionário: ${error.message}
                </div>
            `;
        });
}

function editEmployee(employeeId) {
    const modal = new bootstrap.Modal(document.getElementById('editEmployeeModal'));
    const content = document.getElementById('editEmployeeContent');
    const updateBtn = document.getElementById('updateEmployeeBtn');
    
    content.innerHTML = `
        <div class="text-center py-4">
            <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
            <p class="mt-2">Carregando...</p>
        </div>
    `;
    updateBtn.style.display = 'inline-flex';
    updateBtn.disabled = true;
    
    modal.show();
    
    fetch(`/sinagem/public/mercado/funcionarios/${employeeId}/edit-modal`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Erro na requisição');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                content.innerHTML = data.html;
                updateBtn.disabled = false;
                updateBtn.onclick = function() {
                    const form = document.getElementById('editEmployeeForm');
                    if (form) {
                        form.submit();
                    }
                };
            } else {
                content.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle"></i>
                        Erro ao carregar formulário de edição: ${data.message || 'Erro desconhecido'}
                    </div>
                `;
                updateBtn.style.display = 'none';
            }
        })
        .catch(error => {
            content.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-circle"></i>
                    Erro ao carregar formulário de edição: ${error.message}
                </div>
            `;
            updateBtn.style.display = 'none';
        });
}

// Auto-fechar alerts
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        document.querySelectorAll('.sinagem-alert').forEach(function(alert) {
            alert.style.transition = 'opacity 0.5s';
            alert.style.opacity = '0';
            setTimeout(function() {
                alert.remove();
            }, 500);
        });
    }, 5000);
});
</script>
@endpush