@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop
@push('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@27.0.8/dist/css/intlTelInput.css">
@endpush
@section('container')

    <div class="page-content">

        <div class="signup">
            <div class="signup-content">
                <div class="signup-inner">
                    <div class="inner">
                        <div class="signup-logo">
                            <img src="{{image('logo/signup-logo.svg')}}" alt="logo">
                        </div>
                        <div class="h2">{{ShowLabelById(115)}}</div>
                        <div class="signup-form">
                            <form action="{{ route('register.sendForm') }}" method="post" id="register-form">
                                @csrf
                                <x-honeypot />
                                <div class="signup-form-item">
                                    <div class="signup-form-row">
                                        <label for="phone" class="sr-only">{{ ShowLabelById(118) }}</label>
                                        <input
                                            type="tel"
                                            id="phone"
                                            name="phone"
                                            placeholder="+373 ___ ___ ___"
                                            autocomplete="tel"
                                        >
                                        <input type="hidden" name="phone_full" id="phone_full">
                                        <input type="hidden" name="country_code" id="country_code">
                                        <div class="signup-form-icon">
                                            <img src="{{ image('icons/phone-2.svg') }}" alt="phone">
                                        </div>
                                    </div>
                                </div>

                                <div class="signup-form-item">
                                    <div class="signup-form-row">
                                        <label for="name" class="sr-only">{{ ShowLabelById(117) }}</label>
                                        <input
                                            type="text"
                                            id="name"
                                            name="name"
                                            placeholder="{{ ShowLabelById(117) }}"
                                            autocomplete="name"
                                        >
                                        <div class="signup-form-icon">
                                            <img src="{{ image('icons/person.svg') }}" alt="person">
                                        </div>
                                    </div>
                                </div>

                                <div class="signup-form-item">
                                    <div class="signup-form-row">
                                        <button type="button" class="signup-form-input open-signup-form-modal" data-modal="signup-form-modal-1">
                                            {{ ShowLabelById(119) }}
                                        </button>
                                        <div class="signup-form-icon">
                                            <img src="{{ image('icons/person.svg') }}" alt="person">
                                        </div>
                                    </div>

                                    <div id="signup-form-modal-1" class="signup-form-modal">
                                        <ul>
                                            @foreach($sexes as $key => $label)
                                                <li>
                                                    <input
                                                        type="radio"
                                                        id="sex-{{ $key }}"
                                                        name="sex"
                                                        value="{{ $key }}"
                                                    >
                                                    <label for="sex-{{ $key }}" class="signup-radio-btn">
                                                        {{ $label }}
                                                    </label>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>

                                <div class="signup-form-item">
                                    <div class="signup-form-row">
                                        <label for="birthday" class="sr-only">{{ ShowLabelById(123) }}</label>
                                        <input
                                            type="text"
                                            id="birthday"
                                            name="birthday"
                                            placeholder="{{ ShowLabelById(134) }}"
                                        >
                                        <div class="signup-form-icon">
                                            <img src="{{ image('icons/calendar.svg') }}" alt="calendar">
                                        </div>
                                    </div>
                                </div>

                                <div class="signup-form-item">
                                    <div class="signup-form-row">
                                        <button type="button" class="signup-form-input open-signup-form-modal" data-modal="signup-form-modal-2">
                                            {{ ShowLabelById(124) }}
                                        </button>
                                        <div class="signup-form-icon">
                                            <img src="{{ image('icons/search-2.svg') }}" alt="search">
                                        </div>
                                    </div>

                                    <div id="signup-form-modal-2" class="signup-form-modal">
                                        <ul class="signup-form-info">
                                            @foreach($formSources as $child)
                                                <li>
                                                    <input
                                                        type="radio"
                                                        id="how_know-{{ $child->id }}"
                                                        name="how_know_radio"
                                                        value="{{ $child->alias }}"
                                                        class="close-modal-on-click"
                                                    >
                                                    <label for="how_know-{{ $child->id }}" class="signup-radio-btn">
                                                        {{ $child->name }}
                                                    </label>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>

                                <p class="aggreement aggreement-checkbox">
                                    <label>
                                        <input id="agree" name="agree" type="checkbox">
                                        {{ ShowLabelById(37) }}
                                    </label>
                                </p>

                                <div class="signup-submit">
                                    <button type="button"
                                            class="button button--dark"
                                            id="save-form-btn"
                                            onclick="saveForm(this)"
                                            data-form-id="register-form">
                                        {{ ShowLabelById(125) }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            @if(!empty( $page ))
            <div class="signup-img">
                <img src="{{$page->image}}" alt="{{$page->name}}">
            </div>
            @endif
        </div>

    </div>

@stop
@push('js')
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@27.0.8/dist/js/intlTelInput.min.js"></script>

    <script>
        let iti;

        document.addEventListener("DOMContentLoaded", function () {
            const phoneInput = document.querySelector("#phone");
            const phoneOutput = document.querySelector("#phone_full");
            const countryCodeField = document.querySelector("#country_code");

            if (!phoneInput) return;

            iti = window.intlTelInput(phoneInput, {
                initialCountry: "auto",
                separateDialCode: true,
                nationalMode: false,
                strictMode: true,
                geoIpLookup: callback => {
                    fetch("https://ipapi.co/json")
                        .then(res => res.json())
                        .then(data => callback(data.country_code))
                        .catch(() => callback("md"));
                },
                loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@27.0.8/dist/js/utils.js"),
            });

            const updatePhoneOutput = () => {
                const number = iti.getNumber();
                const countryCode = iti.getSelectedCountryData().dialCode;

                if (iti.isValidNumber()) {
                    phoneOutput.value = number;
                } else {
                    phoneOutput.value = phoneInput.value;
                }

                countryCodeField.value = countryCode || '';
            };

            phoneInput.addEventListener("input", updatePhoneOutput);
            phoneInput.addEventListener("blur", updatePhoneOutput);

            if (phoneOutput.value) {
                iti.setNumber(phoneOutput.value);
            }
        });
    </script>
@endpush