@extends('layouts.admin')

@section('title', '個人設定')

@push('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">個人設定</li>
@endpush

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

@section('content')
<div class="page-header">
    <h1><i class="bi bi-person-circle me-2"></i>個人設定</h1>
</div>

<div class="profile-card">
    <div class="card-header">更新顯示名稱／密碼</div>
    <div class="card-body">
        <form method="POST" action="{{ route('profile.update') }}">
            @csrf
            @method('PUT')
            <div class="mb-3">
                <label class="form-label fw-bold">登入名稱</label>
                <input type="text" class="form-control" value="{{ $user->username }}" disabled>
                <div class="form-text">登入名稱僅可由管理員在帳號管理中修改。</div>
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold">顯示名稱</label>
                <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                       value="{{ old('name', $user->name) }}" required>
                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <hr>
            <div class="mb-3">
                <label class="form-label fw-bold">目前密碼 <span class="text-muted fw-normal">（更改密碼時必填）</span></label>
                <input type="password" name="current_password" class="form-control @error('current_password') is-invalid @enderror">
                @error('current_password')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold">新密碼 <span class="text-muted fw-normal">（留空則不更改）</span></label>
                <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" minlength="6">
                @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="mb-4">
                <label class="form-label fw-bold">確認新密碼</label>
                <input type="password" name="password_confirmation" class="form-control" minlength="6">
            </div>
            <button type="submit" class="btn btn-info text-white">
                <i class="bi bi-check-circle me-1"></i>儲存變更
            </button>
        </form>
    </div>
</div>
@endsection