@extends('layouts.admin')

@section('header')
    <h2 class="font-semibold text-xl text-gray-800">Add Employee</h2>
@endsection

@section('content')
<!-- Employee Count Display -->
<div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
    <div class="flex items-center justify-between">
        <div>
            <h3 class="text-lg font-semibold text-blue-900">Employee Count</h3>
            <p class="text-sm text-blue-700 mt-1">This system is designed for SMEs (Small & Medium Enterprises)</p>
        </div>
        <div class="text-right">
            <div class="text-3xl font-bold text-blue-600">{{ $employeeCount }}/{{ $maxEmployees }}</div>
            <p class="text-sm text-blue-700">{{ $remainingSlots }} slots remaining</p>
        </div>
    </div>

    <!-- Progress Bar -->
    <div class="mt-4 bg-blue-200 rounded-full h-3 overflow-hidden">
        <div class="bg-blue-600 h-full transition-all" style="width: {{ ($employeeCount / $maxEmployees) * 100 }}%"></div>
    </div>

    <!-- Warning if approaching limit -->
    @if($remainingSlots <= 5)
        <div class="mt-3 p-3 bg-yellow-100 border border-yellow-400 rounded text-yellow-800 text-sm">
            ⚠️ <strong>Warning:</strong> You are approaching the employee limit! Only {{ $remainingSlots }} slots remaining.
        </div>
    @endif
</div>

<form action="{{ route('employees.store') }}" method="POST">
    @include('employees.form', ['buttonText' => 'Add Employee'])
</form>
@endsection