@extends('storefront.layout')

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

@section('content')
<div class="bg-gradient-to-b from-stone-50 to-stone-100 py-16 px-4 min-h-[70vh] flex items-center">
<div class="w-full max-w-md mx-auto">

    {{-- Page header --}}
    <div class="text-center mb-8">
        <span class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-widest text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-full px-3 py-1">Wholesale account</span>
        <h1 class="mt-3 text-3xl font-semibold tracking-tight text-stone-900">Customer Account Login</h1>
        <p class="mt-2 text-sm text-stone-500">Sign in to view your orders and delivery status.</p>
    </div>

    @if (session('status'))
        <div class="mb-6 rounded-xl bg-emerald-50 border border-emerald-200 px-4 py-3 text-sm text-emerald-800 flex items-start gap-2.5">
            <svg class="mt-0.5 shrink-0 w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
            {{ session('status') }}
        </div>
    @endif

    {{-- Form card --}}
    <div class="bg-white rounded-2xl shadow-sm border border-stone-200 overflow-hidden">
        <form method="POST" action="{{ route('storefront.login.submit') }}">
            @csrf

            <div class="px-6 pt-6 pb-5 space-y-4">

                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1.5">Email</label>
                    <input type="email" name="email" value="{{ old('email') }}" required autofocus
                           class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 placeholder-stone-400 shadow-sm transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 focus:outline-none @error('email') border-red-400 @enderror">
                    @error('email') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1.5">Password</label>
                    <div x-data="{ showPassword: false }" class="relative">
                        <input :type="showPassword ? 'text' : 'password'" name="password" required
                               class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 pr-11 text-sm text-stone-900 shadow-sm transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 focus:outline-none @error('password') border-red-400 @enderror">
                        <button type="button"
                                @click="showPassword = !showPassword"
                                class="absolute inset-y-0 right-0 inline-flex w-11 items-center justify-center rounded-r-lg text-stone-400 transition hover:text-stone-700 focus:text-emerald-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-500/30"
                                :aria-label="showPassword ? 'Hide password' : 'Show password'"
                                :title="showPassword ? 'Hide password' : 'Show password'">
                            <svg x-show="!showPassword" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            <svg x-show="showPassword" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" aria-hidden="true" style="display:none">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/>
                            </svg>
                        </button>
                    </div>
                    @error('password') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="flex items-center justify-between gap-4">
                    <div class="flex items-center gap-2">
                        <input type="checkbox" name="remember" id="remember"
                               class="rounded border border-stone-300 text-emerald-700 shadow-sm focus:ring-emerald-500/20 focus:outline-none">
                        <label for="remember" class="text-sm text-stone-600 select-none">Remember me</label>
                    </div>

                    <a href="{{ route('password.request') }}" class="text-sm font-medium text-emerald-700 hover:text-emerald-800 transition">
                        Forgot password?
                    </a>
                </div>

            </div>

            <div class="px-6 py-4 bg-stone-50 border-t border-stone-100">
                <button type="submit"
                        class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-700 text-white px-5 py-2.5 text-sm font-medium shadow-sm hover:bg-emerald-800 transition">
                    Sign in
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
                </button>
            </div>
        </form>
    </div>

</div>
</div>
@endsection