@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 Steps 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.steps.store', $workflow->id) }}" method="POST" id="addStepForm">
                    @csrf
                    <div class="mb-3">
                        <label for="name" class="form-label">Step Name</label>
                        <input type="text" name="name" id="name" class="form-control" required>
                    </div>
                    <button type="submit" class="btn btn-success" id="addStepBtn">Add Another Step</button>
                </form>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h5>Current Steps</h5>
                <ul class="list-group">
                    @foreach($steps as $step)
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>{{ $step->order }}. {{ $step->name }}</span>
                            <span>
                                <a href="{{ route('workflow.steps.edit', [$workflow->id, $step->id]) }}" class="btn btn-sm btn-primary me-2">Edit</a>
                                <form action="{{ route('workflow.steps.destroy', [$workflow->id, $step->id]) }}" method="POST" style="display:inline-block">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete this step?')">Delete</button>
                                </form>
                            </span>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
        <div class="mt-4 text-end">
            <button class="btn btn-primary" id="finishBtn" {{ count($steps) < 2 ? 'disabled' : '' }} onclick="window.location.href='{{ route('workflow.transitions.create', $workflow->id) }}'">Save as Draft & Next</button>
            <div class="text-danger mt-2" id="stepWarning" style="{{ count($steps) < 2 ? '' : 'display:none;' }}">
                At least two steps are required to continue.
            </div>
        </div>
        <script>
        // Optionally, handle form submission with AJAX for better UX
        document.getElementById('addStepForm').addEventListener('submit', function(e) {
            // Allow normal submit, or add AJAX logic here if desired
        });
        </script>
    </div>
</div>
@endsection