@extends('admin.layouts.app')

@section('title', 'Edit Admin - ' . $admin->name)

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-2xl mx-auto">
        <!-- Header -->
        <div class="mb-8">
            <a href="{{ route('admin.admins.index') }}" class="text-blue-600 hover:text-blue-900 mb-4">← Back to Admins</a>
            <h1 class="text-3xl font-bold text-gray-900">Edit Admin Account</h1>
            <p class="text-gray-600 mt-2">{{ $admin->email }}</p>
        </div>

        <!-- Form -->
        <div class="bg-white rounded-lg shadow p-8">
            <form action="{{ route('admin.admins.update', $admin) }}" method="POST">
                @csrf
                @method('PATCH')

                <!-- Name -->
                <div class="mb-6">
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                        Full Name *
                    </label>
                    <input 
                        type="text" 
                        id="name" 
                        name="name" 
                        value="{{ old('name', $admin->name) }}" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('name') border-red-500 @enderror"
                        required
                    >
                    @error('name')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Email -->
                <div class="mb-6">
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                        Email Address *
                    </label>
                    <input 
                        type="email" 
                        id="email" 
                        name="email" 
                        value="{{ old('email', $admin->email) }}" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('email') border-red-500 @enderror"
                        required
                    >
                    @error('email')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Phone -->
                <div class="mb-6">
                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
                        Phone Number
                    </label>
                    <input 
                        type="tel" 
                        id="phone" 
                        name="phone" 
                        value="{{ old('phone', $admin->phone) }}" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    >
                    @error('phone')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Role -->
                <div class="mb-6">
                    <label for="role" class="block text-sm font-medium text-gray-700 mb-2">
                        Admin Role *
                    </label>
                    <select 
                        id="role" 
                        name="role" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('role') border-red-500 @enderror"
                        required
                        onchange="updateRoleInfo()"
                    >
                        @foreach($roles as $key => $role)
                            <option value="{{ $key }}" {{ old('role', $admin->role) === $key ? 'selected' : '' }}>
                                {{ $role['name'] }} - {{ $role['description'] }}
                            </option>
                        @endforeach
                    </select>
                    @error('role')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                    <div id="role-info" class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded text-sm text-blue-800">
                        <!-- Will be filled by JavaScript -->
                    </div>
                </div>

                <!-- Status -->
                <div class="mb-6">
                    <label for="status" class="block text-sm font-medium text-gray-700 mb-2">
                        Status *
                    </label>
                    <select 
                        id="status" 
                        name="status" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('status') border-red-500 @enderror"
                        required
                    >
                        <option value="active" {{ old('status', $admin->status) === 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ old('status', $admin->status) === 'inactive' ? 'selected' : '' }}>Inactive</option>
                        <option value="suspended" {{ old('status', $admin->status) === 'suspended' ? 'selected' : '' }}>Suspended</option>
                    </select>
                    @error('status')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Password (Optional) -->
                <div class="mb-6 border-t pt-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Change Password (Optional)</h3>
                    <p class="text-gray-600 text-sm mb-4">Leave blank to keep current password</p>
                    
                    <div class="mb-4">
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
                            New Password
                        </label>
                        <input 
                            type="password" 
                            id="password" 
                            name="password" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('password') border-red-500 @enderror"
                            placeholder="••••••••"
                        >
                        <p class="text-gray-600 text-sm mt-1">Minimum 8 characters</p>
                        @error('password')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="password_confirmation" class="block text-sm font-medium text-gray-700 mb-2">
                            Confirm New Password
                        </label>
                        <input 
                            type="password" 
                            id="password_confirmation" 
                            name="password_confirmation" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            placeholder="••••••••"
                        >
                        @error('password_confirmation')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Actions -->
                <div class="flex gap-4">
                    <button 
                        type="submit" 
                        class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium"
                    >
                        Update Admin
                    </button>
                    <a 
                        href="{{ route('admin.admins.show', $admin) }}" 
                        class="px-6 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 font-medium"
                    >
                        Cancel
                    </a>
                </div>
            </form>
        </div>

        <!-- Admin Info -->
        <div class="mt-8 grid grid-cols-2 gap-6">
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="font-bold text-gray-900 mb-4">Account Information</h3>
                <div class="space-y-2 text-sm">
                    <p><span class="text-gray-600">Created:</span> <span class="font-medium">{{ $admin->created_at->format('M d, Y H:i') }}</span></p>
                    <p><span class="text-gray-600">Last Login:</span> <span class="font-medium">{{ $admin->last_login_at ? $admin->last_login_at->format('M d, Y H:i') : 'Never' }}</span></p>
                    <p><span class="text-gray-600">Status:</span> <span class="font-medium">{{ ucfirst($admin->status) }}</span></p>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="font-bold text-gray-900 mb-4">Permissions</h3>
                <div class="space-y-2 text-sm">
                    <p><span class="text-gray-600">Role:</span> <span class="font-medium">{{ ucfirst(str_replace('_', ' ', $admin->role)) }}</span></p>
                    <p><span class="text-gray-600">Total Permissions:</span> <span class="font-medium">{{ count($admin->getPermissions()) }}</span></p>
                    <p><span class="text-gray-600">Accessible Modules:</span> <span class="font-medium">{{ count($admin->getAccessibleModules()) }}</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const roles = @json($roles);
    AdminUtils.initRoleDescriptionUpdater('role', 'role-info', roles);
</script>
@endsection