@extends('admin.layouts.app')

@section('title', 'Edit Profile')
@section('page-title', 'Edit Profile')
@section('page-title-jp', 'プロフィール編集')

@section('content')
<div style="max-width: 600px;">
    <div style="background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 32px;">
        <form method="POST" action="{{ route('admin.profile.update') }}">
            @csrf
            @method('PUT')

            <!-- Name Field -->
            <div style="margin-bottom: 24px;">
                <label for="name" style="display: block; font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">Full Name</label>
                <input type="text" id="name" name="name" value="{{ old('name', $user->name) }}" required style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.2s;" 
                    @error('name') style="border-color: #ef4444;" @enderror>
                @error('name')
                    <span style="display: block; color: #ef4444; font-size: 12px; margin-top: 4px;">{{ $message }}</span>
                @enderror
            </div>

            <!-- Email Field -->
            <div style="margin-bottom: 24px;">
                <label for="email" style="display: block; font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">Email Address</label>
                <input type="email" id="email" name="email" value="{{ old('email', $user->email) }}" required style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.2s;"
                    @error('email') style="border-color: #ef4444;" @enderror>
                @error('email')
                    <span style="display: block; color: #ef4444; font-size: 12px; margin-top: 4px;">{{ $message }}</span>
                @enderror
            </div>

            <!-- Password Field -->
            <div style="margin-bottom: 24px;">
                <label for="password" style="display: block; font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">New Password (Leave blank to keep current)</label>
                <input type="password" id="password" name="password" style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.2s;"
                    @error('password') style="border-color: #ef4444;" @enderror>
                @error('password')
                    <span style="display: block; color: #ef4444; font-size: 12px; margin-top: 4px;">{{ $message }}</span>
                @enderror
            </div>

            <!-- Confirm Password Field -->
            <div style="margin-bottom: 32px;">
                <label for="password_confirmation" style="display: block; font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">Confirm Password</label>
                <input type="password" id="password_confirmation" name="password_confirmation" style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.2s;">
            </div>

            <!-- Buttons -->
            <div style="display: flex; gap: 12px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
                <button type="submit" class="btn" style="background-color: #3b82f6; color: white; padding: 10px 24px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s;">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    Save Changes
                </button>
                <a href="{{ route('admin.profile.show') }}" class="btn" style="background-color: #f1f5f9; color: #475569; padding: 10px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e2e8f0; transition: all 0.2s;">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection