@extends('layouts.auth')

@section('title', 'Register')

@section('content')

    <div class="row m-0">
        <div class="col-xl-7 p-0">
            <img class="bg-img-cover bg-center" src="{{asset('assets/images/login/1.jpg')}}" alt="looginpage">
        </div>
        <div class="col-xl-5 p-0">
            <div class="login-card">
                <div>
                    <div>
                        <a class="logo" href="{{ route('login') }}">
                            <img class="img-fluid for-light" src="{{asset('assets/images/logoSalihin/salihin-logo.png')}}" alt="looginpage">
                            <img class="img-fluid for-dark" src="{{asset('assets/images/logoSalihin/salihin-logo.png')}}" alt="looginpage">
                        </a>
                    </div>
                    <div class="login-main">
                        <form class="theme-form" method="POST" action="{{route('register')}}">
                            @csrf
                            <h4>Create your account</h4>
                            <p>Enter your personal details to create account</p>

                            @if (count($errors->all()) > 0)
                                <div class="alert alert-danger alert-dismissible fade show mb-4 mt-4" role="alert" id="login">
                                    @foreach ($errors->all() as $error)
                                        {{ $error }}<br>
                                    @endforeach
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif

                            <div class="form-group">
                                <label class="col-form-label pt-0">Your Name</label>
                                <div class="row g-2">
                                    <div class="col-6">
                                    <input class="form-control" type="text" required placeholder="First name" name="first_name">
                                    </div>
                                    <div class="col-6">
                                    <input class="form-control" type="text" required placeholder="Last name" name="last_name">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">Email Address</label>
                                <input class="form-control" type="email" required="" placeholder="Test@gmail.com" name="email">
                            </div>

                            <div class="form-group">
                                <label class="col-form-label">Password</label>
                                <input class="form-control" type="password" maxlength="20" name="password" required="" placeholder="*********">
                                <div class="show-hide"><span class="show"></span></div>
                            </div>

                            <div class="form-group">
                                <label class="col-form-label">Confirm Password</label>
                                <input class="form-control" type="password" maxlength="20" name="password_confirmation" required="" placeholder="*********">
                                <div class="show-hide"><span class="show"></span></div>
                            </div>

                            <div class="form-group mb-0">
                                <div class="checkbox p-0">
                                    <input id="checkbox1" type="checkbox" required>
                                    <label class="text-muted" for="checkbox1">Agree with<a class="ms-2" href="#">Privacy Policy</a></label>
                                </div>
                                <button class="btn btn-primary btn-block" type="submit">Create Account</button>
                            </div>

                            <input hidden name="appliedVacancyID" value="{{ (!empty($appliedVacancyID))? $appliedVacancyID : '';}}">
                            <center>
                                <p class="mt-4 mb-0">Already have an account?<a class="ms-2" href="{{ (!empty($appliedVacancyID))? route('loginWVID', ['appliedVacancyID' => $appliedVacancyID]) :route('login') }}">Sign in</a></p>
                            </center>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection