@extends('merchant.auth.layout')

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

@section('content')
<div>
    <h2 class="text-xl font-bold text-gray-800 mb-1">Selamat datang kembali</h2>
    <p class="text-sm text-gray-500 mb-6">Masuk ke akun merchant Anda</p>

    @if(session('success'))
        <div class="alert-success p-3 rounded-md text-sm mb-4">
            <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert-error p-3 rounded-md text-sm mb-4">
            <i class="fas fa-exclamation-circle mr-2"></i> {{ session('error') }}
        </div>
    @endif

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

        <div>
            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
            <input type="email" id="email" name="email" value="{{ old('email') }}"
                   class="auth-input w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-teal-600 focus:ring-2 focus:ring-teal-100 outline-none transition"
                   placeholder="merchant@email.com" required autofocus>
        </div>

        <div>
            <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
            <input type="password" id="password" name="password"
                   class="auth-input w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-teal-600 focus:ring-2 focus:ring-teal-100 outline-none transition"
                   placeholder="••••••••" required>
        </div>

        <div class="flex items-center justify-between">
            <label class="flex items-center gap-2 text-sm text-gray-600">
                <input type="checkbox" name="remember" class="rounded border-gray-300 text-teal-600 focus:ring-teal-500">
                Ingat saya
            </label>
            <a href="{{ route('merchant.forgot-password') }}" class="text-sm text-teal-600 hover:underline">Lupa password?</a>
        </div>

        <button type="submit" class="btn-primary w-full text-white font-semibold py-3 rounded-lg transition">
            <i class="fas fa-sign-in-alt mr-2"></i> Masuk
        </button>

        <p class="text-center text-sm text-gray-500 mt-4">
            Belum punya akun?
            <a href="{{ route('merchant.register') }}" class="text-teal-600 font-semibold hover:underline">Daftar sekarang</a>
        </p>
    </form>
</div>
@endsection