@extends('layouts.user')

@section('title', __('hr.attendance_sheet'))
@section('page_title', __('hr.attendance_sheet'))
@section('breadcrumb', __('hr.hr_attendance_sheet'))

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

    {{-- Filter --}}
    <div class="border border-slate-200 bg-white p-3 shadow-sm">
        <form method="GET" action="{{ route('user.hr.attendance.sheet.index') }}"
              class="flex items-end gap-2 flex-nowrap overflow-x-auto">
            
            <div class="min-w-[220px]">
                <label class="mb-1 block text-[10px] font-semibold uppercase tracking-wide text-slate-500">{{ __('hr.search') }}</label>
                <input type="text" name="search" value="{{ $search }}"
                       placeholder="{{ __('hr.employee_name_code_phone') }}"
                       class="w-full border border-slate-300 px-2 py-1 text-xs text-slate-700 focus:border-indigo-500 focus:outline-none">
            </div>

            <div class="min-w-[90px]">
                <label class="mb-1 block text-[10px] font-semibold uppercase tracking-wide text-slate-500">{{ __('hr.month') }}</label>
                <input type="number" name="month" min="1" max="12" value="{{ $month }}"
                       class="w-full border border-slate-300 px-2 py-1 text-xs text-slate-700 focus:border-indigo-500 focus:outline-none">
            </div>

            <div class="min-w-[100px]">
                <label class="mb-1 block text-[10px] font-semibold uppercase tracking-wide text-slate-500">{{ __('hr.year') }}</label>
                <input type="number" name="year" min="2000" max="2100" value="{{ $year }}"
                       class="w-full border border-slate-300 px-2 py-1 text-xs text-slate-700 focus:border-indigo-500 focus:outline-none">
            </div>

            <div class="flex gap-1 mb-[1px]">
                <button type="submit"
                        class="bg-slate-900 px-3 py-1 text-xs font-semibold text-white hover:bg-slate-800">
                    {{ __('hr.filter') }}
                </button>

                <a href="{{ route('user.hr.attendance.sheet.index') }}"
                   class="border border-slate-300 px-3 py-1 text-xs font-semibold text-slate-700 hover:bg-slate-100">
                    {{ __('hr.reset') }}
                </a>
            </div>
        </form>
    </div>

    {{-- Employee List --}}
    <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
        <div class="flex items-center justify-between border-b border-slate-200 px-3 py-2">
            <div>
                <h2 class="text-sm font-bold text-slate-800">{{ __('hr.employee_attendance_sheet') }}</h2>
                <p class="mt-0.5 text-[11px] text-slate-500">{{ __('hr.monthly_attendance_summary_view') }}</p>
            </div>
            <div class="text-xs font-semibold text-slate-500">
                {{ __('hr.total') }}: {{ $employees->total() }}
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full text-xs">
                <thead class="bg-slate-50 text-slate-600">
                    <tr>
                        <th class="px-3 py-2 text-left font-semibold">{{ __('hr.employee') }}</th>
                        <th class="px-3 py-2 text-left font-semibold">{{ __('hr.code') }}</th>
                        <th class="px-3 py-2 text-left font-semibold">{{ __('hr.phone') }}</th>
                        <th class="px-3 py-2 text-left font-semibold">{{ __('hr.type') }}</th>
                        <th class="px-3 py-2 text-right font-semibold">{{ __('hr.action') }}</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-slate-100">
                    @forelse($employees as $employee)
                        <tr class="hover:bg-slate-50">
                            <td class="px-3 py-2">
                                <div class="font-semibold text-slate-800">{{ $employee->name }}</div>
                            </td>

                            <td class="px-3 py-2 text-slate-500">
                                {{ $employee->employee_code ?: __('hr.dash') }}
                            </td>

                            <td class="px-3 py-2 text-slate-500">
                                {{ $employee->phone ?: __('hr.dash') }}
                            </td>

                            <td class="px-3 py-2">
                                <span class="inline-flex border px-2 py-0.5 text-[10px] font-semibold
                                    {{ $employee->employee_type === 'monthly'
                                        ? 'border-indigo-200 bg-indigo-50 text-indigo-700'
                                        : 'border-emerald-200 bg-emerald-50 text-emerald-700' }}">
                                    {{ $employee->employee_type === 'daily_roz' ? __('hr.daily_roz') : __('hr.monthly') }}
                                </span>
                            </td>

                            <td class="px-3 py-2 text-right">
                                <a href="{{ route('user.hr.attendance.sheet.show', $employee->id) }}?month={{ $month }}&year={{ $year }}"
                                   class="inline-flex items-center bg-indigo-600 px-3 py-1 text-xs font-semibold text-white hover:bg-indigo-700">
                                    {{ __('hr.view_sheet') }}
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-3 py-8 text-center text-xs text-slate-500">
                                {{ __('hr.no_employee_found') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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