@extends('website.layouts.app')
@section('title', __('titles.register'))
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/intlTelInput.css') }}">

@endsection
@section('content')
    @include('website.layouts.breadcumb', ['title' => __('titles.register')])
    <section class="login-page">
        <div class="container">
            <div class="row d-flex ">
                <div class="col-lg-6 position-relative">
                    <div class="log-reg-form">
                        <div class="navtab-style2">
                            <form action="{{ route('website.register.post', ['locale' => $locale]) }}" method="post"
                                novalidate class="needs-validation" enctype="multipart/form-data">
                                @csrf
                                <div class="form-style1">
                                    <div class="text-center mb40">

                                        <h2>@lang('titles.register_msg')</h2>
                                        <p class="text">@lang('titles.SignUp')</p>
                                    </div>
                                    <div class="mb25 form-group">
                                        <label class="form-label fw600 dark-color">@lang('attributes.first_name')</label>
                                        <input required name="first_name" type="first_name"
                                            class="form-control @if ($errors->has('first_name')) is-invalid @endif"
                                            placeholder="@lang('attributes.Typefirst_name') " value="{{ old('first_name') }}">
                                        @if ($errors->has('first_name'))
                                            <span class="invalid-feedback">{{ $errors->first('first_name') }}</span>
                                        @else
                                            <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.first_name')])
                                            </div>
                                        @endif
                                    </div>
                                    <div class="mb25 form-group">
                                        <label class="form-label fw600 dark-color">@lang('attributes.last_name')</label>
                                        <input required name="last_name" type="last_name"
                                            class="form-control @if ($errors->has('last_name')) is-invalid @endif"
                                            placeholder="@lang('attributes.TypeLast_name') " value="{{ old('last_name') }}">
                                        @if ($errors->has('last_name'))
                                            <span class="invalid-feedback">{{ $errors->first('last_name') }}</span>
                                        @else
                                            <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.last_name')])
                                            </div>
                                        @endif
                                    </div>
                                    <div class="mb25 form-group">
                                        <label class="form-label fw600 dark-color">@lang('attributes.email')</label>
                                        <input required name="email" type="email"
                                            class="form-control @if ($errors->has('email')) is-invalid @endif"
                                            placeholder="@lang('attributes.TypeEmail') " value="{{ old('email') }}">
                                        @if ($errors->has('email'))
                                            <span class="invalid-feedback">{{ $errors->first('email') }}</span>
                                        @else
                                            <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.mobile')])
                                            </div>
                                        @endif
                                    </div>
                                    <div class="mb25 form-group">
                                        <label class="form-label fw600 dark-color">@lang('attributes.phone')</label>
                                        <input required id="phone_input" type="tel"
                                            class="form-control phone @if ($errors->has('phone')) is-invalid @endif"
                                            placeholder="@lang('attributes.TypePhone') " value="{{ old('phone') }}">
                                        <input type="hidden" name="phone" id="phone_only" value="{{ old('phone') }}">
                                        <input type="hidden" name="phone_code" id="phone_code"
                                            value="{{ old('phone_code') }}">
                                        <input type="hidden" name="full_phone" id="full_phone"
                                            value="{{ old('full_phone') }}">
                                        @if ($errors->has('phone'))
                                            <span class="invalid-feedback">{{ $errors->first('phone') }}</span>
                                        @else
                                            <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.phone')])
                                            </div>
                                        @endif
                                    </div>
                                    <div class="mb25 form-group">
                                        <label class="form-label fw600 dark-color">@lang('attributes.whoareyou')</label>
                                        <select id="userType" name="type"
                                            class="form-control @if ($errors->has('type')) is-invalid @endif">
                                            <option value="" selected disabled>@lang('attributes.select_type')</option>
                                            <option value="resident" {{ old('type') == 'resident' ? 'selected' : '' }}>
                                                @lang('attributes.resident')</option>
                                            <option value="tourist" {{ old('type') == 'tourist' ? 'selected' : '' }}>
                                                @lang('attributes.tourist')</option>
                                        </select>
                                        @if ($errors->has('type'))
                                            <span class="invalid-feedback">{{ $errors->first('type') }}</span>
                                        @else
                                            <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.phone')])
                                            </div>
                                        @endif
                                    </div>

                                    <div id="resident-fields" style="display: none;">
                                        <div class="mb25 form-group">
                                            <label class="form-label fw600 dark-color">@lang('attributes.id_card_number')</label>
                                            <input name="id_card_number" type="file" accept=".jpg,.jpeg,.png,.pdf"
                                                class="form-control @if ($errors->has('id_card_number')) is-invalid @endif"
                                                placeholder="@lang('attributes.TypeIdCardNumber')" required>
                                            @if ($errors->has('id_card_number'))
                                                <span
                                                    class="invalid-feedback">{{ $errors->first('id_card_number') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.id_card_number')])
                                                </div>
                                            @endif
                                        </div>

                                        <div class="mb25 form-group">
                                            <label class="form-label fw600 dark-color">@lang('attributes.driving_license_number')</label>
                                            <input name="driving_license_number" type="file"
                                                accept=".jpg,.jpeg,.png,.pdf"
                                                class="form-control @if ($errors->has('driving_license_number')) is-invalid @endif"
                                                placeholder="@lang('attributes.DrivingLicenseNumber')" required>
                                            @if ($errors->has('driving_license_number'))
                                                <span
                                                    class="invalid-feedback">{{ $errors->first('driving_license_number') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.driving_license_number')])
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    <div id="tourist-fields" style="display: none;">
                                        <div class="mb25 form-group">
                                            <label class="form-label fw600 dark-color">@lang('attributes.passport_number')</label>
                                            <input name="passport_number" type="file" accept=".jpg,.jpeg,.png,.pdf"
                                                class="form-control @if ($errors->has('passport_number')) is-invalid @endif"
                                                placeholder="@lang('attributes.PassportNumber')" required>
                                            @if ($errors->has('passport_number'))
                                                <span
                                                    class="invalid-feedback">{{ $errors->first('passport_number') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.passport_number')])
                                                </div>
                                            @endif
                                        </div>

                                        <div class="mb25 form-group">
                                            <label class="form-label fw600 dark-color">@lang('attributes.international_license_number')</label>
                                            <input name="international_license_number" type="file"
                                                accept=".jpg,.jpeg,.png,.pdf"
                                                class="form-control @if ($errors->has('international_license_number')) is-invalid @endif"
                                                placeholder="@lang('attributes.InternationalLicenseNumber')" required>
                                            @if ($errors->has('international_license_number'))
                                                <span
                                                    class="invalid-feedback">{{ $errors->first('international_license_number') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.international_license_number')])
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="mb15 form-group">
                                        <label class="form-label fw600 dark-color">@lang('attributes.Password')</label>
                                        <input required name="password" type="password"
                                            class="form-control @if ($errors->has('password')) is-invalid @endif"
                                            placeholder="@lang('attributes.TypePassword')">
                                        @if ($errors->has('password'))
                                            <span class="invalid-feedback">{{ $errors->first('password') }}</span>
                                        @else
                                            <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.password')])
                                            </div>
                                        @endif

                                    </div>

                                    <div class="mb15 form-group">
                                        <label class="form-label fw600 dark-color">@lang('attributes.PasswordConfirmation')</label>
                                        <input required name="password_confirmation" type="password"
                                            class="form-control @if ($errors->has('password_confirmation')) is-invalid @endif"
                                            placeholder="@lang('attributes.TypePasswordConfirmation')">
                                        @if ($errors->has('password_confirmation'))
                                            <span
                                                class="invalid-feedback">{{ $errors->first('password_confirmation') }}</span>
                                        @else
                                            <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.PasswordConfirmation')])
                                            </div>
                                        @endif

                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            @if ($errors->any())
                                                <h5 class="text-danger float-left">{{ $errors->first() }}</h5>
                                                <br>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="d-grid mb20">
                                        <button class="ud-btn btn-thm" type="submit">
                                            @lang('titles.register_btn')<i class="fal fa-arrow-right-long"></i>
                                        </button>
                                    </div>
                                    <p class="dark-color text-center mb0 mt10">@lang('titles.ask_login')
                                        <a href="{{ route('website.login', ['locale' => $locale]) }}"
                                            class="dark-color fw600">
                                            <span>@lang('titles.login')</span>
                                        </a>

                                    </p>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
                <!--<div class="col-lg-6 wow fadeInUp" data-wow-delay="100ms"
                    style="visibility: visible; animation-delay: 100ms; animation-name: fadeInUp;">
                    <div class="about-box2">
                        <h4 class="title">The New Way to Find <br class="d-none d-xl-block"> Your Home</h4>
                        <p class="text fz15">From as low as $10 per day with <br class="d-none d-xl-block"> limited time
                            offer discounts.</p>
                        <a href="page-property-single-v1.html" class="ud-btn btn-thm">How İt Works<i
                                class="fal fa-arrow-right-long"></i></a>
                        <img class="img-1" src="{{ asset('assets/images/login.png') }}" alt="">
                    </div>
                </div>-->
            </div>
        </div>
    </section>

@endsection
@section('js')
    <script src="{{ asset('assets/js/intlTelInput-jquery.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>

    <script src="{{ asset('assets/js/validate.js') }}"></script>
    <script>
        $(document).ready(function() {
            "use strict";
            // Phone
            var phoneInput = $("#phone_input").intlTelInput({
                preferredCountries: ["uae", "kw", "eg", "sa"],
                separateDialCode: true,
                utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js"
            });

            // Function to update all phone-related fields
            function updatePhoneFields() {
                var phoneField = $("#phone_input");

                // Get the full number with country code (e.g., +971551234567)
                var fullNumber = phoneField.intlTelInput("getNumber");
                $("#full_phone").val(fullNumber);

                // Get just the country code with + (e.g., +971)
                var countryCode = "+" + phoneField.intlTelInput("getSelectedCountryData").dialCode;
                $("#phone_code").val(countryCode);

                // Get just the national number without country code
                try {
                    var nationalNumber;
                    if (phoneField.intlTelInput("isValidNumber")) {
                        nationalNumber = phoneField.intlTelInput("getNumber", intlTelInputUtils.numberFormat
                                .NATIONAL)
                            .replace(/\D/g, ''); // Remove non-digits
                    } else {
                        // If not valid yet, just use what they've typed and strip non-digits
                        nationalNumber = phoneField.val().replace(/\D/g, '');
                    }
                    $("#phone_only").val(nationalNumber);
                } catch (e) {
                    // Fallback if utils aren't loaded
                    $("#phone_only").val(phoneField.val().replace(/\D/g, ''));
                }
            }

            // Update phone fields when input changes or country is selected
            $("#phone_input").on("input countrychange", function() {
                updatePhoneFields();
            });

            // Handle user type selection
            $("#userType").change(function() {
                var selectedType = $(this).val();

                if (selectedType === "resident") {
                    $("#resident-fields").show();
                    $("#tourist-fields").hide();
                    // Enable resident fields and make them required
                    $("#resident-fields :input").prop('disabled', false).prop('required', true);
                    // Disable tourist fields and remove required attribute
                    $("#tourist-fields :input").prop('disabled', true).prop('required', false);
                } else if (selectedType === "tourist") {
                    $("#resident-fields").hide();
                    $("#tourist-fields").show();
                    // Disable resident fields and remove required attribute
                    $("#resident-fields :input").prop('disabled', true).prop('required', false);
                    // Enable tourist fields and make them required
                    $("#tourist-fields :input").prop('disabled', false).prop('required', true);
                } else {
                    $("#resident-fields").hide();
                    $("#tourist-fields").hide();
                    // Disable all optional fields and remove required attribute
                    $("#resident-fields :input, #tourist-fields :input").prop('disabled', true).prop(
                        'required', false);
                }
            });

            // Make the user type selection required
            $("#userType").prop('required', true);

            // Trigger change on page load to set initial state
            $("#userType").trigger("change");

            // Custom form validation
            $("form").on('submit', function(e) {
                // Make sure the right fields are enabled/disabled before submission
                $("#userType").trigger("change");

                // Update phone fields one final time before submission
                updatePhoneFields();

                var selectedType = $("#userType").val();

                // Check if user type is selected
                if (!selectedType || selectedType === "") {
                    e.preventDefault();
                    $("#userType").addClass('is-invalid');
                    return false;
                }
            });

            // Initial update of phone fields
            updatePhoneFields();

            // Clear validation errors when input changes
            $(":input").on('input change', function() {
                $(this).removeClass('is-invalid');
            });

            // Trigger the user type change to initialize fields if old value exists
            if ($("#userType").val()) {
                $("#userType").trigger("change");
            }
        });
    </script>
@endsection