@extends('layouts.app')

@section('content')
    <x-common.page-breadcrumb pageTitle="{{ $title }}" />

    @php
        $paymentAccounts = $paymentAccounts ?? collect();
    @endphp

    @if(session('success'))
        <div class="mb-4 rounded-xl border border-success-200 bg-success-50 p-4 text-sm text-success-700 dark:border-success-500/20 dark:bg-success-500/15 dark:text-success-400">
            {{ session('success') }}
        </div>
    @endif

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

    <div
        x-data="{
            openPay: false,
            payAction: '',
            payName: '',
            payTotal: '',
            paidAt: '{{ now()->toDateString() }}',
            paymentSource: 'cash',
            paymentAccountId: '',
            paymentNotes: '',
            open(action, name, total) {
                this.openPay = true;
                this.payAction = action;
                this.payName = name;
                this.payTotal = total;
                this.paidAt = '{{ now()->toDateString() }}';
                this.paymentSource = 'cash';
                this.paymentAccountId = '';
                this.paymentNotes = '';
                document.body.style.overflow = 'hidden';
            },
            close() {
                this.openPay = false;
                document.body.style.overflow = '';
            }
        }"
        @keydown.escape.window="if(openPay) close()"
        class="rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-white/[0.03]"
    >
        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Daftar Gaji Karyawan</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Kelola draft gaji, pembayaran, dan slip karyawan dalam satu tempat.</p>
                </div>

                <a href="{{ route('salaries.create') }}"
                   class="inline-flex items-center gap-2 rounded-xl bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs transition hover:bg-brand-600">
                    <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 4v16m8-8H4" />
                    </svg>
                    Input Gaji
                </a>
            </div>
        </div>

        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
            <form action="{{ route('salaries.index') }}" method="GET" class="flex flex-col gap-4 sm:flex-row sm:items-end">
                <div class="w-full sm:flex-1">
                    <x-form.select
                        name="employee_id"
                        label="Karyawan"
                        placeholder="Semua Karyawan"
                        :value="request('employee_id')"
                        :options="$employees->pluck('name', 'id')->toArray()"
                    />
                </div>
                <div class="w-full sm:flex-1">
                    <x-form.select
                    name="period"
                    label="Periode"
                    placeholder="Semua Periode"
                    :value="$selectedPeriod"
                    :options="$periods"
/>
                </div>
                <div class="w-full sm:flex-1">
                    <x-form.select
                        name="status"
                        label="Status"
                        placeholder="Semua"
                        :value="request('status')"
                        :options="$statuses"
                    />
                </div>
                <button type="submit"
                        class="h-11 shrink-0 rounded-xl bg-gray-100 px-6 text-sm font-medium text-gray-700 transition hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                    Filter
                </button>
            </form>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-200 dark:border-gray-800">
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Karyawan</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Periode</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Gaji Pokok</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Tunjangan</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Potongan</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Total</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Status</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                    @forelse($salaries as $salary)
                        <tr class="transition hover:bg-gray-50 dark:hover:bg-white/[0.02]">
                            <td class="px-5 py-4">
                                <div>
                                    <div class="text-sm font-medium text-gray-800 dark:text-white/90">{{ $salary->employee->name }}</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ $salary->employee->position }}</div>
                                </div>
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-500 dark:text-gray-400">{{ $salary->period_label }}</td>
                            <td class="px-5 py-4 text-sm text-gray-500 dark:text-gray-400">Rp {{ number_format($salary->base_salary, 0, ',', '.') }}</td>
                            <td class="px-5 py-4 text-sm text-success-600 dark:text-success-400">+Rp {{ number_format($salary->allowance + $salary->overtime + $salary->bonus, 0, ',', '.') }}</td>
                            <td class="px-5 py-4 text-sm text-error-600 dark:text-error-400">-Rp {{ number_format($salary->deduction, 0, ',', '.') }}</td>
                            <td class="px-5 py-4 text-sm font-semibold text-gray-800 dark:text-white/90">{{ $salary->formatted_total }}</td>
                            <td class="px-5 py-4">
                                @if($salary->status === 'paid')
                                    <div class="space-y-1">
                                        <span class="inline-flex items-center rounded-full bg-success-50 px-2.5 py-1 text-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-400">
                                            Dibayar
                                        </span>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">
                                            {{ $salary->payment_source === 'bank' ? 'Kas Bank' : 'Kas Tunai' }}
                                            @if(!empty($salary->paid_at))
                                                • {{ \Carbon\Carbon::parse($salary->paid_at)->format('d/m/Y') }}
                                            @endif
                                        </div>
                                    </div>
                                @else
                                    <span class="inline-flex items-center rounded-full bg-warning-50 px-2.5 py-1 text-xs font-medium text-warning-700 dark:bg-warning-500/15 dark:text-warning-400">
                                        Draft
                                    </span>
                                @endif
                            </td>
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-2">
                                    <a href="{{ route('salaries.slip', $salary) }}"
                                       target="_blank"
                                       class="text-gray-500 transition hover:text-brand-500"
                                       title="Cetak Slip">
                                        <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                                        </svg>
                                    </a>

                                    @if($salary->status === 'draft')
                                        <button
                                            type="button"
                                            @click="open('{{ route('salaries.mark-paid', $salary) }}', '{{ addslashes($salary->employee->name) }}', '{{ addslashes($salary->formatted_total) }}')"
                                            class="text-gray-500 transition hover:text-success-500"
                                            title="Bayar Gaji"
                                        >
                                            <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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                            </svg>
                                        </button>
                                    @endif

                                    <a href="{{ route('salaries.edit', $salary) }}"
                                       class="text-gray-500 transition hover:text-brand-500"
                                       title="{{ $salary->status === 'paid' ? 'Edit Gaji Dibayar' : 'Edit' }}">
                                        <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                        </svg>
                                    </a>

                                    <button
                                        type="button"
                                        @click="$dispatch('open-delete-modal', { action: '{{ route('salaries.destroy', $salary) }}' })"
                                        class="text-gray-500 transition hover:text-error-500"
                                        title="{{ $salary->status === 'paid' ? 'Hapus Gaji Dibayar' : 'Hapus' }}"
                                    >
                                        <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-5 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                                Tidak ada data gaji
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="border-t border-gray-200 px-5 py-4 dark:border-gray-800">
            {{ $salaries->links() }}
        </div>

        <x-ui.delete-confirm />

        <div
            x-show="openPay"
            x-cloak
            x-transition.opacity
            class="fixed inset-0 z-[9999] overflow-y-auto bg-slate-950/60 backdrop-blur-[6px]"
            @click.self="close()"
        >
            <div class="flex min-h-screen items-center justify-center p-4">
                <div
                    x-show="openPay"
                    x-transition:enter="transition ease-out duration-200"
                    x-transition:enter-start="opacity-0 translate-y-4 scale-[0.98]"
                    x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                    x-transition:leave="transition ease-in duration-150"
                    x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                    x-transition:leave-end="opacity-0 translate-y-4 scale-[0.98]"
                    class="w-full max-w-xl overflow-hidden rounded-[28px] border border-white/10 bg-white shadow-2xl dark:bg-slate-900"
                >
                    <div class="relative overflow-hidden border-b border-gray-200 dark:border-gray-800">
                        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/10 via-cyan-500/10 to-violet-500/10"></div>
                        <div class="relative px-6 py-5">
                            <div class="flex items-start justify-between gap-4">
                                <div class="flex items-start gap-3">
                                    <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-500 text-white shadow-lg shadow-brand-500/20">
                                        <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z" />
                                        </svg>
                                    </div>

                                    <div>
                                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Bayar Gaji</h3>
                                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                            Konfirmasi pembayaran payroll dengan sumber dana yang tepat.
                                        </p>
                                    </div>
                                </div>

                                <button
                                    type="button"
                                    @click="close()"
                                    class="rounded-xl p-2 text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-white/10 dark:hover:text-gray-300"
                                >
                                    <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>

                            <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
                                <div class="rounded-2xl border border-gray-200 bg-white/80 p-4 backdrop-blur dark:border-white/10 dark:bg-white/5">
                                    <div class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-white/50">Karyawan</div>
                                    <div class="mt-1 text-sm font-semibold text-gray-900 dark:text-white" x-text="payName"></div>
                                </div>
                                <div class="rounded-2xl border border-gray-200 bg-white/80 p-4 backdrop-blur dark:border-white/10 dark:bg-white/5">
                                    <div class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-white/50">Nominal Gaji</div>
                                    <div class="mt-1 text-sm font-semibold text-success-600 dark:text-success-400" x-text="payTotal"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <form :action="payAction" method="POST" class="flex max-h-[90vh] flex-col">
                        @csrf
                        @method('PATCH')

                        <div class="flex-1 overflow-y-auto px-6 py-5">
                            <div class="space-y-5">
                                <div>
                                    <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Tanggal Bayar</label>
                                    <input
                                        type="date"
                                        name="paid_at"
                                        x-model="paidAt"
                                        required
                                        class="h-12 w-full rounded-2xl border border-gray-300 bg-white px-4 text-sm text-gray-800 shadow-sm transition focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-800 dark:text-white/90"
                                    >
                                </div>

                                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                    <button
                                        type="button"
                                        @click="paymentSource = 'cash'; paymentAccountId = ''"
                                        :class="paymentSource === 'cash'
                                            ? 'border-success-500 bg-success-50 ring-2 ring-success-500/10 dark:bg-success-500/10'
                                            : 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800'"
                                        class="rounded-2xl border p-4 text-left transition"
                                    >
                                        <div class="flex items-center gap-3">
                                            <div class="flex h-11 w-11 items-center justify-center rounded-2xl 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z" />
                                                </svg>
                                            </div>
                                            <div>
                                                <div class="text-sm font-semibold text-gray-900 dark:text-white">Kas Tunai</div>
                                                <div class="text-xs text-gray-500 dark:text-gray-400">Pembayaran cash langsung dari kas operasional.</div>
                                            </div>
                                        </div>
                                    </button>

                                    <button
                                        type="button"
                                        @click="paymentSource = 'bank'"
                                        :class="paymentSource === 'bank'
                                            ? 'border-brand-500 bg-brand-50 ring-2 ring-brand-500/10 dark:bg-brand-500/10'
                                            : 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800'"
                                        class="rounded-2xl border p-4 text-left transition"
                                    >
                                        <div class="flex items-center gap-3">
                                            <div class="flex h-11 w-11 items-center justify-center rounded-2xl 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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                                                </svg>
                                            </div>
                                            <div>
                                                <div class="text-sm font-semibold text-gray-900 dark:text-white">Kas Bank</div>
                                                <div class="text-xs text-gray-500 dark:text-gray-400">Pembayaran transfer melalui rekening perusahaan.</div>
                                            </div>
                                        </div>
                                    </button>
                                </div>

                                <input type="hidden" name="payment_source" x-model="paymentSource">

                                <div
                                    x-show="paymentSource === 'bank'"
                                    x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 -translate-y-2"
                                    x-transition:enter-end="opacity-100 translate-y-0"
                                    x-transition:leave="transition ease-in duration-150"
                                    x-transition:leave-start="opacity-100 translate-y-0"
                                    x-transition:leave-end="opacity-0 -translate-y-2"
                                    class="rounded-2xl border border-brand-200 bg-brand-50/60 p-4 dark:border-brand-500/20 dark:bg-brand-500/10"
                                >
                                    <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Pilih Rekening Bank</label>
                                    <select
                                        name="payment_account_id"
                                        x-model="paymentAccountId"
                                        :required="paymentSource === 'bank'"
                                        class="h-12 w-full rounded-2xl border border-gray-300 bg-white px-4 text-sm text-gray-800 shadow-sm transition focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-800 dark:text-white/90"
                                    >
                                        <option value="">Pilih rekening</option>
                                        @foreach($paymentAccounts as $account)
                                            <option value="{{ $account->id }}">{{ $account->name }}</option>
                                        @endforeach
                                    </select>
                                    <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                                        Wajib dipilih agar arus kas bank dan buku besar tetap sinkron.
                                    </p>
                                </div>

                                <div>
                                    <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Catatan Pembayaran</label>
                                    <textarea
                                        name="payment_notes"
                                        x-model="paymentNotes"
                                        rows="4"
                                        class="w-full rounded-2xl border border-gray-300 bg-white px-4 py-3 text-sm text-gray-800 shadow-sm placeholder:text-gray-400 transition focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-800 dark:text-white/90"
                                        placeholder="Contoh: payroll akhir bulan, transfer batch 1, dibayarkan oleh finance, dll."
                                    ></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="border-t border-gray-200 bg-gray-50/80 px-6 py-4 backdrop-blur dark:border-gray-800 dark:bg-white/[0.03]">
                            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                <div class="text-xs text-gray-500 dark:text-gray-400">
                                    <span class="font-medium text-gray-700 dark:text-gray-300">Status:</span>
                                    Pembayaran akan menandai slip sebagai <span class="font-semibold text-success-600 dark:text-success-400">dibayar</span>.
                                </div>

                                <div class="flex justify-end gap-3">
                                    <button
                                        type="button"
                                        @click="close()"
                                        class="rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm transition hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
                                    >
                                        Batal
                                    </button>
                                    <button
                                        type="submit"
                                        class="inline-flex items-center gap-2 rounded-xl bg-success-500 px-5 py-2.5 text-sm font-medium text-white shadow-lg shadow-success-500/20 transition hover:bg-success-600"
                                    >
                                        <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                        </svg>
                                        Simpan Pembayaran
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection