@extends('layouts.admin')

@section('title', 'Admin Profile & Security')

@section('content')
<div class="admin-page-header">
    <div>
        <div class="admin-breadcrumbs">
            <a href="{{ route('admin.inquiries.index') }}">Dashboard</a>
            <span class="admin-breadcrumb-sep">/</span>
            <span>Profile & Security</span>
        </div>
        <h1 class="admin-page-title">Account Settings</h1>
        <p class="admin-page-subtitle">Update your personal details and manage your account password.</p>
    </div>
</div>

<div class="admin-settings-grid">
    {{-- Card 1: Profile Information --}}
    <div class="admin-settings-card">
        <div class="admin-settings-card-header">
            <div class="admin-settings-card-icon profile-icon">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
            </div>
            <div>
                <h2 class="admin-settings-card-title">Profile Information</h2>
                <p class="admin-settings-card-desc">Update your account name and email address.</p>
            </div>
        </div>

        <form method="POST" action="{{ route('admin.profile.update') }}" class="admin-settings-form">
            @csrf
            @method('PUT')

            <div class="admin-form-group">
                <label for="name" class="admin-label">Full Name <span class="required-star">*</span></label>
                <input 
                    type="text" 
                    id="name" 
                    name="name" 
                    class="admin-input @error('name') has-error @enderror" 
                    value="{{ old('name', $user->name) }}" 
                    required 
                    autocomplete="name"
                    placeholder="Enter full name"
                >
                @error('name')
                    <span class="admin-field-error">{{ $message }}</span>
                @enderror
            </div>

            <div class="admin-form-group">
                <label for="email" class="admin-label">Email Address <span class="required-star">*</span></label>
                <input 
                    type="email" 
                    id="email" 
                    name="email" 
                    class="admin-input @error('email') has-error @enderror" 
                    value="{{ old('email', $user->email) }}" 
                    required 
                    autocomplete="email"
                    placeholder="admin@example.com"
                >
                @error('email')
                    <span class="admin-field-error">{{ $message }}</span>
                @enderror
            </div>

            <div class="admin-form-actions">
                <button type="submit" class="admin-btn-navy">
                    <svg style="width: 16px; height: 16px; margin-right: 0.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    Save Changes
                </button>
            </div>
        </form>
    </div>

    {{-- Card 2: Change Password --}}
    <div class="admin-settings-card">
        <div class="admin-settings-card-header">
            <div class="admin-settings-card-icon password-icon">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                </svg>
            </div>
            <div>
                <h2 class="admin-settings-card-title">Change Password</h2>
                <p class="admin-settings-card-desc">Ensure your account uses a long, secure password.</p>
            </div>
        </div>

        <form method="POST" action="{{ route('admin.profile.password') }}" class="admin-settings-form">
            @csrf
            @method('PUT')

            <div class="admin-form-group">
                <label for="current_password" class="admin-label">Current Password <span class="required-star">*</span></label>
                <div class="password-toggle-wrap">
                    <input 
                        type="password" 
                        id="current_password" 
                        name="current_password" 
                        class="admin-input @error('current_password') has-error @enderror" 
                        required 
                        autocomplete="current-password"
                        placeholder="••••••••"
                    >
                    <button type="button" class="password-toggle-btn" onclick="togglePasswordVisibility(this)" aria-label="Toggle password visibility">
                        <svg class="eye-open-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                        <svg class="eye-closed-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: none;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l18 18"/></svg>
                    </button>
                </div>
                @error('current_password')
                    <span class="admin-field-error">{{ $message }}</span>
                @enderror
            </div>

            <div class="admin-form-group">
                <label for="password" class="admin-label">New Password <span class="required-star">*</span></label>
                <div class="password-toggle-wrap">
                    <input 
                        type="password" 
                        id="password" 
                        name="password" 
                        class="admin-input @error('password') has-error @enderror" 
                        required 
                        autocomplete="new-password"
                        placeholder="Minimum 8 characters"
                    >
                    <button type="button" class="password-toggle-btn" onclick="togglePasswordVisibility(this)" aria-label="Toggle password visibility">
                        <svg class="eye-open-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                        <svg class="eye-closed-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: none;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l18 18"/></svg>
                    </button>
                </div>
                @error('password')
                    <span class="admin-field-error">{{ $message }}</span>
                @enderror
            </div>

            <div class="admin-form-group">
                <label for="password_confirmation" class="admin-label">Confirm New Password <span class="required-star">*</span></label>
                <div class="password-toggle-wrap">
                    <input 
                        type="password" 
                        id="password_confirmation" 
                        name="password_confirmation" 
                        class="admin-input" 
                        required 
                        autocomplete="new-password"
                        placeholder="Repeat new password"
                    >
                    <button type="button" class="password-toggle-btn" onclick="togglePasswordVisibility(this)" aria-label="Toggle password visibility">
                        <svg class="eye-open-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                        <svg class="eye-closed-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: none;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l18 18"/></svg>
                    </button>
                </div>
            </div>

            <div class="admin-form-actions">
                <button type="submit" class="admin-btn-gold">
                    <svg style="width: 16px; height: 16px; margin-right: 0.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                    </svg>
                    Update Password
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function togglePasswordVisibility(button) {
    var wrap = button.closest('.password-toggle-wrap');
    if (!wrap) return;
    var input = wrap.querySelector('input');
    if (!input) return;
    var isPassword = input.type === 'password';
    input.type = isPassword ? 'text' : 'password';
    button.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
    var openIcon = button.querySelector('.eye-open-icon');
    var closedIcon = button.querySelector('.eye-closed-icon');
    if (openIcon && closedIcon) {
        openIcon.style.display = isPassword ? 'none' : 'block';
        closedIcon.style.display = isPassword ? 'block' : 'none';
    }
}
</script>
@endpush
@endsection