@extends('layouts.app')

@section('title', 'Crear cuenta | Lavaustral')
@section('description', 'Crea tu cuenta Lavaustral para reservar y hacer seguimiento de tus pedidos de lavado industrial.')
@section('body-class', 'register-page')

@push('styles')
<style>
  /* ===== Auth section (dentro de layouts.app) ===== */
  .lav-auth-section {
    padding-top: 140px;
    padding-bottom: 80px;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background: var(--surface-color, #f6f7f8);
  }

  .lav-auth-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 2.2rem 2rem;
  }

  .lav-auth-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .lav-auth-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.1);
    color: var(--accent-color, #0d6efd);
    font-size: 22px;
    margin-bottom: 0.75rem;
  }

  .lav-auth-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--heading-color, #1a1a1a);
    margin-bottom: 0.25rem;
  }

  .lav-auth-subtitle {
    font-size: 14px;
    color: var(--default-color, #6c757d);
    margin-bottom: 0;
  }

  .lav-auth-status {
    font-size: 14px;
    color: #198754;
    text-align: center;
    margin-bottom: 1.2rem;
  }

  .lav-auth-field {
    margin-bottom: 1.1rem;
  }

  .lav-auth-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--heading-color, #1a1a1a);
    margin-bottom: 0.4rem;
  }

  .lav-auth-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .lav-auth-input-wrapper i {
    position: absolute;
    left: 14px;
    color: #9aa0a6;
    font-size: 16px;
    pointer-events: none;
  }

  .lav-auth-input {
    width: 100%;
    padding: 0.65rem 0.9rem 0.65rem 2.4rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .lav-auth-input:focus {
    outline: none;
    border-color: var(--accent-color, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
  }

  .lav-auth-input.is-invalid {
    border-color: #dc3545;
  }

  .lav-auth-error {
    display: block;
    margin-top: 0.35rem;
    font-size: 12.5px;
    color: #dc3545;
  }

  .lav-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.4rem;
  }

  .lav-auth-link {
    font-size: 13.5px;
    color: var(--accent-color, #0d6efd);
    text-decoration: none;
  }

  .lav-auth-link:hover {
    text-decoration: underline;
  }

  .lav-auth-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    border: none;
    border-radius: 50px;
    background: var(--accent-color, #0d6efd);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: filter 0.3s ease;
  }

  .lav-auth-submit:hover {
    filter: brightness(0.92);
  }

  .lav-auth-footer {
    text-align: center;
    margin-top: 1.4rem;
    margin-bottom: 0;
    font-size: 13.5px;
    color: var(--default-color, #6c757d);
  }

  .lav-auth-footer a {
    color: var(--accent-color, #0d6efd);
    font-weight: 600;
    text-decoration: none;
  }

  .lav-auth-footer a:hover {
    text-decoration: underline;
  }
</style>
@endpush

@section('content')

    <section id="register" class="lav-auth-section section">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-5 col-md-7">

            <div class="lav-auth-card" data-aos="fade-up" data-aos-duration="700">

              <div class="lav-auth-header text-center">
                <span class="lav-auth-icon"><i class="bi bi-person-plus" aria-hidden="true"></i></span>
                <h1 class="lav-auth-title">Crear cuenta</h1>
                <p class="lav-auth-subtitle">Regístrate para reservar y hacer seguimiento de tus pedidos</p>
              </div>

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

                <!-- Name -->
                <div class="lav-auth-field">
                  <label for="name" class="lav-auth-label">{{ __('Nombre completo') }}</label>
                  <div class="lav-auth-input-wrapper">
                    <i class="bi bi-person" aria-hidden="true"></i>
                    <input
                      id="name"
                      type="text"
                      name="name"
                      class="lav-auth-input @error('name') is-invalid @enderror"
                      value="{{ old('name') }}"
                      placeholder="Tu nombre"
                      required
                      autofocus
                      autocomplete="name"
                    >
                  </div>
                  @error('name')
                    <span class="lav-auth-error">{{ $message }}</span>
                  @enderror
                </div>

                <!-- Email Address -->
                <div class="lav-auth-field">
                  <label for="email" class="lav-auth-label">{{ __('Correo electrónico') }}</label>
                  <div class="lav-auth-input-wrapper">
                    <i class="bi bi-envelope" aria-hidden="true"></i>
                    <input
                      id="email"
                      type="email"
                      name="email"
                      class="lav-auth-input @error('email') is-invalid @enderror"
                      value="{{ old('email') }}"
                      placeholder="tu@empresa.cl"
                      required
                      autocomplete="username"
                    >
                  </div>
                  @error('email')
                    <span class="lav-auth-error">{{ $message }}</span>
                  @enderror
                </div>

                <!-- Password -->
                <div class="lav-auth-field">
                  <label for="password" class="lav-auth-label">{{ __('Contraseña') }}</label>
                  <div class="lav-auth-input-wrapper">
                    <i class="bi bi-lock" aria-hidden="true"></i>
                    <input
                      id="password"
                      type="password"
                      name="password"
                      class="lav-auth-input @error('password') is-invalid @enderror"
                      placeholder="••••••••"
                      required
                      autocomplete="new-password"
                    >
                  </div>
                  @error('password')
                    <span class="lav-auth-error">{{ $message }}</span>
                  @enderror
                </div>

                <!-- Confirm Password -->
                <div class="lav-auth-field">
                  <label for="password_confirmation" class="lav-auth-label">{{ __('Confirmar contraseña') }}</label>
                  <div class="lav-auth-input-wrapper">
                    <i class="bi bi-lock-fill" aria-hidden="true"></i>
                    <input
                      id="password_confirmation"
                      type="password"
                      name="password_confirmation"
                      class="lav-auth-input @error('password_confirmation') is-invalid @enderror"
                      placeholder="••••••••"
                      required
                      autocomplete="new-password"
                    >
                  </div>
                  @error('password_confirmation')
                    <span class="lav-auth-error">{{ $message }}</span>
                  @enderror
                </div>

                <!-- Submit -->
                <button type="submit" class="lav-auth-submit">
                  <span>{{ __('Registrarse') }}</span>
                  <i class="bi bi-arrow-right" aria-hidden="true"></i>
                </button>

                <p class="lav-auth-footer">
                  {{ __('¿Ya tienes cuenta?') }}
                  <a href="{{ route('login') }}">{{ __('Inicia sesión aquí') }}</a>
                </p>
              </form>

            </div>

          </div>
        </div>
      </div>
    </section>

@endsection