@extends('layouts.admin')
@section('title', 'My Profile')
@section('page-title', 'My Profile')
@section('page-subtitle', 'Manage your account settings')

@section('content')
<div class="space-y-6">
    @if(session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
        {{ session('success') }}
    </div>
    @endif
    
    <div class="card-royal p-6">
        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-6">Profile Information</h3>
        <form action="{{ route('admin.settings.update-profile') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('PUT')
            
            <div class="flex items-center gap-6 mb-6">
                <div class="relative">
                    @if(auth()->user()->avatar)
                        <img src="{{ asset('storage/' . auth()->user()->avatar) }}?v={{ auth()->user()->updated_at->timestamp }}" alt="Profile" class="w-24 h-24 rounded-full object-cover border-2 border-gold-500">
                    @else
                        <div class="w-24 h-24 rounded-full bg-gradient-to-br from-gold-500 to-royal-600 flex items-center justify-center text-white text-2xl font-bold border-2 border-gold-500">
                            {{ substr(auth()->user()->name, 0, 1) }}
                        </div>
                    @endif
                </div>
                <div class="flex-1">
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Profile Photo</label>
                    <input type="file" name="avatar" accept="image/*"
                        class="block w-full text-sm text-[var(--text-primary)] file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-gold-500 file:text-white hover:file:bg-gold-600">
                    <p class="text-xs text-[var(--text-secondary)] mt-1">JPG, PNG, GIF (max 2MB)</p>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Name</label>
                    <input type="text" name="name" value="{{ old('name', auth()->user()->name) }}" required
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Email</label>
                    <input type="email" name="email" value="{{ old('email', auth()->user()->email) }}" required
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Phone</label>
                    <input type="text" name="phone" value="{{ old('phone', auth()->user()->phone) }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>
            </div>
            
            <div class="flex justify-end">
                <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">Update Profile</button>
            </div>
        </form>
    </div>
    
    <div class="card-royal p-6">
        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-6">Change Password</h3>
        <form action="{{ route('admin.settings.update-password') }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Current Password</label>
                    <input type="password" name="current_password" required
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>
                
                <div></div>
                
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">New Password</label>
                    <input type="password" name="password" required
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Confirm Password</label>
                    <input type="password" name="password_confirmation" required
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>
            </div>
            
            <div class="flex justify-end">
                <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">Change Password</button>
            </div>
        </form>
    </div>
</div>
@endsection