<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="min-h-screen bg-gradient-to-tr from-slate-950 via-slate-900 to-slate-800">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Reset Password - {{ trans('lang.Pub&Go_merchant_title') }}</title>
    <link rel="icon" type="image/png" href="{{ asset('/images/pgsymbol .svg') }}">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- FontAwesome -->
    <script src="https://kit.fontawesome.com/4b4effb0ed.js" crossorigin="anonymous"></script>
    
    <!-- Alpine.js -->
    <script defer src="https://unpkg.com/alpinejs@3.13.10/dist/cdn.min.js"></script>
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        /* Zapewnienie pełnego pokrycia tła gradientem - identyczne kolory jak Tailwind */
        html, body {
            font-family: 'Inter', sans-serif;
            min-height: 100vh;
            background: linear-gradient(to top right, #020617, #0f172a, #1e293b);
            background-attachment: fixed;
        }
        
        /* Input focus styles - identyczne jak w logowaniu */
        .input-focus:focus {
            border-color: #3B82F6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
            background-color: white !important;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-6 sm:p-8 md:p-4">
    <div class="bg-white rounded-lg shadow-xl p-6 sm:p-8 max-w-md w-full mx-4 sm:mx-0" x-data="resetPasswordComponent()">
        <div class="text-center mb-6">
            <img src="{{ asset('images/logo-color.svg') }}" class="h-32 w-auto mx-auto mb-8" alt="Pub & Go">
            <h1 class="text-2xl font-bold text-slate-800">{{ trans('lang.reset_password_title') }}</h1>
            <p class="text-sm text-slate-600 mt-2">{{ trans('lang.enter_new_password_instruction') }}</p>
        </div>

        @if (session('status'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('password.update') }}" class="space-y-4">
            @csrf
            <input type="hidden" name="token" value="{{ $token }}">

            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">{{ trans('lang.email_address') }}</label>
                <input id="email" type="email" name="email" value="{{ $email ?? old('email') }}" required readonly
                       class="w-full px-3 py-2 bg-blue-50 border border-gray-300 rounded-md text-base text-gray-600 cursor-not-allowed">
                @error('email')
                    <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
                @enderror
            </div>

            <div>
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">{{ trans('lang.new_password') }}</label>
                <input id="password" :type="isPasswordVisible ? 'text' : 'password'" name="password" required 
                       class="input-focus w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-base placeholder:text-slate-500 focus:outline-none focus:ring-0 transition-all duration-200"
                       placeholder="{{ trans('lang.enter_new_password') }}">
                @error('password')
                    <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
                @enderror
            </div>

            <div>
                <label for="password-confirm" class="block text-sm font-medium text-gray-700 mb-1">{{ trans('lang.confirm_password') }}</label>
                <input id="password-confirm" :type="isPasswordVisible ? 'text' : 'password'" name="password_confirmation" required 
                       class="input-focus w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-base placeholder:text-slate-500 focus:outline-none focus:ring-0 transition-all duration-200"
                       placeholder="{{ trans('lang.confirm_new_password') }}">
            </div>

            <!-- Show Password Checkbox -->
            <div class="flex items-center">
                <label class="inline-flex items-center cursor-pointer select-none">
                    <input type="checkbox" x-model="isPasswordVisible" class="peer" style="display: none !important;" />
                    <div class="w-5 h-5 border border-slate-300 rounded bg-white peer-checked:!bg-blue-500 peer-checked:!border-blue-500 flex items-center justify-center transition-colors">
                        <i class="fa-solid fa-check text-white text-xs" x-show="isPasswordVisible"></i>
                    </div>
                    <span class="ml-2 text-sm text-gray-600">{{ trans('lang.show_password') }}</span>
                </label>
            </div>

            <button type="submit" 
                    class="mb-2 w-full h-12 flex items-center justify-center bg-blue-500 hover:bg-blue-600 text-white text-base font-semibold rounded-md shadow-md uppercase focus:outline-none focus:ring-0 active:outline-none active:ring-0 transition-opacity" 
                    style="box-shadow: 1px 1px 2px rgba(0,0,0,0.3);">
                {{ trans('lang.reset_password_button') }}
            </button>
        </form>

        <div class="mt-6 text-center">
            <a href="{{ route('login') }}" class="text-sm text-slate-600 hover:text-blue-500 transition-colors hover:no-underline">
                {{ trans('lang.back_to_login') }}
            </a>
        </div>
    </div>

    <script>
        function resetPasswordComponent() {
            return {
                isPasswordVisible: false
            }
        }
    </script>
</body>
</html>