@extends('layouts.user')

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

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

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

    <form action="{{ route('user.hr.payrolls.preview') }}" method="POST"
          class="border border-slate-200 bg-white p-4 shadow-sm">
        @csrf

        {{-- Header --}}
        <div class="mb-4">
            <h2 class="text-lg font-bold text-slate-800">{{ __('payrolls.generate_monthly_payroll') }}</h2>
            <p class="mt-1 text-xs text-slate-500">
                {{ __('payrolls.generate_payroll_help_text') }}
            </p>
        </div>

        {{-- Fields --}}
        <div class="grid grid-cols-1 gap-3 md:grid-cols-3">

            <div>
                <label class="mb-1 block text-[10px] font-semibold text-slate-600">{{ __('payrolls.month') }}</label>
                <select name="payroll_month"
                        class="w-full border border-slate-300 px-2 py-1.5 text-xs outline-none focus:border-slate-400">
                    @for($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" @selected(old('payroll_month', now()->month) == $m)>
                            {{ sprintf('%02d', $m) }}
                        </option>
                    @endfor
                </select>
            </div>

            <div>
                <label class="mb-1 block text-[10px] font-semibold text-slate-600">{{ __('payrolls.year') }}</label>
                <input type="number"
                       name="payroll_year"
                       value="{{ old('payroll_year', now()->year) }}"
                       class="w-full border border-slate-300 px-2 py-1.5 text-xs outline-none focus:border-slate-400">
            </div>

            <div>
                <label class="mb-1 block text-[10px] font-semibold text-slate-600">{{ __('payrolls.payroll_date') }}</label>
                <input type="date"
                       name="payroll_date"
                       value="{{ old('payroll_date', now()->format('Y-m-d')) }}"
                       class="w-full border border-slate-300 px-2 py-1.5 text-xs outline-none focus:border-slate-400">
            </div>

        </div>

        {{-- Actions --}}
        <div class="mt-4 flex items-center gap-2">
            <button type="submit"
                    class="bg-slate-900 px-4 py-1.5 text-xs font-semibold text-white hover:opacity-90">
                {{ __('payrolls.preview') }}
            </button>

            <a href="{{ route('user.hr.payrolls.index') }}"
               class="border border-slate-300 px-4 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50">
                {{ __('payrolls.cancel') }}
            </a>
        </div>
    </form>
</div>
@endsection