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

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

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

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

        .lead-actions-card__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 1.25rem 1.35rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .lead-actions-card__title {
            margin: 0;
            font-size: 1rem !important;
            font-weight: 800;
            color: #111827;
        }

        .lead-actions-card__sub {
            margin: 0.25rem 0 0;
            color: #64748b;
            font-size: 0.88rem !important;
            line-height: 1.5;
        }

        .lead-actions-card__body {
            padding: 1.25rem;
        }

        .lead-action-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
            gap: 1rem;
            align-items: end;
            padding: 1rem;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #f8fafc;
            margin-bottom: 1rem;
        }

        .lead-action-row:last-child {
            margin-bottom: 0;
        }

        .lead-action-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 700;
            color: #374151;
            font-size: 0.88rem;
        }

        .lead-action-input {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            font-size: 0.9rem;
            box-shadow: none !important;
        }

        .lead-action-input[readonly] {
            background: #f1f5f9;
            color: #334155;
            cursor: not-allowed;
        }

        .lead-action-meta {
            margin-top: 0.35rem;
            color: #64748b;
            font-size: 0.78rem;
            line-height: 1.4;
        }

        .lead-action-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.45rem 0.7rem;
            border-radius: 999px;
            background: #eef2ff;
            color: #3730a3;
            font-size: 0.78rem;
            font-weight: 800;
            white-space: nowrap;
        }

        .lead-actions-summary {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 1rem;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #f8fafc;
            margin-bottom: 1rem;
        }

        .lead-actions-summary__title {
            margin: 0;
            font-size: 0.95rem !important;
            font-weight: 800;
            color: #111827;
        }

        .lead-actions-summary__text {
            margin: 0.25rem 0 0;
            color: #64748b;
            font-size: 0.86rem !important;
            line-height: 1.55;
        }

        .lead-actions-empty {
            padding: 2.5rem 1rem;
            text-align: center;
            color: #64748b;
        }

        .lead-actions-empty__icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 0.85rem;
            border-radius: 18px;
            background: #f1f5f9;
            color: #64748b;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.35rem;
        }

        .lead-actions-empty__title {
            font-weight: 800;
            color: #111827;
            margin-bottom: 0.25rem;
        }

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

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

        @media (max-width: 991.98px) {
            .lead-action-row {
                grid-template-columns: 1fr;
            }
        }

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

            .lead-actions-actions .asset-btn {
                width: 100%;
            }

            .lead-actions-summary {
                align-items: flex-start;
            }
        }
    </style>

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

                <x-page-title
                    title="Update Lead Actions"
                    description="Assign each lead action to its workflow so the CRM can route leads through the correct automation steps.">
                    <a href="{{ url()->previous() }}" class="asset-btn asset-btn--secondary">
                        Back
                    </a>
                </x-page-title>

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

                    <div class="lead-actions-card">
                        <div class="lead-actions-card__header">
                            <div>
                                <h6 class="lead-actions-card__title">
                                    Lead Actions Workflow Mapping
                                </h6>
                                <p class="lead-actions-card__sub">
                                    Review the available lead actions and select the workflow assigned to each action.
                                </p>
                            </div>

                            <span class="lead-action-pill">
                                <i class="fas fa-list-check"></i>
                                {{ $leadActions->count() }} Actions
                            </span>
                        </div>

                        <div class="lead-actions-card__body">
                            <div class="lead-actions-summary">
                                <div>
                                    <h6 class="lead-actions-summary__title">
                                        Workflow Assignment
                                    </h6>
                                    <p class="lead-actions-summary__text">
                                        The action name is locked to prevent accidental changes. Only users with update permission can change the related workflow.
                                    </p>
                                </div>
                            </div>

                            <div class="asset-form-grid">
                                @forelse ($leadActions as $action)
                                    <div class="asset-col-12">
                                        <div class="lead-action-row">
                                            <div>
                                                <label class="lead-action-label">
                                                    Action
                                                </label>

                                                <input
                                                    type="text"
                                                    class="lead-action-input"
                                                    readonly
                                                    name="action[]"
                                                    required
                                                    value="{{ ucfirst(strtolower(old('action.' . $loop->index, $action->action))) }}"
                                                    placeholder="Action name">

                                                <div class="lead-action-meta">
                                                    System action name
                                                </div>
                                            </div>

                                            <div>
                                                <label class="lead-action-label">
                                                    Workflow
                                                </label>

                                                @can('crm_leadactions-update')
                                                    <select
                                                        name="workflow_id[]"
                                                        required
                                                        class="lead-action-input select2 general-select"
                                                        style="width: 100%;">
                                                        <option value="">Select WorkFlow</option>

                                                        @foreach ($workflows as $workflow)
                                                            <option
                                                                value="{{ $workflow->id }}"
                                                                @selected(old('workflow_id.' . $loop->parent->index, $action->workflow_id) == $workflow->id)>
                                                                {{ str($workflow->name)->replace('_', ' ')->lower()->ucfirst() }}
                                                            </option>
                                                        @endforeach
                                                    </select>

                                                    <div class="lead-action-meta">
                                                        Select the workflow triggered by this action
                                                    </div>
                                                @else
                                                    <input
                                                        type="text"
                                                        class="lead-action-input"
                                                        readonly
                                                        required
                                                        value="{{ $action?->workflow?->name ? str($action?->workflow?->name)->replace('_', ' ')->lower()->ucfirst() : 'Not Selected Yet' }}"
                                                        placeholder="Workflow">

                                                    <div class="lead-action-meta">
                                                        You do not have permission to update this workflow
                                                    </div>
                                                @endcan
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="asset-col-12">
                                        <div class="lead-actions-empty">
                                            <div class="lead-actions-empty__icon">
                                                <i class="fas fa-list-check"></i>
                                            </div>

                                            <div class="lead-actions-empty__title">
                                                No lead actions found
                                            </div>

                                            <div>
                                                There are no lead actions available to configure.
                                            </div>
                                        </div>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>

                    @can('crm_leadactions-update')
                        <div class="lead-actions-actions">
                            <a href="{{ url()->previous() }}" class="asset-btn asset-btn--secondary">
                                Cancel
                            </a>

                            <button type="submit" class="asset-btn asset-btn--primary">
                                Update
                            </button>
                        </div>
                    @endcan
                </form>

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

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