<div class="employee-additions-section">

    {{-- ===================== HEADER ===================== --}}
    <div class="employee-additions-header mb-4 d-flex justify-content-between align-items-center">        
         <div class="row align-items-center">
            <div class="col">
               <h5 class="employee-additions-title mb-1">Employee Additions</h5>
            <small class="text-muted">
                Manage salary additions for this employee
            </small>
            </div>
            <div class="col-auto">
            <button type="button"
                class="btn btn-sm btn-outline-primary"
                id="addAdditionRow">
            <i class="bi bi-plus"></i> Add Addition
        </button>
            </div>
        </div>     
    </div>

    {{-- ===================== BODY ===================== --}}
    <div class="employee-additions-body">

        <div class="table-responsive">
            <table class="table table-bordered align-middle additions-table"
                   id="additionsTable">

                <thead class="table-light">
                    <tr>
                        <th style="min-width: 220px;">
                            Addition <span class="text-danger">*</span>
                        </th>
                        <th style="min-width: 180px;">Calculation Type</th>
                        <th style="min-width: 150px;">Amount</th>
                        <th style="min-width: 130px;">Status</th>
                        <th class="text-center" style="width: 50px;"></th>
                    </tr>
                </thead>

                <tbody>

                {{-- ===================== EDIT MODE ===================== --}}
                @if(isset($employee) && $employee->additions->count())
                    @foreach($employee->additions as $i => $ea)
                        <tr>

                            <td>
                                <select name="additions[{{ $i }}][addition_id]"
                                        class="form-control addition-select"
                                        required>
                                    <option value="">-- Select --</option>
                                    @foreach($additions as $add)
                                        <option value="{{ $add->id }}"
                                            @selected($ea->addition_id == $add->id)>
                                            {{ $add->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </td>

                            <td>
                                <input type="text"
                                       name="additions[{{ $i }}][calculation_type]"
                                       class="form-control calculation-type"
                                       value="{{ $ea->calculation_type }}"
                                       readonly>
                            </td>

                            <td>
                                <input type="number"
                                       name="additions[{{ $i }}][amount]"
                                       class="form-control amount"
                                       value="{{ $ea->amount }}"
                                       {{ $ea->calculation_type != 'both' ? 'readonly' : '' }}>
                            </td>

                            <td>
                                <select name="additions[{{ $i }}][status]"
                                        class="form-control">
                                    <option value="1" @selected($ea->status == 1)>Active</option>
                                    <option value="0" @selected($ea->status == 0)>Inactive</option>
                                </select>
                            </td>

                            <td class="text-center">
                                <button type="button"
                                        class="btn btn-sm btn-outline-danger remove-row"
                                        title="Remove">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>

                        </tr>
                    @endforeach
                @endif

                </tbody>

            </table>
        </div>

    </div>

</div>
