@extends('layouts.app')

@section('title', 'Daftar Akun')

@section('content')
<div class="auth-wrap py-5">
  <div class="auth-card auth-card-lg">
    <h1 class="visually-hidden">Daftar akun {{ config('toko.nama') }}</h1>
    <div class="text-center mb-4">
      <a class="navbar-brand" href="{{ route('home') }}" style="font-size:1.8rem">{{ config('toko.nama') }}<span class="dot text-primary">.</span></a>
      <p class="text-muted-soft mb-0">Buat akun baru, gratis</p>
    </div>
    <form method="post" action="{{ route('register.store') }}" data-once>
      @csrf
      <div class="mb-3">
        <label for="name" class="form-label">Nama lengkap</label>
        <input type="text" id="name" name="name" class="form-control @error('name') is-invalid @enderror" required maxlength="100" autocomplete="name" value="{{ old('name') }}">
        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
      </div>
      <div class="row g-3">
        <div class="col-md-7 mb-3">
          <label for="email" class="form-label">Email</label>
          <input type="email" id="email" name="email" class="form-control @error('email') is-invalid @enderror" required maxlength="120" autocomplete="email" value="{{ old('email') }}">
          @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-md-5 mb-3">
          <label for="phone" class="form-label">No. HP <span class="text-muted-soft fw-normal">(opsional)</span></label>
          <input type="tel" id="phone" name="phone" class="form-control @error('phone') is-invalid @enderror" maxlength="20" autocomplete="tel" inputmode="tel" placeholder="08xxxxxxxxxx" value="{{ old('phone') }}">
          @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
      </div>
      <div class="row g-3">
        <div class="col-md-6 mb-3">
          <label for="regPass" class="form-label">Password</label>
          <div class="input-group has-validation">
            <input type="password" name="password" id="regPass" class="form-control @error('password') is-invalid @enderror" required minlength="8" autocomplete="new-password" aria-describedby="regPassHelp">
            <button class="btn btn-light-blue" type="button" data-toggle-password="#regPass" aria-label="Tampilkan password" aria-pressed="false"><i class="bi bi-eye" aria-hidden="true"></i></button>
            @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="form-text" id="regPassHelp">Minimal 8 karakter.</div>
        </div>
        <div class="col-md-6 mb-3">
          <label for="regPass2" class="form-label">Ulangi password</label>
          <div class="input-group">
            <input type="password" name="password_confirmation" id="regPass2" class="form-control" required minlength="8" autocomplete="new-password">
            <button class="btn btn-light-blue" type="button" data-toggle-password="#regPass2" aria-label="Tampilkan password" aria-pressed="false"><i class="bi bi-eye" aria-hidden="true"></i></button>
          </div>
        </div>
      </div>
      <button type="submit" class="btn btn-gradient w-100 btn-lg mb-3" data-loading-text="Mendaftarkan...">Daftar</button>
    </form>
    <p class="text-center text-muted-soft mb-0">Sudah punya akun? <a href="{{ route('login') }}" class="text-primary fw-semibold">Masuk</a></p>
  </div>
</div>
@endsection