@extends('layouts.app')

@section('title', 'Edit Employee')

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
        <h4 class="mb-3 mb-md-0">Edit Employee</h4>
        <a href="{{ route('employees.show', $employee) }}" class="btn btn-outline-secondary">
            <i class="icon-base ti tabler-eye me-1"></i>
            View Profile
        </a>
    </div>

    @include('partials.alerts')

    <form action="{{ route('employees.update', $employee) }}" method="post">
        @csrf
        @method('PUT')
        @include('employees.partials.form', ['isEdit' => true])
        
        @if($employee->user && isset($roles) && $roles->count() > 0)
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Access & Roles</h5>
                    <p class="text-muted mb-3">
                        Assign one or more roles to control what {{ $employee->name }} can see in the system.
                    </p>
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Roles</label>
                            @php
                                $selectedRoles = collect(old('roles', $employee->user->roles->pluck('name')->all() ?? []));
                            @endphp
                            <select name="roles[]" class="form-select" multiple size="5">
                                @foreach($roles as $role)
                                    <option value="{{ $role->name }}" @selected($selectedRoles->contains($role->name))>
                                        {{ $role->name }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted d-block mt-1">Hold Ctrl (Cmd on Mac) to select multiple roles.</small>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </form>
@endsection