@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/login.css') }}">
@endpush

@section('content')
<section class="login-section">
    <div class="login-card">

        {{-- Header --}}
        <div class="login-header">
            <div class="login-logo-wrap">
                <div class="login-logo-box">
                    <img src="{{ asset('img/sehati-logo.png') }}" alt="Logo SEHATI" class="login-logo">
                </div>
                <span class="login-brand">SEHATI</span>
            </div>
            <p class="login-subtitle">Silakan masuk ke akun Anda</p>
        </div>

        {{-- Notifikasi error --}}
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        {{-- Notifikasi success (misal setelah reset password) --}}
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul style="margin:0; padding-left:15px;">
                    @foreach ($errors->all() as $error)
                        <li style="font-size:13px;">{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

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

            {{-- Email --}}
            <div>
                <label class="login-label" for="email">Email</label>
                <div class="login-input-wrap">
                    <i class="fa-solid fa-envelope login-input-icon"></i>
                    <input type="email" id="email" name="email" class="login-input" placeholder="email@example.com" autocomplete="email" required>
                </div>
            </div>

            {{-- Password --}}
            <div>
                <label class="login-label" for="password">Password</label>
                <div class="login-input-wrap">
                    <i class="fa-solid fa-lock login-input-icon"></i>
                    <input type="password" id="password" name="password" class="login-input" placeholder="Masukkan password" required>
                </div>
            </div>

            {{-- Remember & Forgot --}}
            <div class="login-row">
                <label class="login-remember">
                    <input type="checkbox" name="remember">
                    Ingat saya
                </label>
                <a href="{{ route('password.request') }}" class="login-forgot">Lupa password?</a>
            </div>

            {{-- Submit --}}
            <button type="submit" class="btn-login">Masuk Sekarang</button>

            {{-- Divider --}}
            <div class="login-divider">
                <span>Atau masuk dengan</span>
            </div>

            {{-- Social --}}
            <div class="d-flex justify-content-center">
                <a href="{{ route('auth.google') }}" class="btn-social">
                    <img src="https://cdn-icons-png.flaticon.com/512/300/300221.png" width="20" alt="Google">
                </a>
            </div>
        </form>

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

    </div>
</section>
@endsection