@extends('layouts.app')

@section('content')

    <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: 700px;
            position: relative;
            overflow: hidden;
            border-radius: 32px 0 0 32px;
        }

        .login-right-panel {
            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;
            border: 2px solid #cacaca;
            color: #212529;
            box-shadow: none;
            background: #fff;
        }

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

        .form-control.custom-dark-input:focus {
            border-color: #60a5fa;
            color: #212529;
            background: #fff;
            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(0,0,0,0.08) !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>
<main class="main py-5 text-light" style="min-height:100vh; position:relative; overflow-x:hidden;">

    <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-11 col-xl-9">

                <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-user-plus me-1"></i> Join Our Platform
                                    </span>
                                </div>

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

                                <p class="mb-5 text-white-50 lead" style="font-size:1rem;">
                                    Register now to manage orders, save your details, track activity, and enjoy a faster 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-user-shield fa-lg"></i>
                                                </div>
                                                <div>
                                                    <h6 class="fw-semibold mb-1 text-white">Safe & Secure Account</h6>
                                                    <p class="mb-0 small text-white-50">Protected registration process</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-box-open fa-lg"></i>
                                                </div>
                                                <div>
                                                    <h6 class="fw-semibold mb-1 text-white">Manage Orders Easily</h6>
                                                    <p class="mb-0 small text-white-50">Track purchases and profile info</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">Fast Registration</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:700px; 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-id-card me-2"></i>
                                            <span class="small fw-semibold">Create Account</span>
                                        </div>
                                        <h2 class="fw-bold text-dark mb-2">Register Now</h2>
                                        <p class="text-secondary mb-0">Fill in your details to create your account</p>
                                    </div>

                                    @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="{{ url('/register') }}" method="post">
                                        @csrf

                                        <div class="mb-3">
                                            <label for="name" class="form-label fw-semibold text-dark mb-2">
                                                <i class="fas fa-user me-1 text-info"></i> Full Name
                                            </label>
                                            <input
                                                type="text"
                                                name="name"
                                                id="name"
                                                class="form-control form-control-lg custom-dark-input"
                                                placeholder="Enter your full name"
                                                value="{{ old('name') }}"
                                                required
                                            >
                                        </div>

                                        <div class="mb-3">
                                            <label for="phone" class="form-label fw-semibold text-dark mb-2">
                                                <i class="fas fa-phone-alt me-1 text-info"></i> Phone Number
                                            </label>
                                            <input
                                                type="text"
                                                name="phone"
                                                id="phone"
                                                class="form-control form-control-lg custom-dark-input"
                                                placeholder="Enter your phone number"
                                                required
                                                value="{{ old('phone') }}"
                                            >
                                        </div>
                                        <div class="mb-3">
                                            <label for="email" class="form-label fw-semibold text-dark mb-2">
                                                <i class="far fa-envelope me-1 text-info"></i> Email Address
                                            </label>
                                            <input
                                                type="email"
                                                name="email"
                                                id="email"
                                                class="form-control form-control-lg custom-dark-input"
                                                placeholder="hello@example.com"
                                                value="{{ old('email') }}"
                                                required
                                            >
                                        </div>


                                        <div class="mb-3">
                                            <label for="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="password"
                                                    class="form-control form-control-lg custom-dark-input"
                                                    placeholder="Create a password"
                                                    style="padding-right:50px;"
                                                    required
                                                >
                                                <i class="fas fa-eye-slash position-absolute toggle-password-icon" id="togglePassword"></i>
                                            </div>
                                        </div>

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

                                        <div class="mb-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="terms" id="terms" required>
                                                <label class="form-check-label text-secondary ms-2" for="terms">
                                                    I agree to the <a href="{{ url('/terms-conditions') }}" class="text-info text-decoration-none">Terms & Conditions</a>
                                                </label>
                                            </div>
                                        </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-user-plus me-2"></i> Create 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:#f8f9fa;">
                                                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">
                                                Already have an account?
                                                <a href="{{ url('/login') }}" class="fw-bold text-info text-decoration-none">
                                                    Login Here <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 Signup</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('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 toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
    const confirmPasswordField = document.getElementById('password_confirmation');

    if (toggleConfirmPassword && confirmPasswordField) {
        toggleConfirmPassword.addEventListener('click', function () {
            const type = confirmPasswordField.getAttribute('type') === 'password' ? 'text' : 'password';
            confirmPasswordField.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 registration 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