@extends('layouts.user')

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

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

    {{-- Header --}}
    <div class="border border-slate-200 bg-gradient-to-r from-white to-slate-50 p-4 shadow-sm">
        <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <div>
                <p class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">
                    {{ __('salary.salary_management') }}
                </p>
                <h1 class="mt-1 text-lg font-bold text-slate-800">
                    {{ __('salary.create_salary_setup') }}
                </h1>
                <p class="mt-1 text-xs text-slate-500">
                    {{ $employee->name }} ({{ $employee->employee_code }})
                </p>
            </div>

            <a href="{{ route('user.hr.salary.index') }}"
               class="border border-slate-200 bg-white px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50">
                {{ __('salary.back') }}
            </a>
        </div>
    </div>

    <form action="{{ route('user.hr.salary.store', $employee->id) }}"
          method="POST"
          class="border border-slate-200 bg-white p-4 shadow-sm">
        @csrf

        {{-- Employee Info --}}
        <div class="mb-4 grid grid-cols-1 gap-3 md:grid-cols-2">
            <div class="bg-slate-50 border border-slate-200 p-3">
                <p class="text-[11px] font-semibold text-slate-500">{{ __('salary.employee_name') }}</p>
                <p class="mt-1 text-sm font-bold text-slate-800">{{ $employee->name }}</p>
            </div>

            <div class="bg-slate-50 border border-slate-200 p-3">
                <p class="text-[11px] font-semibold text-slate-500">{{ __('salary.employee_type') }}</p>
                <p class="mt-1 text-sm font-bold text-slate-800">
                    {{ $employee->employee_type === 'monthly' ? __('salary.monthly_salary') : __('salary.daily_roz') }}
                </p>
            </div>
        </div>

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

            @if($employee->employee_type === 'monthly')
                <div>
                    <label class="mb-1 block text-xs font-semibold text-slate-700">
                        {{ __('salary.monthly_salary_required') }}
                    </label>
                    <input type="number"
                           step="any"
                           name="monthly_salary"
                           value="{{ old('monthly_salary') }}"
                           class="w-full border px-3 py-2 text-xs">
                </div>

                <div>
                    <label class="mb-1 block text-xs font-semibold text-slate-700">
                        {{ __('salary.overtime_rate') }}
                    </label>
                    <input type="number"
                           step="any"
                           name="overtime_rate"
                           value="{{ old('overtime_rate', 0) }}"
                           class="w-full border px-3 py-2 text-xs">
                </div>
            @else
                <div>
                    <label class="mb-1 block text-xs font-semibold text-slate-700">
                        {{ __('salary.per_roz_rate_required') }}
                    </label>
                    <input type="number"
                           step="any"
                           name="per_roz_rate"
                           value="{{ old('per_roz_rate') }}"
                           class="w-full border px-3 py-2 text-xs">
                </div>
            @endif

            <div>
                <label class="mb-1 block text-xs font-semibold text-slate-700">
                    {{ __('salary.effective_from_required') }}
                </label>
                <input type="date"
                       name="effective_from"
                       value="{{ old('effective_from', now()->format('Y-m-d')) }}"
                       class="w-full border px-3 py-2 text-xs">
            </div>

            <div class="md:col-span-2">
                <label class="mb-1 block text-xs font-semibold text-slate-700">
                    {{ __('salary.internal_note') }}
                </label>
                <textarea name="note"
                          rows="3"
                          class="w-full border px-3 py-2 text-xs">{{ old('note') }}</textarea>
            </div>

            <div class="md:col-span-2">
                <label class="mb-1 block text-xs font-semibold text-slate-700">
                    {{ __('salary.change_note') }}
                </label>
                <textarea name="change_note"
                          rows="3"
                          class="w-full border px-3 py-2 text-xs">{{ old('change_note') }}</textarea>
            </div>
        </div>

        {{-- Actions --}}
        <div class="mt-4 flex gap-2">
            <button type="submit"
                    class="bg-slate-900 px-4 py-2 text-xs font-semibold text-white">
                {{ __('salary.save_salary_setup') }}
            </button>

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