@extends($activeTemplate.'layouts.auth')

@section('content')
    @php
	    $authBackground = getContent('auth_page.content',true)->data_values;
    @endphp
    
    <div class="account-section glass-bg" style="background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://img.magnific.com/premium-photo/exciting-cricket-match_810293-111131.jpg?semt=ais_hybrid&w=740&q=80'); background-size: cover; background-position: center; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;">
        <div class="glass-card">
            <div class="inner">
                <div class="account-logo text-center mb-4">
                    <a href="{{route('home')}}">
                        <img src="{{ getImage(imagePath()['logoIcon']['path'] .'/logo.png') }}" alt="logo" style="max-width: 180px;">
                    </a>
                </div>
                
                <h4 class="text-center text-white mb-4">Login to Your Account</h4>
                
                <form class="account-form" action="{{ route('user.login')}}" method="POST" id="loginForm">
                    @csrf

                    <div class="form-group mb-3">
                        <label for="username" class="text-white mb-2">@lang('Username / Mobile / Email') <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text glass-icon"><i class="las la-user"></i></span>
                            <input type="text" class="form-control glass-input" name="username" id="username" value="{{ old('username') }}" placeholder="Enter username, mobile, or email" required>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="password" class="text-white mb-2">@lang('Password') <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text glass-icon"><i class="las la-lock"></i></span>
                            <input type="password" name="password" id="password" class="form-control glass-input" placeholder="Enter password" required>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <button type="submit" class="btn submit-btn w-100">@lang('Login Now')</button>
                    </div>

                    <div class="text-center mt-4">
                        <p class="text-white">@lang('Don\'t have an account?') <a href="{{ route('user.register') }}" class="text--base font-weight-bold">@lang('Register Now')</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('style')
<style>
    .glass-bg {
        background-attachment: fixed !important;
    }
    .glass-card {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 40px;
        width: 100%;
        max-width: 450px;
        box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
    }
    .glass-input {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        border-radius: 10px !important;
        padding: 12px 15px !important;
    }
    .glass-input::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }
    .glass-input:focus {
        background: rgba(255, 255, 255, 0.15) !important;
        border-color: #00d2ff !important;
        box-shadow: 0 0 10px rgba(0, 210, 255, 0.3) !important;
    }
    .glass-icon {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #00d2ff !important;
        border-radius: 10px 0 0 10px !important;
    }
    .send-otp-btn {
        background: linear-gradient(45deg, #00d2ff, #3a7bd5);
        border: none;
        color: white;
        padding: 12px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s;
    }
    .send-otp-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 210, 255, 0.4);
        color: white;
    }
    .submit-btn {
        background: linear-gradient(45deg, #f093fb, #f5576c);
        border: none;
        color: white;
        padding: 12px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s;
    }
    .submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(245, 87, 108, 0.4);
        color: white;
    }
    .text--base {
        color: #00d2ff !important;
        text-decoration: none;
    }
</style>
@endpush