@extends('admin.layout.login_layout')
@section('content')
    <style>
         body{
            background: #7a6fbe !important;
        }
        .loader {
            width: 30px !important;
        }

        .loader::before {
            border-width: 5px !important;
        }
    </style>
    <h2 class="mb-4">@lang('demo.new_account')</h2>

    <form action="{{ route('register.post') }}" method="post" id="register_form">
        @csrf
        <div class="user-box mb-4">
            <input type="text" name="email" required="" value="{{ old('email') }}">
            <label>@lang('admin.email')</label>
        </div>
        <div class="d-flex align-items-center mb-4">
            <h4 class="phone_no">{{ env("DEFAULT_PHONE_PREFIX") }}</h4>
            <div class="user-box w-100">
                <input type="text" name="phone_number" required="" value="{{ old('phone_number') }}">
                <label>@lang('admin.phone_number')</label>
            </div>
        </div>
        <div class="user-box mb-4">
            <input type="password" name="password" required="">
            <label>@lang('admin.password')</label>
            <span class="togglePassword">
                <i class="fas fa-eye"></i>
            </span>
        </div>
        <div class="user-box mb-4">
            <input type="password" name="password_confirmation" required="">
            <label>@lang('admin.password_confirmation')</label>
            <span class="togglePassword">
                <i class="fas fa-eye"></i>
            </span>
        </div>
        <div class="user-box mb-4">
            <select name="sector">
                <option value="0">@lang('demo.choose_sector')</option>
                <option value="1">@lang('demo.general_sector')</option>
                <option value="2">@lang('demo.realestate_sector')</option>
                <option value="2">@lang('demo.retail_sector')</option>
                <option value="2">@lang('demo.influencers_sector')</option>
            </select>
        </div>

        <button class="btn btn-primary w-100 btn-lg register-btn" type="button">@lang('admin.register')</button>
    </form>
    <hr>
    <h3 class="mb-4 mt-4 text-center">@lang('demo.have_account', ['app_name' => '<strong class="text-primary">' . __('admin.ezdan') . '</strong>'])</h3>
    <button class="btn btn-outline-primary w-100 btn-lg btn-login">@lang('admin.login')</button>
@stop
@section('scripts')

    <script>
        $(document).ready(function() {
            $(".btn-login").click(function() {
                const swalWithBootstrapButtons = Swal.mixin({
                    customClass: {
                        confirmButton: "btn btn-primary",
                    },
                    buttonsStyling: false
                });
                swalWithBootstrapButtons.fire({
                    title: "{{ __('demo.enter_email') }}",
                    input: "text",
                    inputAttributes: {
                        autocapitalize: "off"
                    },
                    showCancelButton: false,
                    confirmButtonText: "{{ __('admin.login') }}",
                    showLoaderOnConfirm: true,
                    allowOutsideClick: () => !Swal.isLoading()
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Check if the input is empty or not a valid email
                        if (!result.value || !isValidEmail(result.value)) {
                            Swal.fire({
                                icon: 'error',
                                text: '{{ __('demo.invalid_email_msg') }}'
                            });
                        } else {
                            // Fetch redirect URL from Laravel controller
                            $.ajax({
                                url: '{{ route('getRedirectUrl') }}',
                                data: {
                                    email: result.value
                                },
                                type: 'GET',
                                success: function(data) {
                                    if (data.url != "") {
                                        location.href = data.url;
                                    } else {
                                        Swal.fire({
                                            icon: 'error',
                                            text: '{{ __('demo.not_exist_user') }}'
                                        });
                                    }
                                },
                                error: function() {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error',
                                        text: 'Failed to fetch redirect URL.'
                                    });
                                }
                            });
                        }
                    }
                });
            });

            /*$('form#register_form').on('submit', function() {
            });*/
            $(".register-btn").on('click', function() {
                var redirect = "";
                var message = "";
                var icon = "";
                var timer;
                $(".ezdan_loading1").show();
                var form = $("#register_form");
                $.ajax({
                    url: form.attr("action"),
                    data: form.serialize(),
                    type: "POST",
                    dataType: 'json',
                    beforeSend: function() {
                        var duration = 120; // 2 minutes
                        var interval = 1000; // 1 second
                        var progress = 0;
                        var progressBar = $('.progress');
                        timer = setInterval(function() {
                            progress += interval / (duration * 1000) * 100;
                            progressBar.width(progress + '%');
                            if (progress >= 100) {
                                setTimeout(function() {
                                    if (redirect != "") {
                                        location.href = redirect;
                                    }
                                }, 5000);
                                Swal.fire({
                                    icon: icon,
                                    title: message,
                                });
                                clearInterval(timer);
                            }
                        }, interval);
                    },
                    success: function(data) {
                            $(".ezdan_loading1").hide();
                            clearInterval(timer);
                        if (data.result == "error") {
                            var errors = data.msg;
                            $('#errorMessages').show().find('ul').empty();
                            $.each(errors, function(key, value) {
                                $('#errorMessages ul').append('<li>' + value + '</li>');
                            });
                        } else {
                            Swal.fire({
                                icon:"success",
                                text: data.msg
                            }).then(()=>{
                                if(data.url != ""){
                                    location.href = data.url;
                                };
                            })
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle error response
                        var errors = xhr.responseJSON;
                        $('#errorMessages').show().find('ul').empty();
                        $.each(errors.msg, function(key, value) {
                            $('#errorMessages ul').append('<li>' + value + '</li>');
                        });
                    }
                });
            });
        });
    </script>
@stop