@extends('auth.app')

@section('title', 'Login - Bookrah')

@push('style')
<style>
    .auth-page-wrapper {
        min-height: 100vh;
        background: linear-gradient(135deg, #7367f0 0%, #5e50ee 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
    }

    .auth-card {
        background: #fff;
        border-radius: 1.5rem;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        max-width: 1000px;
        width: 100%;
        display: flex;
        flex-direction: row;
    }

    .auth-left {
        flex: 1;
        background: linear-gradient(135deg, #7367f0 0%, #5e50ee 100%);
        padding: 3rem;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .auth-left::before {
        content: '';
        position: absolute;
        top: -30%;
        right: -30%;
        width: 150%;
        height: 150%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: float 25s ease-in-out infinite;
    }

    .auth-left::after {
        content: '';
        position: absolute;
        bottom: -20%;
        left: -10%;
        width: 120%;
        height: 60%;
        background: radial-gradient(ellipse, rgba(115, 103, 240, 0.3) 0%, transparent 70%);
        animation: float 20s ease-in-out infinite reverse;
    }

    @keyframes float {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        50% { transform: translate(-20px, -20px) rotate(90deg); }
    }

    .auth-left-content {
        position: relative;
        z-index: 2;
    }

    .auth-left h1 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        line-height: 1.2;
        color: #fff;
    }

    .auth-left .tagline {
        font-size: 1.1rem;
        opacity: 0.95;
        margin-bottom: 2rem;
        line-height: 1.6;
        color: #fff;
    }

    .feature-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .feature-list li {
        padding: 0.75rem 0;
        display: flex;
        align-items: center;
        font-size: 0.95rem;
        color: #fff;
    }

    .feature-list li i {
        width: 24px;
        height: 24px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.75rem;
        font-size: 0.75rem;
        color: #fff;
    }

    .auth-right {
        flex: 1;
        padding: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #fff;
    }

    .auth-logo {
        text-align: center;
        margin-bottom: 2rem;
    }

    .auth-logo img {
        max-height: 50px;
        object-fit: contain;
    }

    .auth-title {
        font-size: 1.75rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 0.5rem;
        text-align: center;
    }

    .auth-subtitle {
        color: #6b7280;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 0.95rem;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        font-weight: 600;
        color: #374151;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
        display: block;
    }

    .form-control {
        border: 2px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        color: #111827;
    }

    .form-control:focus {
        border-color: #7367f0;
        box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.15);
        outline: none;
    }

    .input-group-text {
        background: #f9fafb;
        border: 2px solid #e5e7eb;
        border-left: none;
        border-radius: 0 0.75rem 0.75rem 0;
        cursor: pointer;
        color: #6b7280;
    }

    .input-group .form-control {
        border-right: none;
        border-radius: 0.75rem 0 0 0.75rem;
    }

    .btn-primary {
        background: linear-gradient(135deg, #7367f0 0%, #5e50ee 100%);
        border: none;
        border-radius: 0.75rem;
        padding: 0.875rem;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s ease;
        color: #fff;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(115, 103, 240, 0.35);
    }

    .forgot-link {
        color: #7367f0;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.875rem;
        transition: color 0.3s ease;
    }

    .forgot-link:hover {
        color: #5e50ee;
    }

    .custom-checkbox {
        display: flex;
        align-items: center;
    }

    .custom-checkbox input {
        width: 18px;
        height: 18px;
        margin-right: 0.5rem;
        cursor: pointer;
        accent-color: #7367f0;
    }

    .custom-checkbox label {
        margin: 0;
        cursor: pointer;
        font-size: 0.9rem;
        color: #6b7280;
    }

    @media (max-width: 768px) {
        .auth-card {
            flex-direction: column;
        }

        .auth-left {
            padding: 2rem;
        }

        .auth-left h1 {
            font-size: 2rem;
        }

        .auth-right {
            padding: 2rem;
        }
    }
</style>
@endpush

@section('content')
    <div class="auth-page-wrapper">
        <div class="auth-card">
            <!-- Left Section - Branding -->
            <div class="auth-left">
                <div class="auth-left-content">
                    <h1>Welcome Back!</h1>
                    <p class="tagline">Your trusted platform for discovering and booking the best services in your area.</p>

                    <ul class="feature-list">
                        <li>
                            <i class="fas fa-check"></i>
                            <span>Discover top-rated businesses</span>
                        </li>
                        <li>
                            <i class="fas fa-check"></i>
                            <span>Book appointments instantly</span>
                        </li>
                        <li>
                            <i class="fas fa-check"></i>
                            <span>Read authentic reviews</span>
                        </li>
                        <li>
                            <i class="fas fa-check"></i>
                            <span>Manage bookings easily</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Right Section - Login Form -->
            <div class="auth-right">
                <div class="auth-logo">
                    <img src="{{ asset($setting->logo ?? 'backend/app-assets/images/logo/logo.png') }}"
                        alt="Bookrah Logo">
                </div>

                <h2 class="auth-title">Sign In</h2>
                <p class="auth-subtitle">Enter your credentials to access your account</p>

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

                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email"
                               class="form-control"
                               id="email"
                               name="email"
                               placeholder="Enter your email"
                               value="{{ old('email') }}"
                               autofocus
                               required>
                        @if ($errors->has('email'))
                            <div class="text-danger mt-1" style="font-size: 0.875rem;">
                                {{ $errors->first('email') }}
                            </div>
                        @endif
                    </div>

                    <div class="form-group">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <label for="password" class="mb-0">Password</label>
                            @if (Route::has('password.request'))
                                <a href="{{ route('password.request') }}" class="forgot-link">
                                    Forgot Password?
                                </a>
                            @endif
                        </div>
                        <div class="input-group">
                            <input type="password"
                                   class="form-control"
                                   id="password"
                                   name="password"
                                   placeholder="Enter your password"
                                   required>
                            <div class="input-group-append">
                                <span class="input-group-text toggle-password">
                                    <i data-feather="eye"></i>
                                </span>
                            </div>
                        </div>
                        @if ($errors->has('password'))
                            <div class="text-danger mt-1" style="font-size: 0.875rem;">
                                {{ $errors->first('password') }}
                            </div>
                        @endif
                    </div>

                    <div class="form-group">
                        <div class="custom-checkbox">
                            <input type="checkbox" name="remember" id="remember-me">
                            <label for="remember-me">Remember me for 30 days</label>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary btn-block">
                        Sign In
                    </button>
                </form>

                @if (Route::has('register'))
                    <p class="text-center mt-3 mb-0" style="font-size: 0.9rem; color: #6c757d;">
                        Don't have an account?
                        <a href="{{ route('register') }}" class="forgot-link">Create one</a>
                    </p>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Toggle password visibility
        const togglePassword = document.querySelector('.toggle-password');
        const passwordInput = document.getElementById('password');

        if (togglePassword && passwordInput) {
            togglePassword.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);

                const icon = this.querySelector('i');
                if (type === 'text') {
                    icon.setAttribute('data-feather', 'eye-off');
                } else {
                    icon.setAttribute('data-feather', 'eye');
                }
                feather.replace();
            });
        }
    });
</script>
@endpush