@extends('layouts.user')

@section('title', __('hr.daily_attendance'))
@section('page_title', __('hr.daily_attendance'))
@section('breadcrumb', __('hr.hr_attendance_daily'))

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

    {{-- Top Date Filter --}}
    <form method="GET" action="{{ route('user.hr.attendance.daily') }}"
          class="border border-slate-200 bg-white p-3 shadow-sm">
        <div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
            <div>
                <h2 class="text-sm font-bold text-slate-800">{{ __('hr.attendance_entry') }}</h2>
                <p class="mt-1 text-xs text-slate-500">{{ __('hr.monthly_and_daily_roz_employee_attendance_add') }}</p>
            </div>

            <div class="flex flex-col gap-2 sm:flex-row sm:items-end">
                <div class="min-w-[150px]">
                    <label class="mb-1 block text-[10px] font-semibold uppercase tracking-wide text-slate-500">{{ __('hr.date') }}</label>
                    <input type="date" name="date" value="{{ $date }}"
                           class="w-full border border-slate-300 px-2 py-1.5 text-xs focus:border-indigo-500 focus:outline-none">
                </div>

                <button type="submit"
                        class="bg-slate-900 px-4 py-1.5 text-xs font-semibold text-white hover:bg-slate-800">
                    {{ __('hr.load') }}
                </button>
            </div>
        </div>
    </form>

    <form method="POST" action="{{ route('user.hr.attendance.save-daily') }}" class="space-y-4">
        @csrf
        <input type="hidden" name="attendance_date" value="{{ $date }}">

        {{-- Monthly Employees --}}
        <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
            <div class="border-b border-slate-200 px-3 py-2">
                <h3 class="text-sm font-bold text-slate-800">{{ __('hr.monthly_employees') }}</h3>
                <p class="mt-0.5 text-[11px] text-slate-500">{{ __('hr.present_absent_leave_holiday_overtime') }}</p>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-xs">
                    <thead class="bg-slate-50 text-slate-600">
                        <tr>
                            <th class="px-3 py-2 text-left font-semibold">{{ __('hr.employee') }}</th>
                            <th class="px-3 py-2 text-left font-semibold">{{ __('hr.code') }}</th>
                            <th class="px-3 py-2 text-left font-semibold">{{ __('hr.status') }}</th>
                            <th class="px-3 py-2 text-left font-semibold">{{ __('hr.overtime_hours') }}</th>
                            <th class="px-3 py-2 text-left font-semibold">{{ __('hr.note') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse($monthlyEmployees as $employee)
                            <tr>
                                <td class="px-3 py-2 font-semibold text-slate-800">{{ $employee->name }}</td>
                                <td class="px-3 py-2 text-slate-500">{{ $employee->employee_code }}</td>

                                <td class="px-3 py-2">
                                    <select name="monthly[{{ $employee->id }}][day_status]"
                                            class="monthly-status w-full border border-slate-300 px-2 py-1.5 text-xs focus:border-indigo-500 focus:outline-none"
                                            data-target="monthly-overtime-{{ $employee->id }}"
                                            data-overtime-eligible="{{ $employee->overtime_eligible ? 1 : 0 }}">
                                        <option value="">{{ __('hr.select') }}</option>
                                        <option value="present">{{ __('hr.present') }}</option>
                                        <option value="absent">{{ __('hr.absent') }}</option>
                                        <option value="leave">{{ __('hr.leave') }}</option>
                                        <option value="holiday">{{ __('hr.holiday') }}</option>
                                    </select>
                                </td>

                                <td class="px-3 py-2">
                                    @if($employee->overtime_eligible)
                                        <input type="number" step="0.01"
                                               name="monthly[{{ $employee->id }}][overtime_hours]"
                                               id="monthly-overtime-{{ $employee->id }}"
                                               class="w-full border border-slate-300 px-2 py-1.5 text-xs focus:border-indigo-500 focus:outline-none"
                                               placeholder="{{ __('hr.zero') }}"
                                               disabled>
                                    @else
                                        <div class="px-2 py-1.5 text-xs text-slate-400">
                                            —
                                        </div>
                                    @endif
                                </td>

                                <td class="px-3 py-2">
                                    <input type="text"
                                           name="monthly[{{ $employee->id }}][note]"
                                           class="w-full border border-slate-300 px-2 py-1.5 text-xs focus:border-indigo-500 focus:outline-none"
                                           placeholder="{{ __('hr.optional_note') }}">
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-3 py-8 text-center text-xs text-slate-500">
                                    {{ __('hr.no_monthly_employee_pending_for_today') }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Daily Roz Employees --}}
        <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
            <div class="border-b border-slate-200 px-3 py-2">
                <h3 class="text-sm font-bold text-slate-800">{{ __('hr.daily_roz_employees') }}</h3>
                <p class="mt-0.5 text-[11px] text-slate-500">{{ __('hr.present_absent_holiday_roz_amount') }}</p>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-xs">
                    <thead class="bg-slate-50 text-slate-600">
                        <tr>
                            <th class="px-3 py-2 text-left font-semibold">{{ __('hr.employee') }}</th>
                            <th class="px-3 py-2 text-left font-semibold">{{ __('hr.code') }}</th>
                            <th class="px-3 py-2 text-left font-semibold">{{ __('hr.status') }}</th>
                            <th class="px-3 py-2 text-left font-semibold">{{ __('hr.roz') }}</th>
                            <th class="px-3 py-2 text-left font-semibold">{{ __('hr.note') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse($dailyRozEmployees as $employee)
                            <tr>
                                <td class="px-3 py-2 font-semibold text-slate-800">{{ $employee->name }}</td>
                                <td class="px-3 py-2 text-slate-500">{{ $employee->employee_code }}</td>
                                <td class="px-3 py-2">
                                    <select name="daily_roz[{{ $employee->id }}][day_status]"
                                            class="daily-roz-status w-full border border-slate-300 px-2 py-1.5 text-xs focus:border-indigo-500 focus:outline-none"
                                            data-target="daily-roz-{{ $employee->id }}">
                                        <option value="">{{ __('hr.select') }}</option>
                                        <option value="present">{{ __('hr.present') }}</option>
                                        <option value="absent">{{ __('hr.absent') }}</option>
                                        <option value="holiday">{{ __('hr.holiday') }}</option>
                                    </select>
                                </td>
                                <td class="px-3 py-2">
                                    <input type="number" step="0.01"
                                           name="daily_roz[{{ $employee->id }}][roz_value]"
                                           id="daily-roz-{{ $employee->id }}"
                                           class="w-full border border-slate-300 px-2 py-1.5 text-xs focus:border-indigo-500 focus:outline-none"
                                           placeholder="{{ __('hr.zero') }}"
                                           disabled>
                                </td>
                                <td class="px-3 py-2">
                                    <input type="text"
                                           name="daily_roz[{{ $employee->id }}][note]"
                                           class="w-full border border-slate-300 px-2 py-1.5 text-xs focus:border-indigo-500 focus:outline-none"
                                           placeholder="{{ __('hr.optional_note') }}">
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-3 py-8 text-center text-xs text-slate-500">
                                    {{ __('hr.no_daily_roz_employee_pending_for_today') }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="flex justify-end">
            <button type="submit"
                    class="bg-indigo-600 px-5 py-1.5 text-xs font-semibold text-white hover:bg-indigo-700">
                {{ __('hr.save_attendance') }}
            </button>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    function handleMonthlyStatus(select) {
        const eligible = select.dataset.overtimeEligible === '1';
        const targetId = select.dataset.target;
        const target = targetId ? document.getElementById(targetId) : null;

        if (!eligible || !target) return;

        const val = select.value;
        const disable = (val === '' || val === 'absent' || val === 'leave');

        target.disabled = disable;
        if (disable) target.value = '';
    }

    function handleDailyRozStatus(select) {
        const target = document.getElementById(select.dataset.target);
        if (!target) return;

        const val = select.value;
        const disable = (val === '' || val === 'absent');

        target.disabled = disable;
        if (disable) target.value = '';
    }

    document.querySelectorAll('.monthly-status').forEach(function (el) {
        handleMonthlyStatus(el);
        el.addEventListener('change', function () {
            handleMonthlyStatus(el);
        });
    });

    document.querySelectorAll('.daily-roz-status').forEach(function (el) {
        handleDailyRozStatus(el);
        el.addEventListener('change', function () {
            handleDailyRozStatus(el);
        });
    });
});
</script>
@endsection