<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - IGFC</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: #f3f4f6;
            min-height: 100vh;
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        .hero-section {
            display: none;
            background: linear-gradient(to bottom right, #000000ff, #000000ff, #fbd10b);
            position: relative;
            overflow: hidden;
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background-color: black;
            opacity: 0.4;
        }

        .hero-content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding: 0 3rem;
        }

        /* Hero Image Slider */
        .hero-image-container {
            margin-bottom: 3rem;
            position: relative;
            width: 100%;
            max-width: 400px;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-image {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 16px;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .hero-image.active {
            opacity: 1;
        }

        /* Hero Title Slider */
        .hero-title-container {
            position: relative;
            min-height: 180px;
            width: 100%;
            margin-bottom: 1.5rem;
        }

        .hero-slide {
            position: absolute;
            width: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            text-align: center;
        }

        .hero-slide.active {
            opacity: 1;
        }

        .hero-title {
            font-size: 3rem;
            font-weight: bold;
            color: white;
            text-align: center;
            margin-bottom: 1rem;
        }

        .hero-subtitle {
            font-size: 3rem;
            font-weight: bold;
            color: white;
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .hero-text {
            color: #9ca3af;
            text-align: center;
            max-width: 28rem;
        }

        .pagination-dots {
            display: flex;
            gap: 0.5rem;
            margin-top: 3rem;
        }

        .dot {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 9999px;
        }

        .dot-active {
            background-color: white;
        }

        .dot-inactive {
            background-color: #4b5563;
        }

        /* Right Login Section */
        .login-section {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            background-color: white;
        }

        .login-container {
            width: 100%;
            max-width: 28rem;
        }

        /* Logo */
        .logo-container {
            display: flex;
            justify-content: center;
            margin-bottom: 3rem;
        }

        .logo-img {
            width: 150px;
            height: 80px;
        }

        .signup-link {
            text-align: center;
            margin-bottom: 2rem;
        }

        .signup-text {
            color: #6b7280;
            font-size: 0.875rem;
        }

        .signup-button {
            color: #111827;
            font-weight: 600;
            font-size: 0.875rem;
            text-decoration: underline;
        }

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

        .welcome-title {
            font-size: 1.875rem;
            font-weight: bold;
            color: #111827;
            margin-bottom: 0.5rem;
        }

        .welcome-subtitle {
            color: #6b7280;
            font-size: 0.875rem;
        }

        .divider {
            position: relative;
            margin-bottom: 1.5rem;
        }

        .divider-line {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
        }

        .divider-border {
            width: 100%;
            border-top: 1px solid #d1d5db;
        }

        .divider-text-container {
            position: relative;
            display: flex;
            justify-content: center;
            font-size: 0.875rem;
        }

        .divider-text {
            padding: 0 1rem;
            background-color: white;
            color: #6b7280;
        }

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

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

        .form-input {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid #d1d5db;
            border-radius: 0.5rem;
            outline: none;
            transition: all 0.2s;
        }

        .form-input:focus {
            ring: 2px;
            ring-color: #fbd10b;
            border-color: transparent;
        }

        .password-container {
            position: relative;
        }

        .password-toggle {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
        }

        .password-toggle:hover {
            color: #4b5563;
        }

        .submit-button {
            width: 100%;
            background: linear-gradient(to right, #fbd10b, #fbd10b);
            color: white;
            font-weight: 600;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 10px 25px rgba(251, 191, 36, 0.3);
            margin-bottom: 1rem;
        }

        .submit-button:hover {
            background: linear-gradient(to right, #fbd10b, #fbd10b);
            box-shadow: 0 15px 30px rgba(251, 191, 36, 0.4);
        }

        .forgot-password {
            text-align: center;
        }

        .forgot-link {
            font-size: 0.875rem;
            color: #374151;
            text-decoration: underline;
        }

        .forgot-link:hover {
            color: #111827;
        }

        .footer {
            margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.75rem;
            color: #6b7280;
        }

        .footer-links {
            display: flex;
            gap: 1rem;
        }

        .footer-link {
            color: #6b7280;
            text-decoration: none;
        }

        .footer-link:hover {
            color: #374151;
        }

        @media (min-width: 1024px) {
            .hero-section {
                display: flex;
                width: 50%;
            }

            .login-section {
                width: 50%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Left Side - Hero Section -->
        <div class="hero-section">
            <div class="hero-overlay"></div>
            
            <!-- Content -->
            <div class="hero-content">
                <!-- Hero Image Slider -->
                <div class="hero-image-container">
                    <img src="https://i.postimg.cc/fb7zn85f/Generated-Image-November-02-2025-8-31AM.png" alt="Gym Training" class="hero-image active" data-slide="0" />
                    <img src="https://i.postimg.cc/yNh14Lnm/Generated-Image-November-02-2025-8-38AM.png" alt="Fitness Tracking" class="hero-image" data-slide="1" />
                    <img src="https://i.postimg.cc/1RdZTxPL/Generated-Image-November-02-2025-8-39AM.png" alt="Gym Management" class="hero-image" data-slide="2" />
                    <img src="https://i.postimg.cc/1RdZTxP2/Generated-Image-November-02-2025-8-43AM.png" alt="Fitness Goals" class="hero-image" data-slide="3" />
                </div>

                <!-- Hero Title Slider -->
                <div class="hero-title-container">
                    <div class="hero-slide active" data-slide="0">
                        <h1 class="hero-title">
                            Your <span style="color: #9ca3af;">Gym,</span>
                        </h1>
                        <h2 class="hero-subtitle">
                            Smarter & <span style="color: #9ca3af;">Faster</span>
                        </h2>
                    </div>
                    
                    <div class="hero-slide" data-slide="1">
                        <h1 class="hero-title">
                            Track <span style="color: #9ca3af;">Progress,</span>
                        </h1>
                        <h2 class="hero-subtitle">
                            Achieve <span style="color: #9ca3af;">Goals</span>
                        </h2>
                    </div>
                    
                    <div class="hero-slide" data-slide="2">
                        <h1 class="hero-title">
                            Manage <span style="color: #9ca3af;">Members,</span>
                        </h1>
                        <h2 class="hero-subtitle">
                            Grow <span style="color: #9ca3af;">Business</span>
                        </h2>
                    </div>

                    <div class="hero-slide" data-slide="3">
                        <h1 class="hero-title">
                            Empower <span style="color: #9ca3af;">Fitness,</span>
                        </h1>
                        <h2 class="hero-subtitle">
                            Transform <span style="color: #9ca3af;">Lives</span>
                        </h2>
                    </div>
                </div>
                
                <p class="hero-text">
                   Manage members, track progress, and streamline your fitness business effortlessly.
                </p>

                <!-- Pagination Dots -->
                <div class="pagination-dots">
                    <div class="dot dot-active"></div>
                    <div class="dot dot-inactive"></div>
                    <div class="dot dot-inactive"></div>
                    <div class="dot dot-inactive"></div>
                </div>
            </div>
        </div>

        <!-- Right Side - Login Form -->
        <div class="login-section">
            <div class="login-container">
                <!-- Logo -->
                <div class="logo-container">
                    <img src="https://i.postimg.cc/9Q7X1m7B/For-softwares-black.png" alt="Logo" class="logo-img" />
                </div>

                <!-- Welcome Text -->
                <div class="welcome-text">
                    <h2 class="welcome-title">Welcome back to Iron Ground!</h2>
                    <p class="welcome-subtitle">Please enter your details to sign in your account</p>
                </div>

                <!-- Divider -->
                <div class="divider">
                    <div class="divider-line">
                        <div class="divider-border"></div>
                    </div>
                    <div class="divider-text-container">
                        <span class="divider-text">Sign in</span>
                    </div>
                </div>

                <!-- Login Form -->
                <form method="POST" action="#">
                    <!-- Email Address -->
                    <div class="form-group">
                        <label for="email" class="form-label">Email</label>
                        <input 
                            id="email" 
                            type="email" 
                            name="email" 
                            placeholder="yourname@mail.com"
                            required 
                            autofocus 
                            autocomplete="username"
                            class="form-input"
                        />
                    </div>

                    <!-- Password -->
                    <div class="form-group" style="margin-bottom: 1.5rem;">
                        <label for="password" class="form-label">Password</label>
                        <div class="password-container">
                            <input 
                                id="password" 
                                type="password" 
                                name="password"
                                placeholder="minimum 6 character"
                                required 
                                autocomplete="current-password"
                                class="form-input"
                            />
                            <button type="button" onclick="togglePassword()" class="password-toggle">
                                <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                            </button>
                        </div>
                    </div>

                    <!-- Sign In Button -->
                  <form action="{{ route('login') }}" method="POST">
    @csrf

    <!-- your inputs here -->

    <button type="submit" class="submit-button">
        Sign In &rarr;
    </button>
</form>


                    <!-- Sign Up Link -->
                <div class="signup-link">
                    <span class="signup-text">Don't have an account? </span>
                    <a href="#" class="signup-button">Sign Up</a>
                </div>

                    <!-- Forgot Password -->
                    <div class="forgot-password">
                        <a href="#" class="forgot-link">
                            Forgot password?
                        </a>
                    </div>
                </form>

                <!-- Footer -->
                <div class="footer">
                    <span>© 2024 Iron Ground Fitness Club</span>
                    <div class="footer-links">
                        <a href="#" class="footer-link">Privacy Policy</a>
                        <a href="#" class="footer-link">Support</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function togglePassword() {
            const passwordInput = document.getElementById('password');
            passwordInput.type = passwordInput.type === 'password' ? 'text' : 'password';
        }

        // Hero Slider
        let currentSlide = 0;
        const totalSlides = 4;

        function changeSlide() {
            // Remove active class from current slides
            document.querySelectorAll('.hero-image').forEach(img => img.classList.remove('active'));
            document.querySelectorAll('.hero-slide').forEach(slide => slide.classList.remove('active'));
            
            // Update current slide
            currentSlide = (currentSlide + 1) % totalSlides;
            
            // Add active class to new slides
            document.querySelector(`.hero-image[data-slide="${currentSlide}"]`).classList.add('active');
            document.querySelector(`.hero-slide[data-slide="${currentSlide}"]`).classList.add('active');
            
            // Update pagination dots
            document.querySelectorAll('.pagination-dots .dot').forEach((dot, index) => {
                if (index === currentSlide) {
                    dot.classList.remove('dot-inactive');
                    dot.classList.add('dot-active');
                } else {
                    dot.classList.remove('dot-active');
                    dot.classList.add('dot-inactive');
                }
            });
        }

        // Auto-change slides every 2 seconds
        setInterval(changeSlide, 2000);
    </script>
</body>
</html>