@extends('layouts.auth')

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

@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>
            @if(session('error'))
            <div class="alert alert-danger" role="alert">
                {{ session('error') }}
            </div>
            @endif
            @if(session('info'))
                <div class="alert alert-info" role="alert">
                    {{ session('info') }}
                </div>
            @endif
            @if(session('status'))
                <div class="alert alert-success" role="alert">
                    {{ session('status') }}
                </div>
            @endif
            <form class="card card-md" action="{{ route('login') }}" method="post">
                @csrf
                <div class="card-body">
                    <h2 class="card-title mb-4 text-center">{{ __('Login to your account') }}</h2>
                    <div class="mb-3">
                        <label class="form-label">{{ __('Email address') }}</label>
                        <input type="email" class="form-control" placeholder="{{ __('Enter email') }}" name="email" autocomplete="off">
                        @error('email')
                        <div class="invalid-feedback" style="display: block">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-2">
                        <label class="form-label">
                            Password
                            @if(\Laravel\Fortify\Features::enabled(\Laravel\Fortify\Features::resetPasswords()))
                            <span class="form-label-description">
                                <a tabindex="-1" href="{{ route('password.request') }}">{{ __('I forgot password') }}</a>
                            </span>
                            @endif
                        </label>
                        <div class="input-group input-group-flat">
                            <input type="password" id="password" class="form-control passwordField"  placeholder="{{ __('Password') }}" name="password" >
                            <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-2">
                        <label class="form-check">
                            <input type="checkbox" class="form-check-input" name="remember"/>
                            <span class="form-check-label">{{ __('Remember me on this device') }}</span>
                        </label>
                    </div>
                    <div class="form-footer">
                        <button type="submit" class="btn btn-primary w-100">{{ __('Sign in') }}</button>
                    </div>
                </div>
            </form>
            @if(Route::has('register'))
                <div class="text-center text-muted mt">
                    {{ __('Don\'t have account yet?') }} <a href="{{ route('register') }}">{{ __('Sign up') }}</a>
                </div>
            @endif
        </div>
    </div>
@stop

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