267 lines
15 KiB
PHP
267 lines
15 KiB
PHP
<?php
|
||
use Modules\ClientCreateForm\Http\Livewire\FormStatus;
|
||
?>
|
||
<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 == FormStatus::NEW || $status == FormStatus::READY)
|
||
<ul class="nav nav-tabs d-flex align-items-end border-0 pb-0">
|
||
@foreach ($clients as $clientIndex => $clientItem)
|
||
<li
|
||
class="nav-item overflow-hidden @if ($clientIndex == $currentClientIndex) rounded-top border-top border-end border-start bg-light @else m-1 bg-secondary-subtle rounded rouded-5 @endif">
|
||
<a class="nav-link me-1 border-0 @if ($clientIndex == $currentClientIndex) active text-primary @else py-1 text-dark @endif"
|
||
aria-current="page" href="#" wire:click="setCurrentClient({{ $clientIndex }})">
|
||
<i class="bi bi-person-standing"></i>
|
||
<span class="d-none d-xl-inline">
|
||
@if (array_key_exists($clientIndex, $clientLabels))
|
||
{{ $clientLabels[$clientIndex] }}
|
||
@else
|
||
Контакт {{ $clientIndex + 1 }}
|
||
@endif
|
||
</span>
|
||
</a>
|
||
</li>
|
||
@endforeach
|
||
@if ($maxClientsCount > count($clients))
|
||
<li class="align-middle ps-2 mb-2">
|
||
<a class="text-light " href="#" wire:click="addClient">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
|
||
class="bi bi-person-fill-add" 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 7m.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0m-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0" />
|
||
<path
|
||
d="M2 13c0 1 1 1 1 1h5.256A4.5 4.5 0 0 1 8 12.5a4.5 4.5 0 0 1 1.544-3.393Q8.844 9.002 8 9c-5 0-6 3-6 4" />
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
@endif
|
||
</ul>
|
||
<div class="bg-light border border-1 rounded-bottom-4 mb-2 pb-2" style="margin-top:-1px">
|
||
<div class="mt-3">
|
||
<div class="row mx-2 g-2">
|
||
<div class="col-12 col-xl-6">
|
||
<div class="form-floating mb-3 m-xl-0">
|
||
<input wire:model.live="currentClient.firstName" id="currentClient.firstName"
|
||
type="text"
|
||
class="form-control rounded-4 @error('currentClient.firstName') is-invalid @enderror"
|
||
name="currentClient.firstName" required autocomplete="currentClient.firstName"
|
||
placeholder="Имя">
|
||
<label for="currentClient.firstName">Имя</label>
|
||
@error('currentClient.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 m-xl-0">
|
||
<input wire:model.live="currentClient.secondName" id="currentClient.secondName"
|
||
type="text"
|
||
class="form-control rounded-4 @error('currentClient.secondName') is-invalid @enderror"
|
||
name="currentClient.secondName" required autocomplete="currentClient.secondName"
|
||
placeholder="Фамилия">
|
||
<label for="currentClient.secondName">Фамилия</label>
|
||
@error('currentClient.secondName')
|
||
<span class="invalid-feedback" role="alert">
|
||
<strong>{{ $message }}</strong>
|
||
</span>
|
||
@enderror
|
||
</div>
|
||
|
||
</div>
|
||
@foreach ($currentClient['phones'] as $phoneKey => $phone)
|
||
<div class="col-12 hstack gap-2">
|
||
<div class="form-floating me-auto w-100">
|
||
<input wire:model="currentClient.phone.{{ $phoneKey }}"
|
||
id="currentClient.phone.{{ $phoneKey }}" type="tel" data-phone-pattern
|
||
class="form-control rounded-4 @error('currentClient.phone.{{ $phoneKey }}') is-invalid @enderror"
|
||
name="currentClient.phone.{{ $phoneKey }}" required autocomplete="phone"
|
||
placeholder="Телефон клиента">
|
||
<label for="currentClient.phone.{{ $phoneKey }}">Телефон
|
||
{{ count($currentClient['phones']) > 1 ? ' ' . ($phoneKey + 1) : '' }}</label>
|
||
@error('currentClient.phone.{{ $phoneKey }}')
|
||
<span class="invalid-feedback" role="alert">
|
||
<strong>{{ $message }}</strong>
|
||
</span>
|
||
@enderror
|
||
</div>
|
||
@if (count($currentClient['phones']) == $phoneKey + 1 &&
|
||
count($this->currentClient['phones']) < $this->maxClientPhonesCount)
|
||
<a class="" href="#" wire:click="addPhoneForClient"
|
||
title="Добавить еще один телефон для клиента">
|
||
<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>
|
||
@endforeach
|
||
<div class="col-12">
|
||
@if ($currentClientIndex == 0 && count($clients) <= 2)
|
||
<div class="form-check form-switch">
|
||
<input class="form-check-input" wire:click="toggleSecondClient" type="checkbox"
|
||
role="switch" id="switchCheckChecked"
|
||
@if (count($clients) == 2) checked @endif>
|
||
<label class="form-check-label" for="switchCheckChecked">Добавить контакт
|
||
супруга/супруги</label>
|
||
</div>
|
||
@endif
|
||
@if ($currentClientIndex > 0)
|
||
<div class="text-end">
|
||
<a wire:click="deleteContact" class="text-primary"
|
||
style="text-decoration: underline dotted;" href="#">
|
||
Удалить контакт</a>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</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 (count($availableAgents) > 1)
|
||
<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 == FormStatus::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 == FormStatus::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="$refresh" class="btn active border-white border-3 rounded">Продолжить</button>
|
||
</div>
|
||
@endif
|
||
|
||
@if ($status == FormStatus::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
|
||
});
|
||
}
|
||
|
||
document.addEventListener('livewire:initialized', () => {
|
||
setPhonePatternToInput();
|
||
})
|
||
|
||
$wire.on('phoneInputAdded', () => {
|
||
setInterval(() => {
|
||
setPhonePatternToInput()
|
||
}, 2000)
|
||
});
|
||
|
||
function setPhonePatternToInput() {
|
||
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>
|