@extends('layouts.app')

@section('title', 'Confirmar contraseña | Lavaustral')
@section('description', 'Confirma tu contraseña para continuar en esta área segura de la aplicación.')
@section('body-class', 'login-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;
    text-align: center;
    line-height: 1.5;
  }

  .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-submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.4rem;
  }

  .lav-auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    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);
  }
</style>
@endpush

@section('content')

    <section id="confirm-password" 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-shield-check" aria-hidden="true"></i></span>
                <h1 class="lav-auth-title">Confirmar contraseña</h1>
                <p class="lav-auth-subtitle">
                  {{ __('Esta es un área segura de la aplicación. Por favor confirma tu contraseña antes de continuar.') }}
                </p>
              </div>

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

                <!-- 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="current-password"
                    >
                  </div>
                  @error('password')
                    <span class="lav-auth-error">{{ $message }}</span>
                  @enderror
                </div>

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

              </form>

            </div>

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

@endsection