wip

app/Filament/Company/Resources/Common/ClientResource.php

@@ -4,6 +4,7 @@ namespace App\Filament\Company\Resources\Common;
 
 use App\Filament\Company\Resources\Common\ClientResource\Pages;
 use App\Filament\Forms\Components\CreateCurrencySelect;
+use App\Filament\Forms\Components\PhoneBuilder;
 use App\Models\Common\Client;
 use Filament\Forms;
 use Filament\Forms\Form;
@@ -22,7 +23,7 @@ class ClientResource extends Resource
                 Forms\Components\Section::make('General Information')
                     ->schema([
                         Forms\Components\TextInput::make('name')
-                            ->label('Client')
+                            ->label('Client Name')
                             ->required()
                             ->maxLength(255),
                         CreateCurrencySelect::make('currency_code')
@@ -35,9 +36,115 @@ class ClientResource extends Resource
                         Forms\Components\Textarea::make('notes')
                             ->columnSpanFull(),
                     ])->columns(),
+                Forms\Components\Section::make('Primary Contact')
+                    ->relationship('primaryContact')
+                    ->schema([
+                        Forms\Components\Hidden::make('is_primary')
+                            ->default(true),
+                        Forms\Components\TextInput::make('first_name')
+                            ->label('First Name')
+                            ->required()
+                            ->maxLength(255),
+                        Forms\Components\TextInput::make('last_name')
+                            ->label('Last Name')
+                            ->required()
+                            ->maxLength(255),
+                        Forms\Components\TextInput::make('email')
+                            ->label('Email')
+                            ->required()
+                            ->email()
+                            ->maxLength(255),
+                        PhoneBuilder::make('phones')
+                            ->hiddenLabel()
+                            ->blockLabels(false)
+                            ->default([
+                                ['type' => 'office'],
+                            ])
+                            ->blocks([
+                                Forms\Components\Builder\Block::make('office')
+                                    ->label('Office')
+                                    ->schema([
+                                        Forms\Components\TextInput::make('number')
+                                            ->label('Office')
+                                            ->required()
+                                            ->maxLength(15),
+                                    ])->maxItems(1),
+                                Forms\Components\Builder\Block::make('mobile')
+                                    ->label('Mobile')
+                                    ->schema([
+                                        Forms\Components\TextInput::make('number')
+                                            ->label('Mobile')
+                                            ->required()
+                                            ->maxLength(15),
+                                    ])->maxItems(1),
+                                Forms\Components\Builder\Block::make('toll_free')
+                                    ->label('Toll Free')
+                                    ->schema([
+                                        Forms\Components\TextInput::make('number')
+                                            ->label('Toll Free')
+                                            ->required()
+                                            ->maxLength(15),
+                                    ])->maxItems(1),
+                                Forms\Components\Builder\Block::make('fax')
+                                    ->label('Fax')
+                                    ->schema([
+                                        Forms\Components\TextInput::make('number')
+                                            ->label('Fax')
+                                            ->live()
+                                            ->maxLength(15),
+                                    ])->maxItems(1),
+                            ])
+                            ->deletable(fn (PhoneBuilder $builder) => $builder->getItemsCount() > 1)
+                            ->reorderable(false)
+                            ->blockNumbers(false)
+                            ->addActionLabel('Add Phone'),
+                    ]),
+                Forms\Components\Repeater::make('secondaryContacts')
+                    ->relationship()
+                    ->columnSpanFull()
+                    ->hiddenLabel()
+                    ->defaultItems(0)
+                    ->addActionLabel('Add Contact')
+                    ->schema([
+                        Forms\Components\TextInput::make('first_name')
+                            ->label('First Name')
+                            ->required()
+                            ->maxLength(255),
+                        Forms\Components\TextInput::make('last_name')
+                            ->label('Last Name')
+                            ->required()
+                            ->maxLength(255),
+                        Forms\Components\TextInput::make('email')
+                            ->label('Email')
+                            ->required()
+                            ->email()
+                            ->maxLength(255),
+                        PhoneBuilder::make('phones')
+                            ->hiddenLabel()
+                            ->blockLabels(false)
+                            ->default([
+                                ['type' => 'office'],
+                            ])
+                            ->blocks([
+                                Forms\Components\Builder\Block::make('office')
+                                    ->label('Office')
+                                    ->schema([
+                                        Forms\Components\TextInput::make('number')
+                                            ->label('Office')
+                                            ->required()
+                                            ->maxLength(255),
+                                    ])->maxItems(1),
+                            ])
+                            ->addable(false)
+                            ->deletable(false)
+                            ->reorderable(false)
+                            ->blockNumbers(false),
+                    ]),
                 Forms\Components\Section::make('Billing')
                     ->relationship('billingAddress')
                     ->schema([
+                        Forms\Components\Hidden::make('type')
+                            ->default('billing'),
                         Forms\Components\TextInput::make('address_line_1')
                             ->label('Address Line 1')
                             ->required()
@@ -65,6 +172,8 @@ class ClientResource extends Resource
                 Forms\Components\Section::make('Shipping')
                     ->relationship('shippingAddress')
                     ->schema([
+                        Forms\Components\Hidden::make('type')
+                            ->default('shipping'),
                         Forms\Components\TextInput::make('recipient')
                             ->label('Recipient')
                             ->required()
@@ -98,7 +207,8 @@ class ClientResource extends Resource
                             ->maxLength(255),
                         Forms\Components\Textarea::make('notes')
                             ->label('Delivery Instructions')
-                            ->maxLength(255),
+                            ->maxLength(255)
+                            ->columnSpanFull(),
                     ])->columns(),
             ]);
     }

app/Filament/Company/Resources/Common/ClientResource/Pages/CreateClient.php

@@ -4,8 +4,14 @@ namespace App\Filament\Company\Resources\Common\ClientResource\Pages;
 
 use App\Filament\Company\Resources\Common\ClientResource;
 use Filament\Resources\Pages\CreateRecord;
+use Filament\Support\Enums\MaxWidth;
 
 class CreateClient extends CreateRecord
 {
     protected static string $resource = ClientResource::class;
+
+    public function getMaxContentWidth(): MaxWidth | string | null
+    {
+        return MaxWidth::FiveExtraLarge;
+    }
 }

app/Filament/Company/Resources/Common/ClientResource/Pages/EditClient.php

@@ -5,6 +5,7 @@ namespace App\Filament\Company\Resources\Common\ClientResource\Pages;
 use App\Filament\Company\Resources\Common\ClientResource;
 use Filament\Actions;
 use Filament\Resources\Pages\EditRecord;
+use Filament\Support\Enums\MaxWidth;
 
 class EditClient extends EditRecord
 {
@@ -16,4 +17,9 @@ class EditClient extends EditRecord
             Actions\DeleteAction::make(),
         ];
     }
+
+    public function getMaxContentWidth(): MaxWidth | string | null
+    {
+        return MaxWidth::FiveExtraLarge;
+    }
 }

app/Filament/Forms/Components/PhoneBuilder.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Filament\Forms\Components;
+
+use Filament\Forms\Components\Builder;
+
+class PhoneBuilder extends Builder
+{
+    protected string $view = 'filament.forms.components.phone-builder';
+}

app/Models/Common/Client.php

@@ -36,6 +36,18 @@ class Client extends Model
         return $this->morphMany(Contact::class, 'contactable');
     }
 
+    public function primaryContact(): MorphOne
+    {
+        return $this->morphOne(Contact::class, 'contactable')
+            ->where('is_primary', true);
+    }
+
+    public function secondaryContacts(): MorphMany
+    {
+        return $this->morphMany(Contact::class, 'contactable')
+            ->where('is_primary', false);
+    }
+
     public function currency(): BelongsTo
     {
         return $this->belongsTo(Currency::class, 'currency_code', 'code');

app/Models/Common/Contact.php

@@ -33,6 +33,7 @@ class Contact extends Model
 
     protected $casts = [
         'type' => ContactType::class,
+        'phones' => 'array',
     ];
 
     public function contactable(): MorphTo

app/Models/Company.php

@@ -6,6 +6,7 @@ use App\Enums\Setting\DocumentType;
 use App\Models\Accounting\AccountSubtype;
 use App\Models\Banking\BankAccount;
 use App\Models\Banking\ConnectedBankAccount;
+use App\Models\Common\Client;
 use App\Models\Common\Contact;
 use App\Models\Common\Offering;
 use App\Models\Core\Department;
@@ -73,6 +74,11 @@ class Company extends FilamentCompaniesCompany implements HasAvatar
         return $this->hasMany(Accounting\Account::class, 'company_id');
     }
 
+    public function addresses(): HasMany
+    {
+        return $this->hasMany(Common\Address::class, 'company_id');
+    }
+
     public function adjustments(): HasMany
     {
         return $this->hasMany(Accounting\Adjustment::class, 'company_id');
@@ -94,6 +100,11 @@ class Company extends FilamentCompaniesCompany implements HasAvatar
 
     }
 
+    public function clients(): HasMany
+    {
+        return $this->hasMany(Client::class, 'company_id');
+    }
+
     public function contacts(): HasMany
     {
         return $this->hasMany(Contact::class, 'company_id');

composer.lock

@@ -497,16 +497,16 @@
         },
         {
             "name": "aws/aws-sdk-php",
-            "version": "3.328.2",
+            "version": "3.329.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/aws/aws-sdk-php.git",
-                "reference": "63a6366a8011dffec3d1ef838c97ca6b6ddb17a2"
+                "reference": "37249799204e04cf3686d2b361cfd417d3dab123"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/63a6366a8011dffec3d1ef838c97ca6b6ddb17a2",
-                "reference": "63a6366a8011dffec3d1ef838c97ca6b6ddb17a2",
+                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/37249799204e04cf3686d2b361cfd417d3dab123",
+                "reference": "37249799204e04cf3686d2b361cfd417d3dab123",
                 "shasum": ""
             },
             "require": {
@@ -536,7 +536,7 @@
                 "paragonie/random_compat": ">= 2",
                 "phpunit/phpunit": "^5.6.3 || ^8.5 || ^9.5",
                 "psr/cache": "^1.0",
-                "psr/simple-cache": "^1.0",
+                "psr/simple-cache": "^1.0 || ^2.0 || ^3.0",
                 "sebastian/comparator": "^1.2.3 || ^4.0",
                 "yoast/phpunit-polyfills": "^1.0"
             },
@@ -589,9 +589,9 @@
             "support": {
                 "forum": "https://forums.aws.amazon.com/forum.jspa?forumID=80",
                 "issues": "https://github.com/aws/aws-sdk-php/issues",
-                "source": "https://github.com/aws/aws-sdk-php/tree/3.328.2"
+                "source": "https://github.com/aws/aws-sdk-php/tree/3.329.0"
             },
-            "time": "2024-11-19T20:28:51+00:00"
+            "time": "2024-11-21T19:16:09+00:00"
         },
         {
             "name": "aws/aws-sdk-php-laravel",
@@ -4973,31 +4973,31 @@
         },
         {
             "name": "nunomaduro/termwind",
-            "version": "v2.2.0",
+            "version": "v2.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/nunomaduro/termwind.git",
-                "reference": "42c84e4e8090766bbd6445d06cd6e57650626ea3"
+                "reference": "52915afe6a1044e8b9cee1bcff836fb63acf9cda"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/nunomaduro/termwind/zipball/42c84e4e8090766bbd6445d06cd6e57650626ea3",
-                "reference": "42c84e4e8090766bbd6445d06cd6e57650626ea3",
+                "url": "https://api.github.com/repos/nunomaduro/termwind/zipball/52915afe6a1044e8b9cee1bcff836fb63acf9cda",
+                "reference": "52915afe6a1044e8b9cee1bcff836fb63acf9cda",
                 "shasum": ""
             },
             "require": {
                 "ext-mbstring": "*",
                 "php": "^8.2",
-                "symfony/console": "^7.1.5"
+                "symfony/console": "^7.1.8"
             },
             "require-dev": {
-                "illuminate/console": "^11.28.0",
-                "laravel/pint": "^1.18.1",
+                "illuminate/console": "^11.33.2",
+                "laravel/pint": "^1.18.2",
                 "mockery/mockery": "^1.6.12",
                 "pestphp/pest": "^2.36.0",
-                "phpstan/phpstan": "^1.12.6",
+                "phpstan/phpstan": "^1.12.11",
                 "phpstan/phpstan-strict-rules": "^1.6.1",
-                "symfony/var-dumper": "^7.1.5",
+                "symfony/var-dumper": "^7.1.8",
                 "thecodingmachine/phpstan-strict-rules": "^1.0.0"
             },
             "type": "library",
@@ -5040,7 +5040,7 @@
             ],
             "support": {
                 "issues": "https://github.com/nunomaduro/termwind/issues",
-                "source": "https://github.com/nunomaduro/termwind/tree/v2.2.0"
+                "source": "https://github.com/nunomaduro/termwind/tree/v2.3.0"
             },
             "funding": [
                 {
@@ -5056,7 +5056,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-10-15T16:15:16+00:00"
+            "time": "2024-11-21T10:39:51+00:00"
         },
         {
             "name": "openspout/openspout",
@@ -9100,16 +9100,16 @@
         },
         {
             "name": "voku/portable-ascii",
-            "version": "2.0.1",
+            "version": "2.0.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/voku/portable-ascii.git",
-                "reference": "b56450eed252f6801410d810c8e1727224ae0743"
+                "reference": "b1d923f88091c6bf09699efcd7c8a1b1bfd7351d"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/voku/portable-ascii/zipball/b56450eed252f6801410d810c8e1727224ae0743",
-                "reference": "b56450eed252f6801410d810c8e1727224ae0743",
+                "url": "https://api.github.com/repos/voku/portable-ascii/zipball/b1d923f88091c6bf09699efcd7c8a1b1bfd7351d",
+                "reference": "b1d923f88091c6bf09699efcd7c8a1b1bfd7351d",
                 "shasum": ""
             },
             "require": {
@@ -9134,7 +9134,7 @@
             "authors": [
                 {
                     "name": "Lars Moelleken",
-                    "homepage": "http://www.moelleken.org/"
+                    "homepage": "https://www.moelleken.org/"
                 }
             ],
             "description": "Portable ASCII library - performance optimized (ascii) string functions for php.",
@@ -9146,7 +9146,7 @@
             ],
             "support": {
                 "issues": "https://github.com/voku/portable-ascii/issues",
-                "source": "https://github.com/voku/portable-ascii/tree/2.0.1"
+                "source": "https://github.com/voku/portable-ascii/tree/2.0.3"
             },
             "funding": [
                 {
@@ -9170,7 +9170,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2022-03-08T17:03:00+00:00"
+            "time": "2024-11-21T01:49:47+00:00"
         },
         {
             "name": "webmozart/assert",
@@ -9327,16 +9327,16 @@
         },
         {
             "name": "fakerphp/faker",
-            "version": "v1.24.0",
+            "version": "v1.24.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/FakerPHP/Faker.git",
-                "reference": "a136842a532bac9ecd8a1c723852b09915d7db50"
+                "reference": "e0ee18eb1e6dc3cda3ce9fd97e5a0689a88a64b5"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/FakerPHP/Faker/zipball/a136842a532bac9ecd8a1c723852b09915d7db50",
-                "reference": "a136842a532bac9ecd8a1c723852b09915d7db50",
+                "url": "https://api.github.com/repos/FakerPHP/Faker/zipball/e0ee18eb1e6dc3cda3ce9fd97e5a0689a88a64b5",
+                "reference": "e0ee18eb1e6dc3cda3ce9fd97e5a0689a88a64b5",
                 "shasum": ""
             },
             "require": {
@@ -9384,9 +9384,9 @@
             ],
             "support": {
                 "issues": "https://github.com/FakerPHP/Faker/issues",
-                "source": "https://github.com/FakerPHP/Faker/tree/v1.24.0"
+                "source": "https://github.com/FakerPHP/Faker/tree/v1.24.1"
             },
-            "time": "2024-11-07T15:11:20+00:00"
+            "time": "2024-11-21T13:46:39+00:00"
         },
         {
             "name": "fidry/cpu-core-counter",
@@ -9632,16 +9632,16 @@
         },
         {
             "name": "laravel/pint",
-            "version": "v1.18.1",
+            "version": "v1.18.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/pint.git",
-                "reference": "35c00c05ec43e6b46d295efc0f4386ceb30d50d9"
+                "reference": "f55daaf7eb6c2f49ddf6702fb42e3091c64d8a64"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/pint/zipball/35c00c05ec43e6b46d295efc0f4386ceb30d50d9",
-                "reference": "35c00c05ec43e6b46d295efc0f4386ceb30d50d9",
+                "url": "https://api.github.com/repos/laravel/pint/zipball/f55daaf7eb6c2f49ddf6702fb42e3091c64d8a64",
+                "reference": "f55daaf7eb6c2f49ddf6702fb42e3091c64d8a64",
                 "shasum": ""
             },
             "require": {
@@ -9694,7 +9694,7 @@
                 "issues": "https://github.com/laravel/pint/issues",
                 "source": "https://github.com/laravel/pint"
             },
-            "time": "2024-09-24T17:22:50+00:00"
+            "time": "2024-11-20T09:33:46+00:00"
         },
         {
             "name": "laravel/sail",

package-lock.json

@@ -1026,9 +1026,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001680",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz",
-            "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==",
+            "version": "1.0.30001683",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001683.tgz",
+            "integrity": "sha512-iqmNnThZ0n70mNwvxpEC2nBJ037ZHZUoBI5Gorh1Mw6IlEAZujEoU1tXA628iZfzm7R9FvFzxbfdgml82a3k8Q==",
             "dev": true,
             "funding": [
                 {
@@ -1187,9 +1187,9 @@
             "license": "MIT"
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.5.63",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.63.tgz",
-            "integrity": "sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==",
+            "version": "1.5.64",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.64.tgz",
+            "integrity": "sha512-IXEuxU+5ClW2IGEYFC2T7szbyVgehupCWQe5GNh+H065CD6U6IFN0s4KeAMFGNmQolRU4IV7zGBWSYMmZ8uuqQ==",
             "dev": true,
             "license": "ISC"
         },

resources/css/filament/company/theme.css

@@ -8,6 +8,10 @@
     @apply hidden;
 }
 
+.fi-fo-repeater-item {
+    @apply divide-y divide-gray-200 rounded-xl bg-white dark:bg-gray-900;
+}
+
 .fi-fo-field-wrp.report-hidden-label {
     @apply lg:mt-8;
 }

resources/views/filament/forms/components/phone-builder.blade.php

@@ -0,0 +1,185 @@
+@php
+    use Filament\Forms\Components\Actions\Action;
+    use Filament\Support\Enums\Alignment;
+
+    $containers = $getChildComponentContainers();
+    $blockPickerBlocks = $getBlockPickerBlocks();
+    $blockPickerColumns = $getBlockPickerColumns();
+    $blockPickerWidth = $getBlockPickerWidth();
+    $hasBlockPreviews = $hasBlockPreviews();
+    $hasInteractiveBlockPreviews = $hasInteractiveBlockPreviews();
+
+    $addAction = $getAction($getAddActionName());
+    $addBetweenAction = $getAction($getAddBetweenActionName());
+    $cloneAction = $getAction($getCloneActionName());
+    $collapseAllAction = $getAction($getCollapseAllActionName());
+    $editAction = $getAction($getEditActionName());
+    $expandAllAction = $getAction($getExpandAllActionName());
+    $deleteAction = $getAction($getDeleteActionName());
+    $moveDownAction = $getAction($getMoveDownActionName());
+    $moveUpAction = $getAction($getMoveUpActionName());
+    $reorderAction = $getAction($getReorderActionName());
+    $extraItemActions = $getExtraItemActions();
+
+    $isAddable = $isAddable();
+    $isCloneable = $isCloneable();
+    $isCollapsible = $isCollapsible();
+    $isDeletable = $isDeletable();
+    $isReorderableWithButtons = $isReorderableWithButtons();
+    $isReorderableWithDragAndDrop = $isReorderableWithDragAndDrop();
+
+    $collapseAllActionIsVisible = $isCollapsible && $collapseAllAction->isVisible();
+    $expandAllActionIsVisible = $isCollapsible && $expandAllAction->isVisible();
+
+    $statePath = $getStatePath();
+@endphp
+
+<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
+    <div
+        x-data="{}"
+        {{
+            $attributes
+                ->merge($getExtraAttributes(), escape: false)
+                ->class(['fi-fo-builder grid gap-y-4'])
+        }}
+    >
+        @if ($collapseAllActionIsVisible || $expandAllActionIsVisible)
+            <div
+                @class([
+                    'flex gap-x-3',
+                    'hidden' => count($containers) < 2,
+                ])
+            >
+                @if ($collapseAllActionIsVisible)
+                    <span
+                        x-on:click="$dispatch('builder-collapse', '{{ $statePath }}')"
+                    >
+                        {{ $collapseAllAction }}
+                    </span>
+                @endif
+
+                @if ($expandAllActionIsVisible)
+                    <span
+                        x-on:click="$dispatch('builder-expand', '{{ $statePath }}')"
+                    >
+                        {{ $expandAllAction }}
+                    </span>
+                @endif
+            </div>
+        @endif
+
+        @if (count($containers))
+            <ul
+                x-sortable
+                data-sortable-animation-duration="{{ $getReorderAnimationDuration() }}"
+                wire:end.stop="{{ 'mountFormComponentAction(\'' . $statePath . '\', \'reorder\', { items: $event.target.sortable.toArray() })' }}"
+                class="space-y-6"
+            >
+                @php
+                    $hasBlockLabels = $hasBlockLabels();
+                    $hasBlockIcons = $hasBlockIcons();
+                    $hasBlockNumbers = $hasBlockNumbers();
+                @endphp
+
+                @foreach ($containers as $uuid => $item)
+                    @php
+                        $visibleExtraItemActions = array_filter(
+                            $extraItemActions,
+                            fn (Action $action): bool => $action(['item' => $uuid])->isVisible(),
+                        );
+                        $cloneAction = $cloneAction(['item' => $uuid]);
+                        $cloneActionIsVisible = $isCloneable && $cloneAction->isVisible();
+                        $deleteAction = $deleteAction(['item' => $uuid]);
+                        $deleteActionIsVisible = $isDeletable && $deleteAction->isVisible();
+                        $editAction = $editAction(['item' => $uuid]);
+                        $editActionIsVisible = $hasBlockPreviews && $editAction->isVisible();
+                        $moveDownAction = $moveDownAction(['item' => $uuid])->disabled($loop->last);
+                        $moveDownActionIsVisible = $isReorderableWithButtons && $moveDownAction->isVisible();
+                        $moveUpAction = $moveUpAction(['item' => $uuid])->disabled($loop->first);
+                        $moveUpActionIsVisible = $isReorderableWithButtons && $moveUpAction->isVisible();
+                        $reorderActionIsVisible = $isReorderableWithDragAndDrop && $reorderAction->isVisible();
+                    @endphp
+
+                    <li
+                        wire:key="{{ $this->getId() }}.{{ $item->getStatePath() }}.{{ $field::class }}.item"
+                        x-sortable-item="{{ $uuid }}"
+                        class="flex items-center gap-x-4"
+                    >
+                        <!-- Input Field -->
+                        <div class="w-full">
+                            {{ $item }}
+                        </div>
+
+                        <!-- Delete Action -->
+                        @if ($deleteActionIsVisible)
+                            <div class="mt-6">
+                                {{ $deleteAction }}
+                            </div>
+                        @endif
+                    </li>
+
+
+                    @if (! $loop->last)
+                        @if ($isAddable && $addBetweenAction(['afterItem' => $uuid])->isVisible())
+                            <li class="relative -top-2 !mt-0 h-0">
+                                <div
+                                    class="flex w-full justify-center opacity-0 transition duration-75 hover:opacity-100"
+                                >
+                                    <div
+                                        class="fi-fo-builder-block-picker-ctn rounded-lg bg-white dark:bg-gray-900"
+                                    >
+                                        <x-filament-forms::builder.block-picker
+                                            :action="$addBetweenAction"
+                                            :after-item="$uuid"
+                                            :columns="$blockPickerColumns"
+                                            :blocks="$blockPickerBlocks"
+                                            :state-path="$statePath"
+                                            :width="$blockPickerWidth"
+                                        >
+                                            <x-slot name="trigger">
+                                                {{ $addBetweenAction(['afterItem' => $uuid]) }}
+                                            </x-slot>
+                                        </x-filament-forms::builder.block-picker>
+                                    </div>
+                                </div>
+                            </li>
+                        @elseif (filled($labelBetweenItems = $getLabelBetweenItems()))
+                            <li
+                                class="relative border-t border-gray-200 dark:border-white/10"
+                            >
+                                <span
+                                    class="absolute -top-3 left-3 px-1 text-sm font-medium"
+                                >
+                                    {{ $labelBetweenItems }}
+                                </span>
+                            </li>
+                        @endif
+                    @endif
+                @endforeach
+            </ul>
+        @endif
+
+        @if ($isAddable && $addAction->isVisible())
+            <x-filament-forms::builder.block-picker
+                :action="$addAction"
+                :blocks="$blockPickerBlocks"
+                :columns="$blockPickerColumns"
+                :state-path="$statePath"
+                :width="$blockPickerWidth"
+                @class([
+                    'flex',
+                    match ($getAddActionAlignment()) {
+                        Alignment::Start, Alignment::Left => 'justify-start',
+                        Alignment::Center, null => 'justify-center',
+                        Alignment::End, Alignment::Right => 'justify-end',
+                        default => $alignment,
+                    },
+                ])
+            >
+                <x-slot name="trigger">
+                    {{ $addAction }}
+                </x-slot>
+            </x-filament-forms::builder.block-picker>
+        @endif
+    </div>
+</x-dynamic-component>