@extends('layouts.finance')

@section('title', 'Salaries')
@section('subtitle', 'Employee payroll entries')

@section('content')
    {{-- Breadcrumb --}}
    <div class="flex items-center gap-3 mb-4">
        <a class="btn" href="{{ route('finance.expenses') }}">
            <span style="display:inline-flex;align-items:center;gap:6px">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
                Expenses
            </span>
        </a>
        <div class="text-sm" style="color:var(--muted)">
            Expenses / <span style="color:var(--text);font-weight:600">Salaries</span>
        </div>
    </div>

    <div class="grid grid-4 mb">
        @include('partials.kpi', ['label' => 'Month Payroll (PKR)', 'value' => $metrics->money($monthTotal, 'PKR'), 'color' => '#ef4444'])
        @include('partials.kpi', ['label' => 'Total Entries', 'value' => $expenses->total()])
        @include('partials.kpi', ['label' => 'Employees', 'value' => $employees->count()])
        @include('partials.kpi', ['label' => 'Period', 'value' => now()->format('M Y')])
    </div>

    <div class="grid grid-2 mb" style="gap:16px">
        {{-- Add Salary Entry --}}
        <section class="card">
            <div class="section-head">
                <h2>Add Salary Entry</h2>
                <span class="pill pill-green">Payroll</span>
            </div>
            <div class="card-pad">
                @if($employees->isEmpty())
                    <div class="muted text-sm" style="margin-bottom:12px">
                        Add an employee below before recording salary entries.
                    </div>
                @else
                    <form method="POST" action="{{ route('finance.expenses.salaries.store', $category) }}">
                        @csrf
                        <div style="display:grid;gap:10px">
                            <div>
                                <label class="label">Employee</label>
                                <select class="field" name="employee_id" id="salaryEmployee" required>
                                    <option value="" selected disabled>Select Employee</option>
                                    @foreach($employees as $employee)
                                        <option value="{{ $employee->id }}"
                                                data-salary="{{ $employee->default_salary }}"
                                                data-currency="{{ $employee->default_salary_currency }}">
                                            {{ $employee->name }}
                                            @if($employee->designation) ({{ $employee->designation }}) @endif
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="grid grid-2" style="gap:10px">
                                <div>
                                    <label class="label">Pay Period (Month)</label>
                                    <input class="field" type="month" name="pay_period_month"
                                           value="{{ now()->format('Y-m') }}" required>
                                </div>
                                <div>
                                    <label class="label">Currency</label>
                                    <select class="field" name="currency" id="salaryCurrency">
                                        <option value="PKR" selected>PKR</option>
                                        <option value="USD">USD</option>
                                        <option value="AUD">AUD</option>
                                    </select>
                                </div>
                            </div>
                            <div class="grid grid-2" style="gap:10px">
                                <div>
                                    <label class="label">Gross Amount</label>
                                    <input class="field" type="number" step="0.01" min="0.01"
                                           name="gross_amount" id="salaryGross" required>
                                </div>
                                <div>
                                    <label class="label">Net Amount <span class="muted">(optional)</span></label>
                                    <input class="field" type="number" step="0.01" min="0"
                                           name="net_amount" id="salaryNet">
                                </div>
                            </div>
                            <div>
                                <label class="label">Bank Account</label>
                                <select class="field" name="bank_account_id">
                                    <option value="">None</option>
                                    @foreach($bankAccounts as $account)
                                        <option value="{{ $account->id }}">{{ $account->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="grid grid-2" style="gap:10px">
                                <div>
                                    <label class="label">Reference</label>
                                    <input class="field" name="reference" placeholder="optional">
                                </div>
                                <div>
                                    <label class="label">Notes</label>
                                    <input class="field" name="notes" placeholder="optional">
                                </div>
                            </div>
                            <button class="btn btn-primary" style="align-self:start">+ Add Salary</button>
                        </div>
                    </form>
                @endif
            </div>
        </section>

        {{-- Add Employee --}}
        <section class="card">
            <div class="section-head">
                <h2>Add Employee</h2>
                <span class="pill">{{ $employees->count() }} registered</span>
            </div>
            <div class="card-pad">
                <form method="POST" action="{{ route('finance.expenses.employees.store', $category) }}">
                    @csrf
                    <div style="display:grid;gap:10px">
                        <div>
                            <label class="label">Full Name</label>
                            <input class="field" name="name" required placeholder="e.g. Ahmad Raza">
                        </div>
                        <div>
                            <label class="label">Designation</label>
                            <input class="field" name="designation" placeholder="e.g. Accountant">
                        </div>
                        <div class="grid grid-2" style="gap:10px">
                            <div>
                                <label class="label">Default Salary</label>
                                <input class="field" type="number" step="0.01" min="0"
                                       name="default_salary" placeholder="optional">
                            </div>
                            <div>
                                <label class="label">Currency</label>
                                <select class="field" name="default_salary_currency">
                                    <option value="PKR" selected>PKR</option>
                                    <option value="USD">USD</option>
                                    <option value="AUD">AUD</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <label class="label">Notes</label>
                            <input class="field" name="notes" placeholder="optional">
                        </div>
                        <button class="btn btn-primary" style="align-self:start">+ Add Employee</button>
                    </div>
                </form>

                @if($employees->isNotEmpty())
                    <div style="margin-top:16px;border-top:1px solid var(--border);padding-top:14px">
                        <div class="label" style="margin-bottom:8px">Registered Employees</div>
                        @foreach($employees as $emp)
                            <div class="flex items-center justify-between" style="padding:6px 0;border-bottom:1px solid var(--border-2)">
                                <div>
                                    <span style="font-weight:600;font-size:13.5px">{{ $emp->name }}</span>
                                    @if($emp->designation)
                                        <span class="muted" style="font-size:12px;margin-left:6px">{{ $emp->designation }}</span>
                                    @endif
                                    @if($emp->default_salary)
                                        <div class="text-xs muted">
                                            Default: {{ $metrics->money($emp->default_salary, $emp->default_salary_currency) }}
                                        </div>
                                    @endif
                                </div>
                                <form method="POST"
                                      action="{{ route('finance.expenses.employees.update', [$category, $emp]) }}">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="name" value="{{ $emp->name }}">
                                    <input type="hidden" name="designation" value="{{ $emp->designation }}">
                                    <input type="hidden" name="default_salary" value="{{ $emp->default_salary }}">
                                    <input type="hidden" name="default_salary_currency" value="{{ $emp->default_salary_currency }}">
                                    <input type="hidden" name="is_active" value="{{ $emp->is_active ? '1' : '0' }}">
                                    <button type="submit"
                                            name="is_active"
                                            value="{{ $emp->is_active ? '0' : '1' }}"
                                            class="btn btn-sm {{ $emp->is_active ? '' : 'btn-danger' }}"
                                            onclick="return confirm('Toggle active status for {{ addslashes($emp->name) }}?')">
                                        {{ $emp->is_active ? 'Active' : 'Inactive' }}
                                    </button>
                                </form>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </section>
    </div>

    {{-- Salary Entry Table --}}
    <section class="card">
        <div class="section-head">
            <h2>Salary Entries</h2>
            <span class="pill">{{ $expenses->total() }} total</span>
        </div>
        <table>
            <thead>
                <tr>
                    <th>Pay Period</th>
                    <th>Employee</th>
                    <th>Gross</th>
                    <th>Net</th>
                    <th>Cur.</th>
                    <th>PKR Eq.</th>
                    <th>Bank Account</th>
                    <th>Notes</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            @forelse($expenses as $expense)
                @php $detail = $expense->salaryDetail; @endphp
                <tr class="row-hover">
                    <td style="white-space:nowrap">
                        {{ ($detail?->pay_period_month ?? $expense->expense_date)?->format('d M Y') ?? '-' }}
                    </td>
                    <td>{{ $detail?->employee?->name ?? $expense->description }}</td>
                    <td class="right">{{ $metrics->money($detail?->gross_amount ?? $expense->amount, $detail?->currency ?? $expense->currency) }}</td>
                    <td class="right">{{ $detail?->net_amount !== null ? $metrics->money($detail->net_amount, $detail?->currency ?? $expense->currency) : '-' }}</td>
                    <td>{{ $detail?->currency ?? $expense->currency }}</td>
                    <td style="white-space:nowrap">
                        {{ $metrics->money($metrics->convert($expense->amount, $expense->currency, 'PKR'), 'PKR') }}
                    </td>
                    <td>{{ $expense->bankAccount?->name ?? 'None' }}</td>
                    <td>{{ $detail?->notes ?? '-' }}</td>
                    <td class="actions" style="white-space:nowrap">
                        <a href="{{ route('finance.expenses.salaries.edit', [$category, $expense]) }}" class="btn btn-sm">Edit</a>
                        <form method="POST"
                              action="{{ route('finance.expenses.salaries.destroy', [$category, $expense]) }}"
                              style="display:inline-block">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-sm btn-danger"
                                    onclick="return confirm('Delete this salary entry?')">Delete</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="9" class="muted" style="text-align:center;padding:24px">
                        No salary entries yet. Add employees above and record their first payment.
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>
        <div class="card-pad">{{ $expenses->links() }}</div>
    </section>
@endsection

@push('scripts')
<script>
    // Pre-fill gross amount and currency when an employee is selected
    document.addEventListener('DOMContentLoaded', function () {
        var employeeSelect = document.getElementById('salaryEmployee');
        var grossInput = document.getElementById('salaryGross');
        var currencySelect = document.getElementById('salaryCurrency');

        if (employeeSelect) {
            employeeSelect.addEventListener('change', function () {
                var opt = this.options[this.selectedIndex];
                var defaultSalary = opt.dataset.salary;
                var defaultCurrency = opt.dataset.currency;

                if (grossInput && defaultSalary && parseFloat(defaultSalary) > 0) {
                    grossInput.value = defaultSalary;
                }
                if (currencySelect && defaultCurrency) {
                    currencySelect.value = defaultCurrency;
                }
            });
        }
    });
</script>
@endpush