timebank-cc-public/resources/views/livewire/calls/edit.blade.php

<div>
    @if ($compact)
        <x-jetstream.secondary-button
            title="{{ __('Edit') }}"
            wire:click.prevent="openModal()"
            wire:target="openModal"
            wire:loading.attr="disabled">
            <x-icon class="h-5 w-5" name="pencil-square" />
        </x-jetstream.secondary-button>
    @else
        <x-jetstream.button wire:click.prevent="openModal()">
            {{ __('Edit Call') }}
        </x-jetstream.button>
    @endif

    @if ($showModal)
        <x-jetstream.dialog-modal wire:model="showModal" wire:key="editCallModal-{{ $call->id }}" closeButton="true">
            <x-slot name="title">
                {{ trans_with_platform('Edit @PLATFORM_NAME@ call') }}
            </x-slot>

            <x-slot name="content">

                <div class="space-y-6">

                    {{-- Tag picker (dedicated component) --}}
                    <livewire:calls.call-skill-input :initial-tag-id="$tagId" wire:key="edit-call-skill-input-{{ $call->id }}" />

                    @error('tagId')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror

                    {{-- Content --}}
                    @php $contentMax = timebank_config('calls.content_max_input', 200); @endphp
                    <div wire:key="edit-call-content-{{ $call->id }}"
                         x-data="{ remaining: {{ $contentMax - mb_strlen($content) }} }"
                         x-init="$nextTick(() => { const ta = $el.querySelector('textarea'); if (ta) { ta.addEventListener('input', () => { remaining = {{ $contentMax }} - ta.value.length; }); } })">
                        <label class="block text-sm text-theme-primary mb-2">
                            {{ __('Description') }}
                            <span class="text-theme-secondary text-xs ml-1" x-text="remaining + ' {{ __('characters left') }}'"></span>
                        </label>
                        <x-textarea
                            placeholder="{{ __('Describe your request in more detail...') }}"
                            rows="4"
                            maxlength="{{ $contentMax }}"
                            class="!text-base"
                            wire:model.blur="content" />
                        @error('content')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Location --}}
                    <div wire:key="edit-call-location-{{ $call->id }}">
                        <label class="block text-sm text-theme-primary mb-2">{{ __('Exchange location') }}</label>
                        <livewire:locations.locations-dropdown
                            :hide-label="true"
                            :country="$country"
                            :city="$city"
                            :division="$division"
                            :district="$district"
                            wire:key="edit-call-location-dropdown-{{ $country }}-{{ $city }}" />
                        @error('country')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Expiry date --}}
                    <div wire:key="edit-call-till-{{ $call->id }}">
                        <label class="block text-sm text-theme-primary mb-2">{{ __('Expires on') }}</label>
                        @php
                            $tillMinDate = now()->addDay()->format('Y-m-d');
                            $callableType = $call->callable_type ?? session('activeProfileType');
                            $tillMaxDays = ($callableType && $callableType !== \App\Models\User::class)
                                ? timebank_config('calls.till_max_days_non_user')
                                : timebank_config('calls.till_max_days');
                            $tillMaxDate = $tillMaxDays !== null ? now()->addDays($tillMaxDays)->format('Y-m-d') : null;
                        @endphp
                        <div wire:ignore>
                            <x-flatpickr
                                dateFormat="Y-m-d"
                                altFormat="d-m-Y"
                                :minDate="$tillMinDate"
                                :maxDate="$tillMaxDate"
                                placeholder="{{ __('Select a date') }}"
                                wire:model.defer="till"
                                class="mt-1 block border-theme-border focus:border-theme-accent focus:ring-1 focus:ring-theme-accent rounded-md shadow-sm" />
                        </div>
                        @error('till')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Visibility --}}
                    <div wire:key="edit-call-public-{{ $call->id }}">
                        <x-checkbox
                            id="edit-call-is-public-{{ $call->id }}"
                            label="{{ __('Public, visible for search engines and sharable on social media') }}"
                            wire:model.live="isPublic" />
                        @if ($isPublic)
                            <p class="mt-2 text-sm text-red-600">
                                {{ str_replace(':username', $profileName, __('This exposes your username (:username), your profile photo and your profile and work locations!')) }}
                            </p>
                        @endif
                    </div>

                </div>

            </x-slot>

            <x-slot name="footer">
                <div class="flex w-full items-center justify-between">
                    <x-jetstream.danger-button
                        wire:click="confirmDelete()"
                        wire:loading.attr="disabled">
                        {{ __('Delete') }}
                    </x-jetstream.danger-button>

                    <div class="flex items-center gap-3">
                        <div wire:loading wire:target="save">
                            <x-mini-button flat primary rounded spinner />
                        </div>
                        <x-jetstream.secondary-button
                            wire:click="$set('showModal', false)"
                            wire:loading.attr="disabled">
                            {{ __('Cancel') }}
                        </x-jetstream.secondary-button>
                        <x-jetstream.button
                            wire:click.prevent="save()"
                            wire:loading.attr="disabled">
                            {{ __('Save') }}
                        </x-jetstream.button>
                    </div>
                </div>
            </x-slot>
        </x-jetstream.dialog-modal>
    @endif

    {{-- Delete confirmation modal --}}
    <x-jetstream.dialog-modal wire:model="showDeleteConfirm" wire:key="deleteCallModal-{{ $call->id }}">
        <x-slot name="title">
            {{ __('Delete Call') }}
        </x-slot>

        <x-slot name="content">
            <p class="text-theme-primary">{{ __('Are you sure you want to delete this call? You can undelete this call later.') }}</p>
        </x-slot>

        <x-slot name="footer">
            <x-jetstream.secondary-button
                wire:click="$set('showDeleteConfirm', false)"
                wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-jetstream.secondary-button>
            <x-jetstream.danger-button
                class="ml-3"
                wire:click="delete()"
                wire:loading.attr="disabled">
                {{ __('Yes, delete') }}
            </x-jetstream.danger-button>
        </x-slot>
    </x-jetstream.dialog-modal>
</div>

<script>
    function initEditCallFlatpickr() {
        const tillInput = document.querySelector('[wire\\:key="edit-call-till-{{ $call->id }}"] [wire\\:model\\.defer="till"]');
        if (tillInput && !tillInput._flatpickr) {
            if (window.LaravelFlatpickr) {
                window.LaravelFlatpickr.initializeFlatpickr(tillInput);
            }
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(initEditCallFlatpickr, 100);

        Livewire.hook('morph.updated', () => {
            setTimeout(initEditCallFlatpickr, 200);
            setTimeout(initEditCallFlatpickr, 500);
        });
    });
</script>