@extends('layouts.auth')

@section('title', __('Register'))

@section('content')

    <div class="flex-fill d-flex flex-column justify-content-center">
        <div class="container-tight py-6">
            <div class="text-center mb-4">
                <img src="{{ siteLogo() }}" height="100" alt="">
            </div>
            <form class="card card-md" method="POST" action="{{ route('register') }}">
                @csrf
                <div class="card-body">
                    <h2 class="mb-4 card-title text-center">{{ __('Create new account') }}</h2>
                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input type="text" class="form-control" placeholder="Enter name" name="name" required value="{{ old('name') }}">
                        @error('name')
                        <div class="invalid-feedback" style="display: block">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email address</label>
                        <input type="email" class="form-control" placeholder="Enter email" name="email" required value="{{ old('email') }}">
                        @error('email')
                        <div class="invalid-feedback" style="display: block">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Password</label>
                        <div class="input-group input-group-flat">
                            <input type="password" id="password" class="form-control"  placeholder="Password" name="password" required>
                            <span class="input-group-text">
                                <a href="javascript:void(0)" class="link-secondary passwordToggle" title="Show password" data-toggle="tooltip">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z"/>
                                        <circle cx="12" cy="12" r="2" />
                                        <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
                                        <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
                                    </svg>
                                </a>
                            </span>
                        </div>
                        @error('password')
                        <div class="invalid-feedback" style="display: block">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Confirm Password</label>
                        <div class="input-group input-group-flat">
                            <input type="password" id="confirmPassword" class="form-control" placeholder="Confirm Password" name="password_confirmation" required>
                            <span class="input-group-text">
                                <a href="javascript:void(0)" class="link-secondary confirmPasswordToggle" title="Show password" data-toggle="tooltip">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z"/>
                                        <circle cx="12" cy="12" r="2" />
                                        <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
                                        <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
                                    </svg>
                                </a>
                            </span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-check">
                            <input type="checkbox" class="form-check-input"/>
                            <span class="form-check-label">Agree the <a href="#" tabindex="-1">terms and policy</a>.</span>
                        </label>
                    </div>
                    <div class="form-footer">
                        <button type="submit" class="btn btn-primary w-100">{{ __('Create new account') }}</button>
                    </div>
                </div>
            </form>
            <div class="text-center text-muted mt">
                {{ __('Already have account?') }} <a href="{{ url('login') }}" tabindex="-1">{{ __('Sign in') }}</a>
            </div>
        </div>
    </div>

@endsection

@push('script')
    <script !src="">
        $('.passwordToggle').click(function(){
            if($('#password').attr('type') == 'password')
                $('#password').attr('type', 'text')
            else
                $('#password').attr('type', 'password')
        })
        $('.confirmPasswordToggle').click(function(){
            if($('#confirmPassword').attr('type') == 'password')
                $('#confirmPassword').attr('type', 'text')
            else
                $('#confirmPassword').attr('type', 'password')
        })
    </script>
@endpush