@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') }}">
            @csrf
            <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 {{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>

                        
                    <span class="input-icon" 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"> 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">
            <button class="social-btn">
                <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
            </button>
            <button class="social-btn">
                <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>
            <button class="social-btn">
                <svg class="social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#1877F2" d="M24,4C12.954,4,4,12.954,4,24c0,9.961,7.283,18.225,16.705,19.704V29.76H15.68V24h5.025v-4.358c0-4.957,2.948-7.697,7.467-7.697c2.164,0,4.427,0.386,4.427,0.386v4.869h-2.495c-2.457,0-3.224,1.526-3.224,3.09V24h5.483l-0.877,5.76h-4.606v13.944C36.717,42.225,44,33.961,44,24C44,12.954,35.046,4,24,4z"/><path fill="#FFF" d="M28.689,29.76l0.877-5.76h-5.483v-3.668c0-1.564,0.767-3.09,3.224-3.09h2.495V12.34c0,0-2.263-0.386-4.427-0.386c-4.519,0-7.467,2.74-7.467,7.697V24h-5.025v5.76h5.025v13.944C18.648,43.863,21.292,44,24,44c2.708,0,5.352-0.137,7.917-0.402V29.76H28.689z"/></svg>
                Continue with Facebook
            </button>
        </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>
@endsection