@extends('layouts.user')

@section('title', __('employees.add_employee'))
@section('page_title', __('employees.add_employee'))
@section('breadcrumb', __('employees.breadcrumb'))

@section('content')
<div class="w-full px-1 sm:px-2 lg:px-3 space-y-6">

    {{-- Header --}}
    <div class="border border-slate-200 bg-gradient-to-r from-white to-slate-50 p-4 shadow-sm">
        <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <div>
                <p class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">{{ __('employees.hr_management') }}</p>
                <h1 class="mt-1 text-lg font-bold text-slate-800">{{ __('employees.add_new_employee') }}</h1>
                <p class="mt-1 max-w-2xl text-xs text-slate-500">
                    {{ __('employees.create_employee_description') }}
                </p>
            </div>

            <div class="flex items-center gap-2">
                <a href="{{ route('user.hr.employees.index') }}"
                   class="inline-flex items-center justify-center border border-slate-200 bg-white px-4 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50">
                    {{ __('employees.back_to_employees') }}
                </a>
            </div>
        </div>
    </div>

    <form action="{{ route('user.hr.employees.store') }}"
          method="POST"
          enctype="multipart/form-data"
          class="space-y-5">
        @csrf

        {{-- Basic Information --}}
        <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
            <div class="border-b border-slate-100 bg-slate-50/70 px-4 py-3">
                <h2 class="text-sm font-bold text-slate-800">{{ __('employees.basic_information') }}</h2>
                <p class="mt-1 text-xs text-slate-500">{{ __('employees.basic_information_description') }}</p>
            </div>

            <div class="p-4">
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.employee_code') }}</label>
                        <input type="text"
                               value="{{ $employeeCode }}"
                               readonly
                               class="w-full border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-medium text-slate-600">
                    </div>

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">
                            {{ __('employees.name') }} <span class="text-rose-500">*</span>
                        </label>
                        <input type="text"
                               name="name"
                               value="{{ old('name') }}"
                               placeholder="{{ __('employees.enter_employee_name') }}"
                               class="w-full border px-3 py-2 text-xs text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-indigo-100 @error('name') border-rose-400 @else border-slate-200 @enderror">
                        @error('name')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.phone') }}</label>
                        <input type="text"
                               name="phone"
                               value="{{ old('phone') }}"
                               placeholder="{{ __('employees.enter_phone_number') }}"
                               class="w-full border px-3 py-2 text-xs text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-indigo-100 @error('phone') border-rose-400 @else border-slate-200 @enderror">
                        @error('phone')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.email') }}</label>
                        <input type="email"
                               name="email"
                               value="{{ old('email') }}"
                               placeholder="{{ __('employees.enter_email_address') }}"
                               class="w-full border px-3 py-2 text-xs text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-indigo-100 @error('email') border-rose-400 @else border-slate-200 @enderror">
                        @error('email')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.designation') }}</label>
                        <select name="designation_id"
                                class="w-full border px-3 py-2 text-xs text-slate-700 focus:outline-none focus:ring-1 focus:ring-indigo-100 @error('designation_id') border-rose-400 @else border-slate-200 @enderror">
                            <option value="">{{ __('employees.select_designation') }}</option>
                            @foreach($designations as $designation)
                                <option value="{{ $designation->id }}" @selected(old('designation_id') == $designation->id)>
                                    {{ $designation->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('designation_id')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.joining_date') }}</label>
                        <input type="date"
                               name="joining_date"
                               value="{{ old('joining_date') }}"
                               class="w-full border px-3 py-2 text-xs text-slate-700 focus:outline-none focus:ring-1 focus:ring-indigo-100 @error('joining_date') border-rose-400 @else border-slate-200 @enderror">
                        @error('joining_date')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">
                            {{ __('employees.employee_type') }} <span class="text-rose-500">*</span>
                        </label>
                        <select name="employee_type"
                                id="employee_type"
                                class="w-full border px-3 py-2 text-xs text-slate-700 focus:outline-none focus:ring-1 focus:ring-indigo-100 @error('employee_type') border-rose-400 @else border-slate-200 @enderror">
                            <option value="monthly" @selected(old('employee_type', 'monthly') === 'monthly')>{{ __('employees.monthly_salary') }}</option>
                            <option value="daily_roz" @selected(old('employee_type') === 'daily_roz')>{{ __('employees.daily_roz') }}</option>
                        </select>
                        @error('employee_type')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.opening_balance') }}</label>
                        <input type="number"
                               step="0.01"
                               name="opening_balance"
                               value="{{ old('opening_balance', 0) }}"
                               placeholder="{{ __('employees.zero_amount') }}"
                               class="w-full border px-3 py-2 text-xs text-slate-700 focus:outline-none focus:ring-1 focus:ring-indigo-100 @error('opening_balance') border-rose-400 @else border-slate-200 @enderror">
                        @error('opening_balance')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.status') }}</label>
                        <select name="status"
                                class="w-full border px-3 py-2 text-xs text-slate-700 focus:outline-none focus:ring-1 focus:ring-indigo-100 @error('status') border-rose-400 @else border-slate-200 @enderror">
                            <option value="active" @selected(old('status', 'active') === 'active')>{{ __('employees.active') }}</option>
                            <option value="inactive" @selected(old('status') === 'inactive')>{{ __('employees.inactive') }}</option>
                        </select>
                        @error('status')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="md:col-span-2 xl:col-span-3" id="overtime_eligible_wrapper">
                        <div class="border border-indigo-100 bg-indigo-50/60 p-3">
                            <label class="inline-flex items-center gap-2">
                                <input type="checkbox"
                                       name="overtime_eligible"
                                       value="1"
                                       @checked(old('overtime_eligible'))
                                       class="h-3.5 w-3.5 border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="text-xs font-semibold text-slate-700">
                                    {{ __('employees.overtime_eligible') }}
                                </span>
                            </label>
                            <p class="mt-1 text-[11px] text-slate-500">
                                {{ __('employees.overtime_eligible_description') }}
                            </p>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        {{-- Personal Information --}}
        <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
            <div class="border-b border-slate-100 bg-slate-50/70 px-4 py-3">
                <h2 class="text-sm font-bold text-slate-800">{{ __('employees.personal_information') }}</h2>
                <p class="mt-1 text-xs text-slate-500">{{ __('employees.personal_information_description') }}</p>
            </div>

            <div class="p-4">
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.father_name') }}</label>
                        <input type="text"
                               name="father_name"
                               value="{{ old('father_name') }}"
                               placeholder="{{ __('employees.enter_father_name') }}"
                               class="w-full border px-3 py-2 text-xs text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-indigo-100 @error('father_name') border-rose-400 @else border-slate-200 @enderror">
                        @error('father_name')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.mother_name') }}</label>
                        <input type="text"
                               name="mother_name"
                               value="{{ old('mother_name') }}"
                               placeholder="{{ __('employees.enter_mother_name') }}"
                               class="w-full border px-3 py-2 text-xs text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-indigo-100 @error('mother_name') border-rose-400 @else border-slate-200 @enderror">
                        @error('mother_name')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.nid_no') }}</label>
                        <input type="text"
                               name="nid_no"
                               value="{{ old('nid_no') }}"
                               placeholder="{{ __('employees.enter_nid_number') }}"
                               class="w-full border px-3 py-2 text-xs text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-indigo-100 @error('nid_no') border-rose-400 @else border-slate-200 @enderror">
                        @error('nid_no')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                </div>
            </div>
        </div>

        {{-- Photo --}}
        <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
            <div class="border-b border-slate-100 bg-slate-50/70 px-4 py-3">
                <h2 class="text-sm font-bold text-slate-800">{{ __('employees.employee_photo') }}</h2>
                <p class="mt-1 text-xs text-slate-500">{{ __('employees.employee_photo_description') }}</p>
            </div>

            <div class="p-4">
                <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.photo') }}</label>
                        <input type="file"
                               name="photo"
                               id="photoInput"
                               accept=".jpg,.jpeg,.png,.webp,image/*"
                               class="w-full border px-3 py-2 text-xs text-slate-700 file:mr-3 file:border-0 file:bg-slate-100 file:px-3 file:py-1.5 file:text-xs file:font-semibold file:text-slate-700 hover:file:bg-slate-200 @error('photo') border-rose-400 @else border-slate-200 @enderror">
                        <p class="mt-1 text-[11px] text-slate-500">{{ __('employees.photo_help_text') }}</p>
                        @error('photo')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.photo_preview') }}</label>
                        <div class="flex items-center gap-3 border border-dashed border-slate-300 bg-slate-50 p-3">
                            <div class="h-24 w-24 overflow-hidden border border-slate-200 bg-white shadow-sm">
                                <img id="photoPreview"
                                     src="{{ asset('images/default-avatar.png') }}"
                                     alt="{{ __('employees.preview') }}"
                                     class="h-full w-full object-cover">
                            </div>

                            <div>
                                <p class="text-xs font-bold text-slate-700">{{ __('employees.live_preview') }}</p>
                                <p class="mt-1 text-[11px] leading-5 text-slate-500">
                                    {{ __('employees.photo_preview_description') }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Address & Notes --}}
        <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
            <div class="border-b border-slate-100 bg-slate-50/70 px-4 py-3">
                <h2 class="text-sm font-bold text-slate-800">{{ __('employees.address_notes') }}</h2>
                <p class="mt-1 text-xs text-slate-500">{{ __('employees.address_notes_description') }}</p>
            </div>

            <div class="p-4">
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.present_address') }}</label>
                        <textarea name="present_address"
                                  rows="4"
                                  placeholder="{{ __('employees.enter_present_address') }}"
                                  class="w-full border px-3 py-2 text-xs text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-indigo-100 @error('present_address') border-rose-400 @else border-slate-200 @enderror">{{ old('present_address') }}</textarea>
                        @error('present_address')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.permanent_address') }}</label>
                        <textarea name="permanent_address"
                                  rows="4"
                                  placeholder="{{ __('employees.enter_permanent_address') }}"
                                  class="w-full border px-3 py-2 text-xs text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-indigo-100 @error('permanent_address') border-rose-400 @else border-slate-200 @enderror">{{ old('permanent_address') }}</textarea>
                        @error('permanent_address')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('employees.note') }}</label>
                        <textarea name="note"
                                  rows="4"
                                  placeholder="{{ __('employees.additional_employee_note') }}"
                                  class="w-full border px-3 py-2 text-xs text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-indigo-100 @error('note') border-rose-400 @else border-slate-200 @enderror">{{ old('note') }}</textarea>
                        @error('note')
                            <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                </div>
            </div>
        </div>

        {{-- Actions --}}
        <div class="flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end">
            <a href="{{ route('user.hr.employees.index') }}"
               class="inline-flex items-center justify-center border border-slate-200 bg-white px-5 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50">
                {{ __('employees.cancel') }}
            </a>

            <button type="submit"
                    class="inline-flex items-center justify-center bg-slate-900 px-5 py-2 text-xs font-semibold text-white transition hover:bg-slate-800">
                {{ __('employees.save_employee') }}
            </button>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const photoInput = document.getElementById('photoInput');
    const photoPreview = document.getElementById('photoPreview');
    const defaultImage = "{{ asset('images/default-avatar.png') }}";

    const employeeType = document.getElementById('employee_type');
    const overtimeEligibleWrapper = document.getElementById('overtime_eligible_wrapper');
    const overtimeEligibleInput = document.querySelector('[name="overtime_eligible"]');

    function toggleEmployeeFields() {
        if (!employeeType) return;

        if (employeeType.value === 'daily_roz') {
            overtimeEligibleWrapper?.classList.add('hidden');
            if (overtimeEligibleInput) overtimeEligibleInput.checked = false;
        } else {
            overtimeEligibleWrapper?.classList.remove('hidden');
        }
    }

    toggleEmployeeFields();
    employeeType?.addEventListener('change', toggleEmployeeFields);

    if (photoInput && photoPreview) {
        photoInput.addEventListener('change', function (e) {
            const file = e.target.files && e.target.files[0];

            if (!file) {
                photoPreview.src = defaultImage;
                return;
            }

            if (!file.type.startsWith('image/')) {
                photoPreview.src = defaultImage;
                return;
            }

            const reader = new FileReader();
            reader.onload = function (event) {
                photoPreview.src = event.target.result;
            };
            reader.readAsDataURL(file);
        });
    }
});
</script>
@endsection