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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Register</title>
    @include('frontend.layouts.style')<!-- added all style file link-->
    <style>
        .container {
            min-height: calc(100vh - 24px);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .register-form {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .regForm {
            min-width: 50%;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            padding: 15px;
            background-color: #f3f3f3;
        }

        .butn {
            background-color: #272727;
            /* border: 1px solid #272727; */
            color: rgb(255, 255, 255);
            padding: 8px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin-top: 11px;
        }

        .butn:hover {
            background-color: #080808;
            color: rgb(189, 189, 189);

        }

        .form-control:focus {
            border-color: #272727 !important;
            box-shadow: none !important;
        }

        .form-label {
            margin-top: 11px !important;
            margin-bottom: 0px !important;
            font-size: 14px;
        }
        
        @media only screen and (max-width: 768px) {
            .regForm {
                min-width: 90%;

            }
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="register-form">

            <form action="{{route('register.store')}}" method="POST" class="regForm">
                @csrf

                @if (session('status'))
                    <div class="alert alert-success">
                        {{ session('status') }}
                    </div>
                @endif

                <div class="navbar-brand d-flex justify-content-center">
                    <div class="logo">
                        <img src="{{ asset('assets/img/logo/01.webp') }}" alt=""width="90" height="30">
                    </div>
                </div>

                <label for="name" class="form-label">Name</label><br>
                <input type="text" id="name" name="name" class="form-control @error('name') is-invalid @enderror"
                    aria-describedby="passwordHelpBlock" required>
                @error('name')
                    <div class="text-danger">{{ $message }}</div>
                @enderror

                <label for="email" class="form-label">Email</label><br>
                <input type="email" id="email" name="email" class="form-control @error('email') is-invalid @enderror"
                    aria-describedby="passwordHelpBlock" required>
                @error('email')
                    <div class="text-danger">{{ $message }}</div>
                @enderror

                <label for="password" class="form-label">Password</label><br>
                <input type="password" id="password" name="password" class="form-control @error('password') is-invalid @enderror"
                    aria-describedby="passwordHelpBlock" required>
                @error('password')
                    <div class="text-danger">{{ $message }}</div>
                @enderror

                <label for="confirmPassword" class="form-label">Confirm Password</label><br>
                <input type="password" id="confirmPassword" name="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror"
                    aria-describedby="passwordHelpBlock" required>
                <div>
                    <input type="checkbox" id="chk"> <span class="form-label">show password</span>
                </div>
                <button type="submit" class="butn rounded-1">Register</button>
            </form>

        </div>
    </div>


    @include('frontend.layouts.script'); <!-- added all script file link-->
    <script>
        const pwd = document.getElementById('password');
        const conPwd = document.getElementById('confirmPassword');
        const chk = document.getElementById('chk');

        chk.onchange = function(e) {
            pwd.type = chk.checked ? "text" : "password";
            conPwd.type = chk.checked ? "text" : "password";
        }
    </script>
</body>

</html>
