@extends('layouts.user_type.auth')

@section('companyProfile.employee')

<div class="row">
    <div class="col-12">

        @include('components.alert')

        <div class="cp-card">

            @include('pages.companyProfile.partials.nav_tabs', [
                'active'       => 'employee',
                'company_name' => $company_name ?? '',
            ])

            <div class="cp-card-body">

                <h5 class="cp-section-title">
                    <i class="fas fa-users me-2" style="color:var(--qc-primary);font-size:.85rem"></i>
                    Employees
                </h5>

                <div class="cp-table-wrap">
                    <table class="cp-table">
                        <thead>
                            <tr>
                                <th style="width:48px">#</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Contact No.</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($employees as $index => $employee)
                                <tr>
                                    <td style="color:var(--qc-text-3);font-size:.78rem">
                                        {{ $employees->firstItem() + $index }}
                                    </td>
                                    <td>
                                        <div style="display:flex;align-items:center;gap:10px">
                                            <div style="width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--qc-line-strong),var(--qc-card));display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--qc-ink);flex-shrink:0;border:1px solid var(--qc-line)">
                                                {{ strtoupper(substr($employee->name, 0, 1)) }}
                                            </div>
                                            <strong>{{ $employee->name }}</strong>
                                        </div>
                                    </td>
                                    <td>{{ $employee->email }}</td>
                                    <td>{{ $employee->contact_no ?? '—' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4">
                                        <div style="text-align:center;padding:48px 24px">
                                            <i class="fas fa-users" style="font-size:2.5rem;color:var(--qc-line);display:block;margin-bottom:12px"></i>
                                            <p style="color:var(--qc-text-3);font-size:.88rem;margin:0">No employees found for this company.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($employees->hasPages())
                    <div style="padding-top:14px;border-top:1px solid var(--qc-card-3);margin-top:8px">
                        @include('components.pagination', ['paginator' => $employees])
                    </div>
                @endif

            </div>

            <div class="cp-actions">
                <a href="{{ route('companyProfile.show') }}" class="qc-btn-dismiss cp-btn cp-btn-danger">
                    <i class="fas fa-times"></i> Close
                </a>
            </div>

        </div>

    </div>
</div>

@endsection