@extends('layouts.app')

@section('title', 'Sign In')

@section('content')

    <x-breadcrumb :items="[['label' => 'Sign In']]" />

    <section class="bg-cream-50 py-16 lg:py-24">
        <div class="container-shop">
            <div class="mx-auto max-w-md border border-cream-200 bg-white p-8 shadow-soft sm:p-10 rounded-2xl">
                <div class="text-center">
                    <x-icon name="leaf" class="mx-auto h-7 w-7 text-moss-600" />
                    <h1 class="mt-3 font-serif text-3xl font-medium">Welcome Back</h1>
                    <p class="mt-2 text-sm text-ink-500">Sign in to track orders, save shipping info and check out faster.</p>
                </div>

                @if($errors->any())
                    <div class="mt-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded text-xs">
                        {{ $errors->first() }}
                    </div>
                @endif

                <form class="mt-8 space-y-5" action="{{ route('login.post') }}" method="POST">
                    @csrf
                    <div>
                        <label for="login-email" class="field-label">Email Address <span class="text-terra-500">*</span></label>
                        <input id="login-email" name="email" type="email" value="{{ old('email', 'user@divne.com') }}" autocomplete="email" placeholder="you@example.com" class="field-input" required autofocus>
                    </div>
                    <div>
                        <label for="login-password" class="field-label">Password <span class="text-terra-500">*</span></label>
                        <input id="login-password" name="password" type="password" value="password123" autocomplete="current-password" placeholder="••••••••" class="field-input" required>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <label class="flex cursor-pointer items-center gap-2 text-ink-700">
                            <input type="checkbox" name="remember" class="h-4 w-4 cursor-pointer border-sand-300 text-moss-600 focus:ring-moss-600" checked>
                            Remember me
                        </label>
                    </div>
                    <button type="submit" class="btn-primary w-full justify-center">Sign In</button>
                </form>

                <div class="my-6 border-t border-cream-200 pt-6 text-center text-xs text-ink-500">
                    Default Customer: <strong>user@divne.com</strong> / <strong>password123</strong>
                </div>

                <p class="mt-4 text-center text-sm text-ink-500">
                    New to {{ config('shop.name') }}?
                    <a href="{{ route('register') }}" class="font-semibold text-moss-600 transition-colors hover:text-moss-800">Create an account</a>
                </p>

                <div class="mt-6 text-center text-xs text-ink-400">
                    Are you a store manager? <a href="{{ route('admin.login.form') }}" class="underline text-moss-700">Go to Admin Panel Sign In</a>
                </div>
            </div>
        </div>
    </section>

@endsection