<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test paper</title>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{asset('frontend')}}/css/toastr.min.css">
    <link rel="stylesheet" href="{{asset('frontend')}}/css/select2.min.css">
    <link rel="stylesheet" href="{{asset('frontend')}}/css/style.css">
    <link rel="stylesheet" href="{{asset('frontend')}}/css/custom.css">
</head>

<body>
    <div class="mobile-body no_scroll pt-2">
        <div class=" header row">
            <div class="header_content d-flex justify-content-between px-4 py-2 align-items-center">
                <div class=""><a href="{{route('webuser.dashboard')}}"> <i class="fa-solid fa-house"></i></a></div>
                <div class="">
                    <a href="{{route('webuser.dashboard')}}">
                        <img src="{{ asset('frontend/template-assets/') }}/images/logo.png" alt=""
                            style="width:120px; height: 30px;">
                    </a>
                </div>
                <div class=""><a href=""><i class="fa-solid fa-bell"></i></a></div>
            </div>
        </div>

        <div style="min-height: 90% !important;" class="h-100 justify-content-center flex-column d-flex px-2 mb-5">
            <form class="needs-validation card mt-3 container" action="{{route('webuser.post-register')}}" method="POST"
                enctype="multipart/form-data">
                @csrf

                <h3 class="text-center heading_text py-2">Register</h3>

                <div class="form-group custom-form-group pb-1">
                    <label class="custom-form-label" for="email">Name <span class="custom-danger">(requierd)</span></label>
                    <div class="single_input">
                        <span class="material-symbols-outlined">
                            person
                        </span>
                        <input type="text" placeholder="Name" name="name" required class="form-control">
                    </div>
                </div>

                <div class="form-group custom-form-group pb-1">
                    <label class="custom-form-label" for="email">Mobile <span class="custom-danger">(requierd)</span></label>
                    <div class="single_input">
                        <span class="material-symbols-outlined">
                            call
                        </span>
                        <input type="number" placeholder="Mobile" name="mobile" id="mobile" required class="form-control">
                    </div>
                </div>

        
                <div class="form-group custom-form-group pb-1">
                    <label class="custom-form-label" for="email">Email <span class="custom-danger">(requierd)</span></label>
                    <div class="single_input">
                        <span class="material-symbols-outlined">
                            email
                        </span>
                        <input type="email" placeholder="Email" name="email" required class="form-control">
                    </div>
                </div>

                <div class="form-group custom-form-group">
                    <label class="custom-form-label" for="email">Gender <span class="custom-danger">(requierd)</span></label>
                    <div class="single_input d-flex align-items-center gap-2 gender">
                        <input type="text" name="gender" id="genderValue" value="male">
                        <a onclick="genderToggle('male_btn','female_btn','male_btn')" id="male_btn"
                            class="primary_btn d-flex align-items-center justify-content-center active m-0" for="male">
                            <i class="fa-solid fa-mars"></i>Male
                        </a>
                        
                        <a onclick="genderToggle('male_btn','female_btn','female_btn')" id="female_btn"
                            class="primary_btn d-flex align-items-center justify-content-center m-0" for="female">
                            <i class="fa-solid fa-venus"></i>Female
                        </a>
                    </div>
                </div>

                {{-- @php
                //To get all the profession data...
                $userProfessionData = App\Models\User::getProfessionData();
                @endphp
                
                <div class="form-group custom-form-group">
                    <label class="custom-form-label" for="email">Profession <span class="custom-danger">(requierd)</span></label>
                    <div class="single_input custom-select2-dropdown">
                        <i class="fa-solid fa-briefcase"></i>
                        <select name="profession_id" id="profession" required autocomplete="off" class="form-control">
                            <option value="" selected disabled>Select Profession</option>
                            @foreach ($userProfessionData as $item)
                            @if(isset($item) && $item != null)
                            <option value="{{$item->id}}">{{$item->profession_name}}</option>
                            @endif
                            @endforeach
                        </select>
                    </div>
                </div> --}}

                <div class="form-group custom-form-group">
                    <label class="custom-form-label" for="email">Password <span class="custom-danger">(requierd)</span></label>
                    <div class="single_input ">
                        <span class="material-symbols-outlined">
                        lock
                    </span>
                        <input name="password" type="password" placeholder="Password"
                            class="form-control frontend-register-password-field" required>
                        <a href="javascript:void(0)">
                            <i class="fa-solid fa-eye frontend-password-eye-icon password-hide"></i>
                            <i class="fa-solid fa-eye-slash frontend-password-eye-icon password-show"></i>
                        </a>
                    </div>
                </div>
                
                
                <div class="form-group custom-form-group">
                    <label class="custom-form-label" for="email">Confirm Password <span class="custom-danger">(requierd)</span></label>
                    <div class="single_input ">
                        <span class="material-symbols-outlined">
                        lock
                    </span>
                        <input name="password_confirmation" type="password" placeholder="Confirm Password" class="form-control"
                            required>
                    </div>
                </div>
            

                <div class="condition pt-2 pb-3">
                    <label class="d-flex mt-1 align-items-center gap-2" for="role"><input required class="form-check-input m-0"
                            type="checkbox" id="role">Agree with <a href="{{route('privacy-policy')}}">Terms & Conditions</a></label>
                    <button type="submit" class="primary_btn custom-common-submit-button" onclick="return checkValidate()">Registration</button>
                    <label class="mt-2 text-center d-block" for="login">Already have an account? <a
                            href="{{route('webuser.get-login')}}">login</a></label>
                </div>
            </form>
        </div>



        <footer class="p-2 custom-dashboard-footer">
            <div class="row ">
                <a href="#" class="col-3 text-center">
                    <span class="material-symbols-outlined">
                        menu_book
                    </span>
                    <p>পড়াশোনা</p>
                </a>
                <a href="{{route('webuser.get-login')}}" class="col-3 text-center">
                    <span class="material-symbols-outlined">
                        thumb_up
                    </span>
                    <p>লগইন</p>
                </a>
                <a href="#" class="col-3 text-center">
                    <span class="material-symbols-outlined">
                        schedule
                    </span>
                    <p>পরিক্ষা</p>
                </a>
                <a href="#" class="col-3 text-center
                    {{ request()->is('webuser/register') ? 'active' : '' }}
                ">
                    <span class="material-symbols-outlined">
                        person
                    </span>
                    <p>রেজিস্টার</p>
                </a>
            </div>
        </footer>
    </div>
</body>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="{{asset('frontend')}}/js/toastr.min.js"></script>
<script src="{{asset('frontend')}}/js/select2.min.js"></script>
<script src="{{asset('frontend')}}/js/app.js"></script>
{!! Toastr::message() !!}

<script>
    $(document).ready(function() {
        $('#classname_id').select2();
    });
</script>

<script>
    function checkValidate() {
        var mobileNumber = $("#mobile").val();

        if (mobileNumber != '' && mobileNumber.length != 11) { 
            event.preventDefault();
            toastr.error("Mobile number must be 11 digit."); 
        }

        return true;
    }
</script>

</html>