@extends('admin.admin_master')

@section('admin')
<div class="page-content">
    <div class="container-fluid">
        <div class="row mb-4">
            <div class="col-12">
                <h4 class="page-title mb-1">Edit Transition for Workflow: {{ $workflow->name }}</h4>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <form action="{{ route('workflow.transitions.update', [$workflow->id, $transition->id]) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="name" class="form-label">Transition Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="name" class="form-control" value="{{ old('name', $transition->name) }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">From Step <span class="text-danger">*</span></label>
                            <select name="from_step_id" class="form-select" required>
                                <option value="">Select Step</option>
                                @foreach($steps as $step)
                                    <option value="{{ $step->id }}" {{ old('from_step_id', $transition->from_step_id) == $step->id ? 'selected' : '' }}>{{ $step->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">To Step <span class="text-danger">*</span></label>
                            <select name="to_step_id" class="form-select" required>
                                <option value="">Select Step</option>
                                @foreach($steps as $step)
                                    <option value="{{ $step->id }}" {{ old('to_step_id', $transition->to_step_id) == $step->id ? 'selected' : '' }}>{{ $step->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-check">
                                <input type="checkbox" name="require_comments" id="require_comments" class="form-check-input" value="1" {{ old('require_comments', $transition->require_comments) ? 'checked' : '' }}>
                                <label for="require_comments" class="form-check-label">Require comments when using this transition</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input type="checkbox" name="require_file" id="require_file" class="form-check-input" value="1" {{ old('require_file', $transition->require_file) ? 'checked' : '' }}>
                                <label for="require_file" class="form-check-label">Require file attachment when using this transition</label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-check">
                                <input type="checkbox" name="is_end" id="is_end" class="form-check-input" value="1" {{ old('is_end', $transition->is_end) ? 'checked' : '' }}>
                                <label for="is_end" class="form-check-label">Is Final Transition (Completes Workflow)</label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Roles</label>
                                <select name="role_ids[]" id="role_ids" class="form-select" multiple>
                             
                                    @foreach($roles as $role)
                                        <option value="{{ $role->id }}" {{ (collect(old('role_ids', $transition->role_ids))->contains($role->id)) ? 'selected' : '' }}>{{ $role->name }}</option>
                                    @endforeach
                                </select>
                            @error('role_ids')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Users</label>
                                <select name="user_ids[]" id="user_ids" class="form-select" multiple>
                       
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ (collect(old('user_ids', $transition->user_ids))->contains($user->id)) ? 'selected' : '' }}>{{ $user->name ?? ($user->first_name . ' ' . $user->last_name) }}</option>
                                    @endforeach
                                </select>
                            @error('user_ids')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <button type="submit" class="btn btn-success text-white">Update Transition</button>
                    <a href="{{ route('workflow.transitions.create', $workflow->id) }}" class="btn btn-secondary text-white">Cancel</a>
                </form>
            </div>
        </div>
    </div>
    </div>
    <script>
    // Allow deselecting options in multi-selects for roles and users
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('select[multiple]').forEach(function(select) {
            select.addEventListener('mousedown', function(e) {
                if (e.target.tagName === 'OPTION') {
                    e.preventDefault();
                    e.target.selected = !e.target.selected;
                    // For Chrome/Edge, force UI update
                    var selectElem = e.target.parentNode;
                    selectElem.blur();
                    setTimeout(function() { selectElem.focus(); }, 0);
                }
            });
        });
    });
    </script>
</div>
@endsection