@extends('layouts.app')

@section('title', 'Prijava - Checkpoint')

@section('content')
<section class="section section-height-3 section-with-shape-divider position-relative border-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'parallaxHeight': '120%'}" data-image-src="/pt/img/parallax/parallax-corporate-7-1.jpg">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="card border-width-3 border-radius-0 border-color-hover-dark mb-4">
                    <div class="card-body">
                        <h4 class="font-weight-bold text-uppercase text-4 mb-3">Prijavite se</h4>
                        
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                @foreach ($errors->all() as $error)
                                    <p class="mb-0">{{ $error }}</p>
                                @endforeach
                            </div>
                        @endif
                        
                        <form action="{{ route('login') }}" method="POST" class="needs-validation">
                            @csrf
                            
                            <div class="row">
                                <div class="form-group col">
                                    <label class="form-label text-color-dark text-3">Email adresa <span class="text-color-danger">*</span></label>
                                    <input type="email" name="email" value="{{ old('email') }}" class="form-control form-control-lg text-4" required autofocus>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="form-group col">
                                    <label class="form-label text-color-dark text-3">Lozinka <span class="text-color-danger">*</span></label>
                                    <input type="password" name="password" class="form-control form-control-lg text-4" required>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="form-group col">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="remember" name="remember">
                                        <label class="custom-control-label text-2" for="remember">Zapamti me</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="form-group col">
                                    <button type="submit" class="btn btn-dark btn-modern btn-block text-uppercase rounded-0 font-weight-bold text-3 py-3">Prijavi se</button>
                                    
                                    <div class="divider divider-style-2 divider-primary divider-small my-xl-0">
                                        <i class="fas fa-chevron-down text-color-primary position-absolute top-50pct left-50pct transform3dxy-n50"></i>
                                    </div>
                                    
                                    <div class="text-center mt-4">
                                        <a href="{{ route('password.request') }}" class="text-decoration-none">Zaboravili ste lozinku?</a>
                                    </div>
                                    
                                    <div class="text-center mt-2">
                                        <span class="text-2">Nemate nalog? </span>
                                        <a href="{{ route('register') }}" class="text-decoration-none font-weight-bold">Registrujte se</a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection