@extends('layouts.app')

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

    <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">
                {{ $employee->exists ? 'Edit Data Karyawan' : 'Form Karyawan Baru' }}
            </h3>
        </div>

        <div class="p-5">
            <form action="{{ $employee->exists ? route('employees.update', $employee) : route('employees.store') }}" method="POST">
                @csrf

                @if($employee->exists)
                    @method('PUT')
                @endif

                <div class="mb-6 rounded-2xl border border-brand-200 bg-brand-50 p-4 dark:border-brand-900/40 dark:bg-brand-900/10">
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
                        User Login
                    </label>

                    <select
                        name="user_id"
                        class="h-11 w-full rounded-lg border border-gray-300 bg-white 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 dark:focus:border-brand-800"
                    >
                        <option value="">Tidak dihubungkan ke akun login</option>

                        @foreach(($users ?? collect()) as $user)
                            <option value="{{ $user->id }}" @selected((string) old('user_id', $employee->user_id ?? '') === (string) $user->id)>
                                {{ $user->name }} — {{ $user->email }}
                            </option>
                        @endforeach
                    </select>

                    <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                        Hubungkan karyawan dengan akun login agar absensi masuk ke karyawan yang benar dan tidak tertukar dengan akun lain.
                    </p>

                    @error('user_id')
                        <p class="mt-1.5 text-sm text-error-500">{{ $message }}</p>
                    @enderror
                </div>

                <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                    <div class="space-y-5">
                        <x-form.input
                            name="employee_id"
                            label="ID Karyawan"
                            placeholder="Contoh: KRY001"
                            :value="old('employee_id', $employee->employee_id)"
                            :required="true"
                        />

                        <x-form.input
                            name="name"
                            label="Nama Lengkap"
                            placeholder="Nama karyawan"
                            :value="old('name', $employee->name)"
                            :required="true"
                        />

                        <x-form.select
                            name="gender"
                            label="Jenis Kelamin"
                            placeholder="Pilih Jenis Kelamin"
                            :value="old('gender', $employee->gender ?? 'L')"
                            :options="$genders"
                            :required="true"
                        />

                        <x-form.input
                            name="phone"
                            label="No. Handphone"
                            placeholder="08xxxxxxxxxx"
                            :value="old('phone', $employee->phone)"
                        />

                        <x-form.input
                            name="email"
                            label="Email"
                            type="email"
                            placeholder="email@example.com"
                            :value="old('email', $employee->email)"
                        />
                    </div>

                    <div class="space-y-5">
                        <x-form.input
                            name="position"
                            label="Jabatan"
                            placeholder="Contoh: Operator, Designer, Kasir"
                            :value="old('position', $employee->position)"
                            :required="true"
                        />

                        <x-form.date-picker
                            name="join_date"
                            label="Tanggal Masuk"
                            placeholder="Pilih tanggal"
                            :defaultDate="old('join_date', $employee->join_date?->format('Y-m-d'))"
                        />

                        <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"
                                    name="base_salary"
                                    value="{{ old('base_salary', number_format($employee->base_salary ?? 0, 0, ',', '.')) }}"
                                    required
                                    x-data
                                    x-on:input="$el.value = $el.value.replace(/[^0-9]/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, '.')"
                                    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 dark:focus:border-brand-800"
                                    placeholder="0"
                                >
                            </div>

                            <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                                Nilai ini akan otomatis menjadi gaji pokok saat membuat payroll.
                            </p>

                            @error('base_salary')
                                <p class="mt-1.5 text-sm text-error-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <x-form.select
                            name="status"
                            label="Status"
                            placeholder="Pilih Status"
                            :value="old('status', $employee->status ?? 'active')"
                            :options="$statuses"
                            :required="true"
                        />

                        <x-form.textarea
                            name="address"
                            label="Alamat"
                            placeholder="Alamat lengkap..."
                            :value="old('address', $employee->address)"
                            rows="3"
                        />
                    </div>
                </div>

                @if(auth()->user() && method_exists(auth()->user(), 'isDeveloper') && auth()->user()->isDeveloper())
                    <div class="mt-6 rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-white/[0.03]">
                        <label class="flex items-start gap-3 text-sm text-gray-700 dark:text-gray-300">
                            <input
                                type="checkbox"
                                name="is_auto_attendance"
                                value="1"
                                class="mt-1 rounded border-gray-300 text-brand-500 focus:ring-brand-500"
                                @checked(old('is_auto_attendance', $employee->is_auto_attendance ?? false))
                            >

                            <span>
                                <span class="block font-medium text-gray-800 dark:text-white/90">
                                    Auto Absen / Jam Flexible
                                </span>
                                <span class="mt-1 block text-xs text-gray-500 dark:text-gray-400">
                                    Pengaturan khusus Developer untuk owner / IT / tim flexible yang tidak wajib absen manual.
                                </span>
                            </span>
                        </label>

                        <div class="mt-4">
                            <x-form.input
                                name="auto_attendance_note"
                                label="Catatan Auto Absen"
                                placeholder="Contoh: Jam kerja flexible"
                                :value="old('auto_attendance_note', $employee->auto_attendance_note ?? '')"
                            />
                        </div>
                    </div>
                @endif

                <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('employees.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>
    </div>
@endsection