@extends('layouts.admin')

@section('title', 'Profile')
@section('heading', 'Profile')
@section('breadcrumb')
  <li class="breadcrumb-item active">Profile</li>
@endsection

@section('content')
  <style>
    .fx-profile {
      display: grid;
      grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }
    .fx-profile .block { margin-bottom: 0; }
    .fx-kicker {
      display: block;
      margin-bottom: 4px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: #9aa0a8;
    }
    .fx-value { color: #fff; font-weight: 600; margin-bottom: 14px; }
    .fx-profile label { color: #dee2e6; font-weight: 600; }
    .fx-help { margin: 0 0 12px; color: #9aa0a8; font-size: 13px; }
    .fx-submit { display: flex; justify-content: flex-end; }
    .fx-profile .fx-btn {
      width: auto;
      padding: 5px 14px;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.4;
      border-radius: 4px;
      background: #4d9eed;
      border-color: #4d9eed;
      color: #fff;
    }
    @media (max-width: 767px) {
      .fx-profile { grid-template-columns: 1fr; }
    }
  </style>

  <div class="fx-profile">
    <div class="block">
      <div class="title"><strong>Your account</strong></div>
      <span class="fx-kicker">Name</span>
      <div class="fx-value">{{ $user->name }}</div>
      <span class="fx-kicker">Email</span>
      <div class="fx-value">{{ $user->email }}</div>
      <span class="fx-kicker">Phone</span>
      <div class="fx-value">{{ $user->phone ?: '—' }}</div>
      <span class="fx-kicker">Role</span>
      <div class="fx-value">{{ $user->role->name ?? '—' }}</div>
      <span class="fx-kicker">Status</span>
      <div class="fx-value">{{ ucfirst($user->status) }}</div>
    </div>

    <form class="block" method="post" action="{{ route('admin.profile.update') }}">
      @csrf
      @method('PUT')
      <div class="title"><strong>Update profile</strong></div>
      <div class="form-group">
        <label for="profile-name">Name</label>
        <input id="profile-name" class="form-control" name="name" value="{{ old('name', $user->name) }}" required>
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="profile-email">Email</label>
          <input id="profile-email" class="form-control" type="email" name="email" value="{{ old('email', $user->email) }}" required>
        </div>
        <div class="form-group col-md-6">
          <label for="profile-phone">Phone</label>
          <input id="profile-phone" class="form-control" name="phone" value="{{ old('phone', $user->phone) }}">
        </div>
      </div>
      <p class="fx-help">Leave the password fields empty to keep your current password. A new password needs your current one.</p>
      <div class="form-group">
        <label for="profile-current">Current password</label>
        <input id="profile-current" class="form-control" type="password" name="current_password" autocomplete="current-password">
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="profile-password">New password</label>
          <input id="profile-password" class="form-control" type="password" name="password" autocomplete="new-password">
        </div>
        <div class="form-group col-md-6">
          <label for="profile-confirm">Confirm new password</label>
          <input id="profile-confirm" class="form-control" type="password" name="password_confirmation" autocomplete="new-password">
        </div>
      </div>
      <div class="fx-submit">
        <button class="btn fx-btn" type="submit">Save profile</button>
      </div>
    </form>
  </div>
@endsection