@extends('layouts.header')

@section('content')
    <style>
        body, html {
            min-height: 100vh;
            margin: 0;
            font-family: 'Poppins', 'Nunito', Arial, sans-serif;
            /* Glassmorphism needs a vibrant background for the blur to show */
            background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 50%, #fbc2eb 100%);
        }
        .login-container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .logo-home img {
            width: 110px;
            height: 110px;
            object-fit: contain;
            margin-bottom: 0.2rem;
        }
        .login-card {
            /* Glassmorphism styles */
            background: rgba(255, 255, 255, 0.18);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
            border-radius: 28px;
            border: 1.5px solid rgba(255,255,255,0.35);
            padding: 1.3rem 2.2rem 1.3rem 2.2rem;
            max-width: 420px;
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            /* Fallback for browsers that don't support backdrop-filter */
            border: 1.5px solid rgba(255,255,255,0.35);
            /* Optional: add a subtle gradient overlay for extra depth */
            /* background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%); */
        }
        .get-started {
            font-size: 1rem;
            font-weight: 600;
            color: #4f46e5;
            margin-bottom: 0.2rem;
            letter-spacing: 1px;
            text-align: center;
        }
        h3.fs-6 {
            font-size: 0.89rem;
            color: #333;
            margin-bottom: 1.1rem;
            text-align: center;
            font-weight: 400;
        }
        .form-group {
            position: relative;
            margin-bottom: 1.1rem;
        }
        .form-control {
            border-radius: 12px;
            border: 1px solid #e0e7ef;
            padding: 1.05rem 1rem 0.45rem 1rem;
            font-size: 0.93rem;
            background: rgba(248,250,252,0.85);
            transition: border-color 0.2s, box-shadow 0.2s;
            width: 100%;
        }
        .form-control:focus {
            border-color: #6366f1;
            box-shadow: 0 0 0 2px #6366f133;
            background: #fff;
        }
        .form-group label {
            position: absolute;
            top: 1.02rem;
            left: 1rem;
            color: #888;
            font-size: 0.93rem;
            pointer-events: none;
            background: transparent;
            transition: all 0.18s cubic-bezier(.4,0,.2,1);
            padding: 0 0.2rem;
            font-weight: 400;
        }
        .form-control:focus + label,
        .form-control:not(:placeholder-shown) + label {
            top: 0.25rem;
            left: 0.8rem;
            font-size: 0.78rem;
            color: #4f46e5;
            background: #fff;
        }
        .custom-button1 {
            background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%);
            color: #fff;
            border: none;
            font-weight: 500;
            font-size: 0.97rem;
            padding: 0.6rem 0;
            border-radius: 10px;
            box-shadow: 0 2px 8px 0 #6366f122;
            transition: background 0.2s, transform 0.2s;
            width: 100%;
            letter-spacing: 0.5px;
        }
        .custom-button1:hover, .custom-button1:focus {
            background: linear-gradient(90deg, #4f46e5 0%, #6366f1 100%);
            transform: translateY(-1px) scale(1.02);
        }
        .alert-danger {
            border-radius: 10px;
            font-size: 0.92rem;
        }
        .form-check-input {
            margin-top: 0.1rem;
        }
        .form-check-label {
            font-size: 0.92rem;
            color: #555;
        }
        .bot-login {
            margin-bottom: 0.2rem;
        }
        @media (max-width: 600px) {
            .login-card {
                padding: 1.1rem 0.4rem;
                max-width: 98vw;
            }
            .logo-home img {
                width: 70px;
                height: 70px;
            }
            .get-started {
                font-size: 0.92rem;
            }
            h3.fs-6 {
                font-size: 0.82rem;
            }
            .form-group label, .form-control {
                font-size: 0.87rem;
            }
            .custom-button1, .form-check-label {
                font-size: 0.89rem;
            }
        }
    </style>

    <div class="login-container bg-home">
        
            <div class="login-card">
                <div class="card-body w-100">
                    <div class="logo-home d-flex justify-content-center" style="margin-bottom: 0.7rem; margin-top: 0;">
                        <img src="{{ asset('assets/Logo Softcomp - RGB-01.png') }}" alt="Deskripsi Gambar">
                    </div>
                    
                    <div class="card-text">
                        <form method="POST" action="{{ route('logins') }}" class="pt-2">
                            @if ($errors->any())
                                <div class="mx-2 alert alert-danger">
                                    <span>
                                        @foreach ($errors->all() as $error)
                                            {{ $error }}
                                        @endforeach
                                    </span>
                                </div>
                            @endif
                            @csrf
                            <div class="form-group">
                                <input type="text" name="username" class="form-control" id="inputusername" placeholder=" " @if (isset($_COOKIE['name'])) value="{{ $_COOKIE['name'] }}" @endif autofocus required>
                                <label for="inputusername">Username</label>
                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <input type="password" name="password" class="form-control" id="inputPassword" placeholder=" " @if (isset($_COOKIE['password'])) value="{{ $_COOKIE['password'] }}" @endif required>
                                <label for="inputPassword">Password</label>
                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="bot-login">
                                <div class="mb-3 form-check d-flex align-items-center gap-2">
                                    <input type="checkbox" class="form-check-input" id="check" name="remember" @if (isset($_COOKIE['name'])) checked @endif>
                                    <label class="form-check-label" for="check">Ingat Saya</label>
                                </div>
                            </div>
                            <div class="d-grid gap-2 col-12 mx-auto mb-2">
                                <button class="custom-button1" type="submit">Login</button>
                            </div>
                        </form>
                    </div>
                    <livewire:test.testpageexp />
                </div>
            </div>
    </div>
@endsection