@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">Salary Report</h3>
    </div>

    {{-- FILTER FORM --}}
    <form action="{{ route('payroll.salary-report.show') }}" method="POST" id="salaryReportForm">
        @csrf

        {{-- For Month --}}
        <div class="px-6 pt-5 pb-2 flex items-center gap-6">
            <div>
                <p class="text-xs font-bold text-gray-700 mb-1">For Month</p>
                <input type="month" name="for_month" value="{{ $forMonth ?? now()->format('Y-m') }}"
                    class="border border-gray-300 px-2 py-1.5 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 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" 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 $b)
                    <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="{{ $b->id }}" class="accent-[#ff5722] w-3.5 h-3.5"> {{ $b->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" 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 $d)
                    <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="{{ $d->id }}" class="accent-[#ff5722] w-3.5 h-3.5"> {{ $d->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" 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 $dg)
                    <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="{{ $dg->id }}" class="accent-[#ff5722] w-3.5 h-3.5"> {{ $dg->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" 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">
                    <input type="text" placeholder="Search employee" oninput="filterEmployees(this.value)"
                        class="w-full border border-gray-300 px-2 py-1 text-xs mb-1 focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    <div id="empList">
                        @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="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>

        {{-- Select Report --}}
        <div class="px-6 pb-4 border-t border-gray-100 pt-4">
            <p class="text-cyan-600 font-bold text-sm mb-3">Select Report</p>
            <div class="flex flex-wrap gap-6 items-center">
                <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                    <input type="radio" name="report_type" value="monthly_statement" checked class="accent-[#ff5722] w-3.5 h-3.5"> Monthly Statement
                </label>
                <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                    <input type="radio" name="report_type" value="pay_slip" class="accent-[#ff5722] w-3.5 h-3.5"> Pay-Slip
                </label>
                <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                    <input type="radio" name="report_type" value="bank_excel" class="accent-[#ff5722] w-3.5 h-3.5"> Download Excel for Bank Upload
                </label>
                <label class="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
                    <input type="radio" name="report_type" value="pay_slip_vertical" class="accent-[#ff5722] w-3.5 h-3.5"> Pay-Slip Vertical
                </label>
            </div>
        </div>

        {{-- Action Buttons --}}
        <div class="flex flex-wrap justify-center gap-3 py-5 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-6 py-2 rounded-sm text-sm font-semibold shadow transition flex items-center gap-2">
                <i class="fa-solid fa-chart-bar"></i> ShowReport
            </button>
            <button type="button" class="bg-[#2196f3] hover:bg-[#1976d2] text-white px-6 py-2 rounded-sm text-sm font-semibold shadow transition flex items-center gap-2">
                <i class="fa-regular fa-envelope"></i> Send Salary Slip On Mail
            </button>
            <a href="{{ route('payroll.monthly-pay-process.index') }}" class="bg-[#e53935] hover:bg-[#d32f2f] text-white px-6 py-2 rounded-sm text-sm font-semibold shadow transition flex items-center gap-2">
                <i class="fa-solid fa-xmark"></i> Close
            </a>
        </div>
    </form>

    {{-- ===== REPORT TABLE ===== --}}
    @if(isset($showReport) && $showReport && isset($reportData))
    <div class="px-4 pb-8">
        <div class="flex items-center justify-between mb-3">
            <div class="flex items-center gap-3">
                <h4 class="text-cyan-600 font-bold text-sm flex items-center gap-2">
                    <i class="fa-solid fa-file-invoice-dollar"></i>
                    Monthly Salary Statement —
                    <span class="text-gray-700">{{ \Carbon\Carbon::parse($forMonth)->format('F Y') }}</span>
                </h4>
                @if(isset($isFromDB) && $isFromDB)
                <span class="inline-flex items-center gap-1 bg-green-100 text-green-700 border border-green-300 px-2.5 py-0.5 rounded-full text-[10px] font-bold">
                    <i class="fa-solid fa-database text-[8px]"></i> From Database
                </span>
                @else
                <span class="inline-flex items-center gap-1 bg-orange-100 text-orange-700 border border-orange-300 px-2.5 py-0.5 rounded-full text-[10px] font-bold">
                    <i class="fa-solid fa-bolt text-[8px]"></i> Live Calculation — Run Monthly Process to save
                </span>
                @endif
            </div>
            <button onclick="window.print()" class="text-xs bg-gray-700 hover:bg-gray-800 text-white px-3 py-1.5 rounded-sm flex items-center gap-1 transition">
                <i class="fa-solid fa-print"></i> Print
            </button>
        </div>

        @if($reportData->isEmpty())
        <div class="text-center py-10 text-gray-400 text-sm">No employee data found for the selected filters.</div>
        @else
        <div class="overflow-x-auto rounded-sm border border-gray-200 shadow-sm">
            <table class="w-full text-left text-xs border-collapse">
                <thead>
                    <tr class="bg-gradient-to-r from-[#ff5722] to-[#e64a19] text-white">
                        <th class="p-2.5 border border-orange-400 font-semibold">#</th>
                        <th class="p-2.5 border border-orange-400 font-semibold">Employee</th>
                        <th class="p-2.5 border border-orange-400 font-semibold">Department</th>
                        <th class="p-2.5 border border-orange-400 font-semibold">Designation</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-center">Days</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-center">Prsnt</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-center">Late</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-center">Pybl</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-right">OT Hrs</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-right">OT Amt</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-right">Basic(Pro)</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-right">Bonus</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-right">Gross</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-right">PF</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-right">ESI</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-right">PT</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-right">TDS</th>
                        {{-- <th class="p-2.5 border border-orange-400 font-semibold text-right">Loan Ded.</th> --}}
                        <th class="p-2.5 border border-orange-400 font-semibold text-right">Total Ded.</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-right bg-green-700">Net Salary</th>
                        <th class="p-2.5 border border-orange-400 font-semibold text-center bg-blue-800">Pay Slip</th>
                    </tr>
                </thead>
                <tbody>
                    @php $grandNet = 0; $i = 1; @endphp
                    @foreach($reportData as $row)
                    @php $grandNet += $row['net_salary']; @endphp
                    <tr class="{{ $i % 2 == 0 ? 'bg-orange-50' : 'bg-white' }} hover:bg-yellow-50 transition">
                        <td class="p-2.5 border border-gray-200 text-gray-500 text-center font-semibold">{{ $i++ }}</td>
                        <td class="p-2.5 border border-gray-200">
                            <div class="font-semibold text-gray-800">{{ $row['employee']->name }}</div>
                            <div class="text-gray-400 text-[10px]">{{ $row['employee']->employee_code ?? '' }}</div>
                        </td>
                        <td class="p-2.5 border border-gray-200 text-gray-700">{{ $row['employee']->department->name ?? '—' }}</td>
                        <td class="p-2.5 border border-gray-200 text-gray-700">{{ $row['employee']->designation->name ?? '—' }}</td>
                        <td class="p-2.5 border border-gray-200 text-center font-semibold">{{ $row['total_days'] }}</td>
                        <td class="p-2.5 border border-gray-200 text-center text-blue-700 font-semibold">{{ $row['present_days'] }}</td>
                        <td class="p-2.5 border border-gray-200 text-center text-red-600">{{ $row['late_days'] }}</td>
                        <td class="p-2.5 border border-gray-200 text-center text-green-700 font-bold">{{ $row['payable_days'] }}</td>
                        <td class="p-2.5 border border-gray-200 text-right">{{ $row['ot_hours'] > 0 ? $row['ot_hours'] : '-' }}</td>
                        <td class="p-2.5 border border-gray-200 text-right text-green-600">{{ $row['ot_amount'] > 0 ? number_format($row['ot_amount'], 2) : '-' }}</td>
                        <td class="p-2.5 border border-gray-200 text-right font-semibold text-gray-800">{{ number_format($row['basic_salary'], 2) }}</td>
                        <td class="p-2.5 border border-gray-200 text-right text-green-700 font-semibold">
                            {{ number_format($row['total_bonus'], 2) }}
                            @if($row['bonuses']->count())
                            <div class="text-[10px] text-gray-400">
                                @foreach($row['bonuses'] as $b)({{ $b->bonus_name }})@endforeach
                            </div>
                            @endif
                        </td>
                        <td class="p-2.5 border border-gray-200 text-right font-semibold text-blue-700">{{ number_format($row['total_additions'], 2) }}</td>
                        <td class="p-2.5 border border-gray-200 text-right text-red-600">{{ number_format($row['pf_amount'], 2) }}</td>
                        <td class="p-2.5 border border-gray-200 text-right text-red-600">{{ number_format($row['esi_amount'], 2) }}</td>
                        <td class="p-2.5 border border-gray-200 text-right text-red-600">{{ number_format($row['pt_amount'], 2) }}</td>
                        <td class="p-2.5 border border-gray-200 text-right text-red-600">{{ number_format($row['tds'], 2) }}</td>
                        {{-- <td class="p-2.5 border border-gray-200 text-right text-red-600">
                            {{ number_format($row['total_loan_ded'], 2) }}
                            @if($row['loans']->count())
                            <div class="text-[10px] text-gray-400">
                                @foreach($row['loans'] as $l)({{ $l->loan_type }})@endforeach
                            </div>
                            @endif
                        </td> --}}
                        <td class="p-2.5 border border-gray-200 text-right font-semibold text-red-700">{{ number_format($row['total_deductions'], 2) }}</td>
                        <td class="p-2.5 border border-gray-200 text-right font-bold text-green-700 bg-green-50 text-sm">{{ number_format($row['net_salary'], 2) }}</td>
                        <td class="p-2.5 border border-gray-200 text-center">
                            @if(!empty($row['payslip_id']))
                            <a href="{{ route('payroll.payslip.print', $row['payslip_id']) }}" target="_blank"
                                class="inline-flex items-center gap-1 bg-blue-600 hover:bg-blue-700 text-white px-2.5 py-1 rounded text-[10px] font-bold transition">
                                <i class="fa-solid fa-file-invoice"></i> View
                            </a>
                            @else
                            <span class="text-gray-300 text-[10px]">—</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr class="bg-gray-800 text-white font-bold">
                        <td colspan="18" class="p-2.5 border border-gray-700 text-right text-sm">Grand Total Net Salary:</td>
                        <td class="p-2.5 border border-gray-700 text-right text-green-300 text-sm">{{ number_format($grandNet, 2) }}</td>
                        <td class="p-2.5 border border-gray-700"></td>
                    </tr>
                </tfoot>
            </table>
        </div>

        {{-- Summary Cards --}}
        <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-gradient-to-br from-orange-50 to-orange-100 border border-orange-200 rounded-sm p-4 text-center shadow-sm">
                <p class="text-[10px] text-orange-600 font-bold uppercase tracking-wide mb-1">Total Employees</p>
                <p class="text-2xl font-bold text-orange-700">{{ $reportData->count() }}</p>
            </div>
            <div class="bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 rounded-sm p-4 text-center shadow-sm">
                <p class="text-[10px] text-blue-600 font-bold uppercase tracking-wide mb-1">Total Gross</p>
                <p class="text-xl font-bold text-blue-700">{{ number_format($reportData->sum('total_additions'), 2) }}</p>
            </div>
            <div class="bg-gradient-to-br from-red-50 to-red-100 border border-red-200 rounded-sm p-4 text-center shadow-sm">
                <p class="text-[10px] text-red-600 font-bold uppercase tracking-wide mb-1">Total Deductions</p>
                <p class="text-xl font-bold text-red-700">{{ number_format($reportData->sum('total_deductions'), 2) }}</p>
            </div>
            <div class="bg-gradient-to-br from-green-50 to-green-100 border border-green-200 rounded-sm p-4 text-center shadow-sm">
                <p class="text-[10px] text-green-600 font-bold uppercase tracking-wide mb-1">Total Net Payable</p>
                <p class="text-xl font-bold text-green-700">{{ number_format($grandNet, 2) }}</p>
            </div>
        </div>
        @endif
    </div>
    @endif

</div>

@push('scripts')
<script>
    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');
            listEl.querySelectorAll('input[type=checkbox]').forEach(cb => cb.checked = false);
        }
    }
    function selectAll(name, checked) {
        document.querySelectorAll('input[name="' + name + '"]').forEach(cb => cb.checked = checked);
    }
    function filterEmployees(query) {
        document.querySelectorAll('.emp-row').forEach(row => {
            row.style.display = row.getAttribute('data-name').includes(query.toLowerCase()) ? '' : 'none';
        });
    }
</script>
@endpush
@endsection