@extends('layouts.app')
@section('title', 'Salary Management')
@section('page-title', 'Salary Processing')

@section('content')
<div class="flex items-center justify-between mb-5">
    <div>
        <p class="text-sm text-slate-500">Process and manage employee salaries</p>
    </div>
    <div class="flex gap-2">
        <a href="{{ route('expenses.employees') }}" class="btn-secondary btn-sm">👥 View Employees</a>
    </div>
</div>

{{-- Month selector --}}
<div class="card mb-5">
    <form method="GET" class="flex items-center gap-4">
        <label class="form-label m-0">Salary Month:</label>
        <input type="month" name="month" value="{{ $month }}" class="form-input w-48" onchange="this.form.submit()">
    </form>
</div>

{{-- Summary --}}
@if(isset($summary))
<div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-5">
    <div class="card-sm text-center">
        <p class="text-xs text-slate-400">Total Employees</p>
        <p class="text-xl font-bold text-slate-800">{{ $summary['total_employees'] }}</p>
    </div>
    <div class="card-sm text-center">
        <p class="text-xs text-slate-400">Processed</p>
        <p class="text-xl font-bold text-green-700">{{ $summary['processed'] }}</p>
    </div>
    <div class="card-sm text-center">
        <p class="text-xs text-slate-400">Pending</p>
        <p class="text-xl font-bold text-orange-600">{{ $summary['pending'] }}</p>
    </div>
    <div class="card-sm text-center">
        <p class="text-xs text-slate-400">Total Gross</p>
        <p class="text-xl font-bold text-slate-800">₹{{ number_format($summary['total_gross'] ?? 0, 0) }}</p>
    </div>
    <div class="card-sm text-center">
        <p class="text-xs text-slate-400">Total Net</p>
        <p class="text-xl font-bold text-green-700">₹{{ number_format($summary['total_net'] ?? 0, 0) }}</p>
    </div>
</div>
@endif

{{-- Employee salary table --}}
<div class="card p-0 overflow-hidden">
    <div class="px-5 py-3 border-b border-slate-100 flex items-center justify-between">
        <h3 class="text-sm font-semibold text-slate-800">{{ \Carbon\Carbon::parse($month)->format('F Y') }} — Salary Sheet</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-slate-50 border-b border-slate-100">
                <tr>
                    <th class="table-th">Employee</th>
                    <th class="table-th text-right">Basic</th>
                    <th class="table-th text-right">Gross</th>
                    <th class="table-th text-right">PF (Emp)</th>
                    <th class="table-th text-right">ESI (Emp)</th>
                    <th class="table-th text-right">Net Pay</th>
                    <th class="table-th">Status</th>
                    <th class="table-th text-right">Action</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse($summary['employees'] ?? [] as $empData)
                @php
                    $emp      = $empData['employee'];
                    $payment  = $empData['payment'] ?? null;
                    $gross    = $emp->basic_salary + $emp->hra + $emp->other_allowances;
                    $net      = $gross - $emp->pf_employee - $emp->esi_employee;
                @endphp
                <tr class="hover:bg-slate-50" x-data="{ showForm: false }">
                    <td class="table-td">
                        <div class="flex items-center gap-2">
                            <img src="{{ $emp->photo_url }}" class="w-8 h-8 rounded-lg">
                            <div>
                                <p class="font-medium">{{ $emp->name }}</p>
                                <p class="text-xs text-slate-400">{{ $emp->designation }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="table-td text-right">₹{{ number_format($emp->basic_salary, 0) }}</td>
                    <td class="table-td text-right font-medium">₹{{ number_format($gross, 0) }}</td>
                    <td class="table-td text-right text-orange-600 text-xs">₹{{ number_format($emp->pf_employee, 0) }}</td>
                    <td class="table-td text-right text-orange-600 text-xs">₹{{ number_format($emp->esi_employee, 0) }}</td>
                    <td class="table-td text-right font-bold text-green-700">₹{{ number_format($net, 0) }}</td>
                    <td class="table-td">
                        @if($payment)
                            <span class="badge-green">✓ Paid</span>
                        @else
                            <span class="badge-yellow">Pending</span>
                        @endif
                    </td>
                    <td class="table-td text-right">
                        @if($payment)
                            <a href="{{ route('expenses.salary.payslip', $payment) }}" class="btn-secondary btn-sm" target="_blank">
                                📄 Payslip
                            </a>
                        @else
                            <button @click="showForm=!showForm" class="btn-primary btn-sm">
                                Process
                            </button>
                        @endif
                    </td>
                </tr>
                {{-- Process salary form --}}
                @if(!$payment)
                <tr x-show="showForm" x-cloak class="bg-indigo-50">
                    <td colspan="8" class="px-4 py-4">
                        <form method="POST" action="{{ route('expenses.salary.process', $emp) }}">
                            @csrf
                            <input type="hidden" name="salary_month" value="{{ $month }}">
                            <input type="hidden" name="basic_salary" value="{{ $emp->basic_salary }}">
                            <input type="hidden" name="hra" value="{{ $emp->hra }}">
                            <input type="hidden" name="other_allowances" value="{{ $emp->other_allowances }}">
                            <input type="hidden" name="pf_employee" value="{{ $emp->pf_employee }}">
                            <input type="hidden" name="esi_employee" value="{{ $emp->esi_employee }}">
                            <div class="grid grid-cols-2 md:grid-cols-5 gap-3 items-end">
                                <div>
                                    <label class="form-label">Working Days</label>
                                    <input type="number" name="working_days" value="26" min="1" max="31" class="form-input text-sm py-2" required>
                                </div>
                                <div>
                                    <label class="form-label">Present Days</label>
                                    <input type="number" name="present_days" value="26" min="0" max="31" class="form-input text-sm py-2" required>
                                </div>
                                <div>
                                    <label class="form-label">Payment Date</label>
                                    <input type="date" name="payment_date" value="{{ today()->format('Y-m-d') }}" class="form-input text-sm py-2" required>
                                </div>
                                <div>
                                    <label class="form-label">Payment Mode</label>
                                    <select name="payment_mode" class="form-input text-sm py-2">
                                        <option value="bank">Bank Transfer</option>
                                        <option value="cash">Cash</option>
                                        <option value="upi">UPI</option>
                                    </select>
                                </div>
                                <div>
                                    <button type="submit" class="btn-success w-full justify-center">
                                        ✓ Confirm Payment
                                    </button>
                                </div>
                            </div>
                        </form>
                    </td>
                </tr>
                @endif
                @empty
                <tr><td colspan="8" class="py-12 text-center text-slate-400">
                    No active employees found. <a href="{{ route('expenses.employees.create') }}" class="text-brand-600 hover:underline">Add employees</a>
                </td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection