@extends('layouts.master')
@section('title', 'Salary components')
@section('content')
<div class="page-head">
    <div><div class="crumbs">Payroll</div><h2>Salary components</h2><div class="sub">Allowances and recurring deductions. Assign them per employee on the profile's <b>Salary structure</b> tab.</div></div>
    <div class="actions">@can('Salary Components add')<button id="addbtn" class="btn btn-primary" data-modal-form="#formModal" data-action="{{ route('salary-components.store') }}" data-title="Add component"><i class="fas fa-plus me-1"></i> Add component</button>@endcan</div>
</div>
<div class="card"><div class="card-body p-0">
    <table class="table table-hover mb-0">
        <thead><tr><th>Component</th><th>Type</th><th>Default</th><th class="num">Employees</th><th>Status</th><th></th></tr></thead>
        <tbody>
            @foreach ($components as $c)
                <tr>
                    <td class="fw-bold">{{ $c->name }}</td>
                    <td>{!! status_badge($c->type === 'allowance' ? 'active' : 'rejected') !!} <span class="tx-12">{{ ucfirst($c->type) }}</span></td>
                    <td>{{ $c->valueLabel() }}</td>
                    <td class="num">{{ $c->employees_count }}</td>
                    <td>{!! status_badge($c->status) !!}</td>
                    <td class="text-end">@include('partials.row-actions', ['edit' => 'Salary Components edit', 'delete' => 'Salary Components delete', 'update' => route('salary-components.update', $c), 'destroy' => route('salary-components.destroy', $c), 'title' => 'Edit component', 'confirm' => 'Delete this component? It will be removed from every employee.', 'record' => rec($c, ['name', 'type', 'calculation', 'default_value', 'sort_order', 'status'])])</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div></div>
@include('partials.modal-open', ['title' => 'Add component'])
    <div class="mb-3"><label class="form-label">Name <span class="req">*</span></label><input name="name" class="form-control" required></div>
    <div class="row g-3">
        <div class="col-6"><label class="form-label">Type</label><select name="type" class="form-select"><option value="allowance">Allowance (earning)</option><option value="deduction">Deduction</option></select></div>
        <div class="col-6"><label class="form-label">Calculation</label><select name="calculation" class="form-select"><option value="fixed">Fixed amount</option><option value="percentage">% of basic salary</option></select></div>
        <div class="col-6"><label class="form-label">Default value</label><input type="number" step="0.01" min="0" name="default_value" class="form-control" value="0" required></div>
        <div class="col-3"><label class="form-label">Order</label><input type="number" min="0" name="sort_order" class="form-control" value="0"></div>
        <div class="col-3"><label class="form-label">Status</label><select name="status" class="form-select"><option value="active">Active</option><option value="inactive">Inactive</option></select></div>
    </div>
@include('partials.modal-close')
@endsection