@extends('layout.template')
@section('title', 'Login')
@section('content')
    <div class="container my-5">
        <div class="row login">
            <div class="col-sm-9 col-md-7 col-lg-3 content_center">
              <div class="card border-0 shadow rounded-3">
                <div class="card-body p-4 p-sm-5">
                    <div class="text-center mb-3">
                        <img src="{{url('img/groza-logo.png')}}" class="img_logo_login img-fluid">
                    </div>
                    <h3 class="card-title mb-4 blue_title"><b>Login to Groza</b></h3>
                    @if (session('status'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('status') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @elseif(session('failed'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            Email or Password are wrong.
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger" role="alert">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <form class="needs-validation" action="{{route('login.store')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-floating mb-3">
                          <input type="email" class="form-control" id="email" name="email" placeholder="name@example.com" required>
                          <label for="email">Email<span style="color:red">*</span></label>
                        </div>
                        <div class="form-floating mb-3">
                          <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
                          <label for="password">Password<span style="color:red">*</span></label>
                          <a id="btn-show-pwd" href="javascript:void(0);" data-toggle="tooltip" data-placement="bottom" title="Show" data-title="Hide" onClick="showPassword();"><i class="fa-solid fa-eye"></i></a>
                        </div>
                        <div class="my-4 row">
                            <div class="col-6">
                                <input type="checkbox" id="remember" name="remember" checked="checked">
                                <label for="remember">Remember me</label>
                            </div>
                            <div class="col-6 text-end">
                                <a href="{{ route('forget.password.get') }}">Forgot Password?</a>
                            </div>
                        </div>
                        <div class="d-grid mb-5">
                          <button class="btn btn_grz_blue btn-login text-uppercase fw-bold" type="submit">Login</button>
                        </div>
                        <div class="d-grid">
                          <a class="btn btn_grz_blue btn-login text-uppercase fw-bold" href="{{route('register')}}">New User?</a>
                        </div>
                    </form>
                </div>
              </div>
            </div>
        </div>
    </div>
    <div class="footer text-center text-white w-100" style="position:absolute;bottom:15px;">
        <small>©2023 Groza, all rights reserved - <a class="text-white" href="{{url('privacy-policy')}}">Privacy policy</a></small>
    </div>
@endsection
<script type="text/javascript">
    function showPassword(){
        var t1 = $('#btn-show-pwd').attr('title');
        var t2 = $('#btn-show-pwd').data('title');
        if($('#password').attr('type')=='password'){
            $('#password').attr('type','text');
            $('#btn-show-pwd i').removeClass('fa-eye').addClass('fa-eye-slash');
        }else{
            $('#password').attr('type','password');
            $('#btn-show-pwd i').removeClass('fa-eye-slash').addClass('fa-eye');
        }
        $('#btn-show-pwd').attr('title',t2);
        $('#btn-show-pwd').data('title',t1);
    }
</script>