@extends('voyager::auth.master')

@section('content')
    <div class="login-container" >

    <table style="width: 100%;">
        <tr>
            <td><h4 style="font-weight: bold;">Sign Up</h4></td>
            <td><h5>Or</h5></td>
            <td style="cursor: pointer;" onclick="window.location='{{ route('voyager.login') }}';"><h5 style="text-align: center; ">Sign In</h5></td>
        </tr>
    </table>

        <form action="{{ route('register') }}" method="POST" >
            {{ csrf_field() }}
            <div class="form-group form-group-default" id="nameGroup">
                <label>Name</label>
                <div class="controls">
                    <input type="text" name="fullname" id="fullname" placeholder="Full Name" class="form-control" required>
                </div>
            </div>

            <div class="form-group form-group-default" id="emailGroup">
                <label>{{ __('voyager::generic.email') }}</label>
                <div class="controls">
                    <input type="text" name="email" id="email" value="{{ old('email') }}" placeholder="{{ __('voyager::generic.email') }}" class="form-control" required>
                </div>
            </div>

            <div class="form-group form-group-default" id="passwordGroup">
                <label>{{ __('voyager::generic.password') }}</label>
                <div class="controls">
                    <input type="password" name="password" placeholder="{{ __('voyager::generic.password') }}" class="form-control" required>
                </div>
            </div>

            <div class="form-group form-group-default" id="countryGroup">
                <label>{{ __('Country') }}</label>
                <input type="text" name="country" id="country" class="form-control">
            </div>

            <div class="form-group form-group-default" id="workGroup">
                <label>{{ __('Are you a:') }}</label>
                <div class="checkbox" style="display: inline-block">
                    <input type="checkbox" name="work" value="student" id="student-checkbox" style="margin-left: 5px;">
                    <label style="margin-top: 2px;" for="student-checkbox" >PHD Student</label>
                </div>
                <div style="display: inline-block" class="checkbox">
                    <input type="checkbox" name="work" value="work" id="employee-checkbox" style="margin-left: 5px;">
                    <label style="margin-top: 2px;" for="employee-checkbox" >Employee</label>
                </div>
                <div style="display: inline-block" class="checkbox">
                    <input type="checkbox" name="work" value="prof" id="prof-checkbox" style="margin-left: 5px;">
                    <label style="margin-top: 2px;" for="prof-checkbox" >Professor</label>
                </div>
            </div>
            <input type="hidden" name="work" id="work" value="">

            


            <div class="form-group form-group-default" id="adressGroup">
                <label>{{ __('Where do you study/work?') }}</label>
                <input type="text" name="adress" id="adress" class="form-control">
            </div>

            <button type="submit" class="btn btn-block login-button">
                <span class="signingin hidden"><span class="voyager-refresh"></span> Registring...</span>
                <span class="signin">Register</span>
            </button>
        </form>

        <div style="clear:both"></div>

        @if(!$errors->isEmpty())
            <div class="alert alert-red">
                <ul class="list-unstyled">
                    @foreach($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

    </div> <!-- .login-container -->
@endsection

@section('post_js')
<script>
    var btn = document.querySelector('button[type="submit"]');
    var form = document.forms[0];
    var email = document.querySelector('[name="email"]');
    var country = document.querySelector('[name="country"]');
    var fullname = document.querySelector('[name="fullname"]');
    var adress = document.querySelector('[name="adress"]');
    var password = document.querySelector('[name="password"]');

    var studentCheckbox = document.getElementById('student-checkbox');
    var employeeCheckbox = document.getElementById('employee-checkbox');
    var profCheckbox = document.getElementById('prof-checkbox');

    var workInput = document.getElementById('work');

    studentCheckbox.addEventListener('change', function () {
        if (studentCheckbox.checked) {
            workInput.value = 'PHD Student'; // Set the value to 'student' when checkbox is checked
        } else {
            workInput.value = ''; // Clear the value when checkbox is unchecked
        }
    });
    profCheckbox.addEventListener('change', function () {
        if (profCheckbox.checked) {
            workInput.value = 'Professeur'; // Set the value to 'student' when checkbox is checked
        } else {
            workInput.value = ''; // Clear the value when checkbox is unchecked
        }
    });
    employeeCheckbox.addEventListener('change', function () {
        if (employeeCheckbox.checked) {
            workInput.value = 'Employee'; // Set the value to 'student' when checkbox is checked
        } else {
            workInput.value = ''; // Clear the value when checkbox is unchecked
        }
    });

    btn.addEventListener('click', function (ev) {
        if (form.checkValidity()) {
            btn.querySelector('.signingin').className = 'signingin';
            btn.querySelector('.signin').className = 'signin hidden';
        } else {
            ev.preventDefault();
        }
    });

    fullname.focus();
    document.getElementById('nameGroup').classList.add("focused");

    // Focus events for email and password fields
    email.addEventListener('focusin', function (e) {
        document.getElementById('emailGroup').classList.add("focused");
    });
    email.addEventListener('focusout', function (e) {
        document.getElementById('emailGroup').classList.remove("focused");
    });

    password.addEventListener('focusin', function (e) {
        document.getElementById('passwordGroup').classList.add("focused");
    });
    password.addEventListener('focusout', function (e) {
        document.getElementById('passwordGroup').classList.remove("focused");
    });
    
    country.addEventListener('focusin', function (e) {
        document.getElementById('countryGroup').classList.add("focused");
    });
    country.addEventListener('focusout', function (e) {
        document.getElementById('countryGroup').classList.remove("focused");
    });

    fullname.addEventListener('focusin', function (e) {
        document.getElementById('nameGroup').classList.add("focused");
    });
    fullname.addEventListener('focusout', function (e) {
        document.getElementById('nameGroup').classList.remove("focused");
    });

    adress.addEventListener('focusin', function (e) {
        document.getElementById('adressGroup').classList.add("focused");
    });
    adress.addEventListener('focusout', function (e) {
        document.getElementById('adressGroup').classList.remove("focused");
    });
</script>

@endsection