@php 
    use App\Enums\WorkFlow\ActionType; 
@endphp
<x-Dashboard.Layout.Layout title="Create Workflow">
      <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">Create Work Flow</h6>
                    </div>
                    <form class="card-body" method="POST" action="{{ route('workflow.store') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <x-forms.input-label.basic name="name" required value="{{ old('name') }}">
                                    Name
                                </x-forms.input-label.basic>
                            </div>
                            
                            <div class="col-md-6">
                                <x-forms.input-label.basic type="number" name="sort" required value="{{ old('sort') }}">
                                    Sort
                                </x-forms.input-label.basic>
                            </div>
                            
                        </div>
                        <div class="row">

                            <div class="col-md-6">
                              <x-forms.labels.basic>Select children</x-forms.labels.basic>
                                <x-forms.select.basic name="children[]" class="select2 form-select" multiple="multiple">
                                    <option value="" disabled>Select workflow</option>
                                    @foreach($workflows as $workflow)
                                        <option
                                            value="{{ $workflow->id }}"
                                            @selected(collect(old('children'))->contains($workflow->id))
                                        >
                                            {{ $workflow->name }}
                                        </option>
                                    @endforeach
                                </x-forms.select.basic>
                            </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('actiontype'))>
                                            {{ ucfirst($actionType->name) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <x-forms.input-label.basic type="hidden" name="type" value="lead" required>
                                </x-forms.input-label.basic>
                            </div>

                        </div>
                        <div class="row g-3">
                           
                            {{-- <div class="col-md-6">
                                <x-forms.input-label.basic type="hidden" name="type" value="lead" required>
                                </x-forms.input-label.basic> --}}
                                {{-- <x-forms.select.basic name="type" required>
                                    <option value="">Select Type</option>
                                    @foreach ($types as $case)
                                        <option value="{{ $case->value }}" @selected(old('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">
                                    Submit
                                </x-forms.buttons.primary>
                            </div>
                        </div>
                    </form>
                </div>
            </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
</x-Dashboard.Layout.Layout>