@extends('layouts.app')

@section('title', 'Akun Saya')

@section('content')
<section class="py-4 bg-biru-muda"><div class="container"><h1 class="mb-0">Akun Saya</h1></div></section>
<section class="section-sm">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-4">
        <div class="card-soft p-4 text-center">
          @if($user->avatar)<img src="{{ route('akun.avatar',['v'=>$user->updated_at?->timestamp]) }}" alt="Foto profil Anda" class="profile-photo mx-auto mb-3">@else<div class="feature-icon mx-auto mb-3" style="width:72px;height:72px;font-size:2rem" aria-hidden="true"><i class="bi bi-person"></i></div>@endif
          <h2 class="h5 mb-1 text-break">{{ $user->name }}</h2>
          <p class="text-muted-soft small text-break">{{ $user->email }}</p>
          <p class="text-muted-soft small mb-3">Bergabung sejak {{ $user->created_at?->translatedFormat('F Y') }}</p>
          <a href="{{ route('pesanan.index') }}" class="btn btn-light-blue w-100"><i class="bi bi-receipt me-1" aria-hidden="true"></i>Pesanan Saya ({{ $jumlahPesanan }})</a>
        </div>
      </div>
      <div class="col-lg-8">
        <div class="card-soft p-4 mb-4">
          <h2 class="h5 mb-3">Data Profil</h2>
          <form method="post" action="{{ route('akun.update') }}" enctype="multipart/form-data" class="row g-3">
            @csrf
            @method('PUT')
            <div class="col-12"><label for="avatar" class="form-label">Foto profil</label><input id="avatar" name="avatar" type="file" accept="image/jpeg,image/png,image/webp" class="form-control" data-preview="#avatarPreview" data-max-size="2097152"><div class="form-text">JPG/PNG/WEBP, maksimal 2 MB dan 2048×2048 px. Foto hanya dapat diakses akun Anda.</div>@error('avatar','profile')<div class="text-danger">{{ $message }}</div>@enderror<img id="avatarPreview" class="profile-photo mt-2" src="{{ $user->avatar ? route('akun.avatar') : asset('assets/img/placeholder.webp') }}" alt="Pratinjau foto profil">@if($user->avatar)<div class="form-check mt-2"><input class="form-check-input" id="remove_avatar" name="remove_avatar" type="checkbox" value="1"><label for="remove_avatar" class="form-check-label">Hapus foto profil</label></div>@endif</div>
            <div class="col-md-6">
              <label for="name" class="form-label">Nama</label>
              <input id="name" name="name" class="form-control @error('name', 'profile') is-invalid @enderror" value="{{ old('name', $user->name) }}" required maxlength="100" autocomplete="name">
              @error('name', 'profile')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6">
              <label for="phone" class="form-label">No. HP</label>
              <input type="tel" id="phone" name="phone" class="form-control @error('phone', 'profile') is-invalid @enderror" value="{{ old('phone', $user->phone) }}" maxlength="20" autocomplete="tel" inputmode="tel" placeholder="08xxxxxxxxxx">
              @error('phone', 'profile')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-12">
              <label for="email-readonly" class="form-label">Email</label>
              <input type="email" id="email-readonly" class="form-control" value="{{ $user->email }}" readonly aria-describedby="email-help">
              <div id="email-help" class="form-text">Email dipakai untuk masuk dan tidak bisa diubah.</div>
            </div>
            <div class="col-12">
              <label for="address" class="form-label">Alamat</label>
              <textarea id="address" name="address" rows="3" class="form-control @error('address', 'profile') is-invalid @enderror" maxlength="500" autocomplete="street-address" placeholder="Dipakai otomatis saat checkout">{{ old('address', $user->address) }}</textarea>
              @error('address', 'profile')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-12"><button type="submit" class="btn btn-primary"><i class="bi bi-check2 me-1" aria-hidden="true"></i>Simpan Perubahan</button></div>
          </form>
        </div>
        <div class="card-soft p-4">
          <h2 class="h5 mb-3">Ganti Password</h2>
          <form method="post" action="{{ route('akun.password') }}" class="row g-3">
            @csrf
            @method('PUT')
            <div class="col-md-4">
              <label for="current_password" class="form-label">Password saat ini</label>
              <div class="input-group has-validation">
                <input type="password" id="current_password" name="current_password" class="form-control @error('current_password', 'password') is-invalid @enderror" required autocomplete="current-password">
                <button class="btn btn-light-blue" type="button" data-toggle-password="#current_password" aria-label="Tampilkan password" aria-pressed="false"><i class="bi bi-eye" aria-hidden="true"></i></button>
                @error('current_password', 'password')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
            </div>
            <div class="col-md-4">
              <label for="new_password" class="form-label">Password baru</label>
              <div class="input-group has-validation">
                <input type="password" id="new_password" name="password" class="form-control @error('password', 'password') is-invalid @enderror" required minlength="8" autocomplete="new-password" aria-describedby="new-password-help">
                <button class="btn btn-light-blue" type="button" data-toggle-password="#new_password" aria-label="Tampilkan password" aria-pressed="false"><i class="bi bi-eye" aria-hidden="true"></i></button>
                @error('password', 'password')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
              <div id="new-password-help" class="form-text">Minimal 8 karakter.</div>
            </div>
            <div class="col-md-4">
              <label for="new_password_confirmation" class="form-label">Ulangi password baru</label>
              <div class="input-group">
                <input type="password" id="new_password_confirmation" name="password_confirmation" class="form-control" required minlength="8" autocomplete="new-password">
                <button class="btn btn-light-blue" type="button" data-toggle-password="#new_password_confirmation" aria-label="Tampilkan password" aria-pressed="false"><i class="bi bi-eye" aria-hidden="true"></i></button>
              </div>
            </div>
            <div class="col-12"><button type="submit" class="btn btn-outline-primary"><i class="bi bi-shield-lock me-1" aria-hidden="true"></i>Ganti Password</button></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection