@extends('layouts.app')

@section('content')
    @php
        $selectedEmployee = $employees->firstWhere('id', old('employee_id', $salary->employee_id));

        $baseSalaryValue = (int) old(
            'base_salary',
            (int) round($selectedEmployee->base_salary ?? $salary->base_salary ?? 0)
        );

        $uiPositionAllowance = (int) old('ui_position_allowance', 0);
        $uiAttendanceAllowance = (int) old('ui_attendance_allowance', 0);
        $uiMealAllowance = (int) old('ui_meal_allowance', 0);
        $uiTransportAllowance = (int) old('ui_transport_allowance', 0);
        $uiBpjsAllowance = (int) old('ui_bpjs_allowance', 0);

        $usedBreakdownAllowance =
            $uiPositionAllowance +
            $uiAttendanceAllowance +
            $uiMealAllowance +
            $uiTransportAllowance +
            $uiBpjsAllowance;

        $uiOtherAllowance = (int) old(
            'ui_other_allowance',
            max(0, (int) round(($salary->allowance ?? 0) - $usedBreakdownAllowance))
        );

        $uiOvertimeAmount = (int) old('ui_overtime_amount', (int) round($salary->overtime ?? 0));

        $uiPerformanceBonus = (int) old('ui_performance_bonus', 0);
        $uiOtherBonus = (int) old(
            'ui_other_bonus',
            max(0, (int) round(($salary->bonus ?? 0) - $uiPerformanceBonus))
        );

        $uiLateDeduction = (int) old('ui_late_deduction', 0);
        $uiAbsentDeduction = (int) old('ui_absent_deduction', 0);
        $uiAdvanceDeduction = (int) old('ui_advance_deduction', 0);

        $usedBreakdownDeduction =
            $uiLateDeduction +
            $uiAbsentDeduction +
            $uiAdvanceDeduction;

        $uiOtherDeduction = (int) old(
            'ui_other_deduction',
            max(0, (int) round(($salary->deduction ?? 0) - $usedBreakdownDeduction))
        );

        $employeeSalaryMap = $employees->mapWithKeys(function ($employee) {
            return [
                $employee->id => [
                    'base_salary' => (int) round($employee->base_salary ?? 0),
                ]
            ];
        });
    @endphp

    <x-common.page-breadcrumb pageTitle="{{ $title }}" />

    @if($salary->exists && $salary->status === 'paid')
        <div class="mb-4 rounded-lg bg-warning-50 p-4 text-sm text-warning-700 dark:bg-warning-500/15 dark:text-warning-400">
            Gaji ini sudah dibayar. Edit nominal sebaiknya dihindari agar tetap sinkron dengan kas dan buku besar.
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 rounded-lg bg-error-50 p-4 text-sm text-error-700 dark:bg-error-500/15 dark:text-error-500">
            {{ session('error') }}
        </div>
    @endif

    <div
        x-data="salaryForm({
            employeeId: '{{ old('employee_id', $salary->employee_id) }}',
            employees: {{ $employeeSalaryMap->toJson() }},

            baseSalary: {{ $baseSalaryValue }},

            positionAllowance: {{ $uiPositionAllowance }},
            attendanceAllowance: {{ $uiAttendanceAllowance }},
            mealAllowance: {{ $uiMealAllowance }},
            transportAllowance: {{ $uiTransportAllowance }},
            bpjsAllowance: {{ $uiBpjsAllowance }},
            otherAllowance: {{ $uiOtherAllowance }},

            overtimeAmount: {{ $uiOvertimeAmount }},

            performanceBonus: {{ $uiPerformanceBonus }},
            otherBonus: {{ $uiOtherBonus }},

            lateDeduction: {{ $uiLateDeduction }},
            absentDeduction: {{ $uiAbsentDeduction }},
            advanceDeduction: {{ $uiAdvanceDeduction }},
            otherDeduction: {{ $uiOtherDeduction }},
        })"
        x-init="init()"
        class="space-y-6"
    >
        <div class="rounded-2xl border border-brand-200 bg-brand-50 p-5 dark:border-brand-900/40 dark:bg-brand-900/10">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                <div>
                    <div class="flex items-center gap-2">
                        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-500 text-white">
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6M7 4h10a2 2 0 012 2v12a2 2 0 01-2 2H7a2 2 0 01-2-2V6a2 2 0 012-2z"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white/90">
                                {{ $salary->exists ? 'Payroll Editor' : 'Smart Payroll Form' }}
                            </h3>
                            <p class="text-sm text-gray-600 dark:text-white/70">
                                Form ini memakai breakdown payroll yang lebih umum dipakai di perusahaan dan otomatis menghitung total akhir.
                            </p>
                        </div>
                    </div>

                    <div class="mt-4 flex flex-wrap gap-2">
                        <span class="inline-flex items-center rounded-lg bg-white px-3 py-1 text-xs font-medium text-gray-700 ring-1 ring-gray-200 dark:bg-white/10 dark:text-white/70 dark:ring-white/10">
                            Gaji pokok dari master karyawan
                        </span>
                        <span class="inline-flex items-center rounded-lg bg-white px-3 py-1 text-xs font-medium text-gray-700 ring-1 ring-gray-200 dark:bg-white/10 dark:text-white/70 dark:ring-white/10">
                            BPJS masuk pendapatan
                        </span>
                        <span class="inline-flex items-center rounded-lg bg-white px-3 py-1 text-xs font-medium text-gray-700 ring-1 ring-gray-200 dark:bg-white/10 dark:text-white/70 dark:ring-white/10">
                            Hitung realtime
                        </span>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-3 sm:grid-cols-3 lg:min-w-[540px]">
                    <div class="rounded-2xl bg-white p-4 ring-1 ring-gray-200 dark:bg-white/10 dark:ring-white/10">
                        <div class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-white/60">Pendapatan Kotor</div>
                        <div class="mt-2 text-lg font-bold text-gray-900 dark:text-white" x-text="rupiah(grossIncome)"></div>
                    </div>
                    <div class="rounded-2xl bg-white p-4 ring-1 ring-gray-200 dark:bg-white/10 dark:ring-white/10">
                        <div class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-white/60">Total Potongan</div>
                        <div class="mt-2 text-lg font-bold text-error-600 dark:text-error-400" x-text="rupiah(totalDeduction)"></div>
                    </div>
                    <div class="rounded-2xl bg-white p-4 ring-1 ring-gray-200 dark:bg-white/10 dark:ring-white/10">
                        <div class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-white/60">Take Home Pay</div>
                        <div class="mt-2 text-lg font-bold text-success-600 dark:text-success-400" x-text="rupiah(takeHomePay)"></div>
                    </div>
                </div>
            </div>
        </div>

        <form action="{{ $salary->exists ? route('salaries.update', $salary) : route('salaries.store') }}" method="POST">
            @csrf
            @if($salary->exists)
                @method('PUT')
            @endif

            <input type="hidden" name="base_salary" :value="baseSalary">
            <input type="hidden" name="allowance" :value="totalAllowance">
            <input type="hidden" name="overtime" :value="overtimeAmount">
            <input type="hidden" name="bonus" :value="totalBonus">
            <input type="hidden" name="deduction" :value="totalDeduction">

            <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
                <div class="xl:col-span-2 space-y-6">
                    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Informasi Dasar</h3>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Identitas karyawan dan periode payroll.</p>
                        </div>

                        <div class="p-5">
                            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
                                <div>
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                                        Karyawan <span class="text-error-500">*</span>
                                    </label>
                                    <select
                                        name="employee_id"
                                        x-model="employeeId"
                                        @change="setEmployee(employeeId)"
                                        required
                                        class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                    >
                                        <option value="">Pilih Karyawan</option>
                                        @foreach($employees as $employee)
                                            <option value="{{ $employee->id }}">
                                                {{ $employee->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('employee_id')
                                        <p class="mt-1.5 text-sm text-error-500">{{ $message }}</p>
                                    @enderror
                                </div>

                                <x-form.select
                                    name="period"
                                    label="Periode Gaji"
                                    placeholder="Pilih Periode"
                                    :value="old('period', $salary->period)"
                                    :options="$periods"
                                    :required="true"
                                />
                            </div>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Pendapatan</h3>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Komponen utama gaji yang diterima karyawan.</p>
                        </div>

                        <div class="p-5 space-y-6">
                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                                    Gaji Pokok <span class="text-error-500">*</span>
                                </label>
                                <div class="relative flex">
                                    <span class="inline-flex items-center px-4 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">Rp</span>
                                    <input
                                        type="text"
                                        :value="formatNumber(baseSalary)"
                                        readonly
                                        class="h-11 w-full rounded-r-lg border border-gray-300 bg-gray-50 px-4 py-2.5 text-sm text-gray-800 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-white/90"
                                        placeholder="0"
                                    >
                                </div>
                                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                                    Gaji pokok otomatis diambil dari data master karyawan.
                                </p>
                                @error('base_salary')
                                    <p class="mt-1.5 text-sm text-error-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
                                <div>
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Tunjangan Jabatan</label>
                                    <div class="relative flex">
                                        <span class="inline-flex items-center px-4 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">Rp</span>
                                        <input type="text" name="ui_position_allowance"
                                            :value="formatNumber(positionAllowance)"
                                            @input="positionAllowance = parseNumber($event.target.value); $event.target.value = formatNumber(positionAllowance)"
                                            class="h-11 w-full rounded-r-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                            placeholder="0">
                                    </div>
                                </div>

                                <div>
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Tunjangan Kehadiran</label>
                                    <div class="relative flex">
                                        <span class="inline-flex items-center px-4 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">Rp</span>
                                        <input type="text" name="ui_attendance_allowance"
                                            :value="formatNumber(attendanceAllowance)"
                                            @input="attendanceAllowance = parseNumber($event.target.value); $event.target.value = formatNumber(attendanceAllowance)"
                                            class="h-11 w-full rounded-r-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                            placeholder="0">
                                    </div>
                                </div>

                                <div>
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Uang Makan</label>
                                    <div class="relative flex">
                                        <span class="inline-flex items-center px-4 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">Rp</span>
                                        <input type="text" name="ui_meal_allowance"
                                            :value="formatNumber(mealAllowance)"
                                            @input="mealAllowance = parseNumber($event.target.value); $event.target.value = formatNumber(mealAllowance)"
                                            class="h-11 w-full rounded-r-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                            placeholder="0">
                                    </div>
                                </div>

                                <div>
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Uang Transport</label>
                                    <div class="relative flex">
                                        <span class="inline-flex items-center px-4 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">Rp</span>
                                        <input type="text" name="ui_transport_allowance"
                                            :value="formatNumber(transportAllowance)"
                                            @input="transportAllowance = parseNumber($event.target.value); $event.target.value = formatNumber(transportAllowance)"
                                            class="h-11 w-full rounded-r-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                            placeholder="0">
                                    </div>
                                </div>

                                <div>
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">BPJS Perusahaan</label>
                                    <div class="relative flex">
                                        <span class="inline-flex items-center px-4 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">Rp</span>
                                        <input type="text" name="ui_bpjs_allowance"
                                            :value="formatNumber(bpjsAllowance)"
                                            @input="bpjsAllowance = parseNumber($event.target.value); $event.target.value = formatNumber(bpjsAllowance)"
                                            class="h-11 w-full rounded-r-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                            placeholder="0">
                                    </div>
                                </div>

                                <div class="md:col-span-2">
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Tunjangan Lainnya</label>
                                    <div class="relative flex">
                                        <span class="inline-flex items-center px-4 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">Rp</span>
                                        <input type="text" name="ui_other_allowance"
                                            :value="formatNumber(otherAllowance)"
                                            @input="otherAllowance = parseNumber($event.target.value); $event.target.value = formatNumber(otherAllowance)"
                                            class="h-11 w-full rounded-r-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                            placeholder="0">
                                    </div>
                                </div>
                            </div>

                            <div class="rounded-2xl bg-gray-50 p-4 dark:bg-white/[0.04]">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <div class="text-sm font-medium text-gray-800 dark:text-white/90">Total Tunjangan</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">Dijumlahkan otomatis ke field allowance</div>
                                    </div>
                                    <div class="text-lg font-bold text-success-600 dark:text-success-400" x-text="rupiah(totalAllowance)"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Lembur & Bonus</h3>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Komponen tambahan berdasarkan performa dan jam kerja.</p>
                        </div>

                        <div class="p-5 grid grid-cols-1 gap-5 md:grid-cols-2">
                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Nominal Lembur</label>
                                <div class="relative flex">
                                    <span class="inline-flex items-center px-4 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">Rp</span>
                                    <input type="text" name="ui_overtime_amount"
                                        :value="formatNumber(overtimeAmount)"
                                        @input="overtimeAmount = parseNumber($event.target.value); $event.target.value = formatNumber(overtimeAmount)"
                                        class="h-11 w-full rounded-r-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                        placeholder="0">
                                </div>
                            </div>

                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Bonus Performa</label>
                                <div class="relative flex">
                                    <span class="inline-flex items-center px-4 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">Rp</span>
                                    <input type="text" name="ui_performance_bonus"
                                        :value="formatNumber(performanceBonus)"
                                        @input="performanceBonus = parseNumber($event.target.value); $event.target.value = formatNumber(performanceBonus)"
                                        class="h-11 w-full rounded-r-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                        placeholder="0">
                                </div>
                            </div>

                            <div class="md:col-span-2">
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Bonus / Insentif Lain</label>
                                <div class="relative flex">
                                    <span class="inline-flex items-center px-4 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">Rp</span>
                                    <input type="text" name="ui_other_bonus"
                                        :value="formatNumber(otherBonus)"
                                        @input="otherBonus = parseNumber($event.target.value); $event.target.value = formatNumber(otherBonus)"
                                        class="h-11 w-full rounded-r-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                        placeholder="0">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Potongan</h3>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Potongan umum yang sering dipakai di payroll perusahaan.</p>
                        </div>

                        <div class="p-5 grid grid-cols-1 gap-5 md:grid-cols-2">
                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Potongan Keterlambatan</label>
                                <div class="relative flex">
                                    <span class="inline-flex items-center px-4 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">Rp</span>
                                    <input type="text" name="ui_late_deduction"
                                        :value="formatNumber(lateDeduction)"
                                        @input="lateDeduction = parseNumber($event.target.value); $event.target.value = formatNumber(lateDeduction)"
                                        class="h-11 w-full rounded-r-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                        placeholder="0">
                                </div>
                            </div>

                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Potongan Absen</label>
                                <div class="relative flex">
                                    <span class="inline-flex items-center px-4 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">Rp</span>
                                    <input type="text" name="ui_absent_deduction"
                                        :value="formatNumber(absentDeduction)"
                                        @input="absentDeduction = parseNumber($event.target.value); $event.target.value = formatNumber(absentDeduction)"
                                        class="h-11 w-full rounded-r-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                        placeholder="0">
                                    </div>
                            </div>

                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Potongan Kasbon</label>
                                <div class="relative flex">
                                    <span class="inline-flex items-center px-4 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">Rp</span>
                                    <input type="text" name="ui_advance_deduction"
                                        :value="formatNumber(advanceDeduction)"
                                        @input="advanceDeduction = parseNumber($event.target.value); $event.target.value = formatNumber(advanceDeduction)"
                                        class="h-11 w-full rounded-r-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                        placeholder="0">
                                </div>
                            </div>

                            <div class="md:col-span-2">
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Potongan Lainnya</label>
                                <div class="relative flex">
                                    <span class="inline-flex items-center px-4 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">Rp</span>
                                    <input type="text" name="ui_other_deduction"
                                        :value="formatNumber(otherDeduction)"
                                        @input="otherDeduction = parseNumber($event.target.value); $event.target.value = formatNumber(otherDeduction)"
                                        class="h-11 w-full rounded-r-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                        placeholder="0">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Catatan</h3>
                        </div>

                        <div class="p-5">
                            <x-form.textarea
                                name="notes"
                                label="Catatan Payroll"
                                placeholder="Contoh: bonus target bulan ini, kasbon tahap 2, potongan keterlambatan, dll..."
                                :value="$salary->notes"
                                rows="4"
                            />
                        </div>
                    </div>
                </div>

                <div class="space-y-6">
                    <div class="sticky top-6 rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                        <div class="flex items-center gap-2">
                            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-success-500 text-white">
                                <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-3.314 0-6 1.79-6 4s2.686 4 6 4 6-1.79 6-4-2.686-4-6-4zm0 0V4m0 12v4"/>
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">AI Payroll Summary</h3>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Preview gaji bersih secara realtime.</p>
                            </div>
                        </div>

                        <div class="mt-5 space-y-4">
                            <div class="rounded-2xl bg-gray-50 p-4 dark:bg-white/[0.04]">
                                <div class="text-xs uppercase tracking-wide text-gray-500 dark:text-white/60">Gaji Pokok</div>
                                <div class="mt-1 text-lg font-semibold text-gray-800 dark:text-white" x-text="rupiah(baseSalary)"></div>
                            </div>

                            <div class="rounded-2xl bg-gray-50 p-4 dark:bg-white/[0.04]">
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-white/70">Total Tunjangan</span>
                                    <span class="text-sm font-semibold text-success-600 dark:text-success-400" x-text="rupiah(totalAllowance)"></span>
                                </div>
                                <div class="mt-2 flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-white/70">Lembur</span>
                                    <span class="text-sm font-semibold text-success-600 dark:text-success-400" x-text="rupiah(overtimeAmount)"></span>
                                </div>
                                <div class="mt-2 flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-white/70">Total Bonus</span>
                                    <span class="text-sm font-semibold text-success-600 dark:text-success-400" x-text="rupiah(totalBonus)"></span>
                                </div>
                            </div>

                            <div class="rounded-2xl bg-gray-50 p-4 dark:bg-white/[0.04]">
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-white/70">Pendapatan Kotor</span>
                                    <span class="text-sm font-semibold text-gray-800 dark:text-white" x-text="rupiah(grossIncome)"></span>
                                </div>
                                <div class="mt-2 flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-white/70">Total Potongan</span>
                                    <span class="text-sm font-semibold text-error-600 dark:text-error-400" x-text="rupiah(totalDeduction)"></span>
                                </div>
                            </div>

                            <div class="rounded-2xl border border-success-200 bg-success-50 p-4 dark:border-success-500/20 dark:bg-success-500/10">
                                <div class="text-xs uppercase tracking-wide text-success-700 dark:text-success-300">Take Home Pay</div>
                                <div class="mt-2 text-2xl font-bold text-success-700 dark:text-success-300" x-text="rupiah(takeHomePay)"></div>
                            </div>

                            <div class="rounded-2xl border border-gray-200 p-4 dark:border-gray-800">
                                <div class="text-sm font-medium text-gray-800 dark:text-white/90">Komponen yang umum dipakai</div>
                                <div class="mt-3 flex flex-wrap gap-2">
                                    <span class="rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-700 dark:bg-white/10 dark:text-white/70">Gaji Pokok</span>
                                    <span class="rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-700 dark:bg-white/10 dark:text-white/70">Tunjangan Jabatan</span>
                                    <span class="rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-700 dark:bg-white/10 dark:text-white/70">Kehadiran</span>
                                    <span class="rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-700 dark:bg-white/10 dark:text-white/70">Makan</span>
                                    <span class="rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-700 dark:bg-white/10 dark:text-white/70">Transport</span>
                                    <span class="rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-700 dark:bg-white/10 dark:text-white/70">BPJS</span>
                                    <span class="rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-700 dark:bg-white/10 dark:text-white/70">Lembur</span>
                                    <span class="rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-700 dark:bg-white/10 dark:text-white/70">Bonus</span>
                                    <span class="rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-700 dark:bg-white/10 dark:text-white/70">Kasbon</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-6 flex items-center justify-end gap-3 border-t border-gray-200 pt-6 dark:border-gray-700">
                <a href="{{ route('salaries.index') }}" class="rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                    Batal
                </a>
                <button type="submit" class="rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600">
                    Simpan Data
                </button>
            </div>
        </form>
    </div>

    <script>
        function salaryForm(config) {
            return {
                employeeId: config.employeeId || '',
                employees: config.employees || {},

                baseSalary: Number(config.baseSalary || 0),

                positionAllowance: Number(config.positionAllowance || 0),
                attendanceAllowance: Number(config.attendanceAllowance || 0),
                mealAllowance: Number(config.mealAllowance || 0),
                transportAllowance: Number(config.transportAllowance || 0),
                bpjsAllowance: Number(config.bpjsAllowance || 0),
                otherAllowance: Number(config.otherAllowance || 0),

                overtimeAmount: Number(config.overtimeAmount || 0),

                performanceBonus: Number(config.performanceBonus || 0),
                otherBonus: Number(config.otherBonus || 0),

                lateDeduction: Number(config.lateDeduction || 0),
                absentDeduction: Number(config.absentDeduction || 0),
                advanceDeduction: Number(config.advanceDeduction || 0),
                otherDeduction: Number(config.otherDeduction || 0),

                init() {
                    if (this.employeeId) {
                        this.setEmployee(this.employeeId);
                    }
                },

                setEmployee(employeeId) {
                    this.employeeId = employeeId;
                    const employee = this.employees[employeeId];

                    if (employee) {
                        this.baseSalary = Number(employee.base_salary || 0);
                    } else {
                        this.baseSalary = 0;
                    }
                },

                parseNumber(value) {
                    if (!value) return 0;
                    return Number(String(value).replace(/[^0-9]/g, '')) || 0;
                },

                formatNumber(value) {
                    return new Intl.NumberFormat('id-ID').format(Number(value || 0));
                },

                rupiah(value) {
                    return 'Rp ' + this.formatNumber(value || 0);
                },

                get totalAllowance() {
                    return (
                        this.positionAllowance +
                        this.attendanceAllowance +
                        this.mealAllowance +
                        this.transportAllowance +
                        this.bpjsAllowance +
                        this.otherAllowance
                    );
                },

                get totalBonus() {
                    return this.performanceBonus + this.otherBonus;
                },

                get totalDeduction() {
                    return (
                        this.lateDeduction +
                        this.absentDeduction +
                        this.advanceDeduction +
                        this.otherDeduction
                    );
                },

                get grossIncome() {
                    return this.baseSalary + this.totalAllowance + this.overtimeAmount + this.totalBonus;
                },

                get takeHomePay() {
                    return this.grossIncome - this.totalDeduction;
                }
            };
        }
    </script>
@endsection