@extends('layouts.app')

@section('content')
<main class="main py-5 text-light" style="min-height:100vh; position:relative; overflow-x:hidden;">

    <style>
        @keyframes fadeInScale {
            0% { transform: translate(0, 0) scale(1); opacity: 0.25; }
            50% { transform: translate(30px, -20px) scale(1.05); opacity: 0.45; }
            100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
        }

        .login-wrapper-card {
            background: rgba(17, 24, 39, 0.92);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 32px;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
        }

        .login-left-panel {
            background: linear-gradient(145deg, #eefcff 0%, #312e81 55%, #222529 100%);
            min-height: 620px;
            position: relative;
            overflow: hidden;
            border-radius: 32px 0 0 32px;
        }

        .login-right-panel {
            /*background: linear-gradient(180deg, #111827 0%, #0f172a 100%);*/
            border-radius: 0 32px 32px 0;
        }

        .glass-box {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.10);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .form-control.custom-dark-input {
            height: 56px;
            border-radius: 18px;
            /*background: #0f172a;*/
            border: 2px solid #cacaca;
            /*color: #ffffff;*/
            box-shadow: none;
        }

        .form-control.custom-dark-input::placeholder {
            color: #94a3b8;
        }

        .form-control.custom-dark-input:focus {
            /*background: #0f172a;*/
            border-color: #60a5fa;
            /*color: #ffffff;*/
            box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.15);
        }

        .form-check-input {
            background-color: #0f172a;
            border-color: #475569;
        }

        .form-check-input:checked {
            background-color: #2563eb;
            border-color: #2563eb;
        }

        .dark-divider {
            border-color: rgba(255,255,255,0.10) !important;
        }

        .social-icon {
            width: 44px;
            height: 44px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.08);
        }

        .social-icon i {
            color: #cbd5e1;
            transition: all 0.3s ease;
        }

        .social-icon:hover {
            transform: translateY(-3px);
            background: linear-gradient(135deg, #2563eb, #7c3aed);
            border-color: transparent;
            box-shadow: 0 12px 25px rgba(37, 99, 235, 0.25);
        }

        .social-icon:hover i {
            color: #fff;
        }

        .dark-btn-gradient {
            height: 56px;
            border-radius: 18px;
            font-size: 1rem;
            border: 0;
            color: #fff;
            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
            box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
            transition: all 0.3s ease;
        }

        .dark-btn-gradient:hover {
            transform: translateY(-1px);
            color: #fff;
            box-shadow: 0 14px 28px rgba(37, 99, 235, 0.35);
        }

        .badge-soft-dark {
            background: rgba(37, 99, 235, 0.12);
            color: #93c5fd;
            border: 1px solid rgba(59, 130, 246, 0.20);
        }

        .toggle-password-icon {
            right: 18px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #94a3b8;
            z-index: 10;
        }

        .trust-text {
            color: rgba(255,255,255,0.72);
        }

        @media (max-width: 767.98px) {
            .login-left-panel {
                border-radius: 32px 32px 0 0;
                min-height: auto;
                padding-top: 3rem !important;
                padding-bottom: 3rem !important;
            }

            .login-right-panel {
                border-radius: 0 0 32px 32px;
            }
        }
    </style>

    <div class="container h-100 position-relative" style="z-index:2;">
        <div class="row justify-content-center align-items-center" style="min-height:85vh;">
            <div class="col-lg-10 col-xl-8">

                <div class="card border-0 overflow-hidden login-wrapper-card">
                    <div class="row g-0">

                        <!-- Left Side -->
                        <div class="col-md-6 d-none d-md-flex flex-column justify-content-center text-white p-5 login-left-panel">

                            <div class="position-absolute rounded-circle"
                                 style="top: -50px; right: -50px; width: 220px; height: 220px; background: rgba(255,255,255,0.08); animation: fadeInScale 7s infinite ease-in-out;">
                            </div>

                            <div class="position-absolute rounded-circle"
                                 style="bottom: -30px; left: -30px; width: 160px; height: 160px; background: rgba(255,255,255,0.06); animation: fadeInScale 8s infinite ease-in-out;">
                            </div>

                            <div class="position-relative" style="z-index:2;">
                                <div class="mb-4">
                                    <span class="badge bg-white text-dark px-3 py-2 rounded-pill mb-4 fw-semibold">
                                        <i class="fas fa-moon me-1"></i> Secure Member Area
                                    </span>
                                </div>

                                <h1 class="fw-bold mb-4 display-5" style="letter-spacing:-0.5px;">
                                    Sign in to <span style="background: linear-gradient(120deg, #ffffff, #bfdbfe); background-clip:text; -webkit-background-clip:text; color:transparent;">continue</span> your journey
                                </h1>

                                <p class="mb-5 text-white-50 lead" style="font-size:1rem;">
                                    Access your account, manage your profile, track your activity, and enjoy a smooth shopping experience.
                                </p>

                                <div class="row g-3 mb-4">
                                    <div class="col-12">
                                        <div class="p-3 rounded-4 glass-box">
                                            <div class="d-flex align-items-center gap-3">
                                                <div class="rounded-circle p-2 d-flex align-items-center justify-content-center"
                                                     style="width:45px; height:45px; background: rgba(255,255,255,0.18);">
                                                    <i class="fas fa-shield-alt fa-lg"></i>
                                                </div>
                                                <div>
                                                    <h6 class="fw-semibold mb-1 text-white">Bank-Level Security</h6>
                                                    <p class="mb-0 small text-white-50">256-bit SSL encryption</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="p-3 rounded-4 glass-box">
                                            <div class="d-flex align-items-center gap-3">
                                                <div class="rounded-circle p-2 d-flex align-items-center justify-content-center"
                                                     style="width:45px; height:45px; background: rgba(255,255,255,0.18);">
                                                    <i class="fas fa-chart-line fa-lg"></i>
                                                </div>
                                                <div>
                                                    <h6 class="fw-semibold mb-1 text-white">Smart Dashboard</h6>
                                                    <p class="mb-0 small text-white-50">Track orders & analytics</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex gap-3 pt-2 flex-wrap">
                                    <div class="d-flex align-items-center gap-2">
                                        <i class="fas fa-check-circle text-success"></i>
                                        <small class="text-white-50">Secure Authentication</small>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <i class="fas fa-check-circle text-success"></i>
                                        <small class="text-white-50">24/7 Support</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Right Side -->
                        <div class="col-md-6 text-dark login-right-panel bg-light">
                            <div class="p-4 p-md-5" style="min-height:620px; display:flex; align-items:center;">
                                <div class="w-100">

                                    <div class="text-center mb-4">
                                        <div class="badge-soft-dark rounded-pill d-inline-block px-4 py-2 mb-3">
                                            <i class="fas fa-user-shield me-2"></i>
                                            <span class="small fw-semibold">Member Access</span>
                                        </div>
                                        <h2 class="fw-bold text-dark mb-2">Welcome Back</h2>
                                        <p class="text-secondary mb-0">Enter your credentials to access your account</p>
                                    </div>

                                    {{-- Alerts --}}
                                    @if(session('success'))
                                        <div class="alert alert-success rounded-4 border-0 shadow-sm d-flex align-items-center">
                                            <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
                                        </div>
                                    @endif

                                    @if(session('error'))
                                        <div class="alert alert-danger rounded-4 border-0 shadow-sm d-flex align-items-center">
                                            <i class="fas fa-exclamation-triangle me-2"></i> {{ session('error') }}
                                        </div>
                                    @endif

                                    @if($errors->any())
                                        <div class="alert alert-danger rounded-4 border-0 shadow-sm">
                                            <ul class="mb-0 ps-3">
                                                @foreach($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif

                                    <form action="#" method="post">
                                        @csrf

                                        <div class="mb-4">
                                            <label for="login-email" class="form-label fw-semibold text-dark mb-2">
                                                <i class="far fa-phone me-1 text-info"></i> Phone Number
                                            </label>
                                            <input
                                                type="text"
                                                name="phone"
                                                id="login-phone"
                                                class="form-control form-control-lg custom-dark-input"
                                                 placeholder="Enter phone number"
                                                   value="{{ old('phone') }}"
                                                required
                                            >
                                        </div>

                                        <div class="mb-3">
                                            <label for="login-password" class="form-label fw-semibold text-dark mb-2">
                                                <i class="fas fa-key me-1 text-info"></i> Password
                                            </label>
                                            <div class="position-relative">
                                                <input
                                                    type="password"
                                                    name="password"
                                                    id="login-password"
                                                    class="form-control form-control-lg custom-dark-input"
                                                    placeholder="Enter your password"
                                                    style="padding-right:50px;"
                                                    required
                                                >
                                                <i class="fas fa-eye-slash position-absolute toggle-password-icon" id="togglePassword"></i>
                                            </div>
                                        </div>

                                        <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="remember" id="remember-me" style="cursor:pointer;">
                                                <label class="form-check-label text-secondary ms-2" for="remember-me">
                                                    Remember me
                                                </label>
                                            </div>

                                            <a href="{{ url('/forgot-password') }}" class="text-decoration-none fw-semibold text-info">
                                                Forgot Password?
                                            </a>
                                        </div>

                                        <div class="d-grid mb-4">
                                            <button type="submit" class="w-100 btn fw-semibold py-3 dark-btn-gradient">
                                                <i class="fas fa-arrow-right-to-bracket me-2"></i> Login to Account
                                            </button>
                                        </div>

                                        <div class="position-relative text-center mb-4">
                                            <hr class="dark-divider">
                                            <span class="position-absolute top-50 start-50 translate-middle px-3 small fw-semibold text-secondary"
                                                  style="background:#111827;">
                                                OR
                                            </span>
                                        </div>

                                        <div class="d-flex justify-content-center gap-3 mb-4 flex-wrap">
                                            <div class="social-icon d-flex align-items-center justify-content-center rounded-circle">
                                                <i class="fab fa-google fa-lg"></i>
                                            </div>
                                            <div class="social-icon d-flex align-items-center justify-content-center rounded-circle">
                                                <i class="fab fa-facebook-f fa-lg"></i>
                                            </div>
                                            <div class="social-icon d-flex align-items-center justify-content-center rounded-circle">
                                                <i class="fab fa-apple fa-lg"></i>
                                            </div>
                                            <div class="social-icon d-flex align-items-center justify-content-center rounded-circle">
                                                <i class="fab fa-github fa-lg"></i>
                                            </div>
                                        </div>

                                        <div class="text-center">
                                            <p class="mb-0 text-secondary">
                                                Don't have an account?
                                                <a href="{{ url('/register') }}" class="fw-bold text-info text-decoration-none">
                                                    Create Account <i class="fas fa-arrow-right ms-1"></i>
                                                </a>
                                            </p>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                        <!-- End Right Side -->

                    </div>
                </div>

                <div class="text-center mt-4">
                    <div class="d-flex justify-content-center gap-4 flex-wrap">
                        <small class="trust-text"><i class="fas fa-shield-alt me-1"></i> Secure Login</small>
                        <small class="trust-text"><i class="fas fa-lock me-1"></i> Privacy Protected</small>
                        <small class="trust-text"><i class="fas fa-headset me-1"></i> 24/7 Support</small>
                    </div>
                </div>

            </div>
        </div>
    </div>
</main>

<script>
    const togglePassword = document.getElementById('togglePassword');
    const passwordField = document.getElementById('login-password');

    if (togglePassword && passwordField) {
        togglePassword.addEventListener('click', function () {
            const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordField.setAttribute('type', type);
            this.classList.toggle('fa-eye');
            this.classList.toggle('fa-eye-slash');
        });
    }

    const socialIcons = document.querySelectorAll('.social-icon');
    socialIcons.forEach(icon => {
        icon.addEventListener('click', function () {
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-info rounded-4 border-0 shadow-sm mt-3';
            alertDiv.innerHTML = '<i class="fas fa-info-circle me-2"></i> Social login coming soon!';

            const formContainer = document.querySelector('.login-right-panel .w-100');
            const existingAlert = formContainer.querySelector('.alert-info');

            if (!existingAlert) {
                formContainer.insertBefore(alertDiv, formContainer.children[1]);
                setTimeout(() => alertDiv.remove(), 3000);
            }
        });
    });
</script>
@endsection