@extends('front.layouts.app')
@push('title', __('Login'))
@push('css')
<style>
    .login-container {
        min-height: 80vh;
        display: flex;
        align-items: center;
        padding: 2rem 0;
    }
    .login-card {
        border: none;
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    .login-header {
        background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
        color: white;
        padding: 2rem;
        text-align: center;
    }
    .login-logo {
        width: 70px;
        height: 70px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 1.8rem;
        color: #0d6efd;
    }
    .social-btn {
        border-radius: 10px;
        padding: 0.75rem;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    .social-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }
    .social-btn.google {
        background: #db4437;
        color: white;
        border: none;
    }
    .social-btn.google:hover {
        background: #c23321;
        color: white;
    }
    .divider {
        display: flex;
        align-items: center;
        margin: 1.5rem 0;
    }
    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #dee2e6;
    }
    .divider span {
        padding: 0 1rem;
        color: #6c757d;
        font-size: 0.875rem;
    }
    .signup-card {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 15px;
        padding: 1.5rem;
        text-align: center;
    }
</style>
@endpush
@section('content')
<div class="login-container">
    <div class="container">
        <div class="row justify-content-center g-4">
            <div class="col-md-6 col-lg-5">
                <div class="card login-card">
                    <div class="login-header">
                        <div class="login-logo">
                            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                                <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1v-1c0-1-1-4-6-4s-6 3-6 4v1a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12z"/>
                            </svg>
                        </div>
                        <h4 class="mb-1">{{ __('Welcome Back!') }}</h4>
                        <p class="mb-0 opacity-75 small">{{ __('Sign in to your account') }}</p>
                    </div>
                    <div class="card-body p-4">
                        @include('front.partials.login')
                        
                        @if(config('services.google.client_id'))
                        <div class="divider">
                            <span>{{ __('OR') }}</span>
                        </div>
                        <a href="{{ route('login.google') }}" class="btn social-btn google w-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-google mb-1 me-2" viewBox="0 0 16 16">
                                <path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 .945-.727 1.555-1.61 1.555h-5.667c-.887 0-1.61-.61-1.61-1.555 0-.955.723-1.884 1.61-1.884h5.667c.887 0 1.61.929 1.61 1.884a9.42 9.42 0 0 1-.139 1.626zM7.062 11.904a9.42 9.42 0 0 1-.827 0l-.122-.012c0-.955.723-1.884 1.61-1.884h.827c.887 0 1.61.929 1.61 1.884 0 .955-.723 1.884-1.61 1.884z"/>
                            </svg>
                            {{ __('Sign in with Google') }}
                        </a>
                        @endif
                    </div>
                </div>
                
                <div class="signup-card mt-3">
                    <p class="mb-2">{{ __('Do you not have an account yet?') }}</p>
                    <a href="{{ route('register') }}" class="btn btn-primary btn-sm">
                        {{ __('Sign up') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
@endpush