@extends('layouts.guest')

@section('title', 'User Login')

@section('styles')
@parent
<style>
    html,
    body {
        height: 100%;
        margin: 0;
        background-color: #000000;
        font-family: 'Segoe UI', sans-serif;
        color: #e0e0e0;
    }

    .login-wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        background-color: #000000;
        border-bottom: 1px solid #111;
    }

    .auth__logo {
        height: 40px;
    }

    .back-link {
        color: #21b2c2;
        font-size: 14px;
        text-decoration: none;
        transition: color 0.3s;
    }

    .back-link:hover {
        color: #ffffff;
        text-decoration: underline;
    }

    .login-container {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background-color: #000000;
    }

    .login-card {
        background-color: #000000;
        border: 1px solid #222;
        border-radius: 12px;
        padding: 32px;
        max-width: 420px;
        width: 100%;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
    }

    .card-title {
        text-align: center;
        margin-bottom: 24px;
        font-size: 22px;
        font-weight: bold;
        color: #21b2c2;
    }

    .form-control {
        background-color: #000000 !important;
        border: 1px solid #444 !important;
        color: #fff !important;
        transition: all 0.3s;
    }

    .form-control::placeholder {
        color: #888 !important;
    }

    .form-control:focus {
        border-color: #21b2c2 !important;
        box-shadow: 0 0 0 0.1rem rgba(33, 178, 194, 0.3) !important;
    }

    label {
        color: #ccc;
        margin-bottom: 6px;
        font-size: 14px;
    }

    .btn-primary {
        background-color: #21b2c2 !important;
        border: none;
        font-weight: bold;
        font-size: 16px;
        color: #000;
        transition: background-color 0.3s;
    }

    .btn-primary:hover {
        background-color: #1aa2b1 !important;
    }

    .forgot-pass a,
    .text-dark {
        color: #aaa !important;
        font-size: 14px;
        transition: color 0.3s;
    }

    .forgot-pass a:hover,
    .text-dark:hover {
        color: #ffffff !important;
    }

    .alert {
        background-color: #111;
        border-color: #21b2c2;
        color: #fff;
        font-size: 14px;
    }

    .social-login {
        margin-top: 24px;
        text-align: center;
    }

    .social-login .btn {
        background-color: #21b2c2;
        color: #000;
        border: none;
        margin-top: 12px;
        transition: background-color 0.3s;
    }

    .social-login .btn:hover {
        background-color: #1aa2b1;
    }

    @media (max-width: 500px) {
        .login-card {
            padding: 24px;
        }

        .top-bar {
            padding: 14px 16px;
        }

        .card-title {
            font-size: 20px;
        }
    }
</style>

@endsection

@section('content')
<div class="login-wrapper">
    <!-- Top Bar -->
    <div class="top-bar">
        <a href="/">
            <img src="{{ asset('storage/app/public/photos/' . $settings->logo) }}" alt="Logo" class="auth__logo">
        </a>
        <a href="/" class="back-link">Back to homepage</a>
    </div>

    <!-- Login Content -->
    <div class="login-container">
        <div class="login-card">

            {{-- Alert --}}
            @if(Session::has('status'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('status') }}
                <button type="button" class="close text-white" data-dismiss="alert">&times;</button>
            </div>
            @endif

            {{-- Validation Errors --}}
            @if ($errors->any())
            <div class="alert alert-danger">
                <button type="button" class="close text-white" data-dismiss="alert">&times;</button>
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <h4 class="card-title">Log in to your account</h4>

            <form method="POST" action="{{ route('login') }}">
                @csrf

                <div class="form-group">
                    <label for="email">Email address <span class="text-danger">*</span></label>
                    <input type="email" name="email" id="email" class="form-control" placeholder="name@example.com" value="{{ old('email') }}" required>
                </div>

                <div class="form-group">
                    <label for="password">Password <span class="text-danger">*</span></label>
                    <input type="password" name="password" id="password" class="form-control" placeholder="Enter password" required>
                </div>

                <div class="form-group d-flex justify-content-between align-items-center">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="remember" name="remember">
                        <label class="custom-control-label" for="remember">Remember me</label>
                    </div>
                    <div class="forgot-pass">
                        <a href="{{ route('password.request') }}">Forgot password?</a>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary btn-block mt-3">Log In</button>

                @if($settings->enable_social_login == "yes")
                <div class="social-login">
                    <h6 class="mt-4">Or login with</h6>
                    <a href="{{ route('social.redirect', ['social' => 'google']) }}" class="btn btn-block">
                        <i class="mdi mdi-google text-danger"></i> Google
                    </a>
                </div>
                @endif

                <div class="text-center mt-4">
                    <p><small>Don't have an account?</small>
                        <a href="{{ route('register') }}" class="text-dark font-weight-bold">Sign Up</a>
                    </p>
                    <p class="mt-4 mb-0">
                        <small class="text-dark">&copy; {{ date('Y') }} {{ $settings->site_name }}. All rights reserved.</small>
                    </p>
                </div>
            </form>

        </div>
    </div>
</div>
@endsection

@section('scripts')
@parent
@endsection