@extends('layouts.app')

@section('content')
<style>
    .login-form {
        padding: 20px;
        border-bottom: 2px solid #ccc;
        text-align: left;
    }

    .login-form h2 {
        margin-bottom: 20px;
    }

    .login-form .form-group {
        position: relative;
        margin-bottom: 20px;
    }

    .login-form .form-group input {
        width: 100%;
        border: none;
        border-bottom: 2px solid #ccc;
        padding: 5px 0;
        font-size: 16px;
    }

    .login-form .form-group label {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 16px;
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .login-form .form-group input:focus + label,
    .login-form .form-group input:not(:placeholder-shown) + label {
        top: -20px;
        font-size: 12px;
        color: #333;
    }

    .login-form button[type="submit"] {
        width: 100%;
    }
</style>
<div class="container">
    <h2 style="text-align: left; font-family: roboto; color: #7743DB;">Monitoring dan Kontrol</h2>
    <h2 style="text-align: left; font-family: roboto; color: #7743DB;">Mesin Nutrisi Hidroponik</h2>
    <h6 style="text-align: left; font-family: roboto; color: #7743DB;">Aplikasi Website Untuk Memonitor dan Mengontrol</h6>
    <h6 style="text-align: left; font-family: roboto; color: #7743DB;">Nutrisi Dari Tanaman Hidroponik</h6>
    <div class="row justify-content-center">
        <div class="col-md-6"> <!-- Mengatur lebar form login -->
            <div class="login-form">
                <h2>{{ __('Login') }}</h2>

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

                    <div class="form-group">
                        <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                        <label for="email">{{ __('Email Address') }}</label>
                        @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
                        <label for="password">{{ __('Password') }}</label>
                        @error('password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                        <label class="form-check-label" for="remember">
                            {{ __('Remember Me') }}
                        </label>
                    </div>

                    <button type="submit" class="btn btn-primary">
                        {{ __('Login') }}
                    </button>

                    @if (Route::has('password.request'))
                        <a class="btn btn-link" href="{{ route('password.request') }}">
                            {{ __('Forgot Your Password?') }}
                        </a>
                    @endif
                </form>
            </div>
        </div>
        <div class="col-md-6"> <!-- Mengatur lebar gambar -->
            <img src="/images/hidro.png" alt="hifni">
        </div>
    </div>
</div>
@endsection
