@extends('technician.auth.layout')

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

@section('content')
<section class="auth-box register-box">
    <div class="logo-box"><img src="{{ asset('images/cleanpest-logo.webp') }}" alt="Clean Pest Pest Control"></div>
    <h1>Technician Registration</h1>
    <p class="auth-subtitle">Create your Pest Control CRM technician account</p>

    @if($errors->any())<div class="alert alert-danger">{{ $errors->first() }}</div>@endif

    <form method="POST" action="{{ route('technician.register.submit') }}">
        @csrf
        <div class="form-grid">
            <div class="form-group">
                <label for="technician_name">Full Name *</label>
                <input type="text" id="technician_name" name="technician_name" value="{{ old('technician_name') }}" placeholder="Enter your full name" autocomplete="name" required autofocus>
            </div>
            <div class="form-group">
                <label for="email">Email Address *</label>
                <input type="email" id="email" name="email" value="{{ old('email') }}" placeholder="Enter your email address" autocomplete="email" required>
            </div>
            <div class="form-group">
                <label for="mobile">Mobile Number *</label>
                <input type="tel" id="mobile" name="mobile" maxlength="10" inputmode="numeric" value="{{ old('mobile') }}" placeholder="Enter 10-digit mobile number" required>
            </div>
            <div class="form-group">
                <label for="alternate_mobile">Alternate Mobile</label>
                <input type="tel" id="alternate_mobile" name="alternate_mobile" maxlength="10" inputmode="numeric" value="{{ old('alternate_mobile') }}" placeholder="Enter alternate mobile number">
            </div>
            <div class="form-group full-width">
                <label for="address">Address</label>
                <textarea id="address" name="address" placeholder="Enter your complete address">{{ old('address') }}</textarea>
            </div>
            <div class="form-group">
                <label for="password">Password *</label>
                <div class="password-wrapper">
                    <input type="password" id="password" name="password" placeholder="Enter a secure password" autocomplete="new-password" required>
                    <button type="button" class="toggle-password js-password-toggle" aria-label="Show password"><i class="fas fa-eye"></i></button>
                </div>
            </div>
            <div class="form-group">
                <label for="password_confirmation">Confirm Password *</label>
                <div class="password-wrapper">
                    <input type="password" id="password_confirmation" name="password_confirmation" placeholder="Re-enter your password" autocomplete="new-password" required>
                    <button type="button" class="toggle-password js-password-toggle" aria-label="Show password"><i class="fas fa-eye"></i></button>
                </div>
            </div>
        </div>
        <button type="submit" class="btn-auth">Create Account</button>
    </form>
    <p class="auth-link">Already registered? <a href="{{ route('technician.login') }}">Sign in</a></p>
</section>
@endsection