registerPageLaravel

<x-base>


    <div class="container">
        <div class="mt-5 text-center">
            <img src="{{ asset('imgs/assets/title-logo.png') }}" alt="" style="width: 3.8rem">
            <h2>Hi! Mentee, Find Your Mentor on CasvaLabs</h2>
            {{-- <h5>Register</h5> --}}
        </div>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card box-shadow2" style="margin-bottom: 5rem">
                    <div class="card-header">Register</div>

                    <div class="card-body">
                        <form class="row g-3" method="POST" action="{{ route('auth.register') }}"
                            enctype="multipart/form-data">
                            @csrf
                            {{-- {{ csrf_field() }} --}}
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <div class="col-md-6 form-floating">
                                <input type="text"
                                    name="first_name"class="form-control {{ $errors->has('first_name') ? 'is-invalid' : '' }} "
                                    placeholder="Kwaku" required autocomplete="first_name" autofocus id="first_name">
                                @if ($errors->has('first_name'))
                                    <span>
                                        First Name is required
                                    </span>
                                @endif


                                <label for="floatingInput">First Name</label>
                            </div>
                            <div class="col-md-6 form-floating">
                                <input type="text" name="last_name"class="form-control" placeholder="Frimpong"
                                    value="{{ old('last_name') }}" required autocomplete="last_name" autofocus
                                    id="last_name">
                                @error('last_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <label for="floatingInput">Last Name</label>
                            </div>
                            <div class="col-12 form-floating">
                                <input type="email" class="form-control" name="email" autocomplete="email" autofocus
                                    required placeholder="[email protected]" value="{{ old('email') }}"
                                    id="email">
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <label for="floatingInput" class="form-label">Email</label>
                            </div>
                            <div class="col-6 form-floating">
                                <input type="tel" class="form-control" name="contact" placeholder="0555055055"
                                    autocomplete="contact" required value="{{ old('contact') }}" id="contact">
                                @error('contact')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <label for="floatingInput" class="form-label">Contact</label>
                            </div>
                            <div class="col-md-2"></div>
                            <div class="col-md-4">
                                <label for="inputState" class="form-label">Gender</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="gender[]" value="Male"
                                        id="gender1">
                                    <label class="form-check-label" for="flexRadioDefault1">
                                        Male
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="gender[]" value="Female"
                                        id="gender2">
                                    <label class="form-check-label" for="flexRadioDefault1">
                                        Female
                                    </label>
                                </div>
                            </div>
                            <div class="col-12 form-floating">
                                <input type="password" class="form-control" name="password" placeholder="!@*(@#$343333)"
                                    autocomplete="password" required id="password">
                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ 'Your password must be more than 8 characters long, should contain at-least 1 Uppercase, 1 Lowercase, 1 Numeric and 1 special character.' }}</strong>
                                    </span>
                                @enderror
                                <label for="floatingInput" class="form-label">Password</label>
                            </div>
                            <div class="col-12 form-floating">
                                <input type="text" class="form-control" name="address" placeholder="Amasaman, Accra"
                                    value="{{ old('address') }}" id="address">
                                @error('address')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <label for="floatingInput" class="form-label">Address</label>
                            </div>
                            <div class="col-md-12 form-floating">
                                <input type="text" value="{{ old('institution') }}" name="institution"
                                    class="form-control" placeholder="Accra Technical Univeristy" id="institution">
                                @error('institution')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <label for="institution">School/Workplace</label>
                            </div>

                            <div class="col-md-6">
                                <label for="inputState" class="form-label">Interest/Motivation (3)*</label>
                                <span id="chk-btn-err" style="color: red; font-size: .8rem"></span>
                                <div class="form-check">
                                    <input class="form-check-input chk-btn" type="checkbox"
                                        onclick="checkboxControl(0)" name="interest[]" value="Paired programming"
                                        id="interest1">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        Paired Programming
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input chk-btn" type="checkbox"
                                        onclick="checkboxControl(1)" name="interest[]" value="Web Development"
                                        id="interest2">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        Web Development
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input chk-btn" type="checkbox"
                                        onclick="checkboxControl(2)" name="interest[]" value="Mobile App Development"
                                        id="interest3">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        Mobile App Development
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input chk-btn" type="checkbox"
                                        onclick="checkboxControl(3)" name="interest[]" value=" Data Science"
                                        id="interest4">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        Data Science
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input chk-btn" type="checkbox"
                                        onclick="checkboxControl(4)" name="interest[]" value="Machine Learning"
                                        id="interest5">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        Machine Learning
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input chk-btn" type="checkbox"
                                        onclick="checkboxControl(5)" name="interest[]" value="Software Testing"
                                        id="interest6">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        Software Testing
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input chk-btn" type="checkbox"
                                        onclick="checkboxControl(6)"name="interest[]" value="UI/UX Design"
                                        id="interest7">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        UI/UX Design
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input chk-btn" type="checkbox"
                                        onclick="checkboxControl(7)" name="interest[]" value="Cyber Security"
                                        id="interest8">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        Cyber Security
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input chk-btn" type="checkbox"
                                        onclick="checkboxControl(8)" name="interest[]" value="Cloud Computing "
                                        id="interest9">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        Cloud Computing
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input chk-btn" type="checkbox"
                                        onclick="checkboxControl(9)" name="interest[]" value="Augmented Reality"
                                        id="interest10">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        Augmented Reality
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="inputState" class="form-label">Level of Experience</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="level_of_experience[]"
                                        value="Novice" id="experience1">
                                    <label class="form-check-label" for="flexRadioDefault1">
                                        Novice
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="level_of_experience[]"
                                        value="Getting Started" id="experience2">
                                    <label class="form-check-label" for="flexRadioDefault1">
                                        Getting Started
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="level_of_experience[]"
                                        value="Have Some Experience" id="experience3">
                                    <label class="form-check-label" for="flexRadioDefault1">
                                        Have Some Experience
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="level_of_experience[]"
                                        value="Have Adequate Experience" id="experience4">
                                    <label class="form-check-label" for="flexRadioDefault1">
                                        Have Adequate Experience
                                    </label>
                                </div>
                                <br><br>
                                <div class="input-group mb-3">
                                    {{-- <input type="file" class="form-control" id="inputGroupFile02"
                                        accept=".png,.jpg,.jpeg">
                                    <label class="input-group-text" for="inputGroupFile02">Upload Profile
                                        Picture</label> --}}
                                </div>

                            </div>
                            <div class="mb-3">
                                <label for="exampleFormControlTextarea1" class="form-label">In short, why would
                                    you
                                    need a mentor</label>
                                <textarea class="form-control" name="mentee_message"
                                    placeholder=" Ex. I find it distrubing to understanding basic programming concepts" id="mentee_message"
                                    rows="3"></textarea>
                                <span id="mentee_message_word_count" class=" float-end"
                                    style="font-size: .6rem">200/200</span>
                                @error('mentee_message')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-3" style="margin: 2.5rem auto 0 auto">
                                <button type="submit" class="btn special-btn" style="width:10rem">Sign
                                    up</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Settig limit on number of interests to be selected --}}
    <script>
        function checkboxControl(j) {
            let total = 0;
            let elem = document.getElementsByClassName("chk-btn");
            let error = document.getElementById("chk-btn-err");
            for (let i = 0; i < elem.length; i++) {
                if (elem[i].checked == true) {
                    total = total + 1;
                }
                if (total > 3) {
                    error.textContent = "You Must Select at Least 3";
                    elem[j].checked = false;
                    return false;
                }
            }
        }
    </script>

    {{-- Setting limit on number of words to be typed in mentee message --}}
    <script>
        let mentee_message = document.getElementById("mentee_message");
        let mentee_message_word_count = document.getElementById("mentee_message_word_count");
        mentee_message.addEventListener("input", function() {
            mentee_message_word_count.textContent = mentee_message.value.length + "/200";
            if (mentee_message.value.length > 200) {
                mentee_message.value = mentee_message.value.substring(0, 200);
            }
            // if (mentee_message.value.length > 200) {
            //     mentee_message_word_count.textContent.style.color = "red";
            // } else if (mentee_message.value.length < 100) {
            //     mentee_message_word_count.textContent.style.color = "green";
            // } else {
            //     mentee_message_word_count.textContent.style.color = "orange";
            // }
        });
    </script>
    
    ///Controller for Auth
    <?php

namespace App\Http\Controllers;

use App\Models\User;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Redirect;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Facades\Validator;

class AuthController extends Controller
{
    public $subscriber = [];

    public function index()
    {
        return view('welcome');
    }

    public function login()
    {
        return view('auth.login');
    }

    public function register()
    {
        return view('auth.register');
    }

    public function register_mentor()
    {
        return view('auth.register-mentor');
    }

    public function postLogin(Request $request)
    {
        $request->validate([
            'email' => 'required',
            'password' => 'required',
        ]);

        $credentials = $request->only('email', 'password');
        if (Auth::attempt($credentials)) {
            return redirect()->intended('dashboard')->withSuccess('You have been Successfully logged in');
        }
    }

    public function oppai()
    {
        Validator::make($this->subscriber, [
            'first_name' => 'required| string',
            'last_name' => 'required| string',
            'email' => 'required| email| unique:users',
            'contact' => 'required',
            'gender' => 'string',
            'password' => 'required|string',
            'institution' => 'required| string',
            'address' => 'required',
            'level_of_experience' => 'string',
            'interests' => 'string',
            'mentee_message' => ' string'
        ])->validate();
    }

    public function postRegister(Request $request)
    {
        // dd($request->all());
        // echo $request->all();

        $request->validate([
            'first_name' => 'required| string',
            'last_name' => 'required| string',
            'email' => 'required| email| unique:users',
            'contact' => 'required',
            'gender' => 'string',
            'password' => 'required|string',
            'institution' => 'required| string',
            'address' => 'required',
            'level_of_experience' => 'string',
            'interests' => 'string',
            'mentee_message' => ' string',
        ]);
        // dd($request);

        $user = new User();
        $user->first_name = $request->first_name;
        $user->last_name = $request->last_name;
        $user->email = $request->email;
        $user->contact = $request->contact;
        $user->gender = $request->gender;
        $user->password = Hash::make($request->password);
        $user->institution = $request->institution;
        $user->address = $request->address;
        $user->level_of_experience = $request->level_of_experience;
        $user->interests = $request->interests;
        $user->mentee_message = $request->mentee_message;
        $user->remember_token = $request->_token;
        $user->save();
        return redirect()->route('login')->withSuccess('You have been Successfully registered');

        // $data = $request->all();
        // // dd($data);
        // $check = $this->create($data);
        // // if ($check) {
        // //     return redirect()->intended('login')->withSuccess('You have been Successfully registered');
        // // }


        // return redirect("login")->withSuccess('Great! You have been Successfully Loggedin');
    }

    public function auth_Dashboard()
    {
        if (Auth::check()) {
            return view('dashboard');
        }
        return redirect('login')->withSucess('Sorry, You do not have access');
    }

    // public function create(array $data)
    // {
    //     return User::create([
    //         'first_name' => $data['first_name'],
    //         'last_name' => $data['last_name'],
    //         'email' => $data['email'],
    //         'contact' => $data['contact'],
    //         'gender' => $data['gender'],
    //         'institution' => $data['institution'],
    //         'level_of_experience' => $data['level_of_experience'],
    //         'interests' => $data['interests'],
    //         'address' => $data['address'],
    //         'mentee_message' => $data['mentee_message'],
    //         'password' => Hash::make($data['password'])
    //     ]);
    // }

    public function auth_Logout()
    {
        Session::flush();
        Auth::logout();

        return Redirect('login');
    }

    public function find_mentor()
    {
        return view('layouts.find-mentor');
    }
}


</x-base>