web-mooc/resources/views/auth/register.blade.php

@extends('layouts.' . get_frontend_settings('theme'))
@push('title', get_phrase('Sign Up'))
@push('meta')@endpush
@push('css')
   <style>
       .form-icons .right {
           right: 20px;
           cursor: pointer !important;
       }
   </style>
@endpush
@section('content')
   <section class="login-area">
       <div class="container">
           <div class="row">
               <div class="col-lg-7 col-md-6">
                   <div class="login-img">
                       <img src="{{ asset('assets/frontend/' . get_frontend_settings('theme') . '/image/signup.gif') }}" alt="register-banner">
                   </div>
               </div>
               <div class="col-lg-5 col-md-6">
                   <form action="{{ route('register') }}" class="global-form login-form mt-25" id="login-form" method="post" enctype="multipart/form-data">@csrf
                       <h4 class="g-title">{{ get_phrase('Sign Up') }}</h4>
                       <p class="description">{{ get_phrase('See your growth and get consulting support! ') }}</p>
                       <div class="form-group mb-5">
                           <label for="" class="form-label">{{ get_phrase('Name') }}</label>
                           <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" placeholder="{{ get_phrase('Your Name') }}" value="{{ old('name') }}">


                           @error('name')
                               <small class="text-danger">{{ $message }}</small>
                           @enderror
                       </div>
                       <div class="form-group mb-5">
                           <label for="" class="form-label">{{ get_phrase('Email') }}</label>
                           <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" placeholder="{{ get_phrase('Your Email') }}" value="{{ old('email') }}">


                           @error('email')
                               <small class="text-danger">{{ $message }}</small>
                           @enderror
                       </div>
                       <div class="form-group mb-5">
                           <label for="" class="form-label">{{ get_phrase('Password') }}</label>
                           <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="*********">


                           @error('password')
                               <small class="text-danger">{{ $message }}</small>
                           @enderror
                       </div>


                       @if (get_settings('allow_instructor'))
                           <div class="form-group mb-5">
                               <input id="instructor" type="checkbox" name="instructor" value="1" {{ old('instructor') ? 'checked' : '' }}>
                               <label class="hover-color-1" for="instructor">{{ get_phrase('Apply to Become an instructor') }}</label>
                           </div>


                           <div id="become-instructor-fields" class="{{ old('instructor') ? '' : 'd-none' }}">
                               <div class="form-group mb-5">
                                   <label for="nidn" class="form-label">{{ get_phrase('NIDN') }}</label>
                                   <input class="form-control @error('nidn') is-invalid @enderror" id="nidn" type="number" name="nidn" placeholder="{{ get_phrase('Enter your NIDN number') }}" value="{{ old('nidn') }}">
                                   @error('nidn')
                                       <small class="text-danger">{{ $message }}</small>
                                   @enderror
                               </div>
                               <div class="form-group mb-5">
                                   <label for="phone" class="form-label">{{ get_phrase('Phone') }}</label>
                                   <input class="form-control @error('phone') is-invalid @enderror" id="phone" type="number" name="phone" placeholder="{{ get_phrase('Enter your phone number') }}" value="{{ old('phone') }}">
                                   @error('phone')
                                       <small class="text-danger">{{ $message }}</small>
                                   @enderror
                               </div>
                               <div class="form-group mb-5">
                                   <label for="document" class="form-label">{{ get_phrase('Document') }} <small>(doc, docs, pdf)</small></label>
                                   <input class="form-control @error('document') is-invalid @enderror" id="document" type="file" name="document" accept=".doc,.docx,.pdf" onchange="validateFileSize(this)">
                                   @error('document')
                                       <small class="text-danger">{{ $message }}</small>
                                   @enderror
                                   <small>{{ get_phrase('Provide some documents about your qualifications') }}</small>
                               </div>
                               <div class="form-group mb-5">
                                   <label for="description" class="form-label">{{ get_phrase('Message') }}</label>
                                   <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description" rows="4">{{ old('description') }}</textarea>
                                   @error('description')
                                       <small class="text-danger">{{ $message }}</small>
                                   @enderror
                               </div>
                           </div>
                       @endif

                       @if (get_frontend_settings('recaptcha_status'))
                           <button class="eBtn gradient w-100 g-recaptcha" data-sitekey="{{ get_frontend_settings('recaptcha_sitekey') }}" data-callback='onLoginSubmit' data-action='submit'>{{ get_phrase('Sign Up') }}</button>
                       @else
                           <button type="submit" class="eBtn gradient w-100">{{ get_phrase('Sign Up') }}</button>
                       @endif

                        @if(get_settings('google_login'))
                            {{-- Or Divider --}}
                            <div class="divider mt-4 mb-4">
                                <span>{{ get_phrase('Or') }}</span>
                            </div>

                            {{-- Google Login Button --}}
                            <a href="{{ route('google.redirect') }}" class="google-login-btn w-100">
                                <img src="{{ asset('assets/frontend/default/image/Google.png') }}" alt="Google Logo">
                                {{ get_phrase('Sign Up with Google') }}
                            </a>
                        @endif

                       <p class="mt-20">{{ get_phrase('Already have account?') }} <a class="hover-color-1" href="{{ route('login') }}">{{ get_phrase('Sign in') }}</a></p>
                   </form>
               </div>
           </div>
       </div>
   </section>
@endsection
@push('js')
   <script>
       "use strict";

       function onLoginSubmit(token) {
           document.getElementById("login-form").submit();
       }


       $(document).ready(function() {
           $('#instructor').on('change', function() {
               if ($(this).is(':checked')) {
                   $('#become-instructor-fields').removeClass('d-none');
               } else {
                   $('#become-instructor-fields').addClass('d-none');
               }
           });
       });


       // File size validation
       function validateFileSize(input) {
           const file = input.files[0];
           if (file) {
               const fileSizeInMB = file.size / (1024 * 1024); // Convert to MB
               if (fileSizeInMB > 2) {
                   // Show error message using existing toaster system
                   error('{{ get_phrase("File size exceeds 2MB limit.") }}');
                   input.value = "";
               }
           }
       }
   </script>
@endpush