<?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-inline text-truncate">
                                    @if($contactItem['firstName'])
                                        {{ $contactItem['firstName'] }}
                                    @else
                                        @if (array_key_exists($contactIndex, $contactLabels))
                                            {{ $contactLabels[$contactIndex] }}
                                        @else
                                            Контакт {{ $contactIndex + 1 }}
                                        @endif
                                    @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 dropup 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>
                    <div class="dropdown-menu dropdown-menu-end row">
                        @foreach ($complexes as $complex)
                            
                                <div class="dropdown-item col-6">
                                    <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>
                            
                        @endforeach
                    </div>
                </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
                
                @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>
                            @php($currentCompanyId = false)
                            @foreach ($availableAgents as $num=>$agent)
                                @if($currentCompanyId !== $agent['company_id'])
                                    @if($num !== 0)
                                        </optgroup>
                                    @endif
                                    <optgroup label="{{ $agent['company']['name'] }}">
                                    @php( $currentCompanyId = $agent['company_id'])
                                @endif
                                <option value="{{ $agent['id'] }}">
                                    {{ $agent['user']['name'] }}
                                </option>
                            @endforeach
                            </optgroup>
                        </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 mt-2">
                        <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="mt-2">
                        <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>