@extends('customer.layouts.app')

@section('title', 'Customer Registration')

@section('content')
<div class="auth-shell register-shell">
    <section class="auth-visual">
        <a class="brand brand-light" href="{{ route('customer.login') }}">
            <img class="brand-logo" src="{{ asset('images/cleanpest-logo.webp') }}" alt="Clean Pest Pest Control">
        </a>
        <div>
            <span class="eyebrow">Join Clean Pest</span>
            <h1>Professional pest protection, at your fingertips.</h1>
            <p>Create your account to request services and follow every visit from booking to completion.</p>
        </div>
        <div class="trust-row">
            <span><i class="fa-solid fa-circle-check"></i> Verified technicians</span>
            <span><i class="fa-solid fa-leaf"></i> Responsible service</span>
        </div>
    </section>

    <section class="auth-panel register-panel">
        <div class="auth-card wide-card">
            <div class="mobile-brand">
                <img class="brand-logo" src="{{ asset('images/cleanpest-logo.webp') }}" alt="Clean Pest Pest Control">
            </div>
            <span class="eyebrow green">Get started</span>
            <h2>Create your customer account</h2>
            <p class="muted">Tell us how we can reach and serve you.</p>

            @if($errors->any())
                <div class="alert alert-error">
                    <ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
                </div>
            @endif

            <form method="POST" action="{{ route('customer.register.submit') }}">
                @csrf
                <div class="form-grid">
                    <div class="field full">
                        <label for="name">Full name</label>
                        <input id="name" name="name" value="{{ old('name') }}" placeholder="Your full name" required autofocus>
                    </div>
                    <div class="field">
                        <label for="email">Email address</label>
                        <input id="email" name="email" type="email" value="{{ old('email') }}" placeholder="you@example.com" required>
                    </div>
                    <div class="field">
                        <label for="mobile">Mobile number</label>
                        <input id="mobile" name="mobile" inputmode="numeric" maxlength="10" value="{{ old('mobile') }}" placeholder="10-digit mobile" required>
                    </div>
                    <div class="field">
                        <label for="alternate_mobile">Alternate mobile <span class="optional-label">Optional</span></label>
                        <input id="alternate_mobile" name="alternate_mobile" inputmode="numeric" maxlength="10" value="{{ old('alternate_mobile') }}" placeholder="Alternate 10-digit mobile">
                    </div>
                    <div class="field">
                        <label for="gst_number">GST number <span class="optional-label">Optional</span></label>
                        <input id="gst_number" name="gst_number" maxlength="15" value="{{ old('gst_number') }}" placeholder="Example: 22AAAAA0000A1Z5" style="text-transform:uppercase">
                    </div>
                    <div class="field full">
                        <label for="address">Service address</label>
                        <textarea id="address" name="address" rows="2" placeholder="House/flat, street and area" required>{{ old('address') }}</textarea>
                    </div>
                    <div class="field">
                        <label for="city">City</label>
                        <input id="city" name="city" value="{{ old('city') }}" placeholder="Enter your city" required>
                    </div>
                    <div class="field">
                        <label for="state">State</label>
                        <input id="state" name="state" value="{{ old('state') }}" placeholder="Enter your state" required>
                    </div>
                    <div class="field">
                        <label for="pincode">Pincode</label>
                        <input id="pincode" name="pincode" inputmode="numeric" maxlength="6" value="{{ old('pincode') }}" placeholder="Enter 6-digit pincode" required>
                    </div>
                    <div></div>
                    <div class="field">
                        <label for="password">Password</label>
                        <div class="password-wrap">
                            <input id="password" name="password" type="password" minlength="8" placeholder="Minimum 8 characters" required>
                            <button class="password-toggle" type="button" data-password-toggle="password" aria-label="Show password"><i class="fa-regular fa-eye"></i></button>
                        </div>
                    </div>
                    <div class="field">
                        <label for="password_confirmation">Confirm password</label>
                        <div class="password-wrap">
                            <input id="password_confirmation" name="password_confirmation" type="password" placeholder="Re-enter your password" required>
                            <button class="password-toggle" type="button" data-password-toggle="password_confirmation" aria-label="Show password"><i class="fa-regular fa-eye"></i></button>
                        </div>
                    </div>
                </div>
                <button class="primary-button" type="submit">Create account <i class="fa-solid fa-arrow-right"></i></button>
            </form>
            <p class="auth-switch">Already registered? <a href="{{ route('customer.login') }}">Sign in</a></p>
        </div>
    </section>
</div>
@endsection