@extends('eliteadmin::layouts.auth')

@section('title', 'Register')
@section('brand_heading', 'Create your customer account')
@section('brand_description', 'Register to access modules assigned by your administrator. You will not have access to admin settings or staff areas.')

@section('content')
    <div class="auth-card">
        <div class="auth-card-header">
            <h1 class="auth-title">Customer registration</h1>
            <p class="auth-subtitle">Create an account to access your assigned modules</p>
        </div>

        @if ($errors->any())
            <x-eliteadmin::alert type="danger" :dismissible="false" class="mb-3">
                {{ $errors->first() }}
            </x-eliteadmin::alert>
        @endif

        <form class="auth-form" action="{{ route('register.store') }}" method="POST" novalidate>
            @csrf

            <div class="form-group">
                <label for="name" class="form-label">Full name</label>
                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name"
                       value="{{ old('name') }}" placeholder="Jane Doe" required autofocus>
                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="form-group">
                <label for="email" class="form-label">Email address</label>
                <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email"
                       value="{{ old('email') }}" placeholder="name@example.com" required>
                @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="form-group">
                <label for="password" class="form-label">Password</label>
                <div class="input-group">
                    <input type="password" class="form-control @error('password') is-invalid @enderror" id="password"
                           name="password" placeholder="Create a password" required>
                    <button class="btn btn-outline-secondary" type="button" data-toggle-password>
                        <i class="bi bi-eye"></i>
                    </button>
                </div>
                @error('password')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
            </div>

            <div class="form-group">
                <label for="password_confirmation" class="form-label">Confirm password</label>
                <div class="input-group">
                    <input type="password" class="form-control" id="password_confirmation" name="password_confirmation"
                           placeholder="Confirm your password" required>
                    <button class="btn btn-outline-secondary" type="button" data-toggle-password>
                        <i class="bi bi-eye"></i>
                    </button>
                </div>
            </div>

            <button type="submit" class="btn btn-primary btn-block">Create customer account</button>
        </form>

        <p class="auth-footer-text mt-3 mb-0">
            Already have an account?
            <a href="{{ route('login') }}" class="auth-link">Sign in</a>
        </p>
    </div>
@endsection