@extends('layouts.user')

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

@section('content')
@php
    $monthName = \Carbon\Carbon::createFromDate($payroll->payroll_year, $payroll->payroll_month, 1)->format('F');

    $totalBasic = $payroll->items->sum(function ($item) {
        return (float) $item->gross_salary - (float) $item->overtime_amount;
    });

    $totalDeduction = $payroll->items->sum('deduction_amount');
    $totalOvertime  = $payroll->items->sum('overtime_amount');
    $totalGross     = $payroll->items->sum('gross_salary');
    $totalAdvance   = $payroll->items->sum('advance_adjusted');
    $totalNet       = $payroll->items->sum('net_salary');
    $totalPaid      = $payroll->items->sum('paid_amount');
    $totalDue       = $payroll->items->sum('due_amount');

    $statusClass = match ($payroll->status) {
        'draft'        => 'bg-amber-100 text-amber-700 border-amber-200',
        'finalized'    => 'bg-indigo-100 text-indigo-700 border-indigo-200',
        'paid_partial' => 'bg-sky-100 text-sky-700 border-sky-200',
        'paid_full'    => 'bg-emerald-100 text-emerald-700 border-emerald-200',
        default        => 'bg-slate-100 text-slate-700 border-slate-200',
    };
@endphp

<div class="w-full px-1 sm:px-2 lg:px-3 space-y-6">

    {{-- Header --}}
    <div class="border border-slate-200 bg-white shadow-sm overflow-hidden">
        <div class="bg-slate-900 px-4 py-4 text-white">
            <div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
                <div>
                    <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-white/70">
                        {{ __('payrolls.payroll_details') }}
                    </p>

                    <h1 class="mt-1 text-lg sm:text-xl font-bold">
                        {{ $monthName }} {{ $payroll->payroll_year }} {{ __('payrolls.payroll') }}
                    </h1>

                    <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-white/85">
                        <span>{{ __('payrolls.payroll_date_label') }}: {{ \Carbon\Carbon::parse($payroll->payroll_date)->format('d M, Y') }}</span>
                        <span>•</span>
                        <span>{{ __('payrolls.employees') }}: {{ $payroll->items->count() }}</span>
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-2">
                    <span class="inline-flex border px-3 py-1 text-[11px] font-bold {{ $statusClass }}">
                        {{ match ($payroll->status) {
                            'draft' => __('payrolls.draft'),
                            'finalized' => __('payrolls.finalized'),
                            'paid_partial' => __('payrolls.paid_partial'),
                            'paid_full' => __('payrolls.paid_full'),
                            default => ucwords(str_replace('_', ' ', $payroll->status)),
                        } }}
                    </span>

                    <a href="{{ route('user.hr.payrolls.index') }}"
                       class="inline-flex items-center border border-white/20 bg-white/10 px-3 py-2 text-[11px] font-semibold text-white transition hover:bg-white/20">
                        ← {{ __('payrolls.back') }}
                    </a>
                </div>
            </div>
        </div>

        <div class="p-3">
            <div class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-7 gap-2">
                <div class="border border-slate-200 bg-slate-50 px-3 py-2">
                    <div class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">{{ __('payrolls.basic') }}</div>
                    <div class="mt-1 text-sm font-bold text-slate-800">৳{{ number_format($totalBasic, 2) }}</div>
                </div>

                <div class="border border-rose-200 bg-rose-50 px-3 py-2">
                    <div class="text-[10px] font-semibold uppercase tracking-wide text-rose-600">{{ __('payrolls.deduction') }}</div>
                    <div class="mt-1 text-sm font-bold text-rose-700">৳{{ number_format($totalDeduction, 2) }}</div>
                </div>

                <div class="border border-emerald-200 bg-emerald-50 px-3 py-2">
                    <div class="text-[10px] font-semibold uppercase tracking-wide text-emerald-600">{{ __('payrolls.overtime') }}</div>
                    <div class="mt-1 text-sm font-bold text-emerald-700">৳{{ number_format($totalOvertime, 2) }}</div>
                </div>

                <div class="border border-indigo-200 bg-indigo-50 px-3 py-2">
                    <div class="text-[10px] font-semibold uppercase tracking-wide text-indigo-600">{{ __('payrolls.gross') }}</div>
                    <div class="mt-1 text-sm font-bold text-indigo-700">৳{{ number_format($totalGross, 2) }}</div>
                </div>

                <div class="border border-amber-200 bg-amber-50 px-3 py-2">
                    <div class="text-[10px] font-semibold uppercase tracking-wide text-amber-600">{{ __('payrolls.advance') }}</div>
                    <div class="mt-1 text-sm font-bold text-amber-700">৳{{ number_format($totalAdvance, 2) }}</div>
                </div>

                <div class="border border-sky-200 bg-sky-50 px-3 py-2">
                    <div class="text-[10px] font-semibold uppercase tracking-wide text-sky-600">{{ __('payrolls.paid') }}</div>
                    <div class="mt-1 text-sm font-bold text-sky-700">৳{{ number_format($totalPaid, 2) }}</div>
                </div>

                <div class="border border-slate-300 bg-slate-100 px-3 py-2">
                    <div class="text-[10px] font-semibold uppercase tracking-wide text-slate-600">{{ __('payrolls.due') }}</div>
                    <div class="mt-1 text-sm font-bold text-slate-900">৳{{ number_format($totalDue, 2) }}</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Action bar --}}
    <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <div>
            <h2 class="text-sm font-bold text-slate-800">{{ __('payrolls.generated_payroll_items') }}</h2>
        </div>

        <div class="flex flex-wrap items-center gap-2">
            @if($payroll->status === 'draft')
                <form method="POST"
                      action="{{ route('user.hr.payrolls.finalize', $payroll->id) }}"
                      class="js-confirm inline-block"
                      data-swal-title="{{ __('payrolls.finalize_payroll_title') }}"
                      data-swal-text="{{ __('payrolls.finalize_payroll_text') }}"
                      data-swal-icon="warning"
                      data-swal-confirm="{{ __('payrolls.yes_finalize') }}"
                      data-swal-cancel="{{ __('payrolls.cancel') }}"
                      data-swal-confirm-color="#4f46e5">
                    @csrf
                    <button type="submit"
                            class="inline-flex items-center bg-indigo-600 px-3 py-2 text-[11px] font-semibold text-white transition hover:bg-indigo-700">
                        {{ __('payrolls.finalize_payroll') }}
                    </button>
                </form>
            @endif

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

                    <button type="submit"
                            class="inline-flex items-center bg-rose-600 px-3 py-2 text-[11px] font-semibold text-white transition hover:bg-rose-700">
                        {{ __('payrolls.delete_payroll') }}
                    </button>
                </form>
            @endif
        </div>
    </div>

    {{-- Employee cards --}}
    @if($payroll->items->count())
        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3">
            @foreach($payroll->items as $item)
                @php
                    $basicAmount = (float) $item->gross_salary - (float) $item->overtime_amount;
                    $isMonthly   = $item->employee_type === 'monthly';
                    $isDailyRoz  = $item->employee_type === 'daily_roz';
                    $typeLabel   = $isMonthly ? __('payrolls.monthly') : __('payrolls.daily_roz');
                    $canPay      = in_array($payroll->status, ['finalized', 'paid_partial']) && (float) $item->due_amount > 0;

                    $attendanceLeftCount = 2 + ($isMonthly ? 1 : 0);
                    $attendanceRightHasValue = $isMonthly || $isDailyRoz;
                @endphp

                <div class="border border-slate-200 bg-white shadow-sm">
                    <div class="border-b border-slate-200 bg-slate-50 px-3 py-3">
                        <div class="flex items-start justify-between gap-2">
                            <div class="min-w-0">
                                <h3 class="text-sm font-bold text-slate-800 truncate">
                                    {{ $item->employee->name ?? __('payrolls.deleted_employee') }}
                                </h3>

                                <div class="mt-1 text-[11px] text-slate-500">
                                    {{ $item->employee->employee_code ?? __('payrolls.no_code') }}
                                </div>

                                @if(!empty($item->employee?->department?->name))
                                    <div class="mt-2 inline-flex border border-slate-200 bg-white px-2 py-1 text-[10px] font-semibold text-slate-600">
                                        {{ $item->employee->department->name }}
                                    </div>
                                @endif
                            </div>

                            <span class="inline-flex px-2 py-1 text-[10px] font-bold {{ $isMonthly ? 'bg-indigo-100 text-indigo-700' : 'bg-emerald-100 text-emerald-700' }}">
                                {{ $typeLabel }}
                            </span>
                        </div>
                    </div>

                    <div class="p-3 text-[11px]">
                        <div class="space-y-3">

                            {{-- Attendance --}}
                            <div>
                                <div class="mb-2 text-[10px] font-bold uppercase tracking-wide text-slate-500">{{ __('payrolls.attendance') }}</div>

                                <div class="grid grid-cols-2 divide-x divide-slate-300 border border-slate-200 bg-slate-50">
                                    <div class="px-3 py-2 space-y-1.5">
                                        <div class="flex items-center justify-between gap-2">
                                            <span class="text-slate-600">{{ __('payrolls.present') }}</span>
                                            <span class="font-bold text-slate-900">{{ number_format($item->total_present_days, 0) }}</span>
                                        </div>

                                        <div class="flex items-center justify-between gap-2">
                                            <span class="text-rose-600">{{ __('payrolls.absent') }}</span>
                                            <span class="font-bold text-rose-700">{{ number_format($item->total_absent_days, 0) }}</span>
                                        </div>

                                        @if($isMonthly)
                                            <div class="flex items-center justify-between gap-2">
                                                <span class="text-amber-600">{{ __('payrolls.leave') }}</span>
                                                <span class="font-bold text-amber-700">{{ number_format($item->total_leave_days, 0) }}</span>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="px-3 py-2 space-y-1.5">
                                        <div class="flex items-center justify-between gap-2">
                                            <span class="text-cyan-600">{{ __('payrolls.holiday') }}</span>
                                            <span class="font-bold text-cyan-700">{{ number_format($item->total_holiday_days, 0) }}</span>
                                        </div>

                                        @if($isMonthly)
                                            <div class="flex items-center justify-between gap-2">
                                                <span class="text-emerald-600">{{ __('payrolls.ot_hours') }}</span>
                                                <span class="font-bold text-emerald-700">{{ number_format($item->total_overtime_hours, 2) }}</span>
                                            </div>
                                        @endif

                                        @if($isDailyRoz)
                                            <div class="flex items-center justify-between gap-2">
                                                <span class="text-indigo-600">{{ __('payrolls.roz') }}</span>
                                                <span class="font-bold text-indigo-700">{{ number_format($item->total_roz, 2) }}</span>
                                            </div>
                                        @endif

                                        @if(!$attendanceRightHasValue)
                                            <div class="opacity-0 select-none">.</div>
                                        @endif

                                        @if($isDailyRoz && $attendanceLeftCount > 2)
                                            <div class="opacity-0 select-none">.</div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            {{-- Rates --}}
                            <div>
                                <div class="mb-2 text-[10px] font-bold uppercase tracking-wide text-slate-500">{{ __('payrolls.rates') }}</div>

                                <div class="grid grid-cols-2 divide-x divide-slate-300 border border-slate-200 bg-slate-50">
                                    <div class="px-3 py-2 space-y-1.5">
                                        @if($isMonthly)
                                            <div class="flex items-center justify-between gap-2">
                                                <span class="text-slate-600">{{ __('payrolls.monthly_rate') }}</span>
                                                <span class="font-bold text-slate-900">৳{{ number_format($item->rate_monthly_salary, 2) }}</span>
                                            </div>
                                        @elseif($isDailyRoz)
                                            <div class="flex items-center justify-between gap-2">
                                                <span class="text-slate-600">{{ __('payrolls.per_roz') }}</span>
                                                <span class="font-bold text-slate-900">৳{{ number_format($item->rate_per_roz, 2) }}</span>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="px-3 py-2 space-y-1.5">
                                        @if($isMonthly)
                                            <div class="flex items-center justify-between gap-2">
                                                <span class="text-slate-600">{{ __('payrolls.ot_rate') }}</span>
                                                <span class="font-bold text-slate-900">৳{{ number_format($item->rate_overtime_rate, 2) }}</span>
                                            </div>
                                        @else
                                            <div class="opacity-0 select-none">.</div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            {{-- Salary --}}
                            <div>
                                <div class="mb-2 text-[10px] font-bold uppercase tracking-wide text-slate-500">{{ __('payrolls.salary') }}</div>

                                <div class="grid grid-cols-2 divide-x divide-slate-300 border border-slate-200 bg-slate-50">
                                    <div class="px-3 py-2 space-y-1.5">
                                        <div class="flex items-center justify-between gap-2">
                                            <span class="text-slate-600">{{ __('payrolls.basic') }}</span>
                                            <span class="font-bold text-slate-900">৳{{ number_format($basicAmount, 2) }}</span>
                                        </div>

                                        <div class="flex items-center justify-between gap-2">
                                            <span class="text-rose-600">{{ __('payrolls.deduction') }}</span>
                                            <span class="font-bold text-rose-700">৳{{ number_format($item->deduction_amount, 2) }}</span>
                                        </div>

                                        <div class="flex items-center justify-between gap-2">
                                            <span class="text-emerald-600">{{ __('payrolls.overtime') }}</span>
                                            <span class="font-bold text-emerald-700">৳{{ number_format($item->overtime_amount, 2) }}</span>
                                        </div>

                                        <div class="flex items-center justify-between gap-2">
                                            <span class="text-indigo-600">{{ __('payrolls.gross') }}</span>
                                            <span class="font-bold text-indigo-700">৳{{ number_format($item->gross_salary, 2) }}</span>
                                        </div>
                                    </div>

                                    <div class="px-3 py-2 space-y-1.5">
                                        <div class="flex items-center justify-between gap-2">
                                            <span class="text-amber-600">{{ __('payrolls.advance') }}</span>
                                            <span class="font-bold text-amber-700">৳{{ number_format($item->advance_adjusted, 2) }}</span>
                                        </div>

                                        <div class="flex items-center justify-between gap-2">
                                            <span class="text-sky-600">{{ __('payrolls.paid') }}</span>
                                            <span class="font-bold text-sky-700">৳{{ number_format($item->paid_amount, 2) }}</span>
                                        </div>

                                        <div class="flex items-center justify-between gap-2 border-t border-slate-200 pt-1.5">
                                            <span class="font-bold text-slate-800">{{ __('payrolls.net_salary') }}</span>
                                            <span class="font-bold text-slate-900">৳{{ number_format($item->net_salary, 2) }}</span>
                                        </div>

                                        <div class="flex items-center justify-between gap-2">
                                            <span class="font-bold text-slate-700">{{ __('payrolls.due') }}</span>
                                            <span class="font-bold text-slate-900">৳{{ number_format($item->due_amount, 2) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Action --}}
                            <div class="pt-1">
                                @if($canPay)
                                    <a href="{{ route('user.hr.payroll-payments.create', ['payroll' => $payroll->id, 'item' => $item->id]) }}"
                                       class="inline-flex w-full items-center justify-center bg-emerald-600 px-3 py-2 text-[11px] font-bold text-white transition hover:bg-emerald-700">
                                        {{ __('payrolls.pay') }}
                                    </a>
                                @elseif((float) $item->due_amount <= 0)
                                    <span class="inline-flex w-full items-center justify-center bg-emerald-100 px-3 py-2 text-[11px] font-bold text-emerald-700">
                                        {{ __('payrolls.paid_status') }}
                                    </span>
                                @else
                                    <span class="inline-flex w-full items-center justify-center bg-slate-100 px-3 py-2 text-[11px] font-bold text-slate-500">
                                        {{ __('payrolls.locked') }}
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="border border-slate-200 bg-white px-6 py-12 text-center shadow-sm">
            <div class="mx-auto flex h-12 w-12 items-center justify-center bg-slate-100 text-xl">
                📄
            </div>

            <h3 class="mt-3 text-sm font-bold text-slate-800">{{ __('payrolls.no_payroll_items_found') }}</h3>

            <p class="mt-2 text-[11px] text-slate-500">
                {{ __('payrolls.no_generated_employee_salary_item') }}
            </p>
        </div>
    @endif

    {{-- Bottom area --}}
    <div class="border border-slate-200 bg-white shadow-sm xl:col-span-2 overflow-hidden">
        <div class="border-b border-slate-200 px-4 py-3">
            <h3 class="text-sm font-bold text-slate-800">{{ __('payrolls.payroll_payments') }}</h3>
            <p class="mt-1 text-[11px] text-slate-500">{{ __('payrolls.payroll_payments_note') }}</p>
        </div>

        <div class="overflow-x-auto">
            @if($payroll->payments->count())
                <table class="min-w-full text-[11px]">
                    <thead class="bg-slate-50">
                        <tr class="border-b border-slate-200">
                            <th class="px-3 py-2 text-left font-semibold text-slate-600">{{ __('payrolls.employee') }}</th>
                            <th class="px-3 py-2 text-left font-semibold text-slate-600">{{ __('payrolls.date') }}</th>
                            <th class="px-3 py-2 text-left font-semibold text-slate-600">{{ __('payrolls.method') }}</th>
                            <th class="px-3 py-2 text-left font-semibold text-slate-600">{{ __('payrolls.reference') }}</th>
                            <th class="px-3 py-2 text-left font-semibold text-slate-600">{{ __('payrolls.note') }}</th>
                            <th class="px-3 py-2 text-right font-semibold text-slate-600">{{ __('payrolls.amount') }}</th>
                            <th class="px-3 py-2 text-center font-semibold text-slate-600">{{ __('payrolls.action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($payroll->payments as $payment)
                            @php
                                $payrollItem = $payroll->items->firstWhere('employee_id', $payment->employee_id);
                            @endphp

                            <tr class="border-b border-slate-100 hover:bg-slate-50">
                                <td class="px-3 py-2 text-slate-800 font-medium whitespace-nowrap">
                                    {{ $payment->employee->name ?? __('payrolls.na') }}
                                </td>

                                <td class="px-3 py-2 text-slate-600 whitespace-nowrap">
                                    {{ \Carbon\Carbon::parse($payment->payment_date)->format('d M, Y') }}
                                </td>

                                <td class="px-3 py-2 text-slate-600 whitespace-nowrap">
                                    {{ $payment->payment_method ?? '—' }}
                                </td>

                                <td class="px-3 py-2 text-slate-600 whitespace-nowrap">
                                    {{ $payment->reference_no ?? '—' }}
                                </td>

                                <td class="px-3 py-2 text-slate-600">
                                    {{ $payment->note ?? '—' }}
                                </td>

                                <td class="px-3 py-2 text-right font-bold text-emerald-600 whitespace-nowrap">
                                    ৳{{ number_format((float) $payment->amount, 2) }}
                                </td>

                                <td class="px-3 py-2 text-center whitespace-nowrap">
                                    <div class="inline-flex items-center gap-1">
                                        @if($payrollItem)
                                            <a href="{{ route('user.hr.pdf.payslip', ['payroll' => $payroll->id, 'item' => $payrollItem->id]) }}"
                                               target="_blank"
                                               class="inline-flex items-center justify-center border border-indigo-200 bg-indigo-50 px-2.5 py-1 text-[10px] font-bold text-indigo-700 hover:bg-indigo-100">
                                                {{ __('payrolls.payslip') }}
                                            </a>
                                        @else
                                            <span class="inline-flex items-center justify-center border border-slate-200 bg-slate-100 px-2.5 py-1 text-[10px] font-bold text-slate-400">
                                                {{ __('payrolls.na') }}
                                            </span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="py-10 text-center text-[11px] text-slate-500">
                    {{ __('payrolls.no_payroll_payment_found') }}
                </div>
            @endif
        </div>
    </div>

    <div class="border border-slate-200 bg-white p-4 shadow-sm">
        <h3 class="text-sm font-bold text-slate-800">{{ __('payrolls.summary') }}</h3>

        <div class="mt-3 space-y-2 text-[11px]">
            <div class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2">
                <span class="font-medium text-slate-600">{{ __('payrolls.employees') }}</span>
                <span class="font-bold text-slate-900">{{ $payroll->items->count() }}</span>
            </div>

            <div class="flex items-center justify-between border border-rose-200 bg-rose-50 px-3 py-2">
                <span class="font-medium text-rose-700">{{ __('payrolls.total_deduction') }}</span>
                <span class="font-bold text-rose-700">৳{{ number_format($totalDeduction, 2) }}</span>
            </div>

            <div class="flex items-center justify-between border border-emerald-200 bg-emerald-50 px-3 py-2">
                <span class="font-medium text-emerald-700">{{ __('payrolls.total_overtime') }}</span>
                <span class="font-bold text-emerald-700">৳{{ number_format($totalOvertime, 2) }}</span>
            </div>

            <div class="flex items-center justify-between border border-amber-200 bg-amber-50 px-3 py-2">
                <span class="font-medium text-amber-700">{{ __('payrolls.advance_adjusted') }}</span>
                <span class="font-bold text-amber-700">৳{{ number_format($totalAdvance, 2) }}</span>
            </div>

            <div class="flex items-center justify-between border border-indigo-200 bg-indigo-50 px-3 py-2">
                <span class="font-medium text-indigo-700">{{ __('payrolls.net_salary') }}</span>
                <span class="font-bold text-indigo-700">৳{{ number_format($totalNet, 2) }}</span>
            </div>

            <div class="flex items-center justify-between border border-sky-200 bg-sky-50 px-3 py-2">
                <span class="font-medium text-sky-700">{{ __('payrolls.paid_amount') }}</span>
                <span class="font-bold text-sky-700">৳{{ number_format($totalPaid, 2) }}</span>
            </div>

            <div class="flex items-center justify-between border border-slate-300 bg-slate-100 px-3 py-2">
                <span class="font-medium text-slate-700">{{ __('payrolls.due_amount') }}</span>
                <span class="font-bold text-slate-900">৳{{ number_format($totalDue, 2) }}</span>
            </div>
        </div>

        <div class="mt-4 border border-slate-200 bg-slate-50 p-3">
            <h4 class="text-[11px] font-bold text-slate-800">{{ __('payrolls.status_note') }}</h4>
            <p class="mt-2 text-[11px] leading-5 text-slate-600">
                {{ __('payrolls.status_note_text') }}
            </p>
        </div>
    </div>
</div>
@endsection