@php
    use App\Enums\WorkFlow\ActionType;
@endphp

@extends('components.dashboard.layout.layout')

@section('content')
    @include('components.alert')

    <style>
        .workflow-create-card {
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .workflow-create-card__body {
            padding: 1.25rem;
        }

        .workflow-info-box {
            padding: 1rem;
            border-radius: 16px;
            border: 1px solid #e2e8f0;
            background: #f8fafc;
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .workflow-info-box__icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eef2ff;
            color: #4338ca;
            flex-shrink: 0;
            font-size: 1rem;
        }

        .workflow-info-box__title {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 800;
            color: #111827;
        }

        .workflow-info-box__text {
            margin: 0.25rem 0 0;
            color: #64748b;
            font-size: 0.86rem;
            line-height: 1.55;
        }

        .workflow-required {
            color: #dc2626;
        }

        .asset-form-grid .select2-container {
            width: 100% !important;
            max-width: 100% !important;
            display: block !important;
        }

        .asset-form-grid .select2-container .selection {
            width: 100% !important;
            display: block !important;
        }

        .asset-form-grid .select2-selection--single,
        .asset-form-grid .select2-selection--multiple {
            width: 100% !important;
            min-height: 44px !important;
            border-radius: 12px !important;
            border-color: #dbe2ea !important;
        }

        .asset-form-grid .select2-selection__rendered {
            padding-top: 7px !important;
        }

        .workflow-actions-bar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

        .workflow-loader {
            position: fixed;
            inset: 0;
            background: rgba(255, 255, 255, 0.92);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.2s ease;
        }

        .workflow-loader__box {
            padding: 1.5rem 1.75rem;
            border-radius: 18px;
            background: #fff;
            border: 1px solid #e5e7eb;
            box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
            text-align: center;
            min-width: 190px;
        }

        .workflow-loader__text {
            margin-top: 0.75rem;
            color: #64748b;
            font-size: 0.88rem;
            font-weight: 600;
        }

        .workflow-hidden-input-wrap {
            display: none;
        }

        @media (max-width: 575.98px) {
            .workflow-create-card__body {
                padding: 1rem;
            }

            .workflow-actions-bar .asset-btn {
                width: 100%;
            }
        }
        .form-section__title {
    margin: 0;
    font-size: 18px !important;
    font-weight: 700;
    color: #0f172a;
}
    </style>

    <div id="workflowSpinner" class="workflow-loader">
        <div class="workflow-loader__box">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <div class="workflow-loader__text">
                Preparing workflow form...
            </div>
        </div>
    </div>

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Create Workflow"
                    description="Create a new CRM workflow step, define its sorting order, select child workflows, and assign an action type.">

                    <a href="{{ route('workflow.index') }}" class="asset-btn asset-btn--secondary">
                        Back to Workflows
                    </a>

                </x-page-title>

                <form method="POST" action="{{ route('workflow.store') }}" id="workflowCreateForm">
                    @csrf

                    <div class="workflow-info-box">
                        <div class="workflow-info-box__icon">
                            <i class="fas fa-diagram-project"></i>
                        </div>

                        <div>
                            <h6 class="workflow-info-box__title">
                                Workflow Configuration
                            </h6>
                            <p class="workflow-info-box__text">
                                Set the workflow name and order, then optionally connect this workflow to child workflow steps.
                            </p>
                        </div>
                    </div>

                    <div class="workflow-create-card">
                        <div class="workflow-create-card__body">
                            <div class="form-section">
                                <div class="form-section__head">
                                    <h5 class="form-section__title mb-1">Basic Information</h5>
                                    <p class="form-section__sub mb-0">
                                        Enter the workflow name and sorting position used in the CRM automation sequence.
                                    </p>
                                </div>

                                <div class="asset-form-grid">
                                    <div class="asset-col-6">
                                        <x-forms.input-label.basic
                                            name="name"
                                            required
                                            value="{{ old('name') }}">
                                            Name <span class="workflow-required">*</span>
                                        </x-forms.input-label.basic>
                                    </div>

                                    <div class="asset-col-6">
                                        <x-forms.input-label.basic
                                            type="number"
                                            name="sort"
                                            required
                                            value="{{ old('sort') }}"
                                            min="1">
                                            Sort <span class="workflow-required">*</span>
                                        </x-forms.input-label.basic>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="workflow-create-card mt-4">
                        <div class="workflow-create-card__body">
                            <div class="form-section">
                                <div class="form-section__head">
                                    <h5 class="form-section__title mb-1">Workflow Relations</h5>
                                    <p class="form-section__sub mb-0">
                                        Select child workflows and define the action type connected to this workflow.
                                    </p>
                                </div>

                                <div class="asset-form-grid">
                                    <div class="asset-col-6">
                                        <x-forms.labels.basic>
                                            Select Children
                                        </x-forms.labels.basic>

                                        <x-forms.select.basic
                                            name="children[]"
                                            class="asset-select select2 general-select"
                                            multiple="multiple"
                                            style="width: 100%;">
                                            @foreach ($workflows as $workflow)
                                                <option
                                                    value="{{ $workflow->id }}"
                                                    @selected(collect(old('children', []))->contains($workflow->id))>
                                                    {{ str($workflow->name)->replace('_', ' ')->lower()->ucfirst() }}
                                                </option>
                                            @endforeach
                                        </x-forms.select.basic>
                                    </div>

                                    <div class="asset-col-6">
                                        <label for="action_type" class="asset-label">
                                            Select Action Type
                                        </label>

                                        <select
                                            name="action_type"
                                            id="action_type"
                                            class="asset-select select2 general-select"
                                            style="width: 100%;">
                                            <option value="">Select Action type</option>

                                            @foreach (ActionType::cases() as $actionType)
                                                <option
                                                    value="{{ $actionType->value }}"
                                                    @selected(old('action_type') === $actionType->value)>
                                                    {{ ucfirst($actionType->name) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

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

                    <div class="workflow-actions-bar">
                        <a href="{{ route('workflow.index') }}" class="asset-btn asset-btn--secondary">
                            Cancel
                        </a>

                        <button type="submit" class="asset-btn asset-btn--primary">
                            Submit
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            $('.select2').select2({
                width: '100%',
                placeholder: 'Select option',
                allowClear: true
            });

            $(window).on('load', function () {
                $('#workflowSpinner').fadeOut(200);
            });

            setTimeout(function () {
                $('#workflowSpinner').fadeOut(200);
            }, 1000);
        });
    </script>
@endpush