@extends('layouts.app')

@section('title', 'Sign Up - Saba Remedies')

@section('content')
<section class="py-16 bg-slate-50 min-h-[70vh] flex items-center justify-center">
    <div class="max-w-xl w-full mx-auto px-4">
        <div class="bg-white rounded-3xl border border-slate-200 p-8 sm:p-10 shadow-sm space-y-6">
            
            <div class="text-center space-y-1">
                <span class="text-xs font-bold uppercase tracking-wider text-emerald-700 bg-emerald-50 px-3 py-1 rounded-full">New Registration</span>
                <h1 class="text-2xl font-extrabold text-slate-900 mt-2">Create Your Account</h1>
                <p class="text-xs text-slate-500">Join Saba Remedies for easy ordering &amp; special discounts</p>
            </div>

            <form action="{{ route('auth.signup.submit') }}" method="POST" class="space-y-4 text-xs">
                @csrf

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block font-semibold text-slate-700 mb-1">First Name *</label>
                        <input type="text" name="fname" value="{{ old('fname') }}" required placeholder="First name" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                    </div>
                    <div>
                        <label class="block font-semibold text-slate-700 mb-1">Last Name</label>
                        <input type="text" name="lname" value="{{ old('lname') }}" placeholder="Last name" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block font-semibold text-slate-700 mb-1">Email Address *</label>
                        <input type="email" name="email" value="{{ old('email') }}" required placeholder="your.email@example.com" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                    </div>
                    <div>
                        <label class="block font-semibold text-slate-700 mb-1">Mobile Phone Number *</label>
                        <input type="text" name="mob_no" value="{{ old('mob_no') }}" required placeholder="10-digit mobile number" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                    </div>
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Password *</label>
                    <input type="password" name="password" required placeholder="Choose a secure password" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Street Address</label>
                    <input type="text" name="addr" value="{{ old('addr') }}" placeholder="House/Flat No., Road, Area" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="block font-semibold text-slate-700 mb-1">City</label>
                        <input type="text" name="city" value="{{ old('city') }}" placeholder="City" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                    </div>
                    <div>
                        <label class="block font-semibold text-slate-700 mb-1">State</label>
                        <input type="text" name="state" value="{{ old('state') }}" placeholder="State" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                    </div>
                    <div>
                        <label class="block font-semibold text-slate-700 mb-1">Pincode</label>
                        <input type="text" name="pincode" value="{{ old('pincode') }}" placeholder="Pincode" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                    </div>
                </div>

                <button type="submit" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3.5 px-6 rounded-2xl text-xs shadow-md transition-all">
                    Register Account
                </button>
            </form>

            <div class="border-t border-slate-100 pt-4 text-center text-xs text-slate-600">
                Already have an account? 
                <a href="{{ route('auth.login') }}" class="font-bold text-emerald-700 hover:underline">Sign In</a>
            </div>

        </div>
    </div>
</section>
@endsection