@extends('layouts.frontend')

@section('title', 'Login Pelanggan & Admin')

@section('content')
<div class="max-w-md mx-auto my-12 bg-white border border-gray-200 rounded-2xl shadow-sm p-8">

    <div class="text-center mb-6">
        <h2 class="text-2xl font-bold text-gray-900 tracking-tight">Masuk Akun Mega Mart</h2>
        <p class="text-sm text-gray-500 mt-1">Gunakan akun Anda untuk mengakses katalog belanja atau panel admin</p>
    </div>

    @if(session('success'))
    <div class="mb-4 bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs p-3 rounded-xl font-bold shadow-sm flex items-center gap-2">
        <span>✨</span>
        <p>{{ session('success') }}</p>
    </div>
    @endif

    @if($errors->any())
    <div class="mb-4 bg-red-50 border border-red-200 text-red-800 text-xs p-3 rounded-xl font-bold shadow-sm flex items-center gap-2">
        <span>❌</span>
        <p>{{ $errors->first() }}</p>
    </div>
    @endif

    <form action="{{ url('/login') }}" method="POST" class="space-y-4">
        @csrf

        <div>
            <label class="block text-sm font-semibold text-gray-700 mb-1">Alamat Email</label>
            <input type="email"
                name="email"
                value="{{ old('email') }}"
                required
                placeholder="nama@email.com"
                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent outline-none text-sm transition">
        </div>

        <div>
            <label class="block text-sm font-semibold text-gray-700 mb-1">Kata Sandi</label>
            <input type="password"
                name="password"
                required
                placeholder="••••••••"
                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent outline-none text-sm transition">
        </div>

        <button type="submit" class="w-full bg-blue-600 text-white py-2.5 rounded-lg hover:bg-blue-700 transition font-semibold text-sm shadow-sm mt-2 flex items-center justify-center space-x-1">
            <span>🚀 Masuk Sekarang</span>
        </button>
    </form>

    <div class="text-center mt-6 pt-4 border-t border-gray-100 text-sm text-gray-600">
        Belum punya akun member?
        <a href="{{ url('/register') }}" class="text-blue-600 font-semibold hover:underline">Daftar Sini</a>
    </div>

</div>
@endsection