356 lines
22 KiB
PHP
356 lines
22 KiB
PHP
<?php
|
||
use Modules\ClientCreateForm\Http\Livewire\FormStatus;
|
||
?>
|
||
<div class="flex-fill clients-form__container" style="position:relative">
|
||
<div class="loading-spinner rounded-4 align-items-center d-none d-flex justify-content-center position-absolute" wire:loading.class.remove="d-none">
|
||
<div class="spinner-border " style="width: 4rem; height: 4rem;" role="status">
|
||
<span class="visually-hidden">Загрузка формы...</span>
|
||
</div>
|
||
</div>
|
||
@if(!$availableAgents)
|
||
<div class="w-100 text-center">
|
||
<div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-lock"
|
||
viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd"
|
||
d="M8 0a4 4 0 0 1 4 4v2.05a2.5 2.5 0 0 1 2 2.45v5a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 13.5v-5a2.5 2.5 0 0 1 2-2.45V4a4 4 0 0 1 4-4M4.5 7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7zM8 1a3 3 0 0 0-3 3v2h6V4a3 3 0 0 0-3-3" />
|
||
</svg>
|
||
</div>
|
||
<div class="my-2">
|
||
Вы пока не можете добавлять контакты и сделки
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
@if($availableAgents && $complexes)
|
||
<div class="w-100" wire:loading.class="form-loading">
|
||
@if ($status == FormStatus::NEW || $status == FormStatus::IN_PROCESS || $status == FormStatus::READY)
|
||
<ul class="nav nav-tabs border-0 pb-0">
|
||
@foreach ($contacts as $contactIndex => $contactItem)
|
||
<li
|
||
class="nav-item col overflow-hidden @if ($contactIndex == $currentContactIndex) rounded-top border-top border-end border-start bg-light @else m-1 bg-secondary-subtle rounded rouded-5 @endif">
|
||
<a class="nav-link d-flex flex-row me-1 border-0 @if ($contactIndex == $currentContactIndex) active text-primary @else py-1 text-dark @endif"
|
||
aria-current="page" href="#" wire:click="setCurrentContactIndex({{ $contactIndex }})">
|
||
<i class="bi bi-person-standing"></i>
|
||
<span class="d-none d-xl-inline text-truncate">
|
||
@if (array_key_exists($contactIndex, $contactLabels))
|
||
{{ $contactLabels[$contactIndex] }}
|
||
@else
|
||
Контакт {{ $contactIndex + 1 }}
|
||
@endif
|
||
</span>
|
||
</a>
|
||
</li>
|
||
@endforeach
|
||
@if ($maxContactsCount > count($contacts))
|
||
<li class="col align-middle ps-2 mb-2">
|
||
<a class="text-light " href="#" wire:click="addContact" id="ClientFormAddTabBtn">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
|
||
class="bi bi-person-fill-add mt-1" 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.blur="contacts.{{ $currentContactIndex }}.firstName"
|
||
id="contacts.{{ $currentContactIndex }}.firstName" type="text"
|
||
class="form-control rounded-4 @error('contacts.' . $currentContactIndex . '.firstName') is-invalid @enderror"
|
||
name="contacts.{{ $currentContactIndex }}.firstName" required
|
||
autocomplete="contacts.{{ $currentContactIndex }}.firstName" placeholder="Имя">
|
||
<label for="contacts.{{ $currentContactIndex }}.firstName">Имя</label>
|
||
@error('contacts.' . $currentContactIndex . '.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.blur="contacts.{{ $currentContactIndex }}.secondName"
|
||
id="contacts.{{ $currentContactIndex }}.secondName" type="text"
|
||
class="form-control rounded-4 @error('contacts.' . $currentContactIndex . '.secondName') is-invalid @enderror"
|
||
name="contacts.{{ $currentContactIndex }}.secondName" required
|
||
autocomplete="contacts.{{ $currentContactIndex }}.secondName" placeholder="Фамилия">
|
||
<label for="contacts.{{ $currentContactIndex }}.secondName">Фамилия</label>
|
||
@error('contacts.' . $currentContactIndex . '.secondName')
|
||
<span class="invalid-feedback" role="alert">
|
||
<strong>{{ $message }}</strong>
|
||
</span>
|
||
@enderror
|
||
</div>
|
||
|
||
</div>
|
||
@foreach ($contacts[$currentContactIndex]['phones'] as $phoneKey => $phone)
|
||
<div class="col-12 hstack gap-2">
|
||
<div class="form-floating me-auto w-100">
|
||
<input wire:model.blur="contacts.{{ $currentContactIndex }}.phones.{{ $phoneKey }}"
|
||
id="contacts.{{ $currentContactIndex }}.phones.{{ $phoneKey }}" type="text"
|
||
data-phone-pattern
|
||
class="form-control rounded-4 @error('contacts.' . $currentContactIndex . '.phones.' . $phoneKey) is-invalid @enderror"
|
||
name="contacts.{{ $currentContactIndex }}.phones.{{ $phoneKey }}" required
|
||
autocomplete="phone" placeholder="Телефон клиента">
|
||
<label for="contacts.{{ $currentContactIndex }}.phones.{{ $phoneKey }}">Телефон
|
||
{{ count($contacts[$currentContactIndex]['phones']) > 1 ? ' ' . ($phoneKey + 1) : '' }}</label>
|
||
|
||
@error('contacts.' . $currentContactIndex . '.phones.' . $phoneKey)
|
||
<span class="invalid-feedback d-block" role="alert">
|
||
<strong>{{ $message }}</strong>
|
||
</span>
|
||
@enderror
|
||
</div>
|
||
@if (
|
||
count($contacts[$currentContactIndex]['phones']) == $phoneKey + 1 &&
|
||
count($contacts[$currentContactIndex]['phones']) < $this->maxContactPhonesCount
|
||
)
|
||
<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 ($currentContactIndex == 0 && count($contacts) <= 2)
|
||
<div class="form-check form-switch">
|
||
<input class="form-check-input" wire:click="toggleSecondContact" type="checkbox"
|
||
role="switch" id="switchCheckChecked" @if (count($contacts) == 2) checked @endif>
|
||
<label class="form-check-label" for="switchCheckChecked">Добавить контакт
|
||
супруга/супруги</label>
|
||
</div>
|
||
@endif
|
||
@if ($currentContactIndex > 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="btn-group bg-light w-100 d-flex rounded-4">
|
||
<button type="button" class="btn bg-light text-primary border overflow-hidden w-100 rounded-start-4 pe-0" style="mask-image: linear-gradient(to right, black, black 90%, transparent);">
|
||
@if(count($selectedObjects))
|
||
<div class="d-flex gap-2 row-fade overflow-hidden" style="-webkit-overflow-scrolling: touch;">
|
||
@foreach($selectedObjects as $selectedComplexId=>$object)
|
||
@foreach ($complexes as $complex)
|
||
@if($complex['id'] == $selectedComplexId)
|
||
<div class="border rounded text-nowrap d-flex bg-light ">
|
||
<span class="ps-2 pt-2 pb-2 text-truncate">{{ $complex['name'] }}</span>
|
||
<span wire:click="removeObject({{ $complex['id'] }})" class="btn btn-light btn-sm m-1">
|
||
<i class="bi bi-x-lg"></i>
|
||
</span>
|
||
</div>
|
||
@endif
|
||
@endforeach
|
||
@endforeach
|
||
</div>
|
||
@else
|
||
<div class="m-2">Выберите жилой комплекс</div>
|
||
@endif
|
||
</button>
|
||
<button type="button" style="width:30px" class="btn btn-secondary dropdown-toggle dropdown-toggle-split " data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
|
||
<span class="visually-hidden">Toggle Dropdown</span>
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
@foreach ($complexes as $complex)
|
||
<li>
|
||
<div class="dropdown-item">
|
||
<input wire:model.live="selectedObjects.{{ $complex['id'] }}" class="form-check-input" type="checkbox" id="complex_selector_{{ $complex['id'] }}">
|
||
<label class="form-check-label" for="complex_selector_{{ $complex['id'] }}">
|
||
{{ $complex['name'] }}
|
||
</label>
|
||
</div>
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
</div>
|
||
|
||
@if(count($selectedObjects))
|
||
<div class="d-flex flex-column gap-2 rounded-bottom-4 p-2 border" style="padding-top:25px!important;margin-top:-20px;background-color: #ffffff3b;">
|
||
@foreach($selectedObjects as $selectedComplexId=>$object)
|
||
@if(ComplexHasPlan7ApiData($selectedComplexId))
|
||
<div class="px-2 py-1 bg-light border border-1 rounded-4 bg-light">
|
||
<label for="complexId">
|
||
<small>Помещение в ЖК
|
||
@foreach ($complexes as $complex)
|
||
@if($complex['id'] == $selectedComplexId)
|
||
{{ $complex['name'] }}
|
||
@endif
|
||
@endforeach
|
||
</small>
|
||
</label>
|
||
<div>
|
||
@livewire('plan7Selector', [
|
||
'complexId' => $selectedComplexId
|
||
],
|
||
key($selectedComplexId))
|
||
</div>
|
||
</div>
|
||
@endif
|
||
@endforeach
|
||
</div>
|
||
@endif
|
||
<div class="d-none form-floating mb-2">
|
||
<select wire:model.live="complexId" class="form-select rounded-4 @error('complexId') is-invalid @enderror"
|
||
id="complexId" name="complexId" aria-label="Жилой комплекс">
|
||
<option selected></option>
|
||
@foreach ($complexes as $complex)
|
||
<option value="{{ $complex['id'] }}">
|
||
{{ $complex['name'] }}
|
||
</option>
|
||
@endforeach
|
||
</select>
|
||
<label for="complexId">Жилой комплекс</label>
|
||
@error('complexId')
|
||
<span class="invalid-feedback " role="alert">
|
||
<strong>{{ $message }}</strong>
|
||
</span>
|
||
@enderror
|
||
</div>
|
||
|
||
@if($complexId && ComplexHasPlan7ApiData($complexId))
|
||
<div class="p-2 bg-light border border-1 rounded-4 mb-3 bg-light">
|
||
<label for="complexId">Помещение</label>
|
||
<div>
|
||
@livewire('plan7Selector', [
|
||
'complexId' => $complexId
|
||
])
|
||
</div>
|
||
</div>
|
||
@endif
|
||
@if (count($availableAgents) > 1)
|
||
<div class="mt-3 form-floating mb-3">
|
||
<select wire:model.live="agentId" class="form-select rounded-4 @error('agentId') is-invalid @enderror"
|
||
id="agentId" name="agent" aria-label="Агент">
|
||
<option selected></option>
|
||
@foreach ($availableAgents as $agent)
|
||
<option value="{{ $agent['id'] }}">
|
||
{{ $agent['user']['name'] }}
|
||
</option>
|
||
@endforeach
|
||
</select>
|
||
<label for="agentId">Агент</label>
|
||
@error('agentId')
|
||
<span class="invalid-feedback" role="alert">
|
||
<strong>{{ $message }}</strong>
|
||
</span>
|
||
@enderror
|
||
</div>
|
||
@endif
|
||
|
||
@if ($status != FormStatus::READY)
|
||
<div class="d-none">
|
||
<button disabled class="btn btn-secondary disabled rounded-4 fw-bold fs-5 w-100 py-3"
|
||
style="background-color: #20184d;">
|
||
Создать нового клиента
|
||
</button>
|
||
</div>
|
||
@else
|
||
<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>
|
||
@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="resetData" 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>
|
||
@endif
|
||
@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>
|