@extends('admin.layouts.app')

@section('title', 'Account Settings')

@section('page-title', 'Account Settings')

@section('content')
<div class="max-w-2xl">
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h3 class="text-lg font-semibold mb-4">Change Password</h3>

        @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('success') }}
        </div>
        @endif

        @if($errors->any())
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

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

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Current Password</label>
                <input type="password" name="current_password" 
                    class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">New Password</label>
                <input type="password" name="password" 
                    class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Confirm New Password</label>
                <input type="password" name="password_confirmation" 
                    class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
            </div>

            <div class="flex justify-end">
                <button type="submit" class="bg-gold hover:bg-gold-dark text-white px-6 py-2 rounded-lg">
                    Update Password
                </button>
            </div>
        </form>
    </div>

    <div class="bg-white rounded-lg shadow-sm p-6">
        <h3 class="text-lg font-semibold mb-4">Account Information</h3>
        
        <div class="space-y-3">
            <div class="flex justify-between py-2 border-b">
                <span class="text-gray-600">Name</span>
                <span class="font-medium">{{ $user->name }}</span>
            </div>
            <div class="flex justify-between py-2 border-b">
                <span class="text-gray-600">Email</span>
                <span class="font-medium">{{ $user->email }}</span>
            </div>
            <div class="flex justify-between py-2 border-b">
                <span class="text-gray-600">Phone</span>
                <span class="font-medium">{{ $user->phone ?? 'Not set' }}</span>
            </div>
            <div class="flex justify-between py-2 border-b">
                <span class="text-gray-600">Role</span>
                <span class="font-medium">{{ $user->roles->first()?->name ?? 'User' }}</span>
            </div>
            <div class="flex justify-between py-2">
                <span class="text-gray-600">Member Since</span>
                <span class="font-medium">{{ $user->created_at->format('M d, Y') }}</span>
            </div>
        </div>
    </div>
</div>
@endsection