@extends('front.layouts.app')

@section('content')
<section class="login-section">
    <div class="login-header">
        <h1>Welcome Back</h1>
        <p>Log in to connect with athletes, teams, and sponsors.</p>
    </div>
    <div class="login-card">
        @include('admin.components.messages')
        <form method="POST" action="{{ route('login') }}" id="loginForm">
            @csrf
            <input type="hidden" name="timezone" id="userTimezone" value="">
            <div class="form-group">
                <label class="form-label" for="email">Email Address <span class="required-asterisk">*</span></label>
                <div class="input-wrapper">
                    
                    <input id="email" type="email" placeholder="e.g. johnsmith@email.com" class="form-input {{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required autofocus>

                        
                    <span class="input-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18" fill="none">
                        <path d="M20.75 11.75V2.75C20.75 2.21957 20.5393 1.71086 20.1642 1.33579C19.7891 0.960714 19.2804 0.75 18.75 0.75H2.75C2.21957 0.75 1.71086 0.960714 1.33579 1.33579C0.960714 1.71086 0.75 2.21957 0.75 2.75V14.75C0.75 15.85 1.65 16.75 2.75 16.75H10.75M20.75 3.75L11.78 9.45C11.4713 9.64343 11.1143 9.74601 10.75 9.74601C10.3857 9.74601 10.0287 9.64343 9.72 9.45L0.75 3.75M14.75 15.75H20.75" stroke="#AEBAC7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>                        
                </div>
                @if ($errors->has('email'))
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $errors->first('email') }}</strong>
                    </span>
                @endif
            </div>

            <div class="form-group">
                <label class="form-label" for="password">Password <span class="required-asterisk">*</span></label>
                <div class="input-wrapper">                        
                    <input id="password" type="password" placeholder="e.g. Enter your password" class="form-input password-field {{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>

                        
                    <span class="input-icon password-toggle" style="cursor: pointer; pointer-events: auto;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                        <path d="M9.48351 3.826C11.8129 3.5484 14.1691 4.04082 16.1924 5.22805C18.2156 6.41528 19.7947 8.23208 20.6885 10.401C20.7718 10.6255 20.7718 10.8725 20.6885 11.097C20.321 11.988 19.8353 12.8255 19.2445 13.587M12.8345 12.908C12.2687 13.4545 11.5109 13.7569 10.7243 13.75C9.93771 13.7432 9.18527 13.4277 8.62905 12.8715C8.07282 12.3152 7.75732 11.5628 7.75048 10.7762C7.74365 9.98961 8.04603 9.23181 8.59251 8.666M16.2295 16.249C14.903 17.0348 13.423 17.526 11.8899 17.6894C10.3568 17.8528 8.80646 17.6845 7.34414 17.1959C5.88182 16.7073 4.5417 15.9099 3.41472 14.8577C2.28773 13.8056 1.40026 12.5234 0.812505 11.098C0.729165 10.8735 0.729165 10.6265 0.812505 10.402C1.69914 8.25186 3.25918 6.44725 5.25851 5.259M0.750505 0.75L20.7505 20.75" stroke="#AEBAC7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>                        
                </div>
                @if ($errors->has('password'))
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $errors->first('password') }}</strong>
                    </span>
                @endif
            </div>

            <div class="options-row">
                <label class="checkbox-container">
                    <input type="checkbox" class="password-toggle-checkbox"> Show Password
                </label>
                
                @if (Route::has('password.request'))
                    <a class="forgot-password-link" href="{{ route('password.request') }}">
                        {{ __('Forgot Password?') }}
                    </a>
                @endif
            </div>

            <button type="submit" class="blue-btn-lg">{{ __('Login') }}</button>
        </form>

        <div class="divider">
            <span>or continue with</span>
        </div>

        <div class="social-buttons">
            <a href="{{ route('social.login', 'google') }}" class="social-btn" style="display: flex; align-items: center; justify-content: center; text-decoration: none;">
                <svg class="social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/><path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/><path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/><path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"/></svg>
                Continue with Google
            </a>
            <button class="social-btn" disabled style="opacity: 0.5; cursor: not-allowed;">
                <svg class="social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-38.3-19.7-70-19.7C84 141 30.6 166.6 30.6 243.3c0 79.8 38.7 176.3 95.6 198.1 19.9 7.6 35.3 4.5 55.7-4 21.5-8.7 47.4-9.5 67-2 37.2 14.3 63.1 4.8 80.5-23.4 11.2-18 19.4-37.1 28.9-59.1-47.2-17.8-78.9-61.4-79.6-114.3zm-32.3-178.4c25.4-30.6 20.7-69.7-1.5-90.3-25.8 2.3-55.1 16-79.5 41.3-24.2 25-26.7 67.1 .8 89.6 30 1.9 54.3-16 80.2-40.6z"/></svg>
                Continue with Apple
            </button>
            <a href="{{ route('social.login', 'facebook') }}" class="social-btn" style="display: flex; align-items: center; justify-content: center; text-decoration: none;">
                <span class="me-3">
                    <svg viewBox="0 0 48 48" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>Facebook-color</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Color-" transform="translate(-200.000000, -160.000000)" fill="#4460A0"> <path d="M225.638355,208 L202.649232,208 C201.185673,208 200,206.813592 200,205.350603 L200,162.649211 C200,161.18585 201.185859,160 202.649232,160 L245.350955,160 C246.813955,160 248,161.18585 248,162.649211 L248,205.350603 C248,206.813778 246.813769,208 245.350955,208 L233.119305,208 L233.119305,189.411755 L239.358521,189.411755 L240.292755,182.167586 L233.119305,182.167586 L233.119305,177.542641 C233.119305,175.445287 233.701712,174.01601 236.70929,174.01601 L240.545311,174.014333 L240.545311,167.535091 C239.881886,167.446808 237.604784,167.24957 234.955552,167.24957 C229.424834,167.24957 225.638355,170.625526 225.638355,176.825209 L225.638355,182.167586 L219.383122,182.167586 L219.383122,189.411755 L225.638355,189.411755 L225.638355,208 L225.638355,208 Z" id="Facebook"> </path> </g> </g> </g></svg>
                </span>Continue with Facebook
            </a>
        </div>
        <div class="login-signup-links">
            <p class="signup-link">Don't have an account? <a href="{{ route('register') }}">Sign Up</a></p>
            <p class="contact-support">Need help? <a href="#">Contact Support</a></p>
        </div>
    </div>
</section>

@push('page_script')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Detect and set user timezone
    try {
        const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        const timezoneInput = document.getElementById('userTimezone');
        if (timezoneInput && timezone) {
            timezoneInput.value = timezone;
        }
    } catch (e) {
        console.warn('Could not detect timezone:', e);
    }

    const passwordField = document.querySelector('.password-field');
    const passwordToggleIcon = document.querySelector('.password-toggle');
    const passwordToggleCheckbox = document.querySelector('.password-toggle-checkbox');
    
    // Function to toggle password visibility
    function togglePasswordVisibility() {
        if (passwordField) {
            const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordField.setAttribute('type', type);
            
            // Sync checkbox state
            if (passwordToggleCheckbox) {
                passwordToggleCheckbox.checked = (type === 'text');
            }
        }
    }
    
    // Handle icon click
    if (passwordToggleIcon) {
        passwordToggleIcon.addEventListener('click', function() {
            togglePasswordVisibility();
        });
    }
    
    // Handle checkbox change
    if (passwordToggleCheckbox) {
        passwordToggleCheckbox.addEventListener('change', function() {
            togglePasswordVisibility();
        });
    }
});
</script>
@endpush
@endsection