test-shop.creatrix-digital.ru
Open in
urlscan Pro
78.24.223.82
Public Scan
URL:
https://test-shop.creatrix-digital.ru/
Submission: On September 10 via api from US — Scanned from DE
Submission: On September 10 via api from US — Scanned from DE
Form analysis 16 forms found in the DOM
<form
wire:snapshot="{"data":{"firstName":"","lastName":"","phone":"","email":"","message":"","subject":null},"memo":{"id":"c4pcWBEnV1Ny12ybITQs","name":"contact-form","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"b5cb7ae927c3e1bbb965b7a112754b6257a553eee200fc30cf3f46aff570bce0"}"
wire:effects="[]" wire:id="c4pcWBEnV1Ny12ybITQs" wire:submit.prevent="send">
<div class="grid gap-6 md:grid-cols-2 sm:grid-cols-1 pb-10">
<div class="flex flex-col items-center">
<div class="relative flex items-center w-full">
<input type="text" wire:model="firstName" placeholder="Имя*" required="" class="w-full px-2 py-3 text-sm text-gray-800 bg-white border-b border-black outline-none focus:border-[#EB7100]">
</div>
<span class="h-4 text-xs text-red-500">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</div>
<div class="flex flex-col items-center">
<div class="relative flex items-center w-full">
<input type="text" wire:model="lastName" placeholder="Фамилия" class="w-full px-2 py-3 text-sm text-gray-800 bg-white border-b border-black outline-none focus:border-[#EB7100]">
</div>
<span class="h-4 text-xs text-red-500">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</div>
<div class="flex flex-col items-center">
<div class="relative flex items-center w-full">
<input type="tel" wire:model="phone" placeholder="Номер телефона" class="w-full px-2 py-3 text-sm text-gray-800 bg-white border-b border-black outline-none focus:border-[#EB7100]">
</div>
<span class="h-4 text-xs text-red-500">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</div>
<div class="flex flex-col items-center">
<div class="relative flex items-center w-full">
<input type="email" wire:model="email" placeholder="Email*" required="" class="w-full px-2 py-3 text-sm text-gray-800 bg-white border-b border-black outline-none focus:border-[#EB7100]">
</div>
<span class="h-4 text-xs text-red-500">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</div>
<div class="relative flex flex-col items-center w-full md:col-span-2">
<div class="relative flex items-center w-full">
<textarea wire:model="message" placeholder="Текст Вашего сообщения*" required="" class="w-full px-2 pt-3 text-sm text-gray-800 bg-white border-b border-black outline-none focus:border-[#EB7100]" style="resize: none;"></textarea>
</div>
<span class="h-4 text-xs text-red-500">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</div>
<div class="col-span-full">
<div class="flex gap-6 mt-4 items-baseline flex-wrap">
<div class="flex items-center">
<input id="radio1" type="radio" wire:model="subject" value="Product Information" name="radio-group" checked="">
<label for="radio1" class="ml-4 text-sm text-gray-500 ">Информация<br> о продукте</label>
</div>
<div class="flex items-center">
<input id="radio2" type="radio" wire:model="subject" value="Shipping and Delivery" name="radio-group">
<label for="radio2" class="ml-4 text-sm text-gray-500 "> Доставка<br> и оплата</label>
</div>
<div class="flex items-center">
<input id="radio3" type="radio" wire:model="subject" value="Return and Refund" name="radio-group">
<label for="radio3" class="ml-4 text-sm text-gray-500 ">Возврат<br> товара</label>
</div>
<div class="flex items-center">
<input id="radio4" type="radio" wire:model="subject" value="Technical Issue" name="radio-group">
<label for="radio4" class="ml-4 text-sm text-gray-500 ">Технические<br> проблемы</label>
</div>
<div class="flex items-center">
<input id="radio5" type="radio" wire:model="subject" value="Other" name="radio-group">
<label for="radio4" class="ml-4 text-sm text-gray-500 ">Другое</label>
</div>
</div>
<span class="h-4 text-xs text-red-500">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</div>
</div>
<button type="submit" class="button bg-[#EB7100] !px-9 uppercase text-BebasNeue text-white"> Отправить сообщение </button>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":12,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"5fNIhC63jWWCHVP2Y9a0","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"795b419a3f32be59303e9fc39de85a359b6a9cbe6126ac0ae2c37db8a4fe9a60"}"
wire:effects="[]" wire:id="5fNIhC63jWWCHVP2Y9a0" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> aut </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/storage/products/01J31K9GZJ990T527WBTZAWJA8.jpg" alt="aut">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== '5fNIhC63jWWCHVP2Y9a0') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 275 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="5fNIhC63jWWCHVP2Y9a0.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="5fNIhC63jWWCHVP2Y9a0.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 275.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":2,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"WuFWqn2C36MD3YPclsKR","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"fe7016c3c38d35def606ab2b0e3dc432c2c26681a3cbeca032b41cd2e4fe07f6"}"
wire:effects="[]" wire:id="WuFWqn2C36MD3YPclsKR" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> suscipit </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/img/no_image_placeholder.png" alt="suscipit">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== 'WuFWqn2C36MD3YPclsKR') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 882 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="WuFWqn2C36MD3YPclsKR.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="WuFWqn2C36MD3YPclsKR.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 882.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":5,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"tQw7D6BKaEEPpFy9uLTL","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"967763dd559de28ba62e57c8984206f0cae56287e6787cf54c8023be8dec848f"}"
wire:effects="[]" wire:id="tQw7D6BKaEEPpFy9uLTL" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> quaerat </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/img/no_image_placeholder.png" alt="quaerat">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== 'tQw7D6BKaEEPpFy9uLTL') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 785 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="tQw7D6BKaEEPpFy9uLTL.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="tQw7D6BKaEEPpFy9uLTL.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 785.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":13,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"tCB7YhXBI8vEyemkhPIj","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"dd7e603b99d642b2db1f488da014e7f0fe0e858d118063af28ce16f957d91e68"}"
wire:effects="[]" wire:id="tCB7YhXBI8vEyemkhPIj" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> veritatis </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/img/no_image_placeholder.png" alt="veritatis">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== 'tCB7YhXBI8vEyemkhPIj') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 356 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="tCB7YhXBI8vEyemkhPIj.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="tCB7YhXBI8vEyemkhPIj.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 356.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":1,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"JnQkvmbMZbefvukZV8Xy","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"6e47da540b5ec5e049d4c2f1de15d1a222f8377462a3074715de2a590def8176"}"
wire:effects="[]" wire:id="JnQkvmbMZbefvukZV8Xy" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> sint </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/img/no_image_placeholder.png" alt="sint">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== 'JnQkvmbMZbefvukZV8Xy') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 847 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="JnQkvmbMZbefvukZV8Xy.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="JnQkvmbMZbefvukZV8Xy.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 847.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":3,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"9TYuFTInQhkEWoFgGRqK","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"97217f3f272cde324561b2a96deae28e19775e07da0c79e393c33da14ff1f63e"}"
wire:effects="[]" wire:id="9TYuFTInQhkEWoFgGRqK" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> dolorem </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/storage/products/01J31K9VH40V5NNMJHR8CDNB5K.jpg" alt="dolorem">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== '9TYuFTInQhkEWoFgGRqK') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 826 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="9TYuFTInQhkEWoFgGRqK.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="9TYuFTInQhkEWoFgGRqK.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 826.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":4,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"l6M64CQgwRx9jWHNM6sE","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"dfd4fc1f76049613aa27bf9476de394b24c49da1bb4f2ab55774aeaf8afef7d2"}"
wire:effects="[]" wire:id="l6M64CQgwRx9jWHNM6sE" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> voluptas </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/img/no_image_placeholder.png" alt="voluptas">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== 'l6M64CQgwRx9jWHNM6sE') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 552 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="l6M64CQgwRx9jWHNM6sE.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="l6M64CQgwRx9jWHNM6sE.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 552.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":7,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"XQljfqPSuWgm8PrK85L1","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"56fd6e7afdb40e34570023d52901bb7f5d90c6fc375f6f79a862c09e70c7db18"}"
wire:effects="[]" wire:id="XQljfqPSuWgm8PrK85L1" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> atque </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/storage/products/01J31K97TQDZBYCRW9Q8G5W7TZ.jpg" alt="atque">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== 'XQljfqPSuWgm8PrK85L1') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 514 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="XQljfqPSuWgm8PrK85L1.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="XQljfqPSuWgm8PrK85L1.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 514.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":10,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"bvtQZ5lfizDTjq7kV9FL","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"03059f9118b2bda5df32f6f3e5b999566f9fd48db017e0f4366510b12d03254d"}"
wire:effects="[]" wire:id="bvtQZ5lfizDTjq7kV9FL" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> asperiores </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/storage/products/01J31K8RX1JNEYHD1T7VNQEK5R.jpg" alt="asperiores">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== 'bvtQZ5lfizDTjq7kV9FL') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 743 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="bvtQZ5lfizDTjq7kV9FL.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="bvtQZ5lfizDTjq7kV9FL.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 743.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":14,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"KCHfrnVRWZvxAZd2goGS","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"db8dd1cb5290ee04904fe1573b42cc578f8a581e456ef3db4cd7883a789491d8"}"
wire:effects="[]" wire:id="KCHfrnVRWZvxAZd2goGS" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> ut </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/img/no_image_placeholder.png" alt="ut">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== 'KCHfrnVRWZvxAZd2goGS') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 536 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="KCHfrnVRWZvxAZd2goGS.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="KCHfrnVRWZvxAZd2goGS.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 536.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":6,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"3mcb3TEnKv5hwagPAvfB","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"e32db72783dc5bee446fb3f1c548d644e3dbaaaaceda27d75c0aebcd7ef4e025"}"
wire:effects="[]" wire:id="3mcb3TEnKv5hwagPAvfB" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> et </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/img/no_image_placeholder.png" alt="et">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== '3mcb3TEnKv5hwagPAvfB') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 915 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="3mcb3TEnKv5hwagPAvfB.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="3mcb3TEnKv5hwagPAvfB.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 915.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":8,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"2QpMQoAZbFw9biuXxsZC","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"28357a73f44a6053bb158c19ad5c01b7ca24faaeac9bee5a82223bad5bf79bee"}"
wire:effects="[]" wire:id="2QpMQoAZbFw9biuXxsZC" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> doloremque </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/img/no_image_placeholder.png" alt="doloremque">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== '2QpMQoAZbFw9biuXxsZC') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 903 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="2QpMQoAZbFw9biuXxsZC.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="2QpMQoAZbFw9biuXxsZC.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 903.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":11,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"YHNdjrkjgqyXEAzDdyGz","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"1f3383bf6a35621ba7af0ed34935b6190a3200fe0d4d7b3e196aa81d7b2b30c9"}"
wire:effects="[]" wire:id="YHNdjrkjgqyXEAzDdyGz" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> praesentium </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/img/no_image_placeholder.png" alt="praesentium">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== 'YHNdjrkjgqyXEAzDdyGz') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 243 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="YHNdjrkjgqyXEAzDdyGz.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="YHNdjrkjgqyXEAzDdyGz.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 243.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":9,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"JeBnK4KQMsYrSb0gwtKz","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"8fe93a6cce2a40eb4854275b9216110beb772ca8d4c2a40ccf13f70bd4dcb019"}"
wire:effects="[]" wire:id="JeBnK4KQMsYrSb0gwtKz" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> repellendus </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/img/no_image_placeholder.png" alt="repellendus">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== 'JeBnK4KQMsYrSb0gwtKz') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 346 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="JeBnK4KQMsYrSb0gwtKz.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="JeBnK4KQMsYrSb0gwtKz.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 346.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form><form
wire:snapshot="{"data":{"data":[{"price":null,"email":null,"quantity":1,"total":null},{"s":"arr"}],"product":[null,{"class":"App\\Models\\Product","key":15,"s":"mdl"}],"componentFileAttachments":[[],{"s":"arr"}],"mountedFormComponentActions":[[],{"s":"arr"}],"mountedFormComponentActionsArguments":[[],{"s":"arr"}],"mountedFormComponentActionsData":[[],{"s":"arr"}],"mountedFormComponentActionsComponents":[[],{"s":"arr"}]},"memo":{"id":"sx3gPLgJ0GR6HdRwgwev","name":"order-modal","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ru"},"checksum":"4a729b723dd2c2cb85ea2798231876a969c51783713fd5ce1bb43df99a913b93"}"
wire:effects="[]" wire:id="sx3gPLgJ0GR6HdRwgwev" wire:submit="order" class="relative flex flex-col w-full text-current bg-white border-none rounded-md outline-none pointer-events-auto xs:mx-4 bg-clip-padding shadow-4">
<div class="flex items-center justify-between flex-shrink-0 p-4 border-b-2 rounded-t-md border-neutral-100 ">
<h5 class="text-xl font-medium leading-normal text-surface " id="exampleModalCenterTitle"> Подтвердите заказ </h5>
<button type="button" class="box-content border-none rounded-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none" data-twe-modal-dismiss=""
aria-label="Close">
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>
<div class="relative p-4">
<div class="mb-6 text-xl font-medium text-gray-800"> in </div>
<div class="grid items-center gap-4 sm:grid-cols-2 xs:grid-cols-1">
<div class="rounded-lg h-36 xs:flex xs:justify-center sm:block">
<!--[if BLOCK]><![endif]--> <img class="h-full rounded-lg" src="https://test-shop.creatrix-digital.ru/img/no_image_placeholder.png" alt="in">
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="flex flex-col gap-4">
<div style="--cols-default: repeat(1, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== 'sx3gPLgJ0GR6HdRwgwev') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">
<!--[if BLOCK]><![endif]-->
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.price">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Цена<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 564 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="sx3gPLgJ0GR6HdRwgwev.data.email.Filament\Forms\Components\TextInput">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.email">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Email<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
id="data.email" placeholder="Email" required="required" type="email" wire:model="data.email">
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]" wire:key="sx3gPLgJ0GR6HdRwgwev.data.quantity.LaraZeus\Quantity\Components\Quantity">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.quantity">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Количество<!--[if BLOCK]><![endif]--><sup class="text-danger-600 dark:text-danger-400 font-medium">*</sup>
<!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm">
<!--[if BLOCK]><![endif]--> <span class="fi-fo-field-wrp-hint-label text-gray-500 fi-color-gray" style="--c-400:var(--gray-400);--c-600:var(--gray-600);">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin w-4 h-4" wire:loading="wire:loading" wire:target="data.quantity">
<path clip-rule="evenodd"
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
</span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div x-data="{
state: $wire.$entangle('data.quantity'),
maxValue: 999999,
minValue: 1,
isDecrementAllowed: true,
isIncrementAllowed: true,
isDisabled: false,
increment() {
if(! this.isDisabled && this.state < this.maxValue && this.state >= this.minValue){
this.state++
$wire.$refresh()
if(this.state == this.maxValue){
this.isIncrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
decrement() {
if(! this.isDisabled && this.state > 0 && this.state <= this.maxValue && this.state > this.minValue) {
this.state--
$wire.$refresh()
if(this.state == this.minValue){
this.isDecrementAllowed = false
} else {
this.isIncrementAllowed = true
this.isDecrementAllowed = true
}
}
},
}">
<div
class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500">
<!--[if BLOCK]><![endif]-->
<div class="items-center gap-x-3 ps-3 flex border-e border-gray-200 pe-3 ps-3 dark:border-white/10">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <svg style=";" class="fi-input-wrp-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg><!--[if ENDBLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="min-w-0 flex-1">
<div class="w-full flex justify-between items-center gap-x-5">
<div class="grow">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<input
class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 zeus-quantity"
id="data.quantity" min="1" required="required" type="number" wire:model="data.quantity">
</div>
<!--[if BLOCK]><![endif]-->
<div class="px-2 flex justify-end items-center gap-x-1.5">
<button :disabled="!isDecrementAllowed" @click="decrement" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"></path>
</svg> </button>
<button :disabled="!isIncrementAllowed" @click="increment" type="button"
class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> </button>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<style>
/* Chrome, Safari, Edge, Opera */
input.zeus-quantity::-webkit-outer-spin-button,
input.zeus-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number].zeus-quantity {
-moz-appearance: textfield;
}
</style>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div style="--col-span-default: span 1 / span 1;" class="col-[--col-span-default]">
<!--[if BLOCK]><![endif]-->
<div data-field-wrapper="" class="fi-fo-field-wrp">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="grid gap-y-2">
<!--[if BLOCK]><![endif]-->
<div class="flex items-center gap-x-3 justify-between ">
<!--[if BLOCK]><![endif]--> <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3" for="data.total">
<span class="text-sm font-medium leading-6 text-gray-950 dark:text-white"> Общая стоимость<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</span>
</label>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]-->
<div class="grid auto-cols-fr gap-y-2">
<div class="fi-fo-placeholder text-sm leading-6"> 564.00 ₽ </div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center justify-end flex-shrink-0 p-4 border-t-2 rounded-b-md border-neutral-100">
<button type="button"
class="inline-block rounded bg-gray-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out hover:bg-gray-400 focus:bg-gray-400 focus:outline-none focus:ring-0 active:bg-gray-400"
data-twe-modal-dismiss="" data-twe-ripple-init="" data-twe-ripple-color="light"> Отменить </button>
<button type="submit"
class="ms-1 inline-block rounded bg-yellow-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:bg-yellow-700 hover:shadow-primary-2 focus:bg-yellow-700 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-primary-2"
data-twe-ripple-init="" data-twe-ripple-color="light"> Заказать </button>
</div>
</form>Text Content
* Главная * О нас * Контакты * * Товары * Статьи * Вопросы BRISKET BOYS Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit nostrum laboriosam id iste quasi, sequi officiis adipisci ratione. Iure ea doloribus tempora. Corporis, adipisci? Dolor in illo necessitatibus totam iusto! Узнать больше О НАС Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit nostrum laboriosam id iste quasi, sequi officiis adipisci ratione. Iure ea doloribus tempora. Corporis, adipisci? Dolor in illo necessitatibus totam iusto! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit nostrum laboriosam id iste quasi, sequi officiis adipisci ratione. Iure ea doloribus tempora. Corporis, adipisci? Dolor in illo necessitatibus totam iusto! СВЯЖИТЕСЬ С НАМИ Информация о продукте Доставка и оплата Возврат товара Технические проблемы Другое Отправить сообщение КОНТАКТЫ Свяжитесь с нами, если у вас возникли вопросы или предложения * marian01@example.net * +78005553535 * Саратов ул. Ленина дом 1 ПРОДУКЦИЯ ILLUM EAQUE VOLUPTAS VOLUPTATEM AD AUT. AUT Neque natus aut et. Iusto numquam aut sint et ut. 275 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ aut Цена 275 ₽ Email* Количество* Общая стоимость 275.00 ₽ Отменить Заказать OFFICIIS EXERCITATIONEM QUAE ET CORRUPTI. SUSCIPIT Atque quas ut error sint repellendus. Ut assumenda dolor blanditiis possimus. 882 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ suscipit Цена 882 ₽ Email* Количество* Общая стоимость 882.00 ₽ Отменить Заказать QUAERAT Quia minus quo accusantium similique ad eligendi dolores. Molestias et quam aut quisquam itaque veniam. 785 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ quaerat Цена 785 ₽ Email* Количество* Общая стоимость 785.00 ₽ Отменить Заказать VERITATIS Fugiat eveniet quis et non quas soluta expedita nulla. Et id laudantium molestias quaerat unde. 356 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ veritatis Цена 356 ₽ Email* Количество* Общая стоимость 356.00 ₽ Отменить Заказать ANIMI EAQUE NUMQUAM QUIA QUI MOLESTIAS INVENTORE SEQUI NISI. SINT Et soluta molestiae odio qui provident. Distinctio quis dolor occaecati consequatur autem ullam. 847 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ sint Цена 847 ₽ Email* Количество* Общая стоимость 847.00 ₽ Отменить Заказать DOLOREM Fugit ex in neque voluptate at modi est. In pariatur aut quis. 826 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ dolorem Цена 826 ₽ Email* Количество* Общая стоимость 826.00 ₽ Отменить Заказать VOLUPTAS Dolores quibusdam quis deserunt consequatur odio laboriosam. Quo repudiandae quia dolorum et officiis et quo maiores. 552 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ voluptas Цена 552 ₽ Email* Количество* Общая стоимость 552.00 ₽ Отменить Заказать ATQUE Saepe error nesciunt distinctio ducimus reprehenderit dolorem beatae sequi. Quos aut et vitae aliquam quaerat impedit optio. 514 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ atque Цена 514 ₽ Email* Количество* Общая стоимость 514.00 ₽ Отменить Заказать ASPERIORES Aspernatur sit voluptas architecto omnis vel. Est alias deleniti quis aliquid consectetur quia aut. 743 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ asperiores Цена 743 ₽ Email* Количество* Общая стоимость 743.00 ₽ Отменить Заказать UT Vel veritatis molestiae illo esse voluptates sit id. Est recusandae rem ab dolor quis. 536 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ ut Цена 536 ₽ Email* Количество* Общая стоимость 536.00 ₽ Отменить Заказать SED QUAE EX SINT ASSUMENDA. ET Eligendi inventore doloremque impedit voluptas saepe. Maiores ea autem sequi inventore numquam voluptatum. 915 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ et Цена 915 ₽ Email* Количество* Общая стоимость 915.00 ₽ Отменить Заказать DOLOREMQUE Rerum esse voluptatem hic dolor nobis tenetur non. Illum et provident eum assumenda recusandae occaecati cum. 903 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ doloremque Цена 903 ₽ Email* Количество* Общая стоимость 903.00 ₽ Отменить Заказать PRAESENTIUM Saepe ut voluptas quisquam sunt et consequuntur. Illum exercitationem debitis voluptas id. 243 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ praesentium Цена 243 ₽ Email* Количество* Общая стоимость 243.00 ₽ Отменить Заказать QUASI A EARUM EAQUE CONSEQUUNTUR IUSTO PARIATUR MOLESTIAE. REPELLENDUS Et rem vel dolores corrupti velit autem explicabo. Fuga ipsa culpa ut sunt et in facilis. 346 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ repellendus Цена 346 ₽ Email* Количество* Общая стоимость 346.00 ₽ Отменить Заказать IN Temporibus porro aspernatur optio ipsam sunt commodi ad. Voluptatem laboriosam quia qui nemo suscipit. 564 P Подробнее Заказать ПОДТВЕРДИТЕ ЗАКАЗ in Цена 564 ₽ Email* Количество* Общая стоимость 564.00 ₽ Отменить Заказать СТАТЬИ July 17, 2024 | Ms. Ardella Waters ALIQUID RERUM FUGA DISTINCTIO EOS AUT SIMILIQUE FACILIS. Labore ea cum ad. Suscipit et aliquam cupiditate. distinctio dolore doloribus July 17, 2024 | Sandrine Hirthe OMNIS UT MAGNI AMET. Quis iusto sint tenetur rem aut. Quae aspernatur minus quia quia consequatur. et at veniam July 17, 2024 | Cruz Kunde VOLUPTAS DOLORIBUS ODIT ALIQUAM QUI ID. Laboriosam sit veniam quia doloribus eaque rerum. Ut ut earum qui recusandae ipsam occaecati amet. et fugit ut July 17, 2024 | Dejuan Hilpert Sr. QUI UNDE ET EXPLICABO NEQUE DOLORES. Impedit et odio aspernatur odio iste. Quis distinctio ut numquam deserunt voluptatibus nemo. iusto qui asperiores July 17, 2024 | Johathan Turcotte SINT ENIM ADIPISCI CONSECTETUR DOLORIBUS. Aliquid aut cupiditate nisi similique aliquid. Dolorum perspiciatis rerum aspernatur non neque ea occaecati. omnis delectus labore ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ Вопрос 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Est laudantium obcaecati alias commodi odit delectus aliquam ratione sint ad, minus, ipsa id optio totam numquam esse mollitia in doloremque non? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum numquam voluptates dolorem blanditiis deleniti voluptatum sint alias eligendi nostrum rerum praesentium repellat, consequuntur sapiente vel suscipit totam earum dicta! Magni! Вопрос 2 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus commodi nostrum hic non consequatur voluptatum maxime voluptas quo atque iure quae a reprehenderit vero, saepe facilis ratione maiores neque nulla. Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur id eos veritatis deserunt sunt perspiciatis accusantium aut earum necessitatibus esse pariatur, blanditiis nihil. Saepe sequi facilis repudiandae quasi officiis quae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt aut saepe numquam reprehenderit omnis deleniti illum inventore aperiam, eaque aliquam doloremque unde vitae tenetur itaque atque, nihil nostrum harum consequatur? Главная Контакты Статьи О нас Товары Вопросы +78005553535 marian01@example.net Саратов ул. Ленина дом 1