@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop

@section('container')

    <div class="page-content">

        <div class="inner-page-head">
            @include('front.templates.background-header')
        </div>

        <div class="inner-page form-page">
            @include('front.templates.background-inner-page')
            <div class="container">
                <div class="inner-page-content">
                    <h1 class="h2 text-center">{{ ShowLabelById(59) }}</h1>

                    <div class="form-page-inner">
                        <form method="POST" action="{{ route('ajax-continue-order-with-user-data') }}"
                              id="continue-order-with-user-data"
                              enctype="multipart/form-data">

                            @csrf
                            <input type="hidden" name="order_id" value="{{ $order->hash_order_id ?? '' }}">

                            <div class="form-item">
                                <label for="email">{{ ShowLabelById(13) }} *</label>
                                <input type="email" id="email" name="email"
                                       @if($order && $order->ordersUsers && $order->ordersUsers->email) value="{{ $order->ordersUsers->email }}" @endif>
                            </div>
                            <div class="form-item">
                                <label for="phone">{{ ShowLabelById(50) }} *</label>
                                <input type="tel" id="phone">
                                <input type="hidden" id="output" name="phone">
                                <input type="hidden" id="country_code" name="country_code">
                            </div>
                            <div class="form-row">
                                <div class="form-item">
                                    <label for="name">{{ ShowLabelById(51) }} *</label>
                                    <input type="text" id="name" name="name"
                                           @if($order && $order->ordersUsers && $order->ordersUsers->name) value="{{ $order->ordersUsers->name }}" @endif>
                                </div>
                                <div class="form-item">
                                    <label for="last_name">{{ ShowLabelById(52) }} *</label>
                                    <input type="text" id="last_name" name="last_name"
                                           @if($order && $order->ordersUsers && $order->ordersUsers->last_name) value="{{ $order->ordersUsers->last_name }}" @endif>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-item form-page-code">
                                    <label for="zip_code">{{ ShowLabelById(53) }} *</label>
                                    <input type="text" id="zip_code" name="zip_code">
                                </div>
                               {{-- <div class="form-item form-page-loc">
                                    <label for="city">{{ ShowLabelById(54) }} *</label>
                                    <input type="text" id="city" name="city"
                                           @if($order && $order->ordersUsers && $order->ordersUsers->city) value="{{ $order->ordersUsers->city }}" @endif>
                                </div>--}}

                                <div class="form-item form-page-loc">
                                    <label for="city">{{ ShowLabelById(54) }} *</label>

                                    {{-- input обычный --}}
                                    <input type="text" id="city_input" name="city"
                                           @if($order && $order->ordersUsers && $order->ordersUsers->city_area != 'București')
                                               value="{{ $order->ordersUsers->city }}"
                                        @endif>

                                    {{-- select для București --}}
                                    <select id="city_select_buc" name="city" style="display:none;">
                                        @foreach($sectoare as $sector)
                                            <option value="{{ $sector }}">{{ $sector }}</option>
                                        @endforeach
                                    </select>

                                </div>


                            </div>

                            <div class="form-row">
                                <div class="form-item">
                                    <label for="city_area">{{ ShowLabelById(60) }} *</label>
                                    <select id="city_area" name="city_area">
                                        @foreach($judete as $judet)
                                            <option value="{{ $judet }}"
                                                    @if($order && $order->ordersUsers && $order->ordersUsers->city_area == $judet) selected @endif>
                                                {{ $judet }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                @if(!empty($countries) && count($countries))
                                    <div class="form-item">
                                        <label for="country_id">{{ ShowLabelById(61) }} *</label>
                                        <select name="country_id" id="country_id">
                                            @foreach($countries as $one_country)
                                                <option value="{{ $one_country->id }}">{{ $one_country->name }}</option>
                                            @endforeach
                                        </select>
                                        {{--<input type="text" id="country" name="country" value="Romania" readonly>--}}
                                    </div>
                                @endif
                            </div>

                            <div class="form-item">
                                <label for="address">{{ ShowLabelById(55) }} *</label>
                                <input type="text" id="address" name="address">
                            </div>

                     {{--       <div class="form-item">
                                <label>Выберите способ оплаты *</label>
                                <ul class="payment-options">
                                    <li>
                                        <label>
                                            <label for="pay_netopia">Netopia</label>
                                            <input type="radio" id="pay_netopia" name="pay_method" value="netopia" checked>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <label for="pay_revolut">Revolut</label>
                                            <input type="radio" id="pay_revolut" name="pay_method" value="revolut">
                                        </label>
                                    </li>

                                </ul>
                            </div>--}}

                            <div class="form-item form-radio">
                                <label>{{ShowLabelById(86)}}</label>
                                <ul class="payment-options">
                                    <li>
                                        <input type="radio" id="pay_netopia" name="pay_method" value="netopia" checked>
                                        <label for="pay_netopia">
                                            <span>
                                                <img src="{{asset('front-assets/img/netopia.svg')}}" alt="netopia">
                                            </span>
                                        </label>
                                    </li>
                                    <li>
                                        <input type="radio" id="pay_revolut" name="pay_method" value="revolut">
                                        <label for="pay_revolut">
                                            <span>
                                                <img src="{{asset('front-assets/img/revolut.png')}}" alt="revolut">
                                            </span>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                            <p class="aggreement">
                                <label>
                                    <input id="reg-agree" name="agree" type="checkbox">
                                    <span class="aggreement-checkbox"></span>
                                    {!! ShowLabelById(56) !!}
                                </label>
                            </p>

                            <div class="form-submit">
                                <button type="submit" class="button prevent-repeated-click" onclick="newOrder(this)"
                                        data-form-id="continue-order-with-user-data">{{ ShowLabelById(20) }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        @include('front.templates.background-bottom')

    </div>

@stop
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.2/build/css/intlTelInput.css"/>
@push('other-scripts')
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.2/build/js/intlTelInput.min.js"></script>
    <script>
        const phoneInput = document.querySelector("#phone");
        const phoneOutput = document.querySelector("#output");
        const countryCodeField = document.querySelector("#country_code");

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

        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);

        document.addEventListener("DOMContentLoaded", () => {
            if (phoneOutput.value) {
                iti.setNumber(phoneOutput.value);
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const countrySelect = document.getElementById('country_id');
            const judetSelect = document.getElementById('city_area');
            const judeteOptions = @json($judete);

            function updateJudet() {
                if (countrySelect.value === '175') {
                    judetSelect.innerHTML = '';
                    judeteOptions.forEach(j => {
                        const option = document.createElement('option');
                        option.value = j;
                        option.text = j;
                        judetSelect.appendChild(option);
                    });
                    judetSelect.disabled = false;
                } else {
                    judetSelect.innerHTML = '<option value="-">-</option>';
                    judetSelect.disabled = true;
                }
            }

            countrySelect.addEventListener('change', updateJudet);
            updateJudet();
        });

    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const judetSelect = document.getElementById('city_area');
            const inputCity = document.getElementById('city_input');
            const selectBuc = document.getElementById('city_select_buc');

            function toggleCityField() {
                if (judetSelect.value === 'București') {
                    inputCity.style.display = 'none';
                    inputCity.value = '';
                    selectBuc.style.display = 'block';
                } else {
                    selectBuc.value = '';
                    selectBuc.style.display = 'none';
                    inputCity.style.display = 'block';
                }
            }

            judetSelect.addEventListener('change', toggleCityField);
            toggleCityField();
        });
    </script>

@endpush