@extends('layouts.user')

@section('title', __('payrolls.payrolls'))
@section('page_title', __('payrolls.payrolls'))
@section('breadcrumb', __('payrolls.hr_payroll'))

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

    @if(session('success'))
        <div class="mb-3 border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-700">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mb-3 border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700">
            {{ session('error') }}
        </div>
    @endif

    {{-- Header --}}
    <div class="flex flex-col gap-3 border border-slate-200 bg-white p-3 shadow-sm md:flex-row md:items-center md:justify-between">
        <div>
            <h2 class="text-lg font-bold text-slate-800">{{ __('payrolls.payroll_list') }}</h2>
        </div>

        <a href="{{ route('user.hr.payrolls.create') }}"
           class="inline-flex items-center justify-center bg-slate-900 px-3 py-1.5 text-xs font-semibold text-white transition hover:opacity-90">
            {{ __('payrolls.generate_payroll') }}
        </a>
    </div>

    {{-- Table --}}
    <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
        <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-3 py-2 font-semibold">{{ __('payrolls.month') }}</th>
                        <th class="px-3 py-2 font-semibold">{{ __('payrolls.payroll_date') }}</th>
                        <th class="px-3 py-2 font-semibold">{{ __('payrolls.employees') }}</th>
                        <th class="px-3 py-2 font-semibold">{{ __('payrolls.status') }}</th>
                        <th class="px-3 py-2 text-right font-semibold">{{ __('payrolls.action') }}</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-slate-100">
                    @forelse($payrolls as $payroll)
                        @php
                            $status = $payroll->status;

                            $statusClasses = match ($status) {
                                'draft' => 'border border-amber-200 bg-amber-50 text-amber-700',
                                'finalized' => 'border border-blue-200 bg-blue-50 text-blue-700',
                                'paid_partial' => 'border border-purple-200 bg-purple-50 text-purple-700',
                                'paid_full' => 'border border-emerald-200 bg-emerald-50 text-emerald-700',
                                default => 'border border-slate-200 bg-slate-100 text-slate-700',
                            };

                            $statusLabel = match ($status) {
                                'draft' => __('payrolls.draft'),
                                'finalized' => __('payrolls.finalized'),
                                'paid_partial' => __('payrolls.paid_partial'),
                                'paid_full' => __('payrolls.paid_full'),
                                default => ucwords(str_replace('_', ' ', $payroll->status)),
                            };
                        @endphp

                        <tr class="hover:bg-slate-50/70">
                            <td class="px-3 py-2 font-semibold text-slate-800">
                                {{ sprintf('%02d', $payroll->payroll_month) }}-{{ $payroll->payroll_year }}
                            </td>

                            <td class="px-3 py-2 text-slate-600">
                                {{ optional($payroll->payroll_date)->format('d M Y') ?: '-' }}
                            </td>

                            <td class="px-3 py-2 font-medium text-slate-700">
                                {{ $payroll->items_count }}
                            </td>

                            <td class="px-3 py-2">
                                <span class="inline-flex px-2 py-0.5 text-[10px] font-semibold {{ $statusClasses }}">
                                    {{ $statusLabel }}
                                </span>
                            </td>

                            <td class="px-3 py-2 text-right">
                                <div class="flex flex-wrap justify-end gap-1">
                                    <a href="{{ route('user.hr.payrolls.show', $payroll->id) }}"
                                       class="border border-slate-300 px-2.5 py-1 text-[11px] font-semibold text-slate-700 transition hover:bg-slate-50">
                                        {{ __('payrolls.view') }}
                                    </a>

                                    <form action="{{ route('user.hr.payrolls.destroy', $payroll->id) }}"
                                          method="POST"
                                          class="js-delete"
                                          data-swal-title="{{ __('payrolls.delete_payroll_title') }}"
                                          data-swal-text="{{ __('payrolls.delete_payroll_text') }}"
                                          data-swal-confirm="{{ __('payrolls.yes_delete') }}"
                                          data-swal-cancel="{{ __('payrolls.cancel') }}"
                                          data-swal-icon="warning"
                                          data-swal-confirm-color="#dc2626">
                                        @csrf
                                        @method('DELETE')

                                        <button type="submit"
                                                class="border border-rose-300 bg-rose-50 px-2.5 py-1 text-[11px] font-semibold text-rose-700 transition hover:bg-rose-100">
                                            {{ __('payrolls.delete') }}
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-3 py-8 text-center text-xs text-slate-500">
                                {{ __('payrolls.no_payroll_found') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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