@extends('backend.layouts.app')

@section('title')
    Register
@endsection

@section('content')
    <form action="{{ route('register') }}" method="POST" class="form-validate is-alter" autocomplete="off">
        @csrf
        <div class="row">

            <div class="form-group">
                <div class="form-label-group">
                    <label class="form-label">Nama Lengkap</label>
                </div>
                <div class="form-control-wrap">
                    <input autocomplete="off" type="text" name="name" class="form-control form-control-sm" required
                        id="name" placeholder="nama lengkap">
                </div>
            </div>
            <div class="form-group">
                <div class="form-label-group">
                    <label class="form-label">Email</label>
                </div>
                <div class="form-control-wrap">
                    <input autocomplete="off" type="text" name="email" class="form-control form-control-sm" required
                        id="email" placeholder="example@example.com">
                </div>
            </div>
            <div class="form-group">
                <div class="form-label-group">
                    <label class="form-label" for="password">Password</label>
                </div>
                <div class="form-control-wrap">
                    <a tabindex="-1" href="#" class="form-icon form-icon-right passcode-switch lg"
                        data-target="password">
                        <em class="passcode-icon icon-show icon ni ni-eye"></em>
                        <em class="passcode-icon icon-hide icon ni ni-eye-off"></em>
                    </a>
                    <input autocomplete="new-password" name="password" type="password" class="form-control form-control-sm"
                        required id="password" placeholder="**********">
                    <span id="passwordWarning" class="text-danger" style="color: #BA3C3C"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="form-label-group">
                    <label class="form-label" for="password">Confirm Password</label>
                </div>
                <div class="form-control-wrap">
                    <a tabindex="-1" href="#" class="form-icon form-icon-right passcode-switch lg"
                        data-target="password_confirmation">
                        <em class="passcode-icon icon-show icon ni ni-eye"></em>
                        <em class="passcode-icon icon-hide icon ni ni-eye-off"></em>
                    </a>
                    <input autocomplete="new-password" name="password_confirmation" type="password"
                        class="form-control form-control-sm" required id="password_confirmation" placeholder="**********">
                    <span id="passwordConfirmationWarning" class="text-danger" style="color: #BA3C3C"></span>
                </div>

            </div>

            <div onclick="modaltermandservice()" class="custom-control custom-radio lg:flex" style="align-items: center;">
                <input id="checkbox_term_and_service" type="checkbox" style="height: 25px; width: 25px; margin-right: 10px;"
                    required>
                <span>By continuing, you agree to UNITEST Privacy Policy</span>
            </div>


        </div>
        <div class="form-group mt-4">
            <button class="btn btn-lg btn-primary btn-block">Sign Up</button>
        </div>
    </form>

    <div class="form-note-s2 pt-4"> Alread have account? <a href="{{ route('login') }}">Sign In</a></div>

    <div class="modal fade" role="dialog" id="create-newsCategory" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <a onclick="tolakModal()" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-header">
                    <h5><strong>SYARAT DAN KETENTUAN PENGGUNAAN</strong></h5>
                </div>
                <div class="modal-body">
                    <div class="markdown prose w-full break-words dark:prose-invert light">
                        <p>{!! $termsAndConditions->value ?? '' !!}</p>
                    </div>
                </div>
                <div class="modal-footer">

                    <button onclick="terimaModal()" type="button" class="btn btn-success">
                        Terima
                    </button>
                    <button onclick="tolakModal()" type="button" class="btn btn-danger">
                        Tolak
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        function modaltermandservice() {
            $('#create-newsCategory').modal('toggle');
        }

        function terimaModal() {
            $('#create-newsCategory').modal('hide');
            $('#checkbox_term_and_service').prop('checked', true);
        }

        function tolakModal() {
            $('#create-newsCategory').modal('hide');
            $('#checkbox_term_and_service').prop('checked', false);
        }

        $(document).ready(function() {

            $('[name=password]').on('input', function() {
                var password = $(this).val();
                var passwordWarning = $('#passwordWarning');

                if (password.length < 8) {
                    passwordWarning.text('Password must have more than 8 characters.');
                } else {
                    passwordWarning.text('');
                    var passwordWarningSame = $('#passwordConfirmationWarning');
                    if (password != $('[name=password_confirmation]').val()) {
                        passwordWarningSame.text('Confirmation password must be the same');
                    } else {
                        passwordWarningSame.text('');
                    }
                }
            });

            $('[name=password_confirmation]').on('input', function() {
                var password = $(this).val();
                var passwordWarning = $('#passwordConfirmationWarning');

                if (password.length < 8) {
                    passwordWarning.text('Password must have more than 8 characters.');
                } else {
                    if (password != $('[name=password]').val()) {
                        passwordWarning.text('Confirmation password must be the same');
                    } else {
                        passwordWarning.text('');
                    }
                }
            });
        });
    </script>
@endsection