@extends('admin.layout.app')
@section('content')
    <div class="px-4 py-8 sm:px-6 lg:px-8 max-w-4xl mx-auto">
        <div class="mb-8">
            <h2 class="text-3xl font-bold text-gray-900 tracking-tight">Security Settings</h2>
            <p class="text-base text-gray-500 mt-2">Update your login password to keep your admin account secure.</p>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-6 sm:p-10">
                <form id="update_password" method="post">
                    
                    <div class="grid grid-cols-1 gap-6 mb-8">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Current Password</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="mdi mdi-lock-outline text-gray-400"></i>
                                </div>
                                <input type="password" name="old_password" class="block w-full pl-10 pr-3 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:bg-white transition-colors" placeholder="Enter current password" required />
                            </div>
                        </div>

                        <div class="h-px w-full bg-gray-100 my-2"></div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">New Password</label>
                            <div class="relative flex items-center">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="mdi mdi-key-variant text-gray-400"></i>
                                </div>
                                <input type="password" name="password" class="block w-full pl-10 pr-3 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:bg-white transition-colors" placeholder="Enter new password" required />
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Confirm New Password</label>
                            <div class="relative flex items-center">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="mdi mdi-shield-check-outline text-gray-400"></i>
                                </div>
                                <input type="password" name="password_confirmation" class="block w-full pl-10 pr-3 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:bg-white transition-colors" placeholder="Confirm new password" required />
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center gap-4 pt-4 border-t border-gray-100">
                        <button type="submit" class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-xl shadow-sm transition-colors cursor-pointer active:scale-95 flex items-center">
                            <i class="mdi mdi-lock-reset mr-2"></i> Update Password
                        </button>
                        <button type="reset" class="px-6 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-xl transition-colors active:scale-95">Clear</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('customJs')
    <script>
        $(document).on('submit', '#update_password', function(event) {
            event.preventDefault();
            $.ajax({
                url: "{{ route('admin.password_update') }}",
                method: 'POST',
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                processData: false,
                success: function(data) {
                    webinaToast({
                        type: data.type,
                        message: data.text
                    });
                    if (data.type == 'success') {
                        setTimeout(() => {
                            location.href = "{{ route('admin.logout') }}";
                        }, 1500);
                    }
                }
            });
        });
    </script>
@endsection