@extends('layouts.user')

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

@section('content')
<div class="w-full px-1 sm:px-2 lg:px-3 space-y-6">
    <form method="POST"
          action="{{ route('user.hr.payroll-payments.store', [$payroll->id, $item->id]) }}"
          class="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm">
        @csrf

        {{-- Header --}}
        <div class="border-b border-slate-200 bg-gradient-to-r from-slate-50 to-white px-6 py-5">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">
                        {{ __('payrolls.payroll_payment') }}
                    </p>
                    <h2 class="mt-1 text-2xl font-extrabold text-slate-800">
                        {{ __('payrolls.pay_employee_salary') }}
                    </h2>
                    <p class="mt-2 text-sm text-slate-500">
                        {{ __('payrolls.salary_payment_note') }}
                    </p>
                </div>

                <div class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-right">
                    <p class="text-xs font-semibold uppercase tracking-wide text-rose-600">
                        {{ __('payrolls.due_amount') }}
                    </p>
                    <p class="mt-1 text-2xl font-extrabold text-rose-700">
                        {{ money_format_bd($item->due_amount ?? 0) }}
                    </p>
                </div>
            </div>
        </div>

        {{-- Body --}}
        <div class="space-y-6 px-6 py-6">

            {{-- Summary --}}
            <div class="grid grid-cols-1 gap-5 xl:grid-cols-2">

                {{-- Payroll Info --}}
                <div class="rounded-3xl border border-slate-200 bg-slate-50 p-5">
                    <h3 class="text-sm font-bold text-slate-700">{{ __('payrolls.payroll_info') }}</h3>

                    <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="rounded-2xl border border-slate-200 bg-white p-4">
                            <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">
                                {{ __('payrolls.payroll_month') }}
                            </p>
                            <p class="mt-2 text-sm font-bold text-slate-800">
                                {{ \Carbon\Carbon::createFromDate($payroll->payroll_year, $payroll->payroll_month, 1)->format('F Y') }}
                            </p>
                        </div>

                        <div class="rounded-2xl border border-slate-200 bg-white p-4">
                            <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">
                                {{ __('payrolls.payroll_status') }}
                            </p>
                            <p class="mt-2 inline-flex rounded-full px-3 py-1 text-xs font-bold
                                {{ ($payroll->status ?? '') === 'final' || ($payroll->status ?? '') === 'finalized'
                                    ? 'bg-emerald-100 text-emerald-700'
                                    : 'bg-amber-100 text-amber-700' }}">
                                {{ ucfirst($payroll->status ?? 'draft') }}
                            </p>
                        </div>
                    </div>
                </div>

                {{-- Employee Info --}}
                <div class="rounded-3xl border border-slate-200 bg-slate-50 p-5">
                    <h3 class="text-sm font-bold text-slate-700">{{ __('payrolls.employee_info') }}</h3>

                    <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="rounded-2xl border border-slate-200 bg-white p-4">
                            <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">
                                {{ __('payrolls.employee_name') }}
                            </p>
                            <p class="mt-2 text-sm font-bold text-slate-800">
                                {{ $item->employee?->name ?? __('payrolls.na') }}
                            </p>
                        </div>

                        <div class="rounded-2xl border border-slate-200 bg-white p-4">
                            <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">
                                {{ __('payrolls.employee_code') }}
                            </p>
                            <p class="mt-2 text-sm font-bold text-slate-800">
                                {{ $item->employee?->employee_code ?? __('payrolls.na') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Salary Figures --}}
            <div class="rounded-3xl border border-slate-200 bg-slate-50 p-5">
                <h3 class="text-sm font-bold text-slate-700">{{ __('payrolls.payment_summary') }}</h3>

                <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-3">
                    <div class="rounded-2xl border border-slate-200 bg-white p-4">
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">
                            {{ __('payrolls.net_salary') }}
                        </p>
                        <p class="mt-2 text-lg font-extrabold text-slate-800">
                            {{ money_format_bd($item->net_salary ?? 0) }}
                        </p>
                    </div>

                    <div class="rounded-2xl border border-slate-200 bg-white p-4">
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">
                            {{ __('payrolls.paid_amount') }}
                        </p>
                        <p class="mt-2 text-lg font-extrabold text-emerald-700">
                            {{ money_format_bd($item->paid_amount ?? 0) }}
                        </p>
                    </div>

                    <div class="rounded-2xl border border-slate-200 bg-white p-4">
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">
                            {{ __('payrolls.due_amount') }}
                        </p>
                        <p class="mt-2 text-lg font-extrabold text-rose-700">
                            {{ money_format_bd($item->due_amount ?? 0) }}
                        </p>
                    </div>
                </div>
            </div>

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

                {{-- Account --}}
                <div class="md:col-span-2">
                    <label for="user_account_id" class="mb-2 block text-sm font-semibold text-slate-700">
                        {{ __('payrolls.pay_from_account') }} <span class="text-rose-500">*</span>
                    </label>

                    <select id="user_account_id"
                            name="user_account_id"
                            class="w-full rounded-2xl border px-4 py-3 text-sm shadow-sm outline-none transition
                            {{ $errors->has('user_account_id') ? 'border-rose-300 focus:border-rose-500' : 'border-slate-200 focus:border-slate-400' }}">
                        <option value="">{{ __('payrolls.select_account') }}</option>
                        @foreach($accounts as $account)
                            <option value="{{ $account->id }}" {{ old('user_account_id') == $account->id ? 'selected' : '' }}>
                                {{ $account->name }}
                                ({{ strtoupper($account->type) }}@if($account->account_number) - {{ $account->account_number }}@endif)
                            </option>
                        @endforeach
                    </select>

                    @error('user_account_id')
                        <div class="mt-2 text-sm font-medium text-rose-600">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Payment Date --}}
                <div>
                    <label for="payment_date" class="mb-2 block text-sm font-semibold text-slate-700">
                        {{ __('payrolls.payment_date') }} <span class="text-rose-500">*</span>
                    </label>

                    <input type="date"
                           id="payment_date"
                           name="payment_date"
                           value="{{ old('payment_date', now()->toDateString()) }}"
                           class="w-full rounded-2xl border px-4 py-3 text-sm shadow-sm outline-none transition
                           {{ $errors->has('payment_date') ? 'border-rose-300 focus:border-rose-500' : 'border-slate-200 focus:border-slate-400' }}">

                    @error('payment_date')
                        <div class="mt-2 text-sm font-medium text-rose-600">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Amount --}}
                <div>
                    <label for="amount" class="mb-2 block text-sm font-semibold text-slate-700">
                        {{ __('payrolls.payment_amount') }} <span class="text-rose-500">*</span>
                    </label>

                    <input type="number"
                           step="any"
                           min="0"
                           max="{{ money($item->due_amount ?? 0) }}"
                           id="amount"
                           name="amount"
                           value="{{ old('amount', money($item->due_amount ?? 0)) }}"
                           class="w-full rounded-2xl border px-4 py-3 text-sm shadow-sm outline-none transition
                           {{ $errors->has('amount') ? 'border-rose-300 focus:border-rose-500' : 'border-slate-200 focus:border-slate-400' }}"
                           placeholder="{{ __('payrolls.enter_payment_amount') }}">

                    @error('amount')
                        <div class="mt-2 text-sm font-medium text-rose-600">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Reference No --}}
                <div>
                    <label for="reference_no" class="mb-2 block text-sm font-semibold text-slate-700">
                        {{ __('payrolls.reference_no') }}
                    </label>

                    <input type="text"
                           id="reference_no"
                           name="reference_no"
                           value="{{ old('reference_no') }}"
                           class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm shadow-sm outline-none transition focus:border-slate-400"
                           placeholder="{{ __('payrolls.optional_reference_number') }}">

                    @error('reference_no')
                        <div class="mt-2 text-sm font-medium text-rose-600">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Note --}}
                <div>
                    <label for="note" class="mb-2 block text-sm font-semibold text-slate-700">
                        {{ __('payrolls.note') }}
                    </label>

                    <input type="text"
                           id="note"
                           name="note"
                           value="{{ old('note') }}"
                           class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm shadow-sm outline-none transition focus:border-slate-400"
                           placeholder="{{ __('payrolls.optional_note') }}">

                    @error('note')
                        <div class="mt-2 text-sm font-medium text-rose-600">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        {{-- Footer --}}
        <div class="flex flex-col gap-3 border-t border-slate-200 bg-slate-50 px-6 py-5 sm:flex-row sm:items-center">
            <button type="submit"
                    class="inline-flex items-center justify-center rounded-2xl bg-slate-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-slate-800">
                {{ __('payrolls.confirm_salary_payment') }}
            </button>

            <a href="{{ route('user.hr.payrolls.show', $payroll->id) }}"
               class="inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-6 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-100">
                {{ __('payrolls.back') }}
            </a>
        </div>
    </form>
</div>
@endsection