<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>
            
        </script>
    @endscript
</div>
