@extends('layouts.frontend')

@section("title_page", "Login - Rusizi Veterinary")

@section('content')

<!--Start breadcrumb area-->
<section class="breadcrumb-area style2" style="background-image: url('{{ asset('images/resources/breadcrumb-bg-2.jpg') }}');">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="inner-content-box clearfix">
                    <div class="title-s2 text-center">
                        <span>Login</span>
                        <h1>Veterinary Login</h1>
                    </div>
                    <div class="breadcrumb-menu float-left">
                        <ul class="clearfix">
                            <li><a href="{{ url('/') }}">Home</a></li>
                            <li class="active">Veterinary Login</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End breadcrumb area-->

<!--Start login register area-->
<section class="login-register-area">
    <div class="container">
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                <div class="form">
                    <div class="shop-page-title">
                        <div class="title">Login <span>Now</span></div>
                    </div>

                    <!-- General error message (like invalid credentials) -->
                    @if(session('error'))
                        <div class="alert alert-danger">
                            <strong>Ooops !!:</strong> {{ session('error') }}
                        </div>
                    @endif

                    <div class="row">
                        <!-- Login Form -->
                        <form action="{{ route('login') }}" method="POST">
                            @csrf

                            <!-- Email Field -->
                            <div class="col-xl-12">
                                <div class="input-field">
                                    <input 
                                        type="email" 
                                        name="email" 
                                        id="email" 
                                        class="form-control @error('email') is-invalid @enderror" 
                                        value="{{ old('email') }}" 
                                        placeholder="Enter your email" 
                                        required
                                    >
                                    <div class="icon-holder">
                                        <i class="fa fa-envelope" aria-hidden="true"></i>
                                    </div>
                                </div>
                                @error('email')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Password Field -->
                            <div class="col-xl-12 mt-3">
                                <div class="input-field">
                                    <input 
                                        type="password" 
                                        name="password" 
                                        id="password" 
                                        class="form-control @error('password') is-invalid @enderror" 
                                        placeholder="Enter your password" 
                                        required
                                    >
                                    <div class="icon-holder">
                                        <i class="fa fa-unlock-alt" aria-hidden="true"></i>
                                    </div>
                                </div>
                                @error('password')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Remember Me & Submit -->
                            <div class="col-xl-12 mt-4">
                                <div class="row">
                                    <div class="col-xl-6 col-lg-6 col-sm-12">
                                        <button class="btn-one" type="submit">Login Now</button>
                                        <div class="remember-text mt-2">
                                            <div class="checkbox">
                                                <label>
                                                    <input name="remember" type="checkbox">
                                                    <span>Remember Me</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-6 text-end">
                                        <ul class="social-icon">
                                            <li class="login-with">
                                                <a href="{{ route('password.request') }}">Forget Password</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </form>
                        <!-- End Login Form -->
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>
<!--End login register area-->

@endsection