@extends('layouts.app')

@section('content')
    <div class="container">
        <h2>Edit Component</h2>
        <form action="{{ route('salary-components.update', $salaryComponent) }}" method="POST">
            @csrf @method('PUT')

            <div class="mb-3">
                <label>Client</label>
                <select name="client_id" class="form-control" required>
                    @foreach ($clients as $client)
                        <option value="{{ $client->id }}"
                            {{ $salaryComponent->client_id == $client->id ? 'selected' : '' }}>
                            {{ $client->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="mb-3"><label>Name</label><input name="name" class="form-control"
                    value="{{ $salaryComponent->name }}" required></div>
            <div class="mb-3">
                <label>Type</label>
                <select name="type" class="form-control" required>
                    <option value="earning" {{ $salaryComponent->type == 'earning' ? 'selected' : '' }}>Earning</option>
                    <option value="deduction" {{ $salaryComponent->type == 'deduction' ? 'selected' : '' }}>Deduction
                    </option>
                </select>
            </div>
            <div class="mb-3">
                <label>Required</label>
                <select name="is_required" class="form-control" required>
                    <option value="1" {{ $salaryComponent->is_required ? 'selected' : '' }}>Yes</option>
                    <option value="0" {{ !$salaryComponent->is_required ? 'selected' : '' }}>No</option>
                </select>
            </div>
            {{-- <div class="mb-3"><label>CSV Index</label>
                <input name="position_in_csv" type="number" class="form-control"
                    value="{{ $salaryComponent->position_in_csv }}" required>
            </div> --}}

            <button class="btn btn-primary">Update</button>
        </form>
    </div>
@endsection