@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">Add Transitions to Workflow: {{ $workflow->name }}</h4>
            </div>
        </div>
        @if(session('message'))
            <div class="alert alert-success">{{ session('message') }}</div>
        @endif
        <div class="card mb-4">
            <div class="card-body">
                <form action="{{ route('workflow.transitions.store', $workflow->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf                    
                    <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') }}" 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') == $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') == $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') ? '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') ? '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') ? '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[]" class="form-select" multiple>
                               
                                @foreach($roles as $role)
                                    <option value="{{ $role->id }}" {{ (collect(old('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[]" class="form-select" multiple>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ (collect(old('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">Add Another Transition</button>
                    <a href="{{ route('workflow.steps.create', $workflow->id) }}" class="btn btn-secondary text-white">Previous</a>
                    <button type="button" class="btn btn-primary text-white" id="saveFinishBtn">Save & Finish</button>
            <script>
            document.getElementById('saveFinishBtn').addEventListener('click', function(e) {
                var form = this.closest('form');
                // If any field is filled, submit the form, then redirect after success
                var hasData = form.name.value || form.from_step_id.value || form.to_step_id.value;
                if (hasData) {
                    form.action = "{{ route('workflow.transitions.store', $workflow->id) }}";
                    var finishInput = document.createElement('input');
                    finishInput.type = 'hidden';
                    finishInput.name = 'finish';
                    finishInput.value = '1';
                    form.appendChild(finishInput);
                    form.submit();
                } else {
                    window.location.href = "{{ route('workflow.index') }}";
                }
            });
            </script>
                </form>
            </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 class="card">
            <div class="card-body">
                <h5>Current Transitions</h5>
                <ul class="list-group">
                    @foreach($transitions as $transition)
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <strong>{{ $transition->name }}</strong>: {{ $transition->fromStep->name ?? '-' }} → {{ $transition->toStep->name ?? '-' }}
                                <br>
                                <small>
                                    @php
                                        $assignedUsers = collect($transition->user_ids ?? [])->map(function($id) use ($users) {
                                            $user = $users->firstWhere('id', $id);
                                            return $user ? ($user->name ?? ($user->first_name . ' ' . $user->last_name)) : null;
                                        })->filter()->toArray();
                                        $assignedRoles = collect($transition->role_ids ?? [])->map(function($id) use ($roles) {
                                            $role = $roles->firstWhere('id', $id);
                                            return $role ? $role->name : null;
                                        })->filter()->toArray();
                                    @endphp
                                    @if(count($assignedUsers))
                                        <span class="text-success">Users: {{ implode(', ', $assignedUsers) }}</span>
                                    @endif
                                    @if(count($assignedRoles))
                                        <span class="text-primary ms-2">Roles: {{ implode(', ', $assignedRoles) }}</span>
                                    @endif
                                    @if(!count($assignedUsers) && !count($assignedRoles))
                                        <span class="text-muted">No assignment</span>
                                    @endif
                                </small>
                            </div>
                            <div>
                                <a href="{{ route('workflow.transitions.edit', [$workflow->id, $transition->id]) }}" class="btn btn-sm btn-primary text-white">Edit</a>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection