@extends('layouts.app')

@section('title', 'My Profile')
@section('page', 'profile')

@php
  $initials = collect(preg_split('/\s+/', trim($user->name ?? '')))
    ->filter()
    ->map(fn ($p) => mb_strtoupper(mb_substr($p, 0, 1)))
    ->take(2)
    ->implode('') ?: 'U';
@endphp

@section('content')
  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <div class="payroll-rates-page">
    <div class="payroll-rates-page__head">
      <div class="d-flex align-items-center gap-3">
        <span class="profile-avatar" aria-hidden="true">{{ $initials }}</span>
        <div>
          <h1 class="payroll-rates-page__title">My Profile</h1>
          <p class="payroll-rates-page__subtitle">Update your account details and password.</p>
        </div>
      </div>
      <div class="payroll-rates-page__tip" role="note">
        <i class="bi bi-info-circle-fill" aria-hidden="true"></i>
        <span>Role and cash book are managed by an admin.</span>
      </div>
    </div>

    <form method="post" action="{{ route('profile.update') }}" class="payroll-rates-form">
      @csrf
      @method('PUT')

      <article class="rate-card rate-card--violet">
        <div class="rate-card__head">
          <div class="rate-card__identity">
            <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-person"></i></span>
            <div>
              <h2 class="rate-card__title">Account</h2>
              <p class="rate-card__desc">Your name and email for sign-in and display.</p>
            </div>
          </div>
        </div>
        <div class="rate-card__body">
          <div class="rate-field">
            <label class="rate-field__label" for="name">
              <i class="bi bi-person-badge" aria-hidden="true"></i>
              Full name
            </label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="text" id="name" name="name" maxlength="255" required value="{{ old('name', $user->name) }}">
            </div>
          </div>
          <div class="rate-field">
            <label class="rate-field__label" for="email">
              <i class="bi bi-envelope" aria-hidden="true"></i>
              Email
            </label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="email" id="email" name="email" maxlength="255" required value="{{ old('email', $user->email) }}">
            </div>
          </div>
          <div class="rate-field">
            <label class="rate-field__label">
              <i class="bi bi-shield-check" aria-hidden="true"></i>
              Role
            </label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="text" value="{{ $user->role?->name ?? '—' }}" readonly disabled>
            </div>
          </div>
          <div class="rate-field">
            <label class="rate-field__label">
              <i class="bi bi-wallet2" aria-hidden="true"></i>
              Cash book
            </label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="text" value="{{ $user->cashBook?->name ?? '—' }}" readonly disabled>
            </div>
          </div>
        </div>
      </article>

      <article class="rate-card rate-card--orange">
        <div class="rate-card__head">
          <div class="rate-card__identity">
            <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-lock"></i></span>
            <div>
              <h2 class="rate-card__title">Change password</h2>
              <p class="rate-card__desc">Leave blank to keep your current password.</p>
            </div>
          </div>
        </div>
        <div class="rate-card__body rate-card__body--3">
          <div class="rate-field">
            <label class="rate-field__label" for="current_password">
              <i class="bi bi-key" aria-hidden="true"></i>
              Current password
            </label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="password" id="current_password" name="current_password" autocomplete="current-password">
            </div>
          </div>
          <div class="rate-field">
            <label class="rate-field__label" for="password">
              <i class="bi bi-shield-lock" aria-hidden="true"></i>
              New password
            </label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="password" id="password" name="password" autocomplete="new-password">
            </div>
          </div>
          <div class="rate-field">
            <label class="rate-field__label" for="password_confirmation">
              <i class="bi bi-check2-circle" aria-hidden="true"></i>
              Confirm password
            </label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="password" id="password_confirmation" name="password_confirmation" autocomplete="new-password">
            </div>
          </div>
        </div>
      </article>

      <div class="payroll-rates-form__actions">
        <button type="submit" class="btn btn-primary payroll-rates-form__save">
          <i class="bi bi-floppy" aria-hidden="true"></i> Save profile
        </button>
      </div>
    </form>
  </div>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/payroll-rates.css') }}" rel="stylesheet">
@endpush