@extends('layout_web.layouts')

@section('content')
    <section class="account-page-area section-gap-equal login">
        <div class="container position-relative">
            <div class="row g-5 justify-content-center">
                <div class="col-lg-5">
                    <div class="login-form-box">
                        <h3 class="title">Sign in</h3>
                        <p>Don’t have an account? <a href="{{ route('register') }}">Sign up</a></p>

                        <!-- Display Validation Errors -->
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form method="POST" action="{{ route('login') }}">
                            @csrf
                            <div class="form-group">
                                <label for="email">Email*</label>
                                <input type="email" name="email" id="email" placeholder="Email"
                                    value="{{ old('email') }}">
                                @error('email')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="password">Password*</label>
                                <input type="password" name="password" id="password" placeholder="Password">
                                @error('password')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                                <span class="password-show" id="togglePassword">
                                    <i class="icon-76"></i>
                                </span>
                            </div>
                            <div class="form-group chekbox-area">
                                <div class="edu-form-check">
                                    <input type="checkbox" id="remember_me" name="remember_me">
                                    <label for="remember_me">Remember Me</label>
                                </div>
                                <div class="contact-us-section">
                                    <p class="mt-4 contact-info d-flex align-items-center">
                                        <i class="mr-2 fas fa-phone-alt"></i>
                                        <a href="tel:{{ getConfigData('phone') }}" class="phone-number">
                                            {{ getConfigData('phone') }}
                                        </a>
                                    </p>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="edu-btn btn-medium">Sign in <i class="icon-4"></i></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <ul class="shape-group">
                <li class="shape-1 scene"><img data-depth="2" src="{{ asset('web/assets/images/about/shape-07.png') }}"
                        alt="Shape"></li>
                <li class="shape-2 scene"><img data-depth="-2" src="{{ asset('web/assets/images/about/shape-13.png') }}"
                        alt="Shape"></li>
                <li class="shape-3 scene"><img data-depth="2" src="{{ asset('web/assets/images/counterup/shape-02.png') }}"
                        alt="Shape">
                </li>
            </ul>
        </div>
    </section>
@endsection

@push('js')
    @include('web.auth.password_script')
@endpush