Untitled
unknown
plain_text
2 years ago
12 kB
4
Indexable
<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>
Editor is loading...