@extends('layouts.customer')

@section('title', __('Entrar — Lined'))

@section('content')

    <section class="min-h-screen flex items-center justify-center px-6 py-20">

        <div class="w-full max-w-md">

            {{-- Card --}}
            <div class="rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm p-8">

                {{-- Header --}}
                <div class="text-center mb-8">
                    <h1 class="font-heading font-bold text-white text-2xl mb-2">{{ __('Bem-vindo de volta') }}</h1>
                    <p class="text-gray-400 text-sm">{{ __('Entre na sua conta para continuar') }}</p>
                </div>

                {{-- Form --}}
                <form id="login-form" method="POST" action="{{ route('login.submit') }}" class="flex flex-col gap-5" onsubmit="handleLoginSubmit(this)">
                    @csrf

                    {{-- Email --}}
                    <div class="flex flex-col gap-1.5">
                        <label for="email" class="text-sm font-medium text-gray-300">{{ __('E-mail') }}</label>
                        <input id="email" type="email" name="email" value="{{ old('email') }}"
                            placeholder="you@example.com" required autocomplete="username"
                            class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none
                                   @error('email') border-red-500/60 @enderror">
                        @error('email')
                            <span class="text-red-400 text-xs">{{ $message }}</span>
                        @enderror
                        @if(session('email_unverified'))
                            <div class="flex items-center justify-between mt-0.5">
                                <span id="unverified-label" class="text-xs text-yellow-400">{{ __('E-mail não verificado.') }}</span>
                                <button type="button" id="resend-btn" onclick="resendVerification()"
                                    class="text-xs text-brand-green hover:text-brand-green-dark no-underline transition-colors bg-transparent border-0 cursor-pointer p-0">
                                    {{ __('Reenviar e-mail de verificação') }}
                                </button>
                            </div>
                        @endif
                    </div>

                    {{-- Password --}}
                    <div class="flex flex-col gap-1.5">
                        <div class="flex items-center justify-between">
                            <label for="password" class="text-sm font-medium text-gray-300">{{ __('Senha') }}</label>
                            <a href="{{ route('password.request') }}"
                                class="text-xs text-brand-green hover:text-brand-green-dark no-underline transition-colors">
                                {{ __('Esqueceu a senha?') }}
                            </a>
                        </div>
                        <div class="relative">
                            <input id="password" type="password" name="password" placeholder="••••••••" required autocomplete="current-password"
                                class="w-full px-4 py-3 pr-11 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none
                                       @error('password') border-red-500/60 @enderror">
                            <button type="button" onclick="togglePassword()"
                                class="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-gray-300 transition-colors bg-transparent border-0 cursor-pointer">
                                <svg id="eye-show" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                                </svg>
                                <svg id="eye-hide" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="hidden">
                                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/>
                                </svg>
                            </button>
                        </div>
                        @error('password')
                            <span class="text-red-400 text-xs">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Submit --}}
                    <button id="login-btn" type="submit"
                        class="w-full py-3 rounded-xl bg-brand-green text-white font-semibold text-sm hover:bg-brand-green-dark hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand-green/25 transition-all duration-300 cursor-pointer border-0 mt-1 flex items-center justify-center gap-2">
                        <span id="login-btn-text">{{ __('Entrar') }}</span>
                        <svg id="login-btn-spinner" class="hidden animate-spin size-4" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
                        </svg>
                    </button>

                </form>

                {{-- Divider --}}
                <div class="flex items-center gap-3 mt-5">
                    <div class="flex-1 h-px bg-white/10"></div>
                    <span class="text-gray-600 text-xs">{{ __('ou continue com') }}</span>
                    <div class="flex-1 h-px bg-white/10"></div>
                </div>

                {{-- Google --}}
                <a href="{{ route('auth.google') }}"
                    class="mt-4 w-full flex items-center justify-center gap-3 py-3 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 transition-all no-underline text-white text-sm font-medium">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
                        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                    </svg>
                    {{ __('Entrar com Google') }}
                </a>

                {{-- Footer --}}
                <p class="text-center text-gray-500 text-sm mt-6">
                    {{ __('Não tem uma conta?') }}
                    <a href="{{ route('register') }}"
                        class="text-brand-green hover:text-brand-green-dark no-underline font-medium transition-colors">
                        {{ __('Cadastre-se') }}
                    </a>
                </p>

            </div>

        </div>

    </section>

@endsection

@push('scripts')
<script>
    function togglePassword() {
        const input   = document.getElementById('password');
        const eyeShow = document.getElementById('eye-show');
        const eyeHide = document.getElementById('eye-hide');
        const visible = input.type === 'text';
        input.type = visible ? 'password' : 'text';
        eyeShow.classList.toggle('hidden', !visible);
        eyeHide.classList.toggle('hidden', visible);
    }

    @if(session('email_unverified'))
    async function resendVerification() {
        const btn = document.getElementById('resend-btn');
        btn.disabled = true;
        btn.textContent = '{{ __('Enviando...') }}';

        try {
            const res  = await fetch('{{ route('resend-verification-email') }}', {
                method:  'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                body:    JSON.stringify({ email: '{{ session('email_unverified') }}' }),
            });
            const data = await res.json();

            document.getElementById('unverified-label')?.remove();

            if (data.status === 'already_verified') {
                btn.textContent = '{{ __('E-mail já verificado. Faça login.') }}';
                btn.classList.replace('text-brand-green', 'text-gray-400');
            } else {
                btn.textContent = '{{ __('E-mail enviado! Verifique sua caixa de entrada.') }}';
                btn.classList.replace('text-brand-green', 'text-yellow-400');
            }
        } catch (_) {
            btn.textContent = '{{ __('Erro ao enviar. Tente novamente.') }}';
            btn.disabled = false;
        }
    }
    @endif

    // Aviso ao chegar do fluxo de reserva sem sessão de cliente.
    document.addEventListener('DOMContentLoaded', () => {
        const params = new URLSearchParams(window.location.search);
        if (params.get('reserva') === '1') {
            showToast("{{ __('Para reservar você precisa fazer login ou se cadastrar.') }}", "warning");
        }

        @if(session('password_reset'))
            showToast("{{ __('Senha redefinida com sucesso. Faça login com a nova senha.') }}", "success");
        @endif
    });

    function handleLoginSubmit(form) {
        const btn     = document.getElementById('login-btn');
        const text    = document.getElementById('login-btn-text');
        const spinner = document.getElementById('login-btn-spinner');

        btn.disabled = true;
        btn.classList.remove('hover:-translate-y-0.5', 'hover:shadow-lg', 'hover:shadow-brand-green/25', 'cursor-pointer');
        btn.classList.add('opacity-75', 'cursor-not-allowed');
        text.textContent = "{{ __('Entrando...') }}";
        spinner.classList.remove('hidden');
    }
</script>
@endpush