@extends('admin.layouts.app')

@section('title', 'Delete 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.show', $admin) }}" class="text-blue-600 hover:text-blue-900 mb-4">← Back to Admin</a>
            <h1 class="text-3xl font-bold text-red-600">Delete Admin Account</h1>
            <p class="text-gray-600 mt-2">This action cannot be undone</p>
        </div>

        <!-- Warning -->
        <div class="bg-red-50 border-l-4 border-red-600 p-6 mb-8">
            <p class="text-red-800 font-semibold">⚠️ Warning</p>
            <p class="text-red-700 mt-2">You are about to permanently delete the admin account:</p>
            <p class="text-red-900 font-bold mt-2">{{ $admin->name }} ({{ $admin->email }})</p>
            <p class="text-red-700 mt-2">All activity logs associated with this account will be preserved for audit purposes, but the account will be removed from the system.</p>
        </div>

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

                <!-- Email Confirmation -->
                <div class="mb-6">
                    <label for="confirm_email" class="block text-sm font-medium text-gray-700 mb-2">
                        Enter Admin Email to Confirm *
                    </label>
                    <p class="text-gray-600 text-sm mb-2">Type the email address to confirm deletion</p>
                    <input 
                        type="email" 
                        id="confirm_email" 
                        name="confirm_email" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent @error('confirm_email') border-red-500 @enderror"
                        placeholder="Enter email address"
                        required
                    >
                    <p class="text-gray-600 text-xs mt-2">Must match: <span class="font-mono font-bold">{{ $admin->email }}</span></p>
                    @error('confirm_email')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Deletion Reason -->
                <div class="mb-8">
                    <label for="reason" class="block text-sm font-medium text-gray-700 mb-2">
                        Reason for Deletion *
                    </label>
                    <p class="text-gray-600 text-sm mb-2">Provide a reason for the audit trail</p>
                    <textarea 
                        id="reason" 
                        name="reason" 
                        rows="4"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent @error('reason') border-red-500 @enderror"
                        placeholder="E.g., Employee no longer with company, account security breach, etc."
                        required
                    ></textarea>
                    @error('reason')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Confirmation Checkbox -->
                <div class="mb-8 p-4 bg-red-50 border border-red-200 rounded">
                    <label class="flex items-start">
                        <input 
                            type="checkbox" 
                            id="confirm_deletion" 
                            class="mt-1 rounded"
                            onchange="updateDeleteButton()"
                            required
                        >
                        <span class="ml-3">
                            <span class="block text-sm font-medium text-gray-900">
                                I understand this action is permanent
                            </span>
                            <span class="block text-sm text-gray-600 mt-1">
                                I confirm that I want to permanently delete this admin account and acknowledge that this cannot be undone.
                            </span>
                        </span>
                    </label>
                </div>

                <!-- Actions -->
                <div class="flex gap-4">
                    <button 
                        type="submit" 
                        id="delete-btn"
                        disabled
                        class="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium disabled:bg-gray-400 disabled:cursor-not-allowed"
                    >
                        Delete Admin Permanently
                    </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>

        <!-- Information -->
        <div class="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-6">
            <h3 class="font-bold text-blue-900 mb-4">What happens when you delete this account?</h3>
            <ul class="space-y-2 text-sm text-blue-900">
                <li class="flex items-start">
                    <span class="mr-3">•</span>
                    <span>The admin account will be permanently removed from the system</span>
                </li>
                <li class="flex items-start">
                    <span class="mr-3">•</span>
                    <span>All activity logs will be preserved for audit and compliance purposes</span>
                </li>
                <li class="flex items-start">
                    <span class="mr-3">•</span>
                    <span>The account cannot be recovered after deletion</span>
                </li>
                <li class="flex items-start">
                    <span class="mr-3">•</span>
                    <span>Deletion reason will be logged for administrative review</span>
                </li>
                <li class="flex items-start">
                    <span class="mr-3">•</span>
                    <span>The email address will become available for use again</span>
                </li>
            </ul>
        </div>
    </div>
</div>

<script>
    function updateDeleteButton() {
        AdminUtils.updateDeleteButton('confirm_deletion', 'delete-btn');
    }
    
    // Validate email on input
    document.getElementById('confirm_email').addEventListener('input', function() {
        const expectedEmail = '{{ $admin->email }}';
        const form = this.form;
        form.querySelector('button[type="submit"]').disabled = this.value !== expectedEmail;
    });
</script>
@endsection