@extends('layouts.auth')

@section('title', 'Register - ' . $branding['company_name'])

@section('content')

<x-auth-shell
    tagline="Join {{ $branding['company_name'] }} and track your orders"
    divider-text="or register with email">

    <form action="{{ route('register') }}" method="POST" class="auth-form auth-form-main auth-form-register" data-turbo="false">
        @csrf

        <div class="row auth-form-grid">
            <div class="col-12 auth-field">
                <label for="name" class="form-label fw-semibold text-muted">Full Name</label>
                <input type="text" class="form-control rounded-pill px-3 @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" required autofocus>
                @error('name')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-6 auth-field">
                <label for="email" class="form-label fw-semibold text-muted">Email Address</label>
                <input type="email" class="form-control rounded-pill px-3 @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required>
                @error('email')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-6 auth-field">
                <label for="phone" class="form-label fw-semibold text-muted">WhatsApp Phone Number</label>
                <input type="text" class="form-control rounded-pill px-3 @error('phone') is-invalid @enderror" id="phone" name="phone" placeholder="e.g. 0712345678" value="{{ old('phone') }}" required>
                @error('phone')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-12 auth-field">
                <label for="address" class="form-label fw-semibold text-muted">Default Shipping Address (Optional)</label>
                <textarea class="form-control auth-textarea rounded-4 @error('address') is-invalid @enderror" id="address" name="address" rows="2" placeholder="Apartment name, street, estate, city...">{{ old('address') }}</textarea>
                @error('address')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-6 auth-field">
                <label for="password" class="form-label fw-semibold text-muted">Password</label>
                <div class="input-group">
                    <input type="password" class="form-control rounded-start-pill px-3 @error('password') is-invalid @enderror" id="password" name="password" required autocomplete="new-password">
                    <span class="input-group-text bg-white rounded-end-pill border-start-0 toggle-password" data-target="password">
                        <i class="bi bi-eye text-muted"></i>
                    </span>
                </div>
                @error('password')
                    <div class="text-danger small mt-1 mb-0">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-6 auth-field">
                <label for="password_confirmation" class="form-label fw-semibold text-muted">Confirm Password</label>
                <div class="input-group">
                    <input type="password" class="form-control rounded-start-pill px-3" id="password_confirmation" name="password_confirmation" required>
                    <span class="input-group-text bg-white rounded-end-pill border-start-0 toggle-password" data-target="password_confirmation">
                        <i class="bi bi-eye text-muted"></i>
                    </span>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary-mj auth-submit-btn w-100 rounded-pill text-uppercase fw-semibold">
            Register Account <i class="bi bi-person-plus-fill ms-1"></i>
        </button>
    </form>

    <x-slot:footer>
        <span class="text-muted auth-footer-text">Already registered at MJ's?</span>
        <a href="{{ route('login') }}" data-turbo-frame="auth-content" class="text-danger fw-bold text-decoration-none auth-footer-text ms-1">Login Here</a>
    </x-slot:footer>
</x-auth-shell>

@endsection
