@php
    use App\Enums\WorkFlow\ActionType;

    $selectedChildrenIds = collect(old('children', $flow->children ?? []))
        ->map(fn ($id) => (string) $id);

    $selectedActionType = old('action_type', $flow->action_type);
@endphp

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

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

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

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

        .workflow-current-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-current-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-current-box__title {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 800;
            color: #111827;
        }

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

        .workflow-summary-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.85rem;
            margin-bottom: 1rem;
        }

        .workflow-summary-item {
            padding: 0.9rem;
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            background: #fff;
            min-width: 0;
        }

        .workflow-summary-item__label {
            font-size: 0.75rem;
            color: #64748b;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 0.25rem;
        }

        .workflow-summary-item__value {
            font-size: 0.9rem;
            color: #111827;
            font-weight: 800;
            overflow-wrap: anywhere;
        }

        .workflow-required {
            color: #dc2626;
        }

        .workflow-error-list {
            margin: 0;
            padding-left: 1.25rem;
        }

        .workflow-error-list li {
            margin-bottom: 0.25rem;
        }

        .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;
        }

        @media (max-width: 991.98px) {
            .workflow-summary-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 575.98px) {
            .workflow-edit-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="Edit Workflow"
                    description="Update workflow details, sorting order, child workflows, and the related 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.update', $flow->id) }}" id="workflowEditForm">
                    @csrf
                    @method('PUT')

                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <strong>Please review the following errors:</strong>
                            <ul class="workflow-error-list mt-2">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

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

                        <div>
                            <h6 class="workflow-current-box__title">
                                Current Workflow
                            </h6>
                            <p class="workflow-current-box__text">
                                Review the current workflow configuration, then update its name, order, children, or action type as needed.
                            </p>
                        </div>
                    </div>

                    <div class="workflow-summary-grid">
                        <div class="workflow-summary-item">
                            <div class="workflow-summary-item__label">Workflow Name</div>
                            <div class="workflow-summary-item__value">
                                {{ str($flow->name)->replace('_', ' ')->lower()->ucfirst() }}
                            </div>
                        </div>

                        <div class="workflow-summary-item">
                            <div class="workflow-summary-item__label">Current Sort</div>
                            <div class="workflow-summary-item__value">
                                {{ $flow->sort ?? '—' }}
                            </div>
                        </div>

                        <div class="workflow-summary-item">
                            <div class="workflow-summary-item__label">Action Type</div>
                            <div class="workflow-summary-item__value">
                                {{ $flow->action_type ? str($flow->action_type)->replace('_', ' ')->lower()->ucfirst() : '—' }}
                            </div>
                        </div>
                    </div>

                    <div class="workflow-edit-card">
                        <div class="workflow-edit-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">
                                        Update 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', $flow->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', $flow->sort) }}"
                                            min="1">
                                            Sort <span class="workflow-required">*</span>
                                        </x-forms.input-label.basic>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="workflow-edit-card mt-4">
                        <div class="workflow-edit-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">
                                        <label for="children" class="asset-label">
                                            Select Children
                                        </label>

                                        <select
                                            name="children[]"
                                            id="children"
                                            class="asset-select select2 general-select"
                                            multiple
                                            style="width: 100%;">
                                            @foreach ($workflows->where('id', '<>', $flow->id) as $workflow)
                                                <option
                                                    value="{{ $workflow->id }}"
                                                    @selected($selectedChildrenIds->contains((string) $workflow->id))>
                                                    {{ str($workflow->name)->replace('_', ' ')->lower()->ucfirst() }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </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($selectedActionType == $actionType->value)>
                                                    {{ ucfirst($actionType->name) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </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">
                            Update
                        </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