@extends('layouts.user')

@section('title', 'Bulk Monthly Attendance')
@section('page_title', 'Bulk Monthly Attendance')
@section('breadcrumb', 'HR / Attendance / Bulk Monthly')

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

    {{-- 🔍 Filter --}}
    <form method="GET" action="{{ route('user.hr.attendance.bulk-monthly') }}"
          class="border border-slate-200 bg-white p-3 shadow-sm">
        <div class="flex items-end gap-2 flex-nowrap overflow-x-auto">

            <div class="min-w-[100px]">
                <label class="block text-[10px] font-semibold text-slate-500 mb-1">Month</label>
                <input type="number" name="month" min="1" max="12" value="{{ $month }}"
                       class="w-full border border-slate-300 px-2 py-1 text-xs focus:outline-none">
            </div>

            <div class="min-w-[120px]">
                <label class="block text-[10px] font-semibold text-slate-500 mb-1">Year</label>
                <input type="number" name="year" min="2000" max="2100" value="{{ $year }}"
                       class="w-full border border-slate-300 px-2 py-1 text-xs focus:outline-none">
            </div>

            <button type="submit"
                    class="bg-slate-900 px-3 py-1 text-xs font-semibold text-white">
                Load
            </button>

        </div>
    </form>

    {{-- 📊 Table --}}
    <form method="POST" action="{{ route('user.hr.attendance.save-bulk-monthly') }}">
        @csrf
        <input type="hidden" name="month" value="{{ $month }}">
        <input type="hidden" name="year" value="{{ $year }}">

        <div class="border border-slate-200 bg-white shadow-sm overflow-hidden">

            {{-- Header --}}
            <div class="border-b border-slate-200 px-3 py-2">
                <h3 class="text-sm font-bold text-slate-800">Monthly Bulk Attendance</h3>
                <p class="text-[11px] text-slate-500">Saved entries locked থাকবে</p>
            </div>

            {{-- Table --}}
            <div class="overflow-x-auto">
                <table class="min-w-[1500px] w-full text-xs">

                    <thead class="bg-slate-50 text-slate-600">
                        <tr>
                            <th class="sticky left-0 z-10 bg-slate-50 px-3 py-2 text-left font-semibold">
                                Employee
                            </th>

                            @foreach($days as $day)
                                <th class="px-3 py-2 text-center whitespace-nowrap font-semibold">
                                    {{ \Carbon\Carbon::parse($day)->format('d M') }}
                                </th>
                            @endforeach
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-slate-100">
                        @foreach($employees as $employee)
                            <tr>

                                {{-- Employee --}}
                                <td class="sticky left-0 z-10 bg-white px-3 py-2 align-top font-semibold text-slate-800">
                                    {{ $employee->name }}
                                    <div class="text-[10px] text-slate-500">
                                        {{ $employee->employee_code }}
                                    </div>
                                </td>

                                {{-- Days --}}
                                @foreach($days as $day)
                                    @php
                                        $key = $employee->id . '|' . $day;
                                        $locked = $lockedMonthlyKeys[$key] ?? false;
                                    @endphp

                                    <td class="px-2 py-2 align-top">

                                        @if($locked)
                                            <div class="border border-emerald-300 bg-emerald-50 px-2 py-1 text-center text-[10px] font-semibold text-emerald-700">
                                                Saved
                                            </div>
                                        @else
                                            <div class="space-y-1 min-w-[140px]">

                                                {{-- Status --}}
                                                <select name="rows[{{ $employee->id }}][{{ $day }}][day_status]"
                                                        class="bulk-monthly-status w-full border border-slate-300 px-2 py-1 text-xs focus:outline-none"
                                                        data-target="ot-{{ $employee->id }}-{{ $loop->parent->index }}">
                                                    <option value="">Select</option>
                                                    <option value="present">Present</option>
                                                    <option value="absent">Absent</option>
                                                    <option value="leave">Leave</option>
                                                    <option value="holiday">Holiday</option>
                                                </select>

                                                {{-- OT --}}
                                                <input type="number" step="0.01"
                                                       id="ot-{{ $employee->id }}-{{ $loop->parent->index }}"
                                                       name="rows[{{ $employee->id }}][{{ $day }}][overtime_hours]"
                                                       class="w-full border border-slate-300 px-2 py-1 text-xs focus:outline-none"
                                                       placeholder="OT"
                                                       disabled>

                                                {{-- Note --}}
                                                <input type="text"
                                                       name="rows[{{ $employee->id }}][{{ $day }}][note]"
                                                       class="w-full border border-slate-300 px-2 py-1 text-xs focus:outline-none"
                                                       placeholder="Note">

                                            </div>
                                        @endif

                                    </td>
                                @endforeach

                            </tr>
                        @endforeach
                    </tbody>

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

        {{-- Submit --}}
        <div class="flex justify-end">
            <button type="submit"
                    class="bg-indigo-600 px-4 py-1 text-xs font-semibold text-white">
                Save Bulk Monthly
            </button>
        </div>
    </form>
</div>

{{-- ⚙️ JS --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    function handleBulkMonthly(select) {
        const target = document.getElementById(select.dataset.target);
        if (!target) return;

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

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

    document.querySelectorAll('.bulk-monthly-status').forEach(function (el) {
        handleBulkMonthly(el);
        el.addEventListener('change', function () {
            handleBulkMonthly(el);
        });
    });
});
</script>
@endsection