@php
    try {
        $businessName = \App\Models\Setting::where('key', 'business_name')->value('value') ?? 'RentTrack Pro';
        $businessLogo = \App\Models\Setting::where('key', 'business_logo')->value('value');
    } catch (\Exception $e) {
        $businessName = 'RentTrack Pro';
        $businessLogo = null;
    }

    $resolveFilePath = function ($relativePath) {
        if (empty($relativePath)) return null;
        if (file_exists(public_path($relativePath))) {
            return public_path($relativePath);
        }
        if (file_exists(base_path('public_html/' . $relativePath))) {
            return base_path('public_html/' . $relativePath);
        }
        return null;
    };

    $fallbackLogo = null;
    foreach (['logo.png', 'logo.jpg', 'logo.jpeg', 'logo.svg', 'logo.webp'] as $file) {
        $resolvedPath = $resolveFilePath($file);
        if ($resolvedPath) {
            $fallbackLogo = $file;
            break;
        }
    }

    $logoUrl = null;
    if ($businessLogo) {
        $resolvedLogo = $resolveFilePath($businessLogo);
        if ($resolvedLogo) {
            $logoUrl = asset($businessLogo) . '?v=' . filemtime($resolvedLogo);
        } else {
            $resolvedStorageLogo = $resolveFilePath('storage/' . $businessLogo);
            if ($resolvedStorageLogo) {
                $logoUrl = asset('storage/' . $businessLogo) . '?v=' . filemtime($resolvedStorageLogo);
            } else {
                $logoUrl = asset('storage/' . $businessLogo);
            }
        }
    } elseif ($fallbackLogo) {
        $resolvedFallback = $resolveFilePath($fallbackLogo);
        $logoUrl = asset($fallbackLogo) . '?v=' . filemtime($resolvedFallback);
    }
@endphp

<x-guest-layout>
    <!-- Brand Header -->
    <div style="text-align: center; margin-bottom: 24px;">
        @if($logoUrl)
            <img src="{{ $logoUrl }}" alt="{{ $businessName }} Logo" style="display: inline-block; height: 36px; width: auto; object-fit: contain; margin-bottom: 14px;">
        @else
            <div style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 14px; background: #0f172a;">
                <svg width="20" height="20" fill="none" stroke="white" viewBox="0 0 24 24" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                </svg>
            </div>
        @endif
        <h1 style="font-size: 20px; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; margin-bottom: 4px;">
            Welcome back
        </h1>
        <p style="font-size: 13px; color: #64748b; font-weight: 400;">
            Sign in to your {{ $businessName }} account
        </p>
    </div>

    <!-- Session Status -->
    @if (session('status'))
        <div style="margin-bottom: 14px; padding: 10px 14px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; color: #065f46; font-size: 12px; font-weight: 600;">
            {{ session('status') }}
        </div>
    @endif

    <form method="POST" action="{{ route('login') }}" x-data="{ showPass: false }">
        @csrf

        <!-- Email Field -->
        <div style="margin-bottom: 16px;">
            <label for="email" style="display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px;">
                Email address
            </label>
            <div style="position: relative;">
                <div style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none;">
                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                    </svg>
                </div>
                <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus autocomplete="username"
                    class="login-input" placeholder="name@company.com">
            </div>
            @error('email')
                <p style="color: #e11d48; font-size: 12px; margin-top: 6px; font-weight: 600; display: flex; align-items: center; gap: 4px;">
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                    </svg>
                    {{ $message }}
                </p>
            @enderror
        </div>

        <!-- Password Field -->
        <div style="margin-bottom: 20px;">
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;">
                <label for="password" style="font-size: 12px; font-weight: 600; color: #334155;">
                    Password
                </label>
                @if (Route::has('password.request'))
                    <a href="{{ route('password.request') }}" style="font-size: 12px; color: #10b981; font-weight: 600; text-decoration: none; transition: color 0.15s;"
                       onmouseover="this.style.color='#059669'" onmouseout="this.style.color='#10b981'">
                        Forgot password?
                    </a>
                @endif
            </div>
            <div style="position: relative;">
                <div style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none;">
                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                    </svg>
                </div>
                <input id="password" :type="showPass ? 'text' : 'password'" name="password" required autocomplete="current-password"
                    class="login-input" style="padding-right: 40px;" placeholder="Enter your password">
                <button type="button" @click="showPass = !showPass"
                    style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #94a3b8; padding: 2px; transition: color 0.15s;"
                    onmouseover="this.style.color='#475569'" onmouseout="this.style.color='#94a3b8'">
                    <svg x-show="!showPass" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                        <circle cx="12" cy="12" r="3" />
                    </svg>
                    <svg x-show="showPass" x-cloak width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
                    </svg>
                </button>
            </div>
            @error('password')
                <p style="color: #e11d48; font-size: 12px; margin-top: 6px; font-weight: 600; display: flex; align-items: center; gap: 4px;">
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                    </svg>
                    {{ $message }}
                </p>
            @enderror
        </div>

        <!-- Remember Me -->
        <div style="display: flex; align-items: center; margin-bottom: 20px;">
            <label for="remember_me" style="display: inline-flex; align-items: center; cursor: pointer; user-select: none;">
                <input id="remember_me" type="checkbox" name="remember"
                    style="width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid #cbd5e1; accent-color: #10b981; cursor: pointer;">
                <span style="margin-left: 8px; font-size: 12px; color: #64748b; font-weight: 500;">Remember me</span>
            </label>
        </div>

        <!-- Sign In Button -->
        <button type="submit" class="login-btn">
            Sign in
        </button>

        <!-- Secure badge -->
        <div style="margin-top: 16px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 5px;">
            <svg width="12" height="12" fill="none" stroke="#94a3b8" viewBox="0 0 24 24" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
            </svg>
            <span style="font-size: 10px; color: #94a3b8; font-weight: 500; letter-spacing: 0.02em;">Protected with SSL encryption</span>
        </div>
    </form>
</x-guest-layout>
