@extends('layouts.app')
@section('title', 'TemTechnik | Daxil ol - Hesabınıza Giriş')
@section('content')
<div class="flex justify-center items-center min-h-screen bg-gradient-to-br from-indigo-100 via-white to-indigo-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 py-8">
    <div class="w-full max-w-lg bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-10 border border-gray-100 dark:border-gray-700">
        <div class="flex flex-col items-center mb-8">
            <div class="w-16 h-16 rounded-full bg-orange-100 dark:bg-orange-900 flex items-center justify-center mb-3">
                <svg class="w-8 h-8 text-orange-500 dark:text-orange-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
            </div>
            <h2 class="text-3xl font-extrabold text-center text-gray-800 dark:text-gray-100 tracking-tight">{{ __('general.login') }}</h2>
        </div>
        @if ($errors->has('email') && $errors->first('email') === trans('auth.failed'))
            <div class="text-red-500 text-sm mb-4">{{ trans('auth.failed') }}</div>
        @endif
        <form method="POST" action="{{ route('login') }}">
            @csrf
            <div class="mb-4">
                <label for="email" class="block text-gray-700 dark:text-gray-300 mb-2">{{ __('general.email') }}</label>
                <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 border-orange-400 dark:bg-gray-700 dark:text-white">
                @error('email')
                    @if ($message !== trans('auth.failed'))
                        <span class="text-red-500 text-sm">{{ $message }}</span>
                    @endif
                @enderror
            </div>
            <div class="mb-4">
                <label for="password" class="block text-gray-700 dark:text-gray-300 mb-2">{{ __('general.password') }}</label>
                <div class="relative">
                    <input id="password" type="password" name="password" required class="w-full px-4 pr-10 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 border-orange-400 dark:bg-gray-700 dark:text-white">
                    <button type="button" onclick="togglePassword('password', this)" tabindex="-1" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-orange-500 focus:outline-none">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                @error('password')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
            </div>
            <div class="flex items-center justify-between mb-4">
                <label class="flex items-center">
                    <input type="checkbox" name="remember" class="form-checkbox">
                    <span class="ml-2 text-gray-600 dark:text-gray-300">{{ __('general.remember_me') }}</span>
                </label>
                <a href="{{ route('password.request') }}" class="text-sm text-orange-600 hover:text-orange-700 hover:underline">{{ __('general.forgot_password') }}</a>
            </div>
            <button type="submit" class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-4 rounded-lg shadow-lg mt-4 transition-all duration-200 transform hover:scale-105">{{ __('general.login') }}</button>
        </form>
        <div class="mt-8 text-center">
            <span class="text-gray-600 dark:text-gray-300">{{ __('general.dont_have_account') }}</span>
            <a href="{{ route('register') }}" class="text-orange-600 hover:text-orange-700 hover:underline ml-1 font-semibold">{{ __('general.register') }}</a>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function togglePassword(fieldId, btn) {
    const input = document.getElementById(fieldId);
    const icon = btn.querySelector('i');
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}
</script>
@endpush