@extends('theme::layouts.app')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <div class="flex flex-col justify-center py-20 px-2 sm:px-6 lg:px-8 min-h-screen main-wrapper login-signup-page" style="background-image: url({{ asset('themes/tailwind/images/login-bg.png') }})">
        <form action="{{ route('register') }}" method="POST" id="registerFrm">
            @csrf

            <input id="invite_token" type="hidden" name="invite_token" value="{{ $invite_token }}">

            <div class="form-steps" data-step="1" id="formStep1">
                <div class="mx-auto login-signup-card">
                    <h3 class="form-title mb-6">Create Account</h3>

                    <div class="form-group mb-6">
                        <label for="first_name">
                            First Name
                        </label>
                        <input id="first_name" type="text" name="first_name" required class="w-full form-input no-radius" value="{{ old('first_name') }}" autofocus>

                        @if ($errors->has('first_name'))
                            <div class="mt-1 text-red-500">
                                {{ $errors->first('first_name') }}
                            </div>
                        @endif
                    </div>

                    <div class="form-group mb-6">
                        <label for="last_name">
                            Last Name
                        </label>
                        <input id="last_name" type="text" name="last_name" required class="w-full form-input no-radius" value="{{ old('last_name') }}" autofocus>

                        @if ($errors->has('last_name'))
                            <div class="mt-1 text-red-500">
                                {{ $errors->first('last_name') }}
                            </div>
                        @endif
                    </div>

                    <div class="form-group mb-6">
                        <label for="email">Email</label>
                        <input id="email" type="email" name="email" value="{{ $invite_email ? $invite_email : old('email') }}" required class="w-full form-input no-radius" autofocus {{ $invite_email ? 'disabled' : '' }}>

                        @if ($errors->has('email'))
                            <div class="mt-1 text-red-500">
                                {{ $errors->first('email') }}
                            </div>
                        @endif
                    </div>

                    <div class="form-group mb-6">
                        <label for="phone">
                            Phone Number
                        </label>
                        <input id="phone" type="text" name="phone" name="phone" value="{{ old('phone') }}" required class="w-full form-input no-radius">

                        @if ($errors->has('phone'))
                            <div class="mt-1 text-red-500">
                                {{ $errors->first('phone') }}
                            </div>
                        @endif
                    </div>

                    <div class="form-group mb-6">
                        <label for="password">
                            Password
                        </label>

                        <div class="password-wrapper">
                            <input id="password" type="password" name="password" required class="w-full form-input no-radius">
                            <img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
                        </div>

                        @if ($errors->has('password'))
                            <div class="mt-1 text-red-500">
                                {{ $errors->first('password') }}
                            </div>
                        @endif
                    </div>

                    <div class="form-group mb-6">
                        <label for="password_confirmation">
                            Confirm Password
                        </label>

                        <div class="password-wrapper">
                            <input id="password_confirmation" type="password" name="password_confirmation" required class="w-full form-input no-radius">
                            <img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
                        </div>

                        @if ($errors->has('password_confirmation'))
                            <div class="mt-1 text-red-500">
                                {{ $errors->first('password_confirmation') }}
                            </div>
                        @endif
                    </div>

                    <div class="form-group mb-6 ">
                        <div class="row align-items-center">
                            <div class="col-md-2 mt-0">
                                <label for="role_id" class="mb-0">
                                    Role
                                </label>
                            </div>
                            <div class="col-md-10 mt-0">
                                <select id="role_id" name="role_id" required class="w-full form-input no-radius">
                                    @foreach ($roles as $role)
                                        <option value="{{ $role->id }}" {{ old('role_id') == $role->id ? 'selected' : '' }}>{{ $role->display_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        @if ($errors->has('phone_number'))
                            <div class="mt-1 text-red-500">
                                {{ $errors->first('phone_number') }}
                            </div>
                        @endif
                    </div>

                    <div class="mb-6">
                        <div class="custom-radio-checkbox">
                            <input type="checkbox" class="remember" name="terms_and_conditions" id="terms_and_conditions" value="1">
                            <label class="remember_label" for="terms_and_conditions">
                                I accept <a href="{{ route('user-terms-and-conditions') }}" class="blue-link d-inline-block text-decoration-none">Terms and Conditions</a>
                            </label>
                        </div>
                    </div>

                    <div class="mb-6">
                        <span class="block w-full rounded-md shadow-sm">
                            <button type="button" class="flex justify-center w-full px-4 py-3 text-sm font-medium text-black transition duration-150 ease-in-out border primary-button change-form-step submit-btn {{ $invite_token ? 'send-btn' : '' }}" data-target="{{ $invite_token ? '3' : '2' }}">
                                Create Account
                            </button>
                        </span>
                    </div>

                    <p class="bottom-desc">
                        Already have an account? <a href="{{ route('login') }}" class="blue-link d-inline-block">Sign in</a>
                    </p>
                </div>
            </div>

            @if (!$invite_token)
                <div class="form-steps" data-step="2" id="formStep2" style="display: none;">
                    <div class="mx-auto login-signup-card">
                        <img class="logo mb-6 mx-auto" src="{{ asset('themes/tailwind/images/email.png') }}">
                        <h3 class="form-title mb-6">Your Company Owner Email</h3>

                        <div class="form-group mb-6">
                            <label for="company_email">Email</label>
                            <input id="company_email" type="email" name="company_email" required class="w-full form-input no-radius" autofocus>

                            @if ($errors->has('company_email'))
                                <div class="mt-1 text-red-500">
                                    {{ $errors->first('company_email') }}
                                </div>
                            @endif
                        </div>

                        <div class="mb-6">
                            <span class="block w-full rounded-md shadow-sm">
                                <button type="button" class="flex justify-center w-full px-4 py-3 text-sm font-medium text-black transition duration-150 ease-in-out border primary-button change-form-step submit-btn send-btn" data-target="3">
                                    Send
                                </button>
                            </span>
                        </div>

                        <p class="bottom-desc">
                            Go back to <a href="{{ route('login') }}" class="blue-link d-inline-block">Sign in</a>
                        </p>
                    </div>
                </div>
            @endif

            <div class="form-steps" data-step="3" style="display: none;">
                <div class="mx-auto login-signup-card">
                    <h3 class="form-title mb-6">Your account is now activated!</h3>

                    <div class="mb-6">
                        <span class="block w-full rounded-md shadow-sm">
                            <a href="{{ route('login') }}" class="flex justify-center w-full px-4 py-3 text-sm font-medium text-black transition duration-150 ease-in-out border primary-button submit-btn">
                                Sign in
                            </a>
                        </span>
                    </div>
                </div>
            </div>
            <button type="submit" id="submitBtn" class="d-none"></button>
        </form>

        <div class="mx-auto bottom-links-wrapper">
            <a href="{{ route('user-terms-and-conditions') }}" class="link">Terms and Conditions</a>
            <a href="{{ route('user-privacy-policy') }}" class="link">Privacy Policy</a>
        </div>
    </div>

    {{-- Didn't accept T&C Modal --}}
    <div class="modal fade validation-modal style1" id="validationModal1" tabindex="-1" aria-labelledby="validationModal1Label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content mx-auto w-100">
                <div class="modal-body p-0">
                    <p class="text-center error-message">You are not accept Terms & Conditions</p>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
    {{-- Error Modal --}}
    <div class="modal fade validation-modal style2" id="validationModal2" tabindex="-1" aria-labelledby="validationModal2Label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content mx-auto w-100">
                <div class="modal-body p-0">
                    <p class="text-center error-message">Wrong Password</p>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
    {{-- Sent Success Modal --}}
    <div class="modal fade validation-modal style2" id="validationModal3" tabindex="-1" aria-labelledby="validationModal3Label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content mx-auto w-100">
                <div class="modal-body p-0">
                    <p class="text-center error-message">
                        @if ($invite_token)
                            Register successfully
                        @else
                            Sent successfully
                        @endif
                    </p>
                    <a href="{{ route('login') }}" class="btn btn-secondary">Back</a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <script>
        $(function() {
            $('.password-hide-show').click(function() {
                var type = $(this).parent().find('input').attr('type');

                if (type == 'password') {
                    $(this).parent().find('input').attr('type', 'text');
                }
                else {
                    $(this).parent().find('input').attr('type', 'password');
                }
            });
            $('.change-form-step').click(function() {
                var target = $(this).attr('data-target');
                var validForm = true;
                var form = $(this).parents('form').first();
                var currentStep = $('.form-steps:visible').first().attr('id');

                form.find('input[type="text"][required]:visible').each(function() {
                    if (!$(this).val()) {
                        validForm = false;

                        return false;
                    }
                });
                form.find('input[type="email"][required]:visible').each(function() {
                    if (!$(this).val()) {
                        validForm = false;

                        return false;
                    }
                });
                form.find('input[type="checkbox"][required]:visible').each(function() {
                    if (!$(this).is(':checked')) {
                        validForm = false;

                        return false;
                    }
                });

                if (currentStep == 'formStep1' && validForm) {
                    if (!form.find('#terms_and_conditions').is(':checked')) {
                        $('#validationModal1').modal('show');
                        return;
                    }
                    else if (form.find('#password').val() != form.find('#password_confirmation').val()) {
                        $('#validationModal2 .error-message').html('Wrong Password');
                        $('#validationModal2').modal('show');
                        return;
                    }
                }

                if (validForm) {
                    if (target == '3') {
                        form.find('button[type="submit"]').click();
                    }
                    else {
                        $('.form-steps').hide();
                        $('.form-steps[data-step="' + target + '"]').show();
                    }
                }
                else {
                    form.find('button[type="submit"]').click();
                }
            });

            $('#registerFrm').submit(function(e) {
                e.preventDefault();
                var button = $(this).find('.send-btn');
                var buttonHtml = button.html();

                if (!button.is(':disabled')) {
                    button.attr('disabled', 'disabled');
                    button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');

                    $(this).find('#email').removeAttr('disabled');
                    var data = $(this).serialize();
                    $(this).find('#email').attr('disabled', 'disabled');

                    $.ajax({
                        url: '{{ route("wave.register-ajax") }}',
                        type: "post",
                        data: data,
                        dataType:'json',
                        success:function(data) {
                            button.removeAttr('disabled');
                            button.html(buttonHtml);

                            if (data.success) {
                                $('#validationModal3').modal('show');
                            }
                        },
                        error: function(data) {
                            var errors = data.responseJSON.errors;
                            var errorMessage = '<ul>';
                            $.each(errors, function(index, error) {
                                console.log(error);
                                errorMessage += '<li>' + error[0] + '</li>';
                            });
                            errorMessage += '</ul>';

                            $('#validationModal2 .error-message').html(errorMessage);
                            $('#validationModal2').modal('show');
                            button.removeAttr('disabled');
                            button.html(buttonHtml);
                        }
                    });
                }
            });
        });
    </script>
@endsection