@php
    if (request()->has('redirect')) {
        session(['url.intended' => request()->query('redirect')]);
    }
@endphp
<x-guest-layout>
    <x-jetstream.authentication-card>
        <x-slot name="logo">
            <x-jetstream.application-mark class="hidden md:block md:h-20 xl:h-28 w-auto md:mt-3" />
        </x-slot>

        @if(isMaintenanceMode() || session('maintenance_mode_active'))
            <div class="mb-6 rounded-md bg-gray-50 border border-gray-300 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-gray-800">
                            {{ __('Site under maintenance') }}
                        </h3>
                        <div class="mt-2 text-sm text-gray-600">
                            <p>
                                {{ __('The site is currently undergoing maintenance, and login is temporarily unavailable. Thank you for your patience.') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if ($errors->any())
            <div class="mb-4">
                @if(session('maintenance_mode_active'))
                    {{-- Show maintenance error without "Whoops!" heading --}}
                    <div class="rounded-md bg-red-50 border border-red-200 p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <div class="text-sm text-red-800">
                                    @foreach ($errors->all() as $error)
                                        <p>{{ $error }}</p>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    {{-- Show standard validation errors with "Whoops!" heading --}}
                    <x-jetstream.validation-errors />
                @endif
            </div>
        @endif

        @if (session('status'))
            <div class="mb-4 font-medium text-sm text-green-600">
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('login') }}">
            @csrf

            <div>
                <x-jetstream.label for="name" value="{!! __('Email or username') !!}" />
                <x-jetstream.input id="name" class="block mt-1 w-full" type="text" name="name" value="{{ old('name', request()->input('name')) }}" required autofocus autocomplete="username" />
            </div>

            <div class="mt-4" x-data="{ showPassword: false }">
                <x-jetstream.label for="password" value="{{ __('Password') }}" />
                <div class="relative">
                    <x-jetstream.input id="password" class="block mt-1 w-full pr-10" ::type="showPassword ? 'text' : 'password'" name="password" required autocomplete="current-password" />
                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
                        <button type="button" @click="showPassword = !showPassword" class="ring-opacity-70 hover:opacity-90 focus:outline-none focus:text-theme-primary">
                            <template x-if="showPassword">
                                <x-icon name="eye" class="h-5 w-5" />
                            </template>
                            <template x-if="!showPassword">
                                <x-icon name="eye-slash" class="h-5 w-5 opacity-70" />
                            </template>
                        </button>
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end mt-8 mb-8">
                @if (Route::has('password.request'))
                    <a class="underline text-sm text-theme-primary hover:text-theme-primary" href="{{ route('password.request') }}">
                        {{ __('Forgot your password?') }}
                    </a>
                @endif

                <x-jetstream.button class="ml-4">
                    {{ __('Log in') }}
                </x-jetstream.button>
            </div>
        </form>
    </x-jetstream.authentication-card>

    @push('scripts')
    <script>
        // Check if there's a redirect parameter in the URL
        const urlParams = new URLSearchParams(window.location.search);
        const redirectUrl = urlParams.get('redirect');

        if (redirectUrl) {
            // Send to server to store in session
            fetch('{{ route("store-intended-url") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ url: redirectUrl })
            });
        }
    </script>
    @endpush
</x-guest-layout>