@extends('layouts.app', ['activePage' => 'profile', 'titlePage' => __('User Profile')])

@section('content')
<style>
    .card {
      width: 100%;
      max-width: 600px;
      border-radius: 10px;
      box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
      overflow: hidden;
      font-family: Arial, sans-serif;
      background: #fff;
      margin: 20px auto;
    }

    .card-header {
      background: linear-gradient(90deg, #ff6a00, #ff9800);
      height: 8px;
    }

    .card-body {
      padding: 20px;
    }

    .card-body h4 {
      font-size: 20px;
      margin-bottom: 10px;
    }

    .form-group label {
      font-weight: bold;
    }

    .form-group input {
      width: 100%;
      padding: 8px;
      margin-top: 5px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .btn-primary {
      background-color: #ff9800;
      border-color: #ff9800;
    }

    .btn-primary:hover {
      background-color: #e68900;
      border-color: #e68900;
    }

    .alert {
      margin-top: 15px;
    }

    @media(max-width: 600px) {
      .card {
        width: 95%;
      }
    }
</style>

<div class="content">
  <div class="container-fluid">
    {{-- Edit Profile Card --}}
    <form method="post" action="{{ route('profile.update') }}" autocomplete="off">
      @csrf
      @method('put')

      <div class="card">
        <div class="card-header"></div>
        <div class="card-body">
          <h4>{{ __('Editar Perfil') }}</h4>

          @if (session('status'))
            <div class="alert alert-success">
              <span>{{ session('status') }}</span>
            </div>
          @endif

          <div class="form-group">
            <label for="input-name">{{ __('Nombre') }}</label>
            <input name="name" id="input-name" type="text" value="{{ old('name', auth()->user()->name) }}" required>
            @error('name')
              <span class="text-danger">{{ $message }}</span>
            @enderror
          </div>

          <div class="form-group">
            <label for="input-email">{{ __('Email') }}</label>
            <input name="email" id="input-email" type="email" value="{{ old('email', auth()->user()->email) }}" required>
            @error('email')
              <span class="text-danger">{{ $message }}</span>
            @enderror
          </div>

          <!-- <div class="form-group">
            <label for="input-rut">{{ __('RUT') }}</label>
            <input name="rut" id="input-rut" type="text" value="{{ old('rut', auth()->user()->rut ?? '') }}">
            @error('rut')
              <span class="text-danger">{{ $message }}</span>
            @enderror
          </div>

          <div class="form-group">
            <label for="input-address">{{ __('Dirección') }}</label>
            <input name="address" id="input-address" type="text" value="{{ old('address', auth()->user()->address ?? '') }}">
            @error('address')
              <span class="text-danger">{{ $message }}</span>
            @enderror
          </div>

          <div class="form-group">
            <label for="input-phone">{{ __('Teléfono') }}</label>
            <input name="phone" id="input-phone" type="text" value="{{ old('phone', auth()->user()->phone ?? '') }}">
            @error('phone')
              <span class="text-danger">{{ $message }}</span>
            @enderror
          </div> -->

          <div class="text-center">
            <button type="submit" class="btn btn-primary">{{ __('Guardar Cambios') }}</button>
          </div>
        </div>
      </div>
    </form>

    {{-- Change Password Card --}}
    <form method="post" action="{{ route('profile.password') }}">
      @csrf
      @method('put')

      <div class="card">
        <div class="card-header"></div>
        <div class="card-body">
          <h4>{{ __('Cambiar Contraseña') }}</h4>

          @if (session('status_password'))
            <div class="alert alert-success">
              <span>{{ session('status_password') }}</span>
            </div>
          @endif

          <div class="form-group">
            <label for="input-current-password">{{ __('Contraseña Actual') }}</label>
            <input type="password" name="old_password" id="input-current-password" required>
            @error('old_password')
              <span class="text-danger">{{ $message }}</span>
            @enderror
          </div>

          <div class="form-group">
            <label for="input-password">{{ __('Nueva Contraseña') }}</label>
            <input type="password" name="password" id="input-password" required>
            @error('password')
              <span class="text-danger">{{ $message }}</span>
            @enderror
          </div>

          <div class="form-group">
            <label for="input-password-confirmation">{{ __('Confirmar Nueva Contraseña') }}</label>
            <input type="password" name="password_confirmation" id="input-password-confirmation" required>
          </div>

          <div class="text-center">
            <button type="submit" class="btn btn-primary">{{ __('Cambiar Contraseña') }}</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection