@extends('layouts.app_hr')

@section('title', __('hr.assign_employees'))

@section('content')
    <div class="container">
        <h3>{{ __('hr.assign_employees_to_policy') }}: {{ $policy->policy_name }}</h3>

        <!-- الموظفين المتوفرين لتعيين السياسة -->
        <form action="{{ route('attendance-policies.storeAssignedEmployees', $policy->id) }}" method="POST">
            @csrf
            <div class="form-group">
                <label for="employees">{{ __('hr.select_employees') }}</label>
                <select name="employee_ids[]" id="employees" class="form-control select2" multiple required>
                    @foreach($availableEmployees as $employee)
                        <option value="{{ $employee->id }}">{{ $employee->first_name }} {{ $employee->last_name }}</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="btn btn-success mt-3">{{ __('messages.save') }}</button>
            <a href="{{ route('attendance-policies.index') }}" class="btn btn-secondary mt-3">{{ __('messages.cancel') }}</a>
        </form>

        <!-- الموظفين المعينين للسياسة -->
        <h4 class="mt-5">{{ __('hr.assigned_employees') }}</h4>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>{{ __('hr.employee_name') }}</th>
                <th>{{ __('hr.department') }}</th>
                <th>{{ __('hr.job_title') }}</th>
                <th>{{ __('messages.actions') }}</th>
            </tr>
            </thead>
            <tbody>
            @forelse($assignedEmployees as $employee)
                <tr>
                    <td>{{ $employee->first_name }} {{ $employee->last_name }}</td>
                    <td>{{ optional($employee->department)->name }}</td>
                    <td>{{ optional($employee->job)->title }}</td>
                    <td>
                        <button class="btn btn-danger btn-sm unassign-employee" data-employee-id="{{ $employee->id }}">
                            {{ __('messages.delete') }}
                        </button>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" class="text-center">{{ __('hr.no_assigned_employees') }}</td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>
@endsection

@section('javascript')
    <script>
        $(document).ready(function() {
            // تهيئة اختيار متعدد
            $('.select2').select2({
                placeholder: "{{ __('hr.select_employees') }}",
                width: '100%'
            });

            // فك ارتباط الموظف
            $(document).on('click', '.unassign-employee', function() {
                var employeeId = $(this).data('employee-id');
                var url = "{{ route('attendance-policies.unassign', [$policy->id, 'employee_id']) }}".replace('employee_id', employeeId);

                swal({
                    title: "{{ __('messages.are_you_sure') }}",
                    text: "{{ __('hr.confirm_unassign_employee') }}",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                }).then((willDelete) => {
                    if (willDelete) {
                        $.ajax({
                            url: url,
                            method: 'DELETE',
                            success: function(result) {
                                if (result.success) {
                                    toastr.success(result.msg);
                                    location.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            },
                            error: function() {
                                toastr.error("{{ __('messages.something_went_wrong') }}");
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection