266 lines
16 KiB
PHP
266 lines
16 KiB
PHP
<div>
|
||
<div class="w-100 text-center" wire:loading wire:target="save, resetData, back">
|
||
<div class="spinner-border " style="width: 4rem; height: 4rem;" role="status">
|
||
<span class="visually-hidden">Загрузка формы...</span>
|
||
</div>
|
||
</div>
|
||
<div class="w-100" wire:loading.remove wire:target="save, resetData, back">
|
||
@if ($status == self::NEW || $status == self::READY)
|
||
<div class="h4 pb-2 mb-4 fw-bold ">
|
||
<small>Добавить клиента</small>
|
||
</div>
|
||
<div class="bg-secondary-subtle rounded-4 mb-3">
|
||
<div
|
||
class="p-3 rounded-4 rounded-top-4 @if ($clientSecondary) shadow-sm bg-dark-subtle @endif">
|
||
<div class="row mb-2">
|
||
<div class="col-12 col-xl-6">
|
||
<div class="form-floating mb-3">
|
||
<input wire:model.live="client.firstName" id="client.firstName" type="text"
|
||
class="form-control rounded-4 @error('client.firstName') is-invalid @enderror"
|
||
name="client.firstName" required autocomplete="client.firstName" placeholder="Имя">
|
||
<label for="client.firstName">Имя</label>
|
||
@error('client.firstName')
|
||
<span class="invalid-feedback" role="alert">
|
||
<strong>{{ $message }}</strong>
|
||
</span>
|
||
@enderror
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-xl-6">
|
||
<div class="form-floating mb-3">
|
||
<input wire:model.live="client.secondName" id="client.secondName" type="text"
|
||
class="form-control rounded-4 @error('client.secondName') is-invalid @enderror"
|
||
name="client.secondName" required autocomplete="client.secondName"
|
||
placeholder="Фамилия">
|
||
<label for="client.secondName">Фамилия</label>
|
||
@error('client.secondName')
|
||
<span class="invalid-feedback" role="alert">
|
||
<strong>{{ $message }}</strong>
|
||
</span>
|
||
@enderror
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12 hstack gap-2 mb-3">
|
||
<div class="form-floating me-auto w-100">
|
||
<input wire:model="client.phone" id="client.phone" type="tel" data-phone-pattern
|
||
class="form-control rounded-4 @error('client.phone') is-invalid @enderror"
|
||
name="client.phone" required autocomplete="phone" placeholder="Телефон клиента">
|
||
<label for="client.phone">Телефон</label>
|
||
@error('client.phone')
|
||
<span class="invalid-feedback" role="alert">
|
||
<strong>{{ $message }}</strong>
|
||
</span>
|
||
@enderror
|
||
</div>
|
||
@if ($clientSecondary == false)
|
||
<a class="" wire:click="getClientSecondary">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
|
||
fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
|
||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
||
<path
|
||
d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4" />
|
||
</svg>
|
||
</a>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@if ($clientSecondary)
|
||
<div class="p-3" wire:transition.origin.top>
|
||
<div class="d-flex">
|
||
<div class="p-2 w-100">СУПРУГ / СУПРУГА</div>
|
||
<div class="p-2 flex-shrink-1">
|
||
<a class="" wire:click="deleteClientSecondary">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
|
||
fill="currentColor" class="bi bi-person-dash" viewBox="0 0 16 16">
|
||
<path
|
||
d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7M11 12h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1m0-7a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4" />
|
||
<path
|
||
d="M8.256 14a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1z" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="row">
|
||
<div class="col-12 col-xl-6">
|
||
<div class="form-floating mb-3">
|
||
<input wire:model.live="clientSecondary.firstName"
|
||
id="clientSecondary.firstName" type="text"
|
||
class="form-control rounded-4 @error('clientSecondary.firstName') is-invalid @enderror"
|
||
name="clientSecondary.firstName" required
|
||
autocomplete="clientSecondary.firstName" placeholder="Имя">
|
||
<label for="clientSecondary.firstName">Имя</label>
|
||
@error('clientSecondary.firstName')
|
||
<span class="invalid-feedback" role="alert">
|
||
<strong>{{ $message }}</strong>
|
||
</span>
|
||
@enderror
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-xl-6">
|
||
<div class="form-floating mb-3">
|
||
<input wire:model.live="clientSecondary.secondName"
|
||
id="clientSecondary.secondName" type="text"
|
||
class="form-control rounded-4 @error('clientSecondary.secondName') is-invalid @enderror"
|
||
name="clientSecondary.secondName" required
|
||
autocomplete="clientSecondary.secondName" placeholder="Фамилия">
|
||
<label for="clientSecondary.secondName">Фамилия</label>
|
||
@error('clientSecondary.secondName')
|
||
<span class="invalid-feedback" role="alert">
|
||
<strong>{{ $message }}</strong>
|
||
</span>
|
||
@enderror
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="form-floating">
|
||
<input wire:model="clientSecondary.phone" id="clientSecondary.phone"
|
||
type="tel" data-phone-pattern
|
||
class="form-control rounded-4 @error('client.phone') is-invalid @enderror"
|
||
name="clientSecondary.phone" required autocomplete="phone"
|
||
placeholder="Телефон клиента">
|
||
<label for="clientSecondary.phone">Телефон</label>
|
||
@error('clientSecondary.phone')
|
||
<span class="invalid-feedback" role="alert">
|
||
<strong>{{ $message }}</strong>
|
||
</span>
|
||
@enderror
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
<div class="form-floating mb-3">
|
||
<select wire:model.live="client.complexId"
|
||
class="form-select rounded-4 @error('client.complexId') is-invalid @enderror"
|
||
id="client.complexId" name="client.complexId" aria-label="Жилой комплекс">
|
||
<option selected></option>
|
||
@foreach ($complexes as $complex)
|
||
<option value="{{ $complex->id }}">
|
||
{{ $complex->name }}
|
||
</option>
|
||
@endforeach
|
||
</select>
|
||
<label for="client.complexId">Жилой комплекс</label>
|
||
@error('client.complexId')
|
||
<span class="invalid-feedback " role="alert">
|
||
<strong>{{ $message }}</strong>
|
||
</span>
|
||
@enderror
|
||
</div>
|
||
|
||
@if ($adminAccount)
|
||
<div class="form-floating mb-3">
|
||
<select wire:model.live="agent" class="form-select rounded-4 @error('agent') is-invalid @enderror"
|
||
id="agent" name="agent" aria-label="Агент">
|
||
<option selected></option>
|
||
@foreach ($agents as $agent)
|
||
<option value="{{ $agent->id }}">
|
||
{{ $agent->user->name }}
|
||
</option>
|
||
@endforeach
|
||
</select>
|
||
<label for="client.complexId">Агент</label>
|
||
@error('agent')
|
||
<span class="invalid-feedback" role="alert">
|
||
<strong>{{ $message }}</strong>
|
||
</span>
|
||
@enderror
|
||
</div>
|
||
@endif
|
||
|
||
@if ($status == self::READY && !$errors->any())
|
||
<div class="">
|
||
<button wire:click="save" class="btn btn-secondary rounded-4 fw-bold fs-5 w-100 py-3"
|
||
style="background-color: #20184d;">
|
||
Создать нового клиента
|
||
</button>
|
||
</div>
|
||
@else
|
||
<div class="">
|
||
<button disabled class="btn btn-secondary disabled rounded-4 fw-bold fs-5 w-100 py-3"
|
||
style="background-color: #20184d;">
|
||
Создать нового клиента
|
||
</button>
|
||
</div>
|
||
@endif
|
||
@endif
|
||
|
||
@if ($status == self::SUCCESS)
|
||
<div class="text-center fs-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="currentColor"
|
||
class="bi bi-check-circle-fill" viewBox="0 0 16 16">
|
||
<path
|
||
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="text-center fs-3">Клиент добавлен</div>
|
||
<div class="text-center fs-5 ">Мы проверим его уникальность и направим Вам информацию в личном
|
||
кабинете</div>
|
||
<div class="text-center mt-3">
|
||
<button wire:click="resetData" class="btn active border-white border-3 rounded">Продолжить</button>
|
||
</div>
|
||
@endif
|
||
|
||
@if ($status == self::ERROR)
|
||
<div class="text-center fs-1 mt-3">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="currentColor"
|
||
class="bi bi-emoji-astonished" viewBox="0 0 16 16">
|
||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
||
<path
|
||
d="M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5M4.884 4.022a2 2 0 0 1 1.458-.048.5.5 0 0 0 .316-.948 3 3 0 0 0-2.167.077 3.1 3.1 0 0 0-.773.478q-.036.03-.07.064l-.002.001a.5.5 0 0 0 .707.708l-.001.002.001-.002a2 2 0 0 1 .122-.1 2 2 0 0 1 .41-.232Zm6.232 0a2 2 0 0 0-1.458-.048.5.5 0 1 1-.316-.948 3 3 0 0 1 2.168.077 3 3 0 0 1 .773.478l.07.064v.001a.5.5 0 0 1-.706.708l.002.002-.002-.002a2 2 0 0 0-.122-.1 2 2 0 0 0-.41-.232ZM8 10c-.998 0-1.747.623-2.247 1.246-.383.478.08 1.06.687.98q1.56-.202 3.12 0c.606.08 1.07-.502.687-.98C9.747 10.623 8.998 10 8 10" />
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="text-center fs-3">Ой!</div>
|
||
<div class="text-center fs-5 ">Кажется, возникла проблема на нашей стороне, мы уже ее решаем.
|
||
Попробуйте зайти сюда позже.</div>
|
||
<div class="text-center my-3">
|
||
<button wire:click="back" class="btn btn-lg active border-2 rounded">Повторить</button>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@script
|
||
<script>
|
||
eventCalllback = function(e) {
|
||
var el = e.target,
|
||
clearVal = el.dataset.phoneClear,
|
||
pattern = el.dataset.phonePattern,
|
||
matrix_def = "+7(___) ___-__-__",
|
||
matrix = pattern ? pattern : matrix_def,
|
||
i = 0,
|
||
def = matrix.replace(/\D/g, ""),
|
||
val = e.target.value.replace(/\D/g, "");
|
||
if (clearVal !== 'false' && e.type === 'blur') {
|
||
if (val.length < matrix.match(/([\_\d])/g).length) {
|
||
e.target.value = '';
|
||
return;
|
||
}
|
||
}
|
||
if (def.length >= val.length) val = def;
|
||
e.target.value = matrix.replace(/./g, function(a) {
|
||
return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" :
|
||
a
|
||
});
|
||
}
|
||
var phone_inputs = document.querySelectorAll('[data-phone-pattern]');
|
||
for (let elem of phone_inputs) {
|
||
for (let ev of ['input', 'blur', 'focus']) {
|
||
elem.addEventListener(ev, eventCalllback);
|
||
}
|
||
}
|
||
</script>
|
||
@endscript
|
||
</div>
|