@extends('layouts.master')
@section('body_id', 'login_page')
@section('content')

    <section class="breadcrumb_main_area margin-bottom-80">
        <div class="container-fluid">
            <div class="row">
                <div class="breadcrumb_main nice_title">
                    <h2>User Login</h2>
                </div>
            </div>
        </div>
    </section>

    <section class="hotel_booking_area margin-bottom-80">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-8 col-lg-offset-3 col-md-offset-3 col-sm-offset-2">
                    <div class="hotel_booking margin-top-45">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <div class="room_book border-right-dark-1 margin-bottom-30" style="padding-bottom:15px; border-bottom: 1px solid #ECECEC;">
                                    <h6>Login</h6>
                                    <p>Access your account</p>
                                </div>
                            </div>
                        </div>
                        
                        @if(session('success'))
                            <div class="alert alert-success" style="margin-bottom: 20px; background-color: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; padding: 12px; border-radius: 6px; font-size: 14px;">
                                {{ session('success') }}
                            </div>
                        @endif

                        @if($errors->any())
                            <div class="alert alert-danger" style="margin-bottom: 20px;">
                                {{ $errors->first() }}
                            </div>
                        @endif

                        <form action="{{ route('login.post') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="form-group col-lg-12 col-md-12 col-sm-12 icon_arrow">
                                    <label for="email" style="font-weight:bold; margin-bottom: 5px;">Email Address</label>
                                    <div class="input-group">
                                        <input type="email" class="form-control" id="email" name="email" value="{{ old('email') }}" required placeholder="user@example.com">
                                    </div>
                                </div>
                                
                                <div class="form-group col-lg-12 col-md-12 col-sm-12 icon_arrow" style="margin-top: 15px;">
                                    <label for="password" style="font-weight:bold; margin-bottom: 5px;">Password</label>
                                    <div class="input-group">
                                        <input type="password" class="form-control" id="password" name="password" required placeholder="Enter password">
                                    </div>
                                    
                                    <div class="clearfix" style="margin-top: 8px; text-align: right;">
                                        <a href="{{ route('password.request') }}" class="forgot-password-link">Forgot Password?</a>
                                    </div>
                                </div>
                                
                                <div class="col-lg-12 col-md-12">
                                    <div class="booking_next_btn padding-top-30 margin-top-20 clearfix border-top-whitesmoke">
                                        <button type="submit" class="btn btn-warning btn-sm floatright">Login to Account</button>
                                        <p style="margin-top:10px; float:left;">Don't have an account? <br><a href="{{ route('register') }}" style="color:#C6A87C; font-weight:bold; text-decoration: underline;">Register Here</a></p>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        .forgot-password-link {
            color: #C6A87C; 
            font-size: 13px; 
            font-weight: 600; 
            text-decoration: none;
            transition: all 0.2s ease-in-out;
            border-bottom: 1px dashed transparent;
        }
        .forgot-password-link:hover {
            color: #a38458;
            text-decoration: none;
            border-bottom-color: #a38458;
        }
    </style>

@endsection