@extends('layouts.app')

@section('title', 'Bulk Salary Revision')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('payroll.salaries.index') }}">Employee Salaries</a>
        <span class="separator">/</span>
        <span class="current">Bulk Revision</span>
    </div>
@endsection

@section('content')
<div class="max-w-3xl">
    <h1 class="font-display text-2xl font-semibold text-gray-900 mb-1">Bulk Salary Revision</h1>
    <p class="text-sm text-gray-500 mb-5">Apply the same salary change to multiple employees at once.</p>

    <div class="card">
        <div class="card-body">
            <form action="{{ route('payroll.salaries.bulk.process') }}" method="POST" x-data="{ selectedCount: 0 }">
                @csrf

                {{-- Component & Amount --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
                    <div>
                        <label class="form-label">Salary Component <span class="text-danger-500">*</span></label>
                        <select name="salary_component_id" class="form-select @error('salary_component_id') form-input-error @enderror" required>
                            <option value="">Select component...</option>
                            @foreach($components as $comp)
                                <option value="{{ $comp->id }}" {{ old('salary_component_id') == $comp->id ? 'selected' : '' }}>
                                    {{ $comp->name }} ({{ $comp->code }}) — {{ ucfirst($comp->type) }}
                                </option>
                            @endforeach
                        </select>
                        @error('salary_component_id') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="form-label">New Amount (OMR) <span class="text-danger-500">*</span></label>
                        <input type="number" name="amount" value="{{ old('amount') }}" step="0.001" min="0" class="form-input @error('amount') form-input-error @enderror" placeholder="0.000" required>
                        @error('amount') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                </div>

                <div class="mb-5">
                    <label class="form-label">Effective From <span class="text-danger-500">*</span></label>
                    <input type="date" name="effective_from" value="{{ old('effective_from', date('Y-m-d')) }}" class="form-input max-w-xs @error('effective_from') form-input-error @enderror" required>
                    @error('effective_from') <p class="form-error">{{ $message }}</p> @enderror
                </div>

                {{-- Employee Selection --}}
                <div class="border-t border-gray-100 pt-5">
                    <div class="flex items-center justify-between mb-3">
                        <label class="form-label mb-0">Select Employees <span class="text-danger-500">*</span></label>
                        <span class="text-xs text-gray-500" x-text="selectedCount + ' selected'"></span>
                    </div>

                    <div class="max-h-64 overflow-y-auto border border-gray-200 rounded-lg divide-y divide-gray-100">
                        @foreach($employees as $emp)
                        <label class="flex items-center gap-3 px-3 py-2.5 hover:bg-gray-50 cursor-pointer">
                            <input type="checkbox" name="employee_ids[]" value="{{ $emp->id }}"
                                   {{ in_array($emp->id, old('employee_ids', [])) ? 'checked' : '' }}
                                   @change="selectedCount = document.querySelectorAll('input[name=\'employee_ids[]\']:checked').length"
                                   class="w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600">
                            <div class="flex-1">
                                <span class="text-sm font-medium text-gray-900">{{ $emp->full_name }}</span>
                                <span class="text-xxs text-gray-400 ml-2">{{ $emp->employee_code }}</span>
                            </div>
                            <span class="text-xs text-gray-500">{{ $emp->department->name ?? '' }}</span>
                        </label>
                        @endforeach
                    </div>
                    @error('employee_ids') <p class="form-error">{{ $message }}</p> @enderror
                </div>

                <div class="flex items-center gap-3 mt-6 pt-5 border-t border-gray-100">
                    <button type="submit" class="btn-primary">Apply Bulk Revision</button>
                    <a href="{{ route('payroll.salaries.index') }}" class="btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection