@php 
    use App\Enums\WorkFlow\ActionType; 
@endphp
<x-Dashboard.Layout.Layout title="Workflow - {{$flow->name}}">

    <style>
        .selection{
            width: 100%;
        }
         #spinner {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgb(255, 255, 255);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
    </style>


    <!-- Spinner overlay -->
    <div id="spinner">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-12">
                <div class="card border-0">
                    <div class="card-header">
                        <h6 class="text-lg font-weight-semibold mb-0">Edit Work Flow</h6>
                    </div>
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <form class="card-body" method="POST" action="{{ route('workflow.update', $flow->id) }}">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <div class="col-md-6">
                                <x-forms.labels.basic>
                                    Name
                                </x-forms.labels.basic>
                                <x-forms.input-label.basic 
                                    name="name" 
                                    required
                                    value="{{ old('name', $flow->name) }}"
                                    label="Workflow Name"
                                />
                            </div>
                            <div class="col-md-6">
                                <x-forms.input-label.basic type="number" name="sort" required value="{{ old('sort',$flow->sort) }}">
                                    Sort
                                </x-forms.input-label.basic>
                            </div>
                        </div>

                         <div class="row">

                            <div class="col-md-6">

                            @php
                                // children is a JSON array of IDs, like: ["2", "3", "4"]
                                $selectedIds = collect(old('children', $flow->children ?? []))->map(fn($id) => (string) $id);
                            @endphp

                            <label for="children">Select children</label>
                            <select name="children[]" id="children" class="form-select select2" multiple>
                                @foreach($workflows->where('id', '<>', $flow->id) as $workflow)
                                    <option value="{{ $workflow->id }}"
                                        {{ $selectedIds->contains((string) $workflow->id) ? 'selected' : '' }}>
                                        {{ $workflow->name }}
                                    </option>
                                @endforeach
                            </select>

                            </div>

                              <div class="col-md-6">
                                <label for="action_type">Select Action type</label>
                                <select name="action_type" id="action_type" class="form-select select2">
                                    <option value="">Select Action type</option>
                                    @foreach(ActionType::cases() as $actionType)
                                        <option value="{{ $actionType->value }}" @selected(old('action_type', $flow->action_type) == $actionType->value)
                                            {{ $selectedIds->contains((string) $actionType->value) ? 'selected' : '' }}>
                                            {{ ucfirst($actionType->name) }}
                                        </option>
                                    @endforeach
                                </select>
                           </div>

                        </div>

                        <div class="row g-3">
                      

                            {{-- <div class="col-md-6">
                                <x-forms.labels.basic>
                                    Type
                                </x-forms.labels.basic>
                                <x-forms.select.basic name="type" required>
                                    <option value="">Select Type</option>
                                    @foreach(\App\Enums\WorkFlow\WorkFlowType::cases() as $case)
                                        <option
                                            value="{{ $case->value }}"
                                            @selected(old('type', $flow->type) === $case->value)
                                        >
                                            {{ ucfirst($case->name) }}
                                        </option>
                                    @endforeach
                                </x-forms.select.basic>
                            </div> --}}

                            <div class="col-12 pt-4 text-end mt-5">
                                <x-forms.buttons.primary class="float-end">
                                    Update
                                </x-forms.buttons.primary>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>  
        @push('script')
            <script>
                 $(document).ready(function () {
                    // Apply select2
                    $('.select2').select2({
                        width: '100%',
                        placeholder: 'Select option'
                    });

                    // Hide spinner once select2 is fully applied
                    $(window).on('load', function () {
                        $('#spinner').fadeOut();
                    });

                    // Or fallback after a small timeout if needed
                    setTimeout(() => $('#spinner').fadeOut(), 1000);
                });
            </script>
            
        @endpush
    </div>
</x-Dashboard.Layout.Layout>