@extends('layouts.app')

@section('content')
<div class="vh-100 d-flex align-items-center justify-content-center"
     style="background-color: #f0fdf4;"> <div class="row align-items-stretch justify-content-center text-center shadow-2xl rounded-xl overflow-hidden"
         style="max-width: 1050px; width: 90%; background-color: #ffffff; border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); margin: 0 auto;">

        <div class="col-md-5 d-none d-md-flex align-items-center justify-content-center p-5"
             style="background: linear-gradient(135deg, #16a34a, #4ade80); color: white; border-top-left-radius: 16px; border-bottom-left-radius: 16px;">
            <div class="text-center px-4">
                <div class="mb-4">
                    <i class="bi bi-star-fill display-4" style="font-size: 3.5rem;"></i>
                </div>
                <h1 class="display-6 fw-bold mb-3">NYOTA Management System</h1>
                <p class="fs-5 opacity-80 mb-0">Login to securely access the platform.</p>
            </div>
        </div>

        <div class="col-md-7 d-flex align-items-center justify-content-center p-5 p-md-5 p-lg-6"
             style="background-color: #ffffff; min-height: 500px;">
            <div class="card border-0 p-4 rounded-lg w-100"
                 style="max-width: 400px; background-color: #ffffff;">

                <h3 class="text-center mb-1 fw-bolder" style="color: #16a34a;">Welcome Back</h3>
                <p class="text-center text-muted mb-4">Sign in to Nyota Management</p>

                @if ($errors->any())
                    <div class="alert alert-danger p-2 small">
                        <ul class="mb-0 list-unstyled">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

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

                    <div class="mb-4">
                        <input type="email" class="form-control form-control-lg rounded-3 border-light-subtle shadow-sm"
                               name="email" value="{{ old('email') }}" placeholder="Email Address" required autofocus
                               style="background-color: #f0fdf4; height: 50px;">
                    </div>

                    <div class="mb-4">
                        <input type="password" class="form-control form-control-lg rounded-3 border-light-subtle shadow-sm"
                               name="password" placeholder="Password" required
                               style="background-color: #f0fdf4; height: 50px;">
                    </div>

                    <div class="d-grid mb-4">
                        <button type="submit" class="btn btn-success btn-lg rounded-3 fw-semibold shadow-hover"
                                style="transition: all 0.3s; background-color: #16a34a; border-color: #16a34a; padding: 0.75rem 0;">
                            Secure Login
                        </button>
                    </div>

                    <div class="d-flex justify-content-between align-items-center small mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="rememberCheck">
                            <label class="form-check-label text-muted" for="rememberCheck">
                                Remember Me
                            </label>
                        </div>
                        <!-- <a href="#" class="text-decoration-none small" style="color: #16a34a;">Forgot Password?</a> -->
                    </div>

                    <p class="text-center mt-3 mb-0 small text-muted">
                        Don’t have an account?
                        <a href="{{ route('register.form') }}" class="fw-bold text-decoration-none" style="color: #16a34a;">Register Here</a>
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
/* Custom Styles for Professional Look (Green Palette) */

/* Container Shadow - Subtle but present */
.shadow-2xl {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* Input Focus */
input.form-control:focus {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 0.25rem rgba(22, 163, 74, 0.25); /* Focus ring effect */
    background-color: #ffffff !important;
    outline: none;
}

/* Button hover - New shadow effect */
.btn-success:hover, .shadow-hover:hover {
    background-color: #15803d !important; /* Slightly darker green on hover */
    border-color: #15803d !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 15px rgba(22, 163, 74, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Responsive fix - Adjusted border radius for mobile */
@media (max-width: 767px) {
    .col-md-5.d-none.d-md-flex {
        display: none !important;
    }
    .row {
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    .col-md-7 {
        border-radius: 12px !important;
    }
}
</style>
@endsection