@extends('layouts.auth')
@section('title', 'Login')

@section('content')
<!-- 🔥 TAMBAHAN BACKGROUND BLUR - HANYA INI YANG DITAMBAH -->
<div style="
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
">
    <img src="{{ asset('storage/images/latarbelakang.png') }}" 
         alt="Background" 
         style="
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: blur(8px) brightness(0.5);
            transform: scale(1.1);
         ">
    <div style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 39, 68, 0.4);
    "></div>
</div>

<!-- 🔥 INI TETAP SAMA PERSIS - TIDAK ADA YANG DIUBAH -->
<div class="auth-card position-relative" style="z-index: 1;">

    <!-- Tombol Kembali -->
    <a href="http://pengajuanpbg.xyz/"
       class="position-absolute top-0 start-0 m-3 d-flex align-items-center justify-content-center"
       style="
            width:36px;
            height:36px;
            background:white;
            border-radius:50%;
            text-decoration:none;
            color:#374151;
            box-shadow:0 2px 8px rgba(0,0,0,0.08);
            z-index:10;
       ">
        <i class="bi bi-arrow-left" style="font-size:16px;"></i>
    </a>

    <div class="auth-header">
        <!-- LOGO PUPR -->
        <div class="logo-icon" style="width:80px; height:80px; margin:0 auto 15px; border-radius:50%; overflow:hidden; background:white; display:flex; align-items:center; justify-content:center; border:2px solid #e5e7eb;">
            <img src="{{ asset('storage/images/logo_pupr.png') }}" 
                 alt="Logo PUPR" 
                 style="width:70px; height:70px; object-fit:contain;">
        </div>
        <h4>PBG PUPR Payakumbuh</h4>
        <p>Sistem Pemeriksaan & Verifikasi Dokumen</p>
    </div>

    <div class="auth-body">
        <form method="POST" action="{{ route('login') }}" autocomplete="off">
            @csrf

            <div class="mb-3">
                <label class="form-label">Email</label>
                <input
                    type="email"
                    name="email"
                    class="form-control"
                    placeholder="Masukkan email"
                    required
                    autofocus
                    autocomplete="off">
            </div>

            <div class="mb-4">
                <label class="form-label">Password</label>
                <input
                    type="password"
                    name="password"
                    class="form-control"
                    placeholder="Masukkan password"
                    required
                    autocomplete="new-password">
            </div>

            <div class="mb-3">
                <div class="g-recaptcha"
                     data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}">
                </div>
            </div>

            @error('captcha')
                <small class="text-danger d-block mt-1">
                    {{ $message }}
                </small>
            @enderror

            <button type="submit" class="btn btn-auth">
                <i class="bi bi-box-arrow-in-right me-2"></i>
                Masuk
            </button>
        </form>
    </div>

    <div class="auth-footer">
        Belum punya akun?
        <a href="{{ route('register') }}">Daftar di sini</a>
    </div>
</div>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endsection