@extends('customer.layouts.app')

@section('title', 'Customer Login')

@section('content')
<div class="auth-shell">
    <section class="auth-visual">
        <a class="brand brand-light" href="{{ route('customer.login') }}">
            <img class="brand-logo" src="{{ asset('images/cleanpest-logo.webp') }}" alt="Clean Pest Pest Control">
        </a>
        <div>
            <span class="eyebrow">Your service, simplified</span>
            <h1>A cleaner, safer home starts here.</h1>
            <p>Access your pest-control services, schedules, reports and invoices from one secure place.</p>
        </div>
        <div class="trust-row">
            <span><i class="fa-solid fa-lock"></i> Secure access</span>
            <span><i class="fa-solid fa-headset"></i> Reliable support</span>
        </div>
    </section>

    <section class="auth-panel">
        <div class="auth-card">
            <div class="mobile-brand">
                <img class="brand-logo" src="{{ asset('images/cleanpest-logo.webp') }}" alt="Clean Pest Pest Control">
            </div>
            <span class="eyebrow green">Welcome back</span>
            <h2>Sign in to your account</h2>
            <p class="muted">Enter your registered email and password.</p>

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

            @if($errors->any())
                <div class="alert alert-error">{{ $errors->first() }}</div>
            @endif

            <form method="POST" action="{{ route('customer.login.submit') }}">
                @csrf
                <div class="field">
                    <label for="email">Email address</label>
                    <div class="input-wrap">
                        <i class="fa-regular fa-envelope"></i>
                        <input id="email" name="email" type="email" value="{{ old('email') }}" placeholder="you@example.com" required autofocus>
                    </div>
                </div>
                <div class="field">
                    <label for="password">Password</label>
                    <div class="input-wrap">
                        <i class="fa-solid fa-lock"></i>
                        <input id="password" name="password" type="password" placeholder="Enter your password" required>
                        <button class="password-toggle" type="button" data-password-toggle="password" aria-label="Show password"><i class="fa-regular fa-eye"></i></button>
                    </div>
                </div>
                <label class="check-row">
                    <input type="checkbox" name="remember" value="1"> Keep me signed in
                </label>
                <button class="primary-button" type="submit">Sign in <i class="fa-solid fa-arrow-right"></i></button>
            </form>

            <p class="auth-switch">New to Clean Pest? <a href="{{ route('customer.register') }}">Create an account</a></p>
        </div>
    </section>
</div>
@endsection