@extends('layouts.user')

@section('title', __('employees.title'))
@section('page_title', __('employees.page_title'))
@section('breadcrumb', __('employees.breadcrumb'))

@section('content')
<div class="w-full px-1 sm:px-2 lg:px-3 space-y-6">

    {{-- Stats --}}
    <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
        <div class="border border-slate-200 bg-white p-3 shadow-sm">
            <p class="text-[11px] text-slate-500 leading-tight">{{ __('employees.total_employees') }}</p>
            <h3 class="mt-1 text-base font-semibold text-slate-800">{{ $totalEmployees }}</h3>
        </div>

        <div class="border border-slate-200 bg-white p-3 shadow-sm">
            <p class="text-[11px] text-slate-500 leading-tight">{{ __('employees.active_employees') }}</p>
            <h3 class="mt-1 text-base font-semibold text-emerald-600">{{ $activeEmployees }}</h3>
        </div>

        <div class="border border-slate-200 bg-white p-3 shadow-sm">
            <p class="text-[11px] text-slate-500 leading-tight">{{ __('employees.monthly_salary') }}</p>
            <h3 class="mt-1 text-base font-semibold text-blue-600">{{ $monthlyEmployees }}</h3>
        </div>

        <div class="border border-slate-200 bg-white p-3 shadow-sm">
            <p class="text-[11px] text-slate-500 leading-tight">{{ __('employees.daily_roz') }}</p>
            <h3 class="mt-1 text-base font-semibold text-violet-600">{{ $dailyRozEmployees }}</h3>
        </div>
    </div>

    {{-- Filter + Header --}}
    <div class="border border-slate-200 bg-white p-4 shadow-sm">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <h2 class="text-base font-semibold text-slate-800">{{ __('employees.employee_list') }}</h2>
                <p class="mt-1 text-xs text-slate-500">{{ __('employees.employee_list_subtitle') }}</p>
            </div>

            <a href="{{ route('user.hr.employees.create') }}"
               class="inline-flex items-center justify-center bg-slate-900 px-4 py-2 text-xs font-semibold text-white transition hover:bg-slate-800">
                {{ __('employees.add_employee') }}
            </a>
        </div>

        <form method="GET" action="{{ route('user.hr.employees.index') }}"
              class="mt-4 grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-4">
            <div>
                <input type="text"
                       name="search"
                       value="{{ request('search') }}"
                       placeholder="{{ __('employees.search_placeholder') }}"
                       class="w-full border border-slate-200 px-3 py-2 text-xs text-slate-700 outline-none focus:border-slate-400">
            </div>

            <div>
                <select name="employee_type"
                        class="w-full border border-slate-200 px-3 py-2 text-xs text-slate-700 outline-none focus:border-slate-400">
                    <option value="">{{ __('employees.all_types') }}</option>
                    <option value="monthly" @selected(request('employee_type') === 'monthly')>{{ __('employees.monthly') }}</option>
                    <option value="daily_roz" @selected(request('employee_type') === 'daily_roz')>{{ __('employees.daily_roz') }}</option>
                </select>
            </div>

            <div>
                <select name="status"
                        class="w-full border border-slate-200 px-3 py-2 text-xs text-slate-700 outline-none focus:border-slate-400">
                    <option value="">{{ __('employees.all_status') }}</option>
                    <option value="active" @selected(request('status') === 'active')>{{ __('employees.active') }}</option>
                    <option value="inactive" @selected(request('status') === 'inactive')>{{ __('employees.inactive') }}</option>
                </select>
            </div>

            <div class="flex gap-2">
                <button type="submit"
                        class="flex-1 bg-blue-600 px-3 py-2 text-xs font-semibold text-white transition hover:bg-blue-700">
                    {{ __('employees.filter') }}
                </button>

                <a href="{{ route('user.hr.employees.index') }}"
                   class="flex-1 border border-slate-200 px-3 py-2 text-center text-xs font-semibold text-slate-700 transition hover:bg-slate-50">
                    {{ __('employees.reset') }}
                </a>
            </div>
        </form>
    </div>

    {{-- Table --}}
    <div class="border border-slate-200 bg-white shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full text-xs">
                <thead class="bg-slate-50">
                    <tr class="text-left text-slate-600">
                        <th class="px-4 py-3 font-semibold">{{ __('employees.employee') }}</th>
                        <th class="px-4 py-3 font-semibold">{{ __('employees.code') }}</th>
                        <th class="px-4 py-3 font-semibold">{{ __('employees.type') }}</th>
                        <th class="px-4 py-3 font-semibold">{{ __('employees.phone') }}</th>
                        <th class="px-4 py-3 font-semibold">{{ __('employees.status') }}</th>
                        <th class="px-4 py-3 text-right font-semibold">{{ __('employees.action') }}</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-slate-100">
                    @forelse($employees as $employee)
                        @php
                            $employeePhoto = null;

                            if (!empty($employee->photo)) {
                                $rawPhoto = ltrim($employee->photo, '/');

                                if (\Illuminate\Support\Str::startsWith($rawPhoto, ['http://', 'https://'])) {
                                    $employeePhoto = $rawPhoto;
                                } else {
                                    $employeePhoto = asset($rawPhoto);
                                }
                            }
                        @endphp

                        <tr class="hover:bg-slate-50/70">
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-3">
                                    <div class="h-10 w-10 overflow-hidden border border-slate-200 bg-slate-100">
                                        @if($employeePhoto)
                                            <img src="{{ $employeePhoto }}"
                                                 alt="{{ $employee->name }}"
                                                 class="h-full w-full object-cover"
                                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                            <div class="hidden h-full w-full items-center justify-center text-xs font-bold text-slate-500">
                                                {{ strtoupper(substr($employee->name, 0, 1)) }}
                                            </div>
                                        @else
                                            <div class="flex h-full w-full items-center justify-center text-xs font-bold text-slate-500">
                                                {{ strtoupper(substr($employee->name, 0, 1)) }}
                                            </div>
                                        @endif
                                    </div>

                                    <div>
                                        <div class="font-semibold text-slate-800 text-xs">{{ $employee->name }}</div>
                                        <div class="text-[11px] text-slate-500">
                                            {{ $employee->designation?->name ?? __('employees.no_designation') }}
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <td class="px-4 py-3 font-medium text-slate-700">
                                {{ $employee->employee_code }}
                            </td>

                            <td class="px-4 py-3">
                                @if($employee->employee_type === 'monthly')
                                    <span class="border border-blue-200 bg-blue-50 px-2 py-1 text-[11px] font-semibold text-blue-700">
                                        {{ __('employees.monthly') }}
                                    </span>
                                @else
                                    <span class="border border-violet-200 bg-violet-50 px-2 py-1 text-[11px] font-semibold text-violet-700">
                                        {{ __('employees.daily_roz') }}
                                    </span>
                                @endif
                            </td>

                            <td class="px-4 py-3 text-slate-700">
                                {{ $employee->phone ?: '-' }}
                            </td>

                            <td class="px-4 py-3">
                                @if($employee->status === 'active')
                                    <span class="border border-emerald-200 bg-emerald-50 px-2 py-1 text-[11px] font-semibold text-emerald-700">
                                        {{ __('employees.active') }}
                                    </span>
                                @else
                                    <span class="border border-rose-200 bg-rose-50 px-2 py-1 text-[11px] font-semibold text-rose-700">
                                        {{ __('employees.inactive') }}
                                    </span>
                                @endif
                            </td>

                            <td class="px-4 py-3">
                                <div class="flex items-center justify-end gap-2">
                                    <a href="{{ route('user.hr.employees.show', $employee->id) }}"
                                       class="border border-slate-200 px-3 py-2 text-[11px] font-semibold text-slate-700 transition hover:bg-slate-50">
                                        {{ __('employees.view') }}
                                    </a>

                                    <a href="{{ route('user.hr.employees.edit', $employee->id) }}"
                                       class="border border-amber-200 bg-amber-50 px-3 py-2 text-[11px] font-semibold text-amber-700 transition hover:bg-amber-100">
                                        {{ __('employees.edit') }}
                                    </a>

                                    <form action="{{ route('user.hr.employees.destroy', $employee->id) }}"
                                          method="POST"
                                          class="js-delete"
                                          data-swal-title="{{ __('employees.delete_confirm_title') }}"
                                          data-swal-text="{{ __('employees.delete_confirm_text', ['name' => $employee->name]) }}"
                                          data-swal-confirm="{{ __('employees.delete_confirm_button') }}"
                                          data-swal-cancel="{{ __('employees.cancel') }}"
                                          data-swal-confirm-color="#dc2626">
                                        @csrf
                                        @method('DELETE')

                                        <button type="submit"
                                                class="border border-rose-200 bg-rose-50 px-3 py-2 text-[11px] font-semibold text-rose-700 transition hover:bg-rose-100">
                                            {{ __('employees.delete') }}
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-10 text-center text-xs text-slate-500">
                                {{ __('employees.no_employee_found') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($employees->hasPages())
            <div class="border-t border-slate-200 px-4 py-3">
                {{ $employees->links() }}
            </div>
        @endif
    </div>
</div>
@endsection