@extends('admin.layouts.app')

@section('content')
<div class="bg-white shadow-sm border border-gray-200">

    {{-- Orange Header --}}
    <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl  rounded-t-sm">
        <i class="fa-regular fa-pen-to-square mr-2 text-sm"></i>
        <h3 class="font-semibold text-sm">Monthly Salary Process</h3>
    </div>

    @if(session('success'))
    <div id="flash-success" class="mx-4 mt-4 flex items-center gap-3 bg-green-500 text-white text-sm px-4 py-3 rounded-sm shadow font-semibold">
        <i class="fa-solid fa-circle-check"></i>
        <span>{{ session('success') }}</span>
        <button onclick="document.getElementById('flash-success').remove()" class="ml-auto text-white hover:text-green-100 text-lg leading-none">&times;</button>
    </div>
    @endif
    @if(session('error'))
    <div id="flash-error" class="mx-4 mt-4 flex items-center gap-3 bg-red-500 text-white text-sm px-4 py-3 rounded-sm shadow font-semibold">
        <i class="fa-solid fa-circle-exclamation"></i>
        <span>{{ session('error') }}</span>
        <button onclick="document.getElementById('flash-error').remove()" class="ml-auto text-white hover:text-red-100 text-lg leading-none">&times;</button>
    </div>
    @endif

    <form action="{{ route('payroll.monthly-pay-process.process') }}" method="POST" id="payProcessForm">
        @csrf

        {{-- Process Type + For Month --}}
        <div class="px-6 pt-5 pb-3 flex flex-wrap items-center justify-between gap-4">
            <div class="flex items-center gap-6">
                <label class="flex items-center gap-2 cursor-pointer text-sm text-gray-700">
                    <input type="radio" name="process_type" value="monthly" checked
                        class="accent-[#ff5722] w-4 h-4">
                    Monthly Process
                </label>
                <label class="flex items-center gap-2 cursor-pointer text-sm text-gray-700">
                    <input type="radio" name="process_type" value="periodic"
                        class="accent-[#ff5722] w-4 h-4">
                    Periodic Process
                </label>
            </div>
            <div class="text-right">
                <p class="text-xs font-semibold text-gray-700">For Month</p>
                <input type="month" name="for_month" value="{{ now()->format('Y-m') }}"
                    class="mt-1 border border-gray-300 px-2 py-1 text-xs text-gray-600 focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
            </div>
        </div>

        <div class="border-t border-gray-200 mx-4 my-2"></div>

        {{-- Selection By Label --}}
        <div class="px-6 pb-1">
            <p class="text-cyan-600 font-bold text-sm">Selection By</p>
        </div>

        {{-- 4 Selection Columns: Branch | Department | Designation | Employee --}}
        <div class="px-4 pb-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">

            {{-- === BRANCH === --}}
            <div>
                <div class="flex flex-col gap-1 mb-2">
                    <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                        <input type="radio" name="branch_filter" value="all" checked
                            onchange="toggleFilter('branch', false)"
                            class="accent-[#ff5722] w-3.5 h-3.5">
                        All Branch
                    </label>
                    <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                        <input type="radio" name="branch_filter" value="few"
                            onchange="toggleFilter('branch', true)"
                            class="accent-[#ff5722] w-3.5 h-3.5">
                        Few Branch
                    </label>
                    <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                        <input type="checkbox" id="selectAllBranch" onchange="selectAll('branch_ids[]', this.checked)"
                            class="accent-[#ff5722] w-3.5 h-3.5">
                        SelectAll/De-Select All
                    </label>
                </div>
                <div id="branch_list" class="border border-gray-200 rounded-sm p-2 max-h-40 overflow-y-auto bg-gray-50 opacity-50 pointer-events-none">
                    @forelse($branches as $branch)
                    <label class="flex items-center gap-2 text-xs text-gray-700 py-0.5 cursor-pointer hover:bg-orange-50">
                        <input type="checkbox" name="branch_ids[]" value="{{ $branch->id }}"
                            class="branch_ids[] accent-[#ff5722] w-3.5 h-3.5">
                        {{ $branch->name }}
                    </label>
                    @empty
                    <p class="text-xs text-gray-400 italic">No branches</p>
                    @endforelse
                </div>
            </div>

            {{-- === DEPARTMENT === --}}
            <div>
                <div class="flex flex-col gap-1 mb-2">
                    <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                        <input type="radio" name="department_filter" value="all" checked
                            onchange="toggleFilter('department', false)"
                            class="accent-[#ff5722] w-3.5 h-3.5">
                        AllDepartment
                    </label>
                    <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                        <input type="radio" name="department_filter" value="few"
                            onchange="toggleFilter('department', true)"
                            class="accent-[#ff5722] w-3.5 h-3.5">
                        Few Department
                    </label>
                    <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                        <input type="checkbox" id="selectAllDept" onchange="selectAll('department_ids[]', this.checked)"
                            class="accent-[#ff5722] w-3.5 h-3.5">
                        SelectAll/De-Select All
                    </label>
                </div>
                <div id="department_list" class="border border-gray-200 rounded-sm p-2 max-h-40 overflow-y-auto bg-gray-50 opacity-50 pointer-events-none">
                    @forelse($departments as $dept)
                    <label class="flex items-center gap-2 text-xs text-gray-700 py-0.5 cursor-pointer hover:bg-orange-50">
                        <input type="checkbox" name="department_ids[]" value="{{ $dept->id }}"
                            class="department_ids[] accent-[#ff5722] w-3.5 h-3.5">
                        {{ $dept->name }}
                    </label>
                    @empty
                    <p class="text-xs text-gray-400 italic">No departments</p>
                    @endforelse
                </div>
            </div>

            {{-- === DESIGNATION === --}}
            <div>
                <div class="flex flex-col gap-1 mb-2">
                    <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                        <input type="radio" name="designation_filter" value="all" checked
                            onchange="toggleFilter('designation', false)"
                            class="accent-[#ff5722] w-3.5 h-3.5">
                        All Designation
                    </label>
                    <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                        <input type="radio" name="designation_filter" value="few"
                            onchange="toggleFilter('designation', true)"
                            class="accent-[#ff5722] w-3.5 h-3.5">
                        Few Designation
                    </label>
                    <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                        <input type="checkbox" id="selectAllDesig" onchange="selectAll('designation_ids[]', this.checked)"
                            class="accent-[#ff5722] w-3.5 h-3.5">
                        SelectAll/De-Select All
                    </label>
                </div>
                <div id="designation_list" class="border border-gray-200 rounded-sm p-2 max-h-40 overflow-y-auto bg-gray-50 opacity-50 pointer-events-none">
                    @forelse($designations as $desig)
                    <label class="flex items-center gap-2 text-xs text-gray-700 py-0.5 cursor-pointer hover:bg-orange-50">
                        <input type="checkbox" name="designation_ids[]" value="{{ $desig->id }}"
                            class="designation_ids[] accent-[#ff5722] w-3.5 h-3.5">
                        {{ $desig->name }}
                    </label>
                    @empty
                    <p class="text-xs text-gray-400 italic">No designations</p>
                    @endforelse
                </div>
            </div>

            {{-- === EMPLOYEE === --}}
            <div>
                <div class="flex flex-col gap-1 mb-2">
                    <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                        <input type="radio" name="employee_filter" value="all" checked
                            onchange="toggleFilter('employee', false)"
                            class="accent-[#ff5722] w-3.5 h-3.5">
                        All employee
                    </label>
                    <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                        <input type="radio" name="employee_filter" value="few"
                            onchange="toggleFilter('employee', true)"
                            class="accent-[#ff5722] w-3.5 h-3.5">
                        Few Employee
                    </label>
                    <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                        <input type="checkbox" id="selectAllEmp" onchange="selectAll('employee_ids[]', this.checked)"
                            class="accent-[#ff5722] w-3.5 h-3.5">
                        SelectAll/De-Select All
                    </label>
                </div>
                <div id="employee_list" class="border border-gray-200 rounded-sm p-2 max-h-40 overflow-y-auto bg-gray-50 opacity-50 pointer-events-none">
                    <div class="mb-1">
                        <input type="text" id="empSearch" placeholder="Search employee"
                            oninput="filterEmployees(this.value)"
                            class="w-full border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div id="empCheckboxList">
                        @forelse($employees as $emp)
                        <label class="emp-row flex items-center gap-2 text-xs text-gray-700 py-0.5 cursor-pointer hover:bg-orange-50" data-name="{{ strtolower($emp->name) }}">
                            <input type="checkbox" name="employee_ids[]" value="{{ $emp->id }}"
                                class="employee_ids[] accent-[#ff5722] w-3.5 h-3.5">
                            {{ $emp->name }}
                        </label>
                        @empty
                        <p class="text-xs text-gray-400 italic">No employees</p>
                        @endforelse
                    </div>
                </div>
            </div>

        </div>

        {{-- Process / Cancel Buttons --}}
        <div class="flex justify-center gap-4 py-6 border-t border-gray-200">
            <button type="submit"
                class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-8 py-2 rounded-sm text-sm font-semibold shadow transition">
                Process
            </button>
            <a href="{{ route('payroll.loans.index') }}"
                class="bg-[#e53935] hover:bg-[#d32f2f] text-white px-8 py-2 rounded-sm text-sm font-semibold shadow transition">
                Cancel
            </a>
        </div>

    </form>
</div>

@push('scripts')
<script>
    // Toggle list enabled/disabled based on All/Few radio selection
    function toggleFilter(type, enable) {
        const listEl = document.getElementById(type + '_list');
        if (enable) {
            listEl.classList.remove('opacity-50', 'pointer-events-none');
        } else {
            listEl.classList.add('opacity-50', 'pointer-events-none');
            // Uncheck all checkboxes in this group when switching back to All
            listEl.querySelectorAll('input[type=checkbox]').forEach(cb => cb.checked = false);
            const masterCb = document.getElementById('selectAll' + capitalize(type));
            if (masterCb) masterCb.checked = false;
        }
    }

    // SelectAll / De-Select All
    function selectAll(name, checked) {
        document.querySelectorAll('input[name="' + name + '"]').forEach(cb => cb.checked = checked);
    }

    // Employee search filter
    function filterEmployees(query) {
        const rows = document.querySelectorAll('.emp-row');
        rows.forEach(row => {
            const name = row.getAttribute('data-name');
            row.style.display = name.includes(query.toLowerCase()) ? '' : 'none';
        });
    }

    function capitalize(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }
</script>
@endpush
@endsection