Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
12 kB
1
Indexable
Never
<div>
    <x:utils.modal maxWidth="2xl" wire:model.defer="openMergeProductModal">
        <div style="max-height: calc(100vh - 20px)" class="flex overflow-hidden rounded-lg">
            <div class="w-full pb-2 bg-white dark:bg-gray-900 overflow-y-scroll md:w-full">
                <form wire:submit.prevent="mergeProducts" class="max-w-full">
                    <div class="p-5">
                        <div class="flex justify-between dark:border-gray-500">
                            <div class="text-center sm:text-left whitespace-normal pb-4">
                                <h3 class="text-medium font-medium text-gray-700 dark:text-gray-100">
                                    Merge Products
                                </h3>
                            </div>
                            <div class="flex h-4 items-center">
                                <button type="button"
                                        class="text-gray-700 dark:text-gray-300 dark:hover:text-gray-500 hover:text-gray-900"
                                        wire:click.prevent="closeModal">
                                    <x:icons.x class="h-5 w-5"/>
                                </button>
                            </div>
                        </div>
                        <x:utils.card>
                            <div class="gap-2 grid items-start lg:flex">
                                <div>
                                    <label
                                        class="w-32 h-20 relative flex items-center justify-center bg-gray-50 rounded-md border border-primary-400 border-dashed">
                                        @if($this->imageUrl)
                                            <img
                                                src="{{$this->imageUrl}}"
                                                class="w-full h-full object-cover rounded-md"
                                                alt="img">
                                        @else
                                            <x:icons.folder-plus class="mx-auto w-6 text-primary-400"/>
                                        @endif
                                        <input type="file" wire:model="images"
                                               accept="image/*"
                                               multiple
                                               class="sr-only"/>
                                        @if($this->imagesCount > 1)
                                            <div
                                                class="absolute w-8 h-8 text-xs top-0 right-0 rounded bg-primary-400 text-white grid place-items-center">
                                                +{{ $this->imagesCount - 1 }}
                                            </div>
                                        @endif
                                    </label>
                                </div>
                                <div class="gap-2 w-full space-y-2">
                                    <x:form.input wire:model.defer="form.title" placeholder="Product Title"/>
                                    <x:form.error for="form.title"/>
                                    <div class="flex gap-2">
                                        <x:form.input wire:model.defer="form.quantity" placeholder="Quantity"/>
                                        <x:form.error for="form.quantity"/>
                                        <div class="w-full">
                                            <div class="col-span-3">
                                                <x:form.custom-select
                                                    wire:model="form.production_product_label_id"
                                                    :options="$this->options"
                                                    placeholder="Set Label"
                                                />
                                            </div>
                                        </div>
                                    </div>

                                    <div>
                                        <div x-data="{ tags: @entangle('form.tags'), query: '' }"
                                             class="bg-grey-lighter">
                                            <div
                                                class="p-2 flex gap-2 flex-wrap bg-white border border-gray-300 rounded-md">
                                                @foreach($form['tags'] as $tag)
                                                    <div
                                                        class="inline-flex items-center rounded-full bg-indigo-100 py-0.5 pl-2 pr-0.5 text-xs font-medium text-indigo-700">
                                                        <span>{{ $tag }}</span>
                                                        <button type="button"
                                                                class="ml-0.5 inline-flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white focus:outline-none"
                                                                @click="tags = tags.filter(i => i !== '{{ $tag }}')">
                                                            <x:icons.x-mark class="h-2 w-2"/>
                                                        </button>
                                                    </div>
                                                @endforeach
                                                <input x-model="query"
                                                       @keydown.enter.prevent="if (query.trim() !== '') { tags.push(query.trim()); query = ''; }"
                                                       placeholder="Add Tags"
                                                       class="flex-1 outline-0 border-none focus:ring-0 p-0">
                                            </div>
                                        </div>
                                        <x:form.error for="form.tags"/>
                                    </div>
                                </div>
                            </div>

                            <div class="rounded mt-2">
                                <div x-data="{ value : @entangle('form.description').defer }"
                                     class="wysiwyg wysiwyg-slate lg:wysiwyg-xl border border-gray-300 rounded-md shadow-sm">
                                    <input
                                        id="{{ $this->id }}"
                                        type="hidden"
                                        name="content"
                                        x-ref="editor"
                                        value="{{$form['description']}}"
                                    >

                                    <trix-editor
                                        input="{{ $this->id }}"
                                        wire:ignore
                                        @trix-blur="value = $refs.editor.value"
                                        @trix-paste="value = $refs.editor.value"
                                        toolbar="toolbar_{{ $this->id }}"
                                        placeholder="Description"
                                        class="px-4 pt-4 min-h-[100px] border-0 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"
                                    ></trix-editor>

                                    <trix-toolbar
                                        wire:ignore
                                        class="px-4"
                                        id="toolbar_{{ $this->id }}"></trix-toolbar>
                                </div>
                                <x-form.error for="form.description"/>
                            </div>
                        </x:utils.card>
                        <ul class="mt-2">
                            <x:table.table>
                                <x:table.thead :fields="['Images','Title','Quantity','Description','Tags','Label']"/>
                                <x:table.tbody>
                                    @forelse($selectedProducts as $product)
                                        <x:table.tr wire:click="clickedProduct({{ $product->id }})" wire:key="$productId">
                                            <x-table.td class="w-40">
                                                <x-lightbox-modal
                                                    :first-image="$product->image_url"
                                                    :images="$product->images->pluck('full_path')"
                                                />
                                            </x-table.td>
                                            <x-table.td>{{ $product->title }}</x-table.td>
                                            <x:table.td>
                                                {!! $product->quantity ?? '-' !!}
                                            </x:table.td>
                                            <x:table.td>
                                                {!! $product->description ?? '-' !!}
                                            </x:table.td>
                                            <x:table.td>
                                                <div class="space-y-2">
                                                    @foreach($product->tags ?? [] as $tag )
                                                        <p class="inline-flex items-center rounded-full bg-indigo-100 py-0.5 p-2
                                     text-xs font-medium text-indigo-700">
                                                            {{$tag ?? '-'}}
                                                        </p>
                                                    @endforeach
                                                </div>
                                            </x:table.td>
                                            <x:table.td>
                                                {{$product->productLabel->name ?? '-'}}
                                            </x:table.td>
                                        </x:table.tr>
                                    @empty
                                        <x:table.empty-row/>
                                    @endforelse
                                </x:table.tbody>
                            </x:table.table>

                        </ul>

                        <div class="dark:border-gray-500 pt-4">
                            <div class="flex justify-end">
                                <div class="inline-flex rounded-md shadow-sm">
                                    <x:buttons.secondary wire:click.prevent="closeModal" value="Cancel"/>
                                </div>
                                <div class="ml-3 inline-flex rounded-md shadow-sm">
                                    <button type="submit" wire:loading.attr="disabled"
                                            class="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-400 hover:bg-indigo-500 focus:outline-none focus:border-indigo-400 focus:shadow-outline-primary active:bg-indigo-400 transition duration-150 ease-in-out">
                                        <div wire:loading.delay.remove wire:target="mergeProducts" class="ml-1">
                                            Merge
                                        </div>
                                        <span wire:loading.delay wire:target="mergeProducts">Merging</span>
                                        <x:icons.loader wire:loading.delay wire:target="mergeProducts"
                                                        class="h-4 w-4 text-white ml-1 mt-1"/>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </x:utils.modal>
</div>