<x-ui.layout.page :title="__('training.sessions')" page-icon="fe fe-calendar">
    @can('training.create')
        <div class="card mb-3"><div class="card-body">
            <form method="POST" id="session-form" class="row g-3">@csrf
                <div class="col-md-4"><x-ui.form.search-select name="course_id" :label="__('training.fields.course')" :options="$courses" required /></div>
                <div class="col-md-4"><x-ui.form.input name="trainer" :label="__('training.fields.trainer')" /></div>
                <div class="col-md-4"><x-ui.form.input name="location" :label="__('training.fields.location')" /></div>
                <div class="col-md-4"><x-ui.form.input name="starts_at" type="datetime-local" :label="__('training.fields.starts_at')" required /></div>
                <div class="col-md-4"><x-ui.form.input name="ends_at" type="datetime-local" :label="__('training.fields.ends_at')" required /></div>
                <div class="col-md-2"><x-ui.form.input name="capacity" type="number" :label="__('training.fields.capacity')" /></div>
                <div class="col-md-2"><x-ui.form.select name="status" :label="__('training.fields.status')" :options="['planned'=>__('training.status.planned'),'open'=>__('training.status.open'),'completed'=>__('training.status.completed'),'cancelled'=>__('training.status.cancelled')]" required /></div>
                <div class="col-12"><x-ui.buttons.primary type="submit">{{ __('common.save') }}</x-ui.buttons.primary></div>
            </form>
        </div></div>
        <script>document.getElementById('session-form').addEventListener('submit',function(){this.action='{{ url('/hr/training/courses') }}/'+this.course_id.value+'/sessions';});</script>
    @endcan
    <x-ui.operational.index-shell>
        <x-ui.table.table :columns="[['label'=>__('training.fields.course')],['label'=>__('training.fields.trainer')],['label'=>__('training.fields.starts_at')],['label'=>__('training.fields.location')],['label'=>__('training.fields.status')],['label'=>__('common.actions'),'align'=>'end']]">
            @forelse($sessions as $session)
                <x-ui.table.row>
                    <td>{{ $session->course?->name ?? '—' }}</td><td>{{ $session->trainer ?? '—' }}</td><td>{{ $session->starts_at?->format('Y-m-d H:i') }}</td><td>{{ $session->location ?? '—' }}</td><td>{{ __('training.status.'.$session->status) }}</td>
                    <td class="text-end">@can('training.manage')
                        <form method="POST" action="{{ route('hr.training.sessions.enroll',$session) }}" class="d-flex gap-2 justify-content-end">@csrf
                            <x-ui.form.select name="employee_ids[]" :id="'employee-'.$session->id" :options="$employees" :placeholder="__('training.actions.select_employee')" required />
                            <x-ui.buttons.primary type="submit" size="sm">{{ __('training.actions.enroll') }}</x-ui.buttons.primary>
                        </form>
                    @endcan</td>
                </x-ui.table.row>
            @empty<x-ui.table.row><td colspan="6"><x-ui.operational.empty-state :title="__('training.empty_sessions')" /></td></x-ui.table.row>@endforelse
        </x-ui.table.table>
        <x-slot:pagination>{{ $sessions->links() }}</x-slot:pagination>
    </x-ui.operational.index-shell>
</x-ui.layout.page>
